🎯 목표

  • 동기부여: 비개발자도 AI로 업무 자동화와 웹 빌딩이 가능함을 인지
  • 개념이해: 웹의 유통 흐름과 '로컬 환경'의 필요성을 요리 비유로 이해
  • 실전경험: Antigravity를 활용해 자연어로 내 컴퓨터에 웹페이지 구현

⏱️ 타임라인 및 세션 구조

1부. [트렌드] 코딩은 더 이상 개발자의 전유물이 아니다

image.png
패러다임의 변화
  • 과거: 복잡한 문법과 영어를 밤새워 외워야 했던 영역
  • 현재: 자연어(말)로 지시하면 AI가 코딩을 대행하는 시대
image.png
비개발자에게 AI 코딩이 필요한 이유
  • 내 업무 스타일에 맞춘 '나만의 업무 자동화'
  • 데이터 정리, 서식 맞추기 등 반복 작업을 딸깍 한 번으로 해결

2부. [개념] 개발 프로세스: "왜 내 컴퓨터에 먼저 띄울까?"

앱 vs 웹 유통 흐름 비교
  • 앱: 내 PC 개발 ➡️ 플레이스토어 출시 ➡️ 사용자 다운로드
  • 웹: 내 PC(로컬) 개발 ➡️ 인터넷 서버 배포 ➡️ 브라우저 주소(도메인) 접근
초보자 맞춤 '요리 비유'
  • 로컬 개발 (오늘 할 일): 손님에게 내놓기 전, 내 집 주방에서 레시피를 연구하고 간 보는 단계 (안전함)
  • 배포: 완성된 레시피를 전 세계 식당 메뉴판에 올리는 단계
  • 도메인 접근: 손님이 주소를 찾아와 브라우저(접시)에 담긴 음식을 먹는 과정
핵심 메시지 : 배포(식당 출시)를 안 해도, 내 주방(내 PC)에 자동화 기계를 들여놓으면 나 혼자 평생 유용하게 쓸 수 있음 (개인 업무 자동화의 가치)

3부. [시연] Antigravity 환경 소개

image.png
도구 소개 : 복잡한 세팅 없이 AI와 대화하며 바로 웹을 조립하는 IDE
  • 라이브 데모

    • 자연어 지시
올해 핵심 목표를 입력하면, 3x3 격자 형태의 만다라트 계획표로 자동 생성해 주고, 각 칸을 더블클릭해서 세부 실천 내용을 수정할 수 있는 시각적인 페이지 만들어줘
  • AI가 코드를 짜고 로컬 환경에 대시보드가 뜨는 모습 직관적 확인

4부. [실습] 나도 한다! AI 코딩

  • Step 1. 내 주방 차리기 (10분): 노트북에 Antigravity 설치 및 실행
  • Step 2. 첫 요리 주문하기 (10분): 만들고 싶은 페이지(링크 모음, 미니 대시보드 등) 첫 프롬프트 입력
  • Step 3. 내 주방에서 간 보기 (10분): 로컬 서버를 생성하여 브라우저로 내 웹사이트 최초 접속
  • Step 4. 맛 조절하기 (10분): 디자인 수정, 기능 추가 등 추가 지시 반영 확인