안녕하세요! 지난 포스팅에서 Claude Code의 요금제와 설치 방법을 다뤘다면, 오늘은 드디어 실전 편 입니다.
단순히 코드를 짜달라고 부탁하는 수준을 넘어, Claude Code가 어떻게 프로젝트 구조를 설계하고, 테스트하며, 실제 웹상에 배포까지 완료하는지 그 놀라운 과정을 직접 따라가 보겠습니다.
1. 5분 만에 앱 기획부터 구현까지
개발의 기본이자 정석인 'TODO 앱'을 만들어보겠습니다. 우리는 터미널에서 딱 한 줄의 명령만 내리면 됩니다.
프로젝트 초기화
먼저 빈 폴더를 만들고 Git을 초기화한 뒤, Claude Code를 실행합니다.
mkdir my-todo && cd my-todo
git init
claude마법의 프롬프트 입력
Claude 대화 모드에서 아래와 같이 입력해 보세요.
> "TODO 앱을 만들어주세요. ultrathink"
여기서 ultrathink는 Claude Code가 프로젝트의 전체 컨텍스트를 깊게 분석하고 최적의 설계를 하도록 유도하는 키워드입니다. 명령을 내리면 Claude Code는 스스로 다음과 같은 작업을 수행합니다.
- 계획 수립: HTML, CSS, JS 파일 구성 및 로컬 스토리지 활용 계획 수립
- 코드 작성:
index.html,style.css,script.js파일을 즉석에서 생성 - 기능 구현: 추가, 삭제, 완료 체크, 필터링 기능 포함
2. 로컬에서 결과 확인하기
Claude Code가 파일을 모두 생성했다면, 이제 제대로 동작하는지 확인해야겠죠? 정적 파일을 실행하기 위해 간단한 로컬 서버를 띄웁니다.
# npx를 이용한 간이 서버 실행
npx serve이제 브라우저에서 http://localhost:3000에 접속하면, 방금 AI가 만든 따끈따끈한 TODO 앱을 만날 수 있습니다.
3. 세상을 향해 배포하기 (Deployment)
앱이 완성되었다면 이제 나만 보는 것이 아니라 배포를 통해 링크를 공유할 차례입니다. Claude Code는 배포 과정까지 가이드해 줍니다.
(1) GitHub Pages에 배포
GitHub CLI(gh)가 설치되어 있다면, 터미널에서 명령 한 번으로 리포지토리 생성부터 푸시까지 끝낼 수 있습니다.
"gh 명령어를 사용해서 리포지토리를 만들고 커밋해서 푸시해줘. 그 다음 GitHub Pages로 배포해줘."
(2) Vercel에 배포 (강력 추천)
프라이빗 리포지토리 배포나 더 강력한 기능을 원한다면 Vercel이 제격입니다.
"이 프로젝트를 Vercel에 배포하고 싶어."
Claude Code는 Vercel CLI가 없다면 직접 설치를 도와주고, 계정 인증 과정을 거쳐 배포 완료된 URL 을 최종적으로 전달합니다. 이 모든 과정에서 여러분은 브라우저를 열어 복잡한 설정창을 누빌 필요가 없습니다.
결론: 개발 패러다임의 변화
이번 실습을 통해 느낀 점은 Claude Code가 단순히 '코드 작성기'가 아니라 '오퍼레이팅 파트너' 라는 점입니다. 파일을 만들고, 깃에 올리고, 서버에 배포하는 일련의 흐름을 터미널 안에서 대화로 해결하는 것, 이것이 바로 AI 기반 개발(AI-Driven Development) 의 핵심입니다.
다음 시간에는 프레임워크를 활용한 더 복잡한 앱 제작과, 개발 중 발생하는 에러를 Claude Code와 함께 해결하는 노하우를 공유해 드릴게요!