02 TRACK 02 / BUILD & SHIP

말로 시키면 CODE 가 나온다

만들고 싶은 걸 한국어로 설명하면 Claude가 코드를 짜고 GitHub에 저장합니다. 아래 5단계만 따라오세요.

박사모를 쓴 척척박사 기상이
Step 1 — 웹 Claude Code 시작하기
1

GitHub 저장소 먼저 만들기

  1. github.com 로그인 후 우측 상단 + → New repository
  2. 이름 입력 (예: weather-project), Private 선택
  3. Create repository 클릭
저장소 이름은 나중에 Vercel 주소가 됩니다. 팀 프로젝트 이름으로 지어두세요.
2

claude.ai/code 접속 후 GitHub 연결

  1. claude.ai/code 접속 → 제공받은 계정으로 로그인
  2. 입력창 아래쪽의 "+ 레포 선택..." 버튼 클릭
  3. 목록에서 방금 만든 저장소(예: weather-project) 선택
  4. 선택이 끝나면 버튼 자리에 저장소 이름과 브랜치 이름(예: master)이 표시됩니다
레포 선택 전 — 입력창 아래 '+ 레포 선택...' 버튼이 보이는 화면
레포 선택 전 — 입력창 아래 "+ 레포 선택..." 버튼을 클릭하세요.
레포 선택 후 — 저장소 이름과 브랜치 이름이 버튼 자리에 표시되는 화면
레포 선택 후 — 저장소 이름과 브랜치 이름(master)이 표시되면 연결 완료.
이 연결을 한 번만 해두면 이후 Claude Code가 코드를 짤 때마다 GitHub에 자동으로 저장합니다.
Step 2 — Claude Code로 만들기
3

한국어로 설명하면 코드가 나온다

요청할 때 (1) 무엇을 보여줄지 (2) 어떻게 조작할지 (3) 파일 이름(index.html), 이 3가지만 넣으면 됩니다.

예시 대화
기온과 풍속 슬라이더로 체감온도를 보여주는 웹페이지를 index.html 하나로 만들어줘. 기상청 체감온도 공식을 써줘.
슬라이더를 움직이면 체감온도가 실시간으로 바뀌는 index.html을 만들었습니다. GitHub에 저장했어요.
배경색을 하늘색으로 바꾸고, 모바일에서도 잘 보이게 해줘.
배경색과 반응형 레이아웃을 적용했습니다. 변경 사항을 GitHub에 저장했어요.
P

바로 쓰는 프롬프트 모음

대괄호 부분만 우리 팀 주제로 바꾸세요.

팁 한 번에 완벽하지 않아도 됩니다. "여기를 이렇게 바꿔줘"라고 계속 대화하며 다듬으세요. 수정할 때마다 GitHub에 자동 저장됩니다.
Step 3 — CLAUDE.md 설정하기
4

프로젝트 규칙서, CLAUDE.md

CLAUDE.md는 Claude Code가 프로젝트를 열 때 가장 먼저 읽는 파일. 여기 써둔 규칙은 매 대화마다 자동 적용됩니다. "파일 이름은 index.html로 고정", "한국어로 응답" 같은 규칙을 넣어두면 매번 설명할 필요가 없어요.

  1. 아래 CLAUDE.md 내용을 전체 복사합니다.
  2. GitHub 저장소에서 Add file → Create new file 클릭
  3. 파일 이름을 CLAUDE.md로 입력하고 붙여넣기 → Commit changes
파일 이름은 반드시 CLAUDE.md(대문자), 위치는 저장소 최상단 폴더입니다.
CLAUDE.md (복사용)# CLAUDE.md ## Git 규칙 (필수) - main 브랜치에 직접 푸시하지 않습니다. 작은 수정도 예외 없음. - 모든 변경은 새 브랜치 → PR(Pull Request)로 머지합니다. - 팀원이 있으면: 팀원 1명 이상이 리뷰·승인한 뒤 머지 - 혼자(1인 팀)면: PR을 올려 변경 내용(diff)을 스스로 확인한 뒤 머지 - main에는 항상 정상 동작하는 코드만 둡니다.
Step 4 — Vercel로 배포하기
5

GitHub로 로그인 후 프로젝트 가져오기

  1. vercel.com 접속 → Continue with GitHub
  2. Add New → Project 클릭
  3. 방금 만든 저장소 선택 → Import
6

Application Preset 설정

Import 직후 설정 화면에서 Framework Preset을 프로젝트에 맞게 선택합니다.

내 프로젝트 유형선택할 Preset
HTML/CSS/JS 파일만 (index.html 중심)Other
Astro로 만든 경우Astro
Next.js로 만든 경우Next.js
Vite로 만든 경우Vite
모르겠으면 Other — index.html을 직접 만들었다면 Other를 선택하세요. Preset이 틀리면 빌드가 실패합니다.
7

배포 후 링크 받기

  1. 설정 확인 후 Deploy 클릭
  2. 1~2분 뒤 weather-project.vercel.app 같은 주소 생성
  3. 이 주소가 제출용 링크입니다
편한 점 GitHub에서 index.html을 수정하면 Vercel이 자동으로 다시 배포합니다. 따로 재배포할 필요 없어요.
배포 후 확인

휴대폰이나 다른 컴퓨터에서도 링크가 열리는지, 슬라이더 등 인터랙티브 기능이 잘 작동하는지 꼭 확인하세요.

Step 5 — 제출하기
8

제출 항목 3가지

Vercel 링크 하나만 있으면 안 됩니다. 아래 3가지를 모두 준비하세요.

GitHub 커밋 히스토리는 표절·저작권 검증에 사용됩니다. 개발 과정 전체가 남도록 중간중간 저장하세요.
✓

제출 전 체크리스트