Workshop
3시간 만에 원페이지 웹사이트를 만들고 배포합니다.
AI 구독 유료 결제해놓고 실제로는 한 번도 제대로 안 써본 분.
"AI로 뭘 만든다"가 무슨 뜻인지 감이 안 오는 분.
노트북은 있고, 뭔가 시작은 해보고 싶은 분.
원페이지 웹사이트 1개. 데이터가 들어있는 카드 목록이 있고, 필터와 검색이 붙고, Vercel에 배포돼서 링크가 열립니다.
3시간 끝에 "내가 만든 사이트 URL" 1개를 들고 나갑니다.
Hour 0 · 스케치
Stitch → Google AI Studio → Share
Stitch로 화면 목업을 스케치하고, Google AI Studio에서 구조와 프롬프트를 다듬고, Share 링크를 만들어 다음 단계로 넘깁니다.
Hour 1 · 뼈대
Antigravity (Gemini 3.1 flash, fast mode) + React + Vite + Node.js + Supabase + Vercel
Share 링크를 Antigravity에 붙여서 React + Vite 프로젝트를 시작합니다. Supabase에 테이블을 만들고 데이터 3개 넣고, 카드 목록이 화면에 뜨는 상태까지 갑니다. Vercel 연동도 여기서 설정합니다.
Hour 2 · 살
필터 + 검색 + 데이터 채우기
카테고리 드롭다운, 상태 드롭다운, 텍스트 검색을 붙여요. 세 개가 동시에 걸리도록. SQL로 데이터 10행 한 번에 채우는 법도 배웁니다. "이게 실제 서비스처럼 작동하네" 소리가 나오면 2시간 통과.
Hour 3 · 배포
배포, 테스트, 공유
Vercel에 올립니다. URL이 나와요. 시크릿 모드에서 열어서 진짜로 열리는지 확인합니다. 옆 사람에게 URL 보내서 핸드폰으로 열게 합니다. 열리면 끝.
Stitch, Google AI Studio, Antigravity (Gemini 3.1 flash, fast mode), React + Vite, Node.js, Supabase, Vercel.
3시간 몰입과 집중 유지를 위해 다음 주제는 워크샵 중 논의를 제한합니다.
해당 주제는 별도 프로그램에서 다루며, 워크샵 종료 후 개별 상담은 환영합니다.
주최자 운영비 + 대관료 분담. 확정 금액은 모임 공간 확정 후 공지.
3시간으로 부족하면 같은 뼈대를 5일에 걸쳐 완성하는 버전도 있습니다. Day 1 뼈대 → Day 2 필터와 배포 → Day 3 두 번째 얼굴(변주) → Day 4 상세 페이지와 검색 → Day 5 클라이언트 브리프 받아서 MVP 납품까지. aimvp Part 7 "MVP 설계와 테스트" 기반.
본 워크샵은 AI 도구로 "무언가를 스스로 시작하는 감각"을 익히는 자리입니다. 수익화 전략, 대량 제작, 완성도 높은 런칭은 별도 프로그램에서 다룹니다.