Claude Code로 앱 만들고 배포하기

코딩을 몰라도 괜찮습니다. AI와 대화하듯 원하는 앱을 만들 수 있습니다.

빠른 시작: 이 가이드를 AI와 함께 진행하기

이 문서를 읽으면서 따라하는 대신, Claude에게 직접 안내를 요청할 수 있습니다.
아래 프롬프트를 claude.ai 채팅창에 붙여넣으면 Claude가 단계별로 함께 진행해줍니다.
나는 코딩을 전혀 모르는 초보자야.
Claude Code를 이용해서 간단한 웹 앱을 만들고 Vercel에 배포하는 걸 처음부터 끝까지 도와줘.

아래 순서대로 하나씩 안내해줘. 각 단계가 끝나면 다음으로 넘어가줘:

1. 필요한 계정 만들기 (GitHub, Vercel, Claude.ai)
2. 필요한 프로그램 설치하기 (Node.js, Git, Claude Code)
3. GitHub 레포 만들고 로컬에 clone하기
4. Claude Code 실행하기
5. 내가 원하는 앱 설명하면 만들어주기
6. 로컬에서 확인하기
7. Vercel에 배포하기

지금 어떤 OS를 쓰는지, 어디까지 준비됐는지 먼저 물어봐줘.
Claude가 현재 상태를 물어보고, 거기서부터 맞춤 안내를 해줍니다.

1. AI 코딩이란?

전통적인 코딩 vs AI 코딩

	전통적인 코딩	AI 코딩
진입 장벽	높음 (언어, 문법, 도구 학습 필요)	낮음 (말로 요청)
속도	느림	빠름
필요 지식	프로그래밍 언어, 프레임워크	만들고 싶은 것이 무엇인지
방식	직접 코드 작성	AI에게 요청 → 검토 → 수정 요청 반복

AI 코딩은 AI가 코드를 작성하고, 사람은 방향을 잡고 결과를 확인하는 역할을 합니다.
마치 개발자에게 “이렇게 만들어줘”라고 요청하는 것과 비슷하지만, 비용도 없고 24시간 즉시 응답합니다.

Claude Code란?

Claude Code는 Anthropic이 만든 AI 코딩 도우미입니다. 터미널(명령줄)에서 실행하며, 프로젝트 폴더의 파일을 직접 읽고 수정할 수 있습니다.

파일 생성/수정/삭제
명령어 실행 (빌드, 설치 등)
에러 발생 시 스스로 원인 파악 후 수정

어떤 사람에게 유용한가?

개발을 배우고 싶은 입문자
아이디어는 있지만 코딩은 모르는 기획자/디자이너
반복적인 작업을 빠르게 처리하고 싶은 개발자
간단한 내부 도구를 직접 만들고 싶은 누구나

2. 필요한 것들

필수 설치

항목	설명	링크
Node.js (LTS)	JavaScript 실행 환경	https://nodejs.org
Git	코드 버전 관리	https://git-scm.com
Claude Code	AI 코딩 도우미 CLI	아래 참고

필수 계정

항목	설명	비용
GitHub	코드 저장소	무료
Claude.ai Pro 또는 Anthropic API 키	Claude Code 사용 권한	유료
Vercel	앱 배포 플랫폼	무료 (기본)

Claude Code 설치

npm install -g @anthropic-ai/claude-code

설치 후 터미널에서 claude를 입력하면 시작됩니다.
처음 실행 시 로그인 또는 API 키 입력을 요구합니다.

3. Step-by-Step 가이드

Step 1. 아이디어를 말로 정리하기

만들고 싶은 앱을 구체적으로 설명할 수 있어야 합니다.
막연하게 “앱 만들어줘”보다, 기능을 구체적으로 나열하는 것이 좋습니다.

좋은 예시:

“카페에서 메뉴 주문을 취합하는 앱을 만들어줘.
메뉴 항목을 추가할 수 있고, 각 항목마다 수량을 +/- 버튼으로 조절할 수 있어야 해.
화면 하단에 총 수량이 표시되고, 데이터는 새로고침해도 유지되어야 해.
디자인은 심플하게, 한국어 UI로 만들어줘.”

나쁜 예시:

“메뉴 앱 만들어줘”

Step 2. GitHub 레포 만들기

github.com 접속 → 로그인
우측 상단 + → New repository 클릭
Repository name 입력 (예: cafe-menu)
Public 또는 Private 선택
Create repository 클릭
로컬에 clone:

