템플릿으로 첫 화면 띄우기 | 프로젝트 셋업
claude-code-playbook-template을 본인 GitHub 저장소에 복제하고 로컬과 Vercel에서 같은 화면이 뜨는 빈 프로젝트를 갖춥니다
마지막 업데이트: 2026. 9. 8.
Overview
다음 레슨 practice에서는 본인이 만들고 싶은 서비스에 AI 협업 워크플로우를 적용합니다. 시작하려면 서비스 방향을 담을 빈 캔버스가 먼저 필요합니다.
이 레슨을 마치면 다음 레슨에서 바로 본인 아이디어로 시작할 수 있는 빈 프로젝트가 준비됩니다.
학습 목표
- 템플릿에서 본인 GitHub 저장소를 만들고, 로컬과
.vercel.app주소에서 같은 화면이 뜨는 빈 프로젝트를 갖춥니다.
시작하기 전 확인사항
- Vercel 계정: Todo 앱 배포하기에서 만든 계정을 그대로 씁니다.
Step 1: 템플릿으로 새 GitHub 저장소 만들기
claude-code-playbook-template에서 ① Use this template, ② Create a new repository를 차례로 클릭합니다.
저장소 이름은 본인이 만들 프로젝트 이름으로 정합니다.
`feedme-clone` 저장소와 분리하세요
두 프로젝트의 commit history가 섞이지 않도록 새 저장소로 시작합니다.
Step 2: 로컬에 클론하고 dev 서버 띄우기
저장소 화면에서 ① Code, ② HTTPS, ③ 복사 버튼을 차례로 클릭합니다.
git clone <복사한 URL>
cd <저장소 이름>
bun install
bun devhttp://localhost:3000에서 템플릿의 기본 화면이 뜨면 로컬 셋업이 끝납니다.
Step 3: Vercel에 저장소 연결하기
Vercel 대시보드에서 ① Add New..., ② Project를 클릭합니다.
① Search 박스에 저장소 이름을 입력하고, ② Import를 클릭합니다.
Framework는 Next.js로 자동 감지됩니다. Environment Variables는 비워둔 채 ① Deploy를 클릭합니다. 외부 API 키 등록은 다음 레슨 practice의 배포 시 환경 변수 설정에서 다룹니다.
Step 4: 첫 배포 URL에서 같은 화면 확인하기
빌드가 끝나면 본인 프로젝트 이름이 들어간 .vercel.app URL이 생깁니다. 열어서 로컬과 같은 화면이 뜨는지 확인합니다.
Step 5: shadcn preset 적용하기 (선택)
템플릿은 기본 shadcn 스타일을 사용합니다. preset은 색상·폰트·테마를 한 번에 지정해 둔 스타일 묶음입니다. 기본 스타일을 바꾸고 싶다면 preset을 적용합니다.
ui.shadcn.com/create에 접속해 원하는 스타일을 고른 뒤, 사이드바의 ① preset ID 영역을 클릭합니다. --preset {preset_id} 같은 형식의 ID가 클립보드에 복사됩니다.
복사한 ID를 Claude Code에 그대로 붙여 넣어 적용합니다.
shadcn preset을 --preset {preset_id} 로 바꿔줘기본 스타일로도 충분합니다
preset은 디자인을 직접 꾸미고 싶을 때만 적용합니다. 기본 스타일로도 다음 단계로 넘어갈 수 있습니다.
핵심 포인트 정리
- 빈 캔버스 먼저: 본인 프로젝트는
feedme-clone과 분리된 새 GitHub 저장소에서 시작합니다. - 두 곳에서 같은 화면: 로컬과
.vercel.app주소가 모두 뜨는 것을 확인해야 다음 레슨에서 구현에만 집중할 수 있습니다.
이어서 배울 내용
빈 캔버스가 준비됐습니다. 다음 practice에서는 이 저장소에서 서비스 전체 방향을 PRODUCT.md로 정리한 뒤, 첫 사용자 결과를 구현해 배포합니다.