클로드 코드로 TODO 앱 30분 만에 만드는 법
설치부터 Git 커밋까지 코딩 한 줄 없이 앱 완성
'TODO 앱 하나 만들어줘'라고 말하면 정말로 앱이 만들어질까요? 클로드 코드를 쓰면 됩니다. 설치 5분, 개발 20분, 커밋 5분.. 총 30분이면 충분합니다. 코딩 경험이 없어도, 터미널에서 자연어로 대화하는 것만으로 실제 작동하는 웹 애플리케이션을 만들고, 디버깅하고, 깃허브에 배포할 수 있습니다.
이 글에서는 클로드 코드를 처음 설치하는 것부터 시작해서, TODO 앱을 만들고, UI 버그를 잡고, 테스트 코드까지 생성한 뒤, Git 커밋으로 마무리하는 전체 과정을 직접 따라해 볼 수 있도록 안내합니다.
1. 클로드 코드 시작하기 : 요금제 선택이 먼저
클로드 코드를 사용하려면 가장 먼저 요금제를 선택해야 합니다. 크게 두 가지 방식이 있는데, 클로드의 유료 플랜에 가입하는 '구독' 방식과, 사용한 만큼만 비용을 내는 'API 종량제' 방식입니다.
구독 방식은 브라우저에서 사용하는 클로드의 플랜과 통합되어 있으며, 정해진 범위 내에서 정액 요금제가 적용됩니다. 클로드 코드를 사용할 수 있는 플랜은 Pro(월 20달러)와 Max(월 100달러 또는 200달러)입니다. 가볍게 시작하고 싶다면 Pro 플랜을, 본격적인 개발에 활용하고 싶다면 Max 플랜을 추천합니다.
API 종량제는 클로드의 가입 플랜과 상관없이 사용할 수 있지만, 클로드 콘솔 계정을 별도로 만들어야 합니다. 요금은 토큰 단위로 부과되며, Sonnet 4.5를 사용할 경우 개발자 1명당 월 평균 50~60달러 정도로 예상됩니다. 비정기적으로 사용하거나 대규모 배치 처리가 필요한 경우에 적합합니다.
클로드 코드를 설치한 후 처음 로그인할 때 두 가지 플랜 중 하나를 선택하게 됩니다. 구독 사용자라면 'Claude account with subscription'을, API 종량제 사용자라면 'Anthropic Console account'를 선택하면 됩니다.
선택을 나중에 변경하고 싶다면 /update 명령을 사용하면 됩니다. 이처럼 클로드 코드에는 프롬프트 앞에 슬래시(/)를 붙여 특정 기능을 실행하는 '슬래시 명령'이 있습니다.
2. 첫 대화 : 'TODO 앱 만들어줘'
요금제를 선택했으니 이제 실전입니다. 애플리케이션 개발에서 가장 먼저 떠오르는 예제는 보통 TODO(할 일 관리) 앱입니다. 클로드 코드에게 TODO 앱을 만들어 달라고 요청해 보겠습니다.
먼저 프로젝트 디렉터리를 만들고 Git도 직접 초기화하겠습니다. 터미널에 다음 명령을 입력합니다.
이제 클로드 코드에 지시를 내려 보겠습니다. 터미널에서 claude를 입력해 대화 모드로 들어간 다음, 아래와 같은 프롬프트를 사용합니다.
'ultrathink'는 클로드 코드가 더 깊이 생각하도록 유도하는 키워드입니다. 애플리케이션 개발 초기 단계에서 컨텍스트가 크고 복잡할 때 특히 도움이 됩니다.
이 한 줄의 프롬프트만으로 클로드 코드가 어떻게 반응하는지 살펴보겠습니다. 클로드 코드는 먼저 TODO 앱의 기본 기능을 스스로 정의합니다. TODO 추가, 삭제, 완료/미완료 전환, 목록 표시, 데이터 영속화까지 총 5가지 기능을 계획하고, 기술 스택도 자동으로 선택합니다. 프런트엔드는 React, Vue, Angular, Vanilla JS 중에서, 백엔드는 Node.js/Express, Python/Flask 중에서 고르고, 데이터베이스도 SQLite, PostgreSQL, MongoDB, 로컬 스토리지 중에서 프로젝트에 맞는 것을 판단합니다.
이렇게 간단하게 시작해서 HTML/CSS/JavaScript를 사용하여 로컬 스토리지를 활용하는 방식을 선택한 후, 먼저 현재 디렉터리 상태를 확인하고 TodoWrite 도구를 사용하여 작업을 계획합니다. HTML 파일 생성, JavaScript 파일 생성, CSS 파일 생성, 동작 확인 및 테스트라는 작업 목록을 만들고 하나씩 수행해 나갑니다.
3. 완성된 앱 확인하기 : 30초 만에 결과가?
처음 프롬프트를 지시한 지 약 30초 만에 결과가 나왔습니다. 클로드 코드는 'TODO 앱을 만들었습니다'라고 응답하면서, 작업 추가와 삭제, 완료/미완료 전환, 필터링(전체/미완료/완료), 로컬 스토리지에 데이터 보존까지 포함된 완성 앱을 만들어냈습니다. 구체적인 지시 없이도 스스로 구현 계획을 세우고, 여러 파일을 작성해 앱을 완성한 것입니다.
VS Code에서 생성된 소스 코드를 확인하면, index.html, script.js, style.css 세 개의 파일이 깔끔하게 구성되어 있습니다.
이제 실제로 앱을 실행해 봅시다. 이번에는 정적 파일인 index.html이 생성되었으므로, 로컬 서버를 직접 실행해야 합니다. VS Code의 Live Server 확장을 활용하면 편리하고, 터미널에서 npx http-server 또는 npx serve 명령어를 입력해도 됩니다. 브라우저의 주소창에 http://localhost:8000과 같은 URL을 입력하면 화면을 확인할 수 있습니다.
앱이 정상적으로 작동합니다. 할 일을 입력하고, 추가 버튼을 누르고, 완료 처리를 하고, 필터링까지 모든 기능이 문제없이 돌아갑니다.
4. UI 디버깅 : AI가 에러도 잡아줌
앞서 만든 TODO 앱은 HTML+CSS와 자바스크립트만의 단순한 애플리케이션이었습니다. 이번에는 프런트엔드 프레임워크의 사실상의 표준인 Next.js를 사용하도록 클로드에 지시해 봅시다. Next.js를 사용하면 서버 처리도 포함된 확장성 있는 더 본격적인 애플리케이션을 만들 수 있습니다.
한 번의 프롬프트로 애플리케이션이 시작되는 경우도 많지만, 환경이나 버전에 따라 표시 버그가 발생할 수 있습니다. 실제로 Next.js로 TODO 앱을 다시 만들어 실행했더니, CSS 라이브러리의 버전 문제로 인해 CSS가 적용되지 않는 현상이 발생했습니다.
이때 클로드 코드의 강력한 기능이 빛을 발합니다. 화면을 캡처해서 VS Code 등의 에디터 화면에서 Ctrl+V로 붙여넣으면 이미지 파일이 자동으로 생성되고, 이것을 그대로 클로드 코드의 대화 모드에 드래그 앤드 드롭해서 참조할 수 있습니다. 'CSS가 적용되지 않는 것 같은데, 확인해 주실 수 있나요?'라고 이미지와 함께 요청하면, 클로드 코드가 이미지를 분석하고 문제를 파악합니다.
클로드 코드는 PostCSS 설정에 문제가 있다는 것을 파악하고, 정확한 설정으로 수정합니다. 그런데 기대와 달리 또 다른 오류 메시지가 발생했습니다. 오류 메시지를 복사하거나 다시 한번 화면을 캡처해 확인을 요청하면 됩니다. 클로드 코드는 긴 에러 메시지나 코드 스니펫도 처리할 수 있습니다.
이후에도 React의 서버와 클라이언트 렌더링 차이로 인한 하이드레이션 오류와 Turbopack, Tailwind CSS 간의 호환성 오류가 계속 발생했습니다. 여러 차례 클로드 코드에 오류 메시지를 붙여넣고 지시를 반복한 끝에, 결국 TODO 앱을 정상적으로 작동시킬 수 있었습니다.
이 과정에서 알 수 있는 것은, AI 코딩이 '한 번에 완벽하게 만들어주는 마법'이 아니라는 점입니다. 오류가 발생하면 화면을 캡처하거나 에러 메시지를 복사해서 다시 지시하고, 반복적으로 수정해 나가는 과정이 실제 개발 흐름입니다. 클로드 코드는 이 반복 과정을 놀라울 만큼 빠르고 정확하게 처리해 줍니다.
5. Git 커밋과 배포 : 마무리까지 AI와 함께
앱이 완성되었으니 이제 Git으로 커밋하고 배포까지 해봅시다. 깃허브에 원격 리포지터리를 만들고 배포하는 것까지 클로드 코드에 실행해 달라고 해봅니다. 'gh 명령을 사용하여 원격 리포지터리를 생성하고 커밋한 후 푸시해 주세요'라고 지시합니다.
로컬에 gh 명령이 설치되어 있고 계정이 연동되어 있으면 원격 리포지터리가 없어도 터미널에서 생성이 가능합니다. 클로드 코드가 리포지터리 생성, 파일 커밋, 원격 리포지터리 푸시를 자동으로 처리하면 깃허브 리포지터리가 완성됩니다.
이어서 'GitHub Pages에 배포해 주세요'라고 지시하면, 잠시 기다리면 깃허브 페이지에 배포됩니다. 프로젝트 설정부터 배포까지 약 30분 만에 완료한 것입니다.
테스트 코드까지 AI에게 맡기기
배포 후에는 테스트 코드도 작성해 봅시다. 다만 클로드 코드가 테스트를 작성할 때, 실제로 의미 없는 테스트를 만들어 통과시키거나 코드 내 데이터를 하드코딩하는 경우가 종종 있습니다. 예를 들어, expect(true).toBe(true)와 같이 실제 계산 결과를 검증하지 않고 항상 true를 반환하는 테스트를 작성하거나, 테스트를 통과하기 위해 특정 값을 하드코딩하는 식입니다.
이런 문제를 방지하려면 클로드의 테스트 설계 방식과 규칙을 미리 명확하게 정해 두는 것이 중요합니다. ~/.claude/CLAUDE.md 등에 정리하여 모든 프로젝트에서 일관되게 준수하도록 합니다. 예를 들어, '반드시 실제 기능을 검증할 것', 'expect(true).toBe(true)와 같은 무의미한 어설션은 절대로 작성하지 말 것', '테스트 통과만을 위한 하드코딩 절대 금지'와 같은 규칙을 기술합니다.
CLAUDE.md에 규칙을 작성한 후, '이 애플리케이션의 tsx 파일에 대한 테스트 코드를 Vitest를 사용하여 작성해 주세요'라고 지시하면, 클로드 코드가 자율적으로 에러를 수정하면서 테스트 코드를 계속 작성해 줍니다. 실행 결과, 전체 40개의 테스트가 성공하고 컴포넌트의 커버리지 99.02%, 훅의 커버리지 97.22%라는 높은 수치를 달성했습니다.
핵심 정리
클로드 코드를 쓰면 자연어 대화만으로 프로젝트 생성, 기능 구현, UI 디버깅, 테스트, Git 커밋까지 전체 개발 사이클을 30분 안에 완료할 수 있다. 코드를 직접 작성하지 않아도 되지만, 오류가 나면 반복적으로 수정을 지시하는 '대화형 개발'이 핵심이다.
클로드 코드를 처음 접하는 분들부터 최신 AI 에이전트 기술로 개발 생산성을 극대화하고 싶은 모든 분에게 《클로드 코드를 활용한 바이브 코딩 완벽 입문》 도서를 추천합니다.
https://wikibook.co.kr/claude-code/