git clone https://github.com/YOUR_USERNAME/YOUR_REPO_NAME.git
cd YOUR_REPO_NAME

Step 3. Claude Code 실행

프로젝트 폴더에서 Claude Code를 시작합니다.

cd cafe-menu   # 프로젝트 폴더로 이동
claude         # Claude Code 시작

터미널에 Claude Code 프롬프트가 나타나면 준비 완료입니다.

Step 4. 앱 만들기 (프롬프팅)

초기 앱 생성

Claude Code 프롬프트에 아래처럼 입력합니다:

React + Vite + Tailwind CSS로 메뉴 취합 앱을 만들어줘.

기능:
- 메뉴 항목 추가/삭제
- 항목별 수량 +/- 조절
- 인라인 이름 편집 (클릭하면 편집 가능)
- 하단에 총 수량 표시
- localStorage로 데이터 저장 (새로고침해도 유지)
- 이전에 입력한 항목 히스토리 표시

UI는 한국어로, 심플하고 깔끔하게 만들어줘.

Claude Code가 자동으로:

필요한 파일 생성 (package.json, src/App.jsx 등)
의존성 설치 (npm install)
코드 작성

기능 수정/추가

앱이 만들어진 후 대화하듯 수정 요청을 합니다:

헤더와 푸터 배경색을 오렌지로 바꿔줘

앱 이름을 "메뉴 리스트"로 변경해줘

이 이미지를 앱 아이콘으로 사용하게 해줘 [이미지 첨부]

PWA로 설치할 수 있게 manifest.json 추가해줘

실제 이 앱에서 진행한 대화 흐름

초기 앱 생성 요청
UI 가독성 개선, 헤더/푸터 오렌지 적용
초기화 버튼 위치 변경, 총 수량 가운데 정렬
커피 이미지로 아이콘 변경 + 중앙 크롭
앱 이름 변경
PWA manifest 추가

Step 5. 로컬에서 확인

npm install    # 처음 한 번만
npm run dev    # 개발 서버 시작

브라우저에서 http://localhost:5173 접속해서 확인합니다.
마음에 들 때까지 Claude Code와 대화하며 수정합니다.

Step 6. Vercel 배포 (최초 1회)

6-1. Vercel 계정 생성 및 GitHub 연동

vercel.com → Sign Up → GitHub으로 로그인
Add New Project 클릭
GitHub 레포 목록에서 프로젝트 선택 → Import
설정은 기본값 유지 → Deploy 클릭

배포 완료 후 https://YOUR_PROJECT.vercel.app 형태의 URL이 생성됩니다.

6-2. 이후 배포는 git push만으로

git add .
git commit -m "기능 추가"
git push

GitHub에 push하면 Vercel이 자동으로 새 버전을 배포합니다.

Step 7. 계속 개선하기

배포 이후에도 동일한 방식으로 개선합니다:

Claude Code에서 수정 요청
npm run dev로 로컬 확인
git push로 배포
반복

4. 팁 & 주의사항

잘 되는 것들

구체적으로 말할수록 결과가 좋습니다
한 번에 하나씩 요청하는 것이 낫습니다 (여러 기능을 한꺼번에 요청하면 놓치는 부분이 생길 수 있음)
스크린샷이나 이미지를 첨부해서 “이렇게 만들어줘”도 가능합니다
마음에 안 들면 “이 부분만 바꿔줘” 식으로 부분 수정 요청

주의사항

코드를 몰라도 되지만, 결과물은 반드시 직접 눈으로 확인하세요
AI가 틀릴 수도 있습니다. 이상하면 다시 요청하면 됩니다
중요한 파일은 Git으로 백업이 되어 있으니 걱정하지 않아도 됩니다

5. 이 앱의 기술 스택 (참고)

항목	기술	역할
UI 프레임워크	React 18	화면 구성
빌드 도구	Vite	빠른 개발 서버 + 빌드
스타일링	Tailwind CSS	디자인
데이터 저장	localStorage	브라우저 내 영구 저장
배포	Vercel	자동 배포

기술을 몰라도 Claude Code가 모두 처리합니다. 참고용으로만 알아두세요.

실제 완성된 앱

GitHub: https://github.com/Secrice/cafe-menu
배포 URL: https://menu-select.vercel.app

빠른 시작: 이 가이드를 AI와 함께 진행하기