첫 프로젝트

왜 오늘 바로 배포하나요?

보통은 다 만들고 마지막에 배포합니다. 우리는 반대로 합니다. 빈 화면이라도 먼저 인터넷에 올려두고 매일 조금씩 채웁니다. 이유는 셋입니다.

1. 배포에서 생기는 문제를 1일차에 미리 겪는다 (마지막 날에 겪으면 지옥)
2. 매일 "진짜 주소"에서 변화를 확인하면 동기가 유지된다
3. 친구에게 링크를 보내 피드백을 받을 수 있다 (17강)

도구 선택: Next.js + Vercel

• Next.js: (프레임워크 = 미리 갖춰진 뼈대) 화면(프론트)과 서버(백엔드)를 한 프로젝트에서 만들 수 있는 프레임워크. AI가 가장 잘 아는 도구 중 하나라 결과 품질이 좋습니다.
• Vercel: Next.js를 만든 회사의 배포 서비스. GitHub에 push하면 자동으로 인터넷에 올라갑니다. 개인 프로젝트는 무료.

다른 선택지도 있지만, 입문자에겐 "AI가 제일 잘 아는 조합"이 가장 안전합니다.

따라하기 1: 프로젝트 생성

3강에서 만든 my-first-app은 연습용이었습니다. 진짜 프로젝트를 새로 만듭니다. 컴퓨터에 my-service라는 새 폴더를 만들고(연습 폴더 바깥에), Code 탭에서 그 폴더를 선택한 뒤 이렇게 시키세요.

"이 폴더에 Next.js 프로젝트를 만들어줘. 이름은 my-service, TypeScript·Tailwind·App Router 기본 설정으로. 다 만들면 개발 서버를 켜고 주소를 알려줘."

Claude가 create-next-app 같은 명령을 실행하겠다고 물어보면 무슨 명령인지 읽고 수락합니다. 설치 질문이 나오면 기본값으로 진행해 달라고 하세요. TypeScript, Tailwind, App Router가 기본 선택되는데 모두 AI가 잘 다루는 것들입니다. (TypeScript는 실수를 미리 잡아주는 JavaScript, Tailwind는 클래스 이름으로 스타일을 지정하는 도구, App Router는 폴더가 곧 주소가 되는 Next.js 구조입니다.) 개발 서버가 켜지면 http://localhost:3000을 알려줍니다. 브라우저에서 열면 Next.js 기본 화면이 보입니다. 이게 내 서비스의 시작 화면입니다.

localhost는 "내 컴퓨터"라는 뜻입니다. 지금은 나만 볼 수 있습니다.

터미널로도 할 수 있어요

터미널에서 (프로젝트 폴더 바깥에서):

npx create-next-app@latest my-service

질문이 몇 개 나옵니다. 전부 Enter(기본값) 로 넘기세요.

cd my-service
code .
npm run dev

터미널에 http://localhost:3000이 나옵니다. 브라우저에서 열면 Next.js 기본 화면이 보입니다.

따라하기 2: 첫 화면 바꾸기

PLAN.md와 PROMPT_TEMPLATE.md를 이 폴더로 옮기세요. 그리고 Code 탭에서 my-service 폴더가 선택된 상태로:

확인: Claude가 말한 이름과 설명이 내 기획과 맞는지 읽어보세요. 틀리면 "서비스 이름은 ○○로 해줘"라고 알려주세요.

브라우저가 자동으로 새로고침되며 바뀐 화면이 보입니다. 이 즉시 반영을 핫 리로드라고 합니다.

확인: 비교 화면을 읽고 수락하면 브라우저(localhost:3000)가 저절로 바뀌어 내 서비스 이름이 보입니다.

마음에 들면 커밋을 시킵니다.

"지금까지 바뀐 내용으로 커밋해줘. 메시지는 '첫 화면: 서비스 이름과 설명'."

터미널로도 할 수 있어요

git add .
git commit -m "첫 화면: 서비스 이름과 설명"

따라하기 3: GitHub에 올리기

5강에서 한 것과 같습니다. GitHub에 my-service 저장소를 만들고 push하세요. Code 탭에 저장소 주소를 알려주며 "이 프로젝트를 이 GitHub 저장소에 올려줘"라고 시키세요. (터미널이면 AI에게 "이 프로젝트를 GitHub 새 저장소에 올리는 명령어"를 물어보세요.)

따라하기 4: Vercel 배포

1. vercel.com → GitHub 계정으로 가입
2. Add New → Project → my-service 저장소 선택 → Deploy
3. 1~2분 기다리면 my-service-xxxx.vercel.app 같은 주소가 생깁니다

이 주소를 폰으로 열어보세요. 여러분이 만든 화면이 인터넷 어디서든 보입니다.

이제부터 GitHub에 올리기(git push)만 하면 Vercel이 자동으로 새 버전을 올립니다. 배포를 따로 신경 쓸 일이 없습니다.

따라하기 5: 7강의 요청문 보내기

7강에서 써둔 핵심 기능 1번 요청문을 이제 Code 탭에 보내세요. 결과를 브라우저에서 확인하고, 되면 커밋 + push. 안 되면 "마지막 커밋 상태로 되돌려줘"라고 시키고(터미널이면 git checkout .) 요청을 더 구체적으로 고쳐서 다시.

오늘 여기까지 안 돼도 괜찮습니다. 배포까지 된 것만으로 오늘은 성공입니다.

오늘의 체크리스트

직접 해보고 눈으로 확인한 것만 체크하세요.

다음 강의

9강에서는 AI에게 매번 같은 말을 반복하지 않도록 규칙 설명서(CLAUDE.md) 를 만듭니다.