IPO 기획서 제작 후 AI Studio 프론트엔드 → GitHub → Vercel 연결하기

소개

앞서 Thinking Partner로 아이디어를 잡고 IPO 기획서를 완성했습니다. 그 기획서를 실제 웹사이트 화면으로 만들고, 누구나 접속할 수 있도록 배포까지 끝내는 것이었습니다.

IPO 기획서의 페이지 구조·섹션·디자인 스타일을 그대로 AI Studio 프롬프트로 변환하는 방식으로 해결했습니다.

1. IPO 기획서 → AI Studio 프롬프트 변환

Claude에 3~4주차 강의 내용과 완성된 IPO 기획서(웹사이트기획.md)를 함께 올리고, AI Studio에 바로 넣을 수 있는 프론트엔드 생성 프롬프트를 만들었습니다.

IPO 기획서의 각 섹션이 프롬프트로 이렇게 변환됩니다:

2. 사용한 프롬프트 (핵심 부분)

전체 프롬프트가 길어서 구조만 소개합니다.

프리랜서 SW/AI 강사를 위한 디지털 수업 템플릿 판매 사이트 "티처킷(TeacherKit)"을 만들어줘.

## 사이트 개요
- 타겟: 프리랜서 SW/AI 교육 강사 (25~45세)
- 핵심 메시지: "수업 준비, 매번 처음부터 하지 마세요"

## 페이지 구조 (총 5개)
### 1. Home — Hero + 핵심 가치 3가지 + 인기 상품 + 강사 소개 + FAQ
### 2. Shop — 카테고리 필터 + 상품 카드 그리드 (더미 3개, 가격 포함)
### 3. 상품 상세 — 미리보기 + 설명 + 구매 버튼
### 4. About — 강사 프로필 + 교육 경력
### 5. Contact — 문의 폼

## 디자인 스타일
- 미니멀, 밝은 배경, 블루/틸 포인트 컬러
- Pretendard 폰트, 둥근 카드, 모바일 반응형

## 기술 참고
- Next.js 필수 (이후 Toss Payments 연동 예정)
- 프론트엔드만 먼저 (백엔드/DB는 나중에)
- 상품 데이터는 하드코딩 (나중에 Supabase로 교체)

포인트: 프롬프트에 "Next.js 필수"와 "상품 데이터는 하드코딩"을 명시한 게 중요합니다. Next.js는 나중에 Toss Payments 결제를 붙일 때 API Route가 필요하고, 하드코딩은 Supabase 연동 전까지 화면을 먼저 완성하기 위한 전략입니다.

3. Google AI Studio에서 프론트엔드 생성

프롬프트를 넣고 생성한 뒤, 멀티턴 대화로 디자인을 다듬었습니다.

ALT

한국어로 된 웹사이트의 홈페이지

ALT

흰색 배경에 있는 한국어 텍스트 스크린샷

4. GitHub 연결 → Vercel 배포

1. AI Studio에서 GitHub 레포로 Export

2. Vercel 접속 → 같은 GitHub 계정으로 로그인

3. "Add New Project" → 해당 레포 Import

4. Next.js 자동 감지 확인 → Deploy 클릭

5. 배포 완료 → xxxx.vercel.app URL로 접속 확인

ALT

한국어로 된 웹사이트의 홈페이지

이후부터는 코드 수정 → GitHub push → Vercel 자동 재배포가 됩니다.

5. Supabase 가입 (다음 단계 준비)

백엔드 작업을 위해 Supabase 가입까지 완료했습니다. 다음 단계에서 DB 테이블 생성(products, orders, users)과 프론트엔드 연결을 진행할 예정입니다.

결과와 배운 점

배운 점

• IPO 기획서를 꼼꼼히 채워두면 프롬프트 변환이 빠르다 — 기획서 = 프롬프트의 원재료

• AI Studio 프레임워크 설정에서 Next.js를 처음부터 선택해야 한다 — 나중에 바꾸면 결제 연동 시 구조를 다시 만들어야 함

• 한 번에 완벽한 결과물을 기대하지 말고, 멀티턴으로 "Hero 더 크게", "카드 호버 효과 추가" 같은 수정을 반복하는 게 핵심

시행착오

• 처음에 "상품 콘텐츠 먼저 만들까 vs 화면 먼저 만들까" 고민했는데, 더미 데이터로 화면을 먼저 만들고 나중에 실제 상품으로 교체하는 방식이 진행 속도가 훨씬 빨랐음

앞으로의 계획

• Supabase DB 테이블 생성 + 프론트엔드 연결 (하드코딩 → DB 조회로 교체)

• Toss Payments 결제 연동 (테스트 키로 먼저 개발)

• 판매할 상품 템플릿(커리큘럼·활동지·제안서) 실제 제작 병행