HTML 파일 하나만 있으면 동작하는 투두앱을 30분 안에 완성합니다. Claude Code에게 무엇을 어떻게 부탁해야 쓸만한 코드가 나오는지, 중간에 가장 자주 멈추는 지점이 어디인지, 새로고침해도 할 일이 사라지지 않게 데이터를 저장하는 방법까지 차례로 짚어드려요. 소요 시간 30분, 난이도 ★☆☆, 준비물은 Claude Code와 VS Code 정도. 각 단계 끝에 “이렇게 보이면 성공”이라는 신호를 적어놨으니 막히면 그 지점부터 되짚으시면 됩니다.
📑 목차
🪤 AI 도구는 설치했는데 뭘 만들어야 할지 모르겠다면
Claude Code나 Cursor까지 설치해 놓고 “그래서 이제 뭐 만들지?”에서 멈추는 분이 의외로 많습니다. 특히 코딩이 처음이면 주제를 고르는 것 자체가 큰 장벽이고, 그렇다고 무턱대고 “쇼핑몰 하나 만들어줘”처럼 큰 요청을 던지면 결과물이 엉켜서 이해도, 수정도 못 하는 상태가 되기 쉽습니다.
그래서 첫 프로젝트는 작게 시작하는 편이 낫습니다. 투두앱이 고전처럼 소개되는 이유도 여기에 있어요. 할 일을 넣고, 저장하고, 고치고, 지우는 네 가지 동작은 결국 대부분의 웹·앱 서비스가 기본으로 갖고 있는 뼈대거든요. 이 글에서 만들 투두앱 역시 이 뼈대만 최대한 깔끔하게 남겨서, 나중에 다른 프로젝트로 응용하기 쉽도록 구조를 잡아뒀습니다.
한 가지 강조하고 싶은 건, 이 과정에서 독자가 코드를 직접 쓰지 않는다는 점입니다. Claude Code에게 원하는 결과를 한국어로 설명하고, 브라우저에서 결과를 확인하고, 다음 기능을 또 말로 부탁합니다. 이게 바이브코딩의 실제 작업 흐름이고, 30분 뒤 손에 남는 건 동작하는 웹앱 파일 하나, 그리고 “AI에게 이렇게 말하면 이렇게 나오는구나” 하는 감각입니다.
👀 30분 뒤 만들어질 투두앱 모습
완성본은 딱 index.html 한 파일입니다. 브라우저에서 그 파일을 그대로 더블클릭하면 바로 실행돼요. 서버를 띄우거나 빌드를 돌릴 필요가 없습니다. 화면은 단순합니다. 위쪽에 할 일을 입력하는 텍스트 입력창과 “추가” 버튼이 있고, 바로 아래에 전체 · 진행 중 · 완료 세 종류의 필터 버튼이 붙습니다. 나머지 자리는 입력된 할 일 목록이 채우고, 각 항목은 체크박스·텍스트·삭제 버튼 순서로 줄지어 있어요.
체크박스를 누르면 텍스트에 가로줄이 그어지면서 “완료”로 바뀝니다. 삭제 버튼을 누르면 그 항목만 스윽 사라지고, 필터 버튼을 누르면 해당 상태에 해당하는 항목만 화면에 남습니다. 그리고 제일 중요한 부분. 브라우저를 새로고침하거나 아예 닫았다가 다시 열어도 이전에 입력한 할 일이 그대로 남아 있습니다. localStorage라는 브라우저 내장 저장 공간을 쓰기 때문인데요, localStorage는 쉽게 말해 브라우저가 사이트별로 제공하는 작은 저장소예요. 사용자가 직접 기록을 지우지 않는 한 데이터가 유지됩니다. 이 기능은 마지막 단계에서 붙입니다.
📦 시작 전 체크할 세 가지
본격적으로 들어가기 전에 아래 세 가지가 준비돼 있으면 “30분”이라는 시간이 현실적으로 들어맞습니다. 이미 다 깔려 있는 상태라면 바로 다음 섹션으로 내려가셔도 됩니다.
🤖 AI 코딩 도구 하나
이 글은 Claude Code를 기본으로 가정하고 씁니다. 설치와 로그인이 끝나 있어야 해요. 아직 없다면 Claude Code 설치부터 첫 코딩까지 가이드를 한 번 훑고 오시는 편이 편합니다. Cursor나 GitHub Copilot으로도 같은 흐름을 따라갈 수 있지만, 본문의 프롬프트 예시는 Claude Code의 대화형 세션을 기준으로 했습니다.
📝 VS Code
코드 파일을 열고 편집하는 에디터입니다. Claude Code와 궁합이 잘 맞아서 내장 터미널에서 바로 claude 명령을 실행할 수 있다는 점이 편해요. 아직 준비가 안 됐다면 바이브코딩용 VS Code 설정 가이드를 먼저 끝내주세요.
🌐 웹 브라우저
Chrome, Edge, Firefox, Safari 어느 것이어도 상관없습니다. index.html을 더블클릭했을 때 기본으로 열리는 브라우저가 있으면 그걸로 충분해요. 특정 브라우저에서만 되는 기능은 이 글에서 쓰지 않습니다.
🧑💻 바이브코딩 투두앱 만들기 — 30분 5단계
이제 순서대로 따라오시면 됩니다. 각 단계에 소요 시간과 “이 신호가 보이면 다음으로” 기준을 적어놨으니, 기준이 맞지 않은 채로 진도를 빼는 건 피해주세요. 뒤에서 원인을 찾기가 훨씬 까다로워집니다.
🗂 단계 1. 빈 HTML 파일 만들기 (3분)
AI에게 “여기에 붙여 달라”고 지정해 줄 출발 파일이 먼저 있어야 합니다. VS Code에서 바탕화면이나 원하는 위치에 폴더 하나를 만들어주세요. 이름은 todo-app 정도면 충분합니다. 그 안에 index.html을 새로 만들고, 다음 내용을 그대로 넣어 저장합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>내 투두앱</title>
</head>
<body>
<h1>내 투두앱</h1>
</body>
</html>VS Code 왼쪽 탐색기에 todo-app/index.html이 보이고 상단 탭 이름 옆의 점(●)이 사라졌다면 저장까지 마친 상태입니다. 여기까지 오셨으면 다음으로 넘어가셔도 좋아요.
💬 단계 2. Claude Code에게 첫 요청 보내기 (5분)
이 단계가 바이브코딩의 본질이에요. 코드를 직접 쓰지 않고 AI에게 원하는 화면을 말로 설명합니다. VS Code 메뉴에서 터미널 → 새 터미널을 열거나 단축키 Ctrl+` (mac은 Cmd+`)을 누른 뒤, 터미널에 claude를 입력해 세션을 시작합니다. 그리고 아래 프롬프트를 그대로 붙여 넣어 보세요.
index.html 파일에 할 일 관리 앱(투두앱)을 만들어주세요. 상단에 할 일을 입력하는 input과 “추가” 버튼이 있고, 그 아래에 추가된 할 일이 목록으로 표시되도록 해주세요. HTML·CSS·JavaScript를 한 파일에 모두 담아주시고, 디자인은 심플하게 가운데 정렬 레이아웃으로 부탁합니다.
Claude가 index.html을 어떻게 바꿀지 제안하면 승인해주세요. 터미널에 “File updated” 같은 메시지가 뜨고, VS Code 편집기에도 코드가 채워져 있으면 요청이 반영된 상태입니다.
🌐 단계 3. 브라우저에서 결과 확인하기 (2분)
눈으로 직접 보는 단계입니다. 파일 탐색기(mac은 Finder)에서 방금 만든 index.html을 찾아 더블클릭합니다. 기본 브라우저가 열리면서 투두앱 화면이 나오면 일단 성공. 입력창에 “책 읽기” 같은 문구 하나를 넣고 “추가” 버튼을 눌러봅니다.
Claude가 제안한 변경을 승인하지 않았거나, 저장 전에 파일을 열었을 가능성이 가장 큽니다. VS Code로 돌아가서
index.html에 실제로 코드가 들어 있는지 먼저 확인해보세요. 탭 이름 옆에 점(●)이 붙어 있다면 미저장 상태이니 Ctrl+S (mac은 Cmd+S)로 저장하고 브라우저를 새로고침하면 정상적으로 보입니다.
추가 버튼을 눌렀을 때 입력한 글자가 목록에 새로 올라오면 여기까지 잘 된 겁니다.
🧩 단계 4. 삭제·체크·필터 기능 추가하기 (10분)
기본 뼈대가 움직이니 이제 살을 붙입니다. 이 단계에서 기억할 원칙은 딱 하나예요. 한 번에 한 기능씩 요청하기. 여러 요청을 한꺼번에 던지면 AI가 중간에 꼭 필요한 로직을 빼먹거나 순서를 흐트러뜨리는 일이 꽤 잦습니다. 아래 세 개를 순서대로 보내고, 매번 브라우저를 새로고침해 동작을 확인한 뒤에 다음으로 넘어가주세요.
- “각 할 일 항목 오른쪽에 ‘삭제’ 버튼을 붙여주세요. 클릭하면 해당 항목만 목록에서 사라져야 합니다.”
- “각 할 일 왼쪽에 체크박스를 넣어주세요. 체크하면 그 항목의 텍스트에 가로줄이 그어지고 ‘완료’ 상태로 표시됩니다.”
- “목록 위에 ‘전체 / 진행 중 / 완료’ 필터 버튼 세 개를 추가해주세요. 누르면 해당 상태의 할 일만 남습니다.”
세 개가 다 들어가고 브라우저에서 버튼별로 의도대로 반응한다면 이 단계는 마무리된 겁니다.
💾 단계 5. localStorage로 데이터 저장하기 (10분)
여기까지 만든 앱에는 사실 한 가지 아쉬운 점이 있어요. 새로고침만 하면 입력한 할 일이 전부 사라집니다. 데이터가 전부 메모리에만 있고 어디에도 저장되지 않기 때문이에요. 해결책은 localStorage입니다. localStorage는 앞서 잠깐 언급한 것처럼, 브라우저가 각 사이트마다 따로 갖고 있는 작은 저장 공간입니다. 여기에 데이터를 넣어두면 새로고침이나 브라우저 재시작을 거쳐도 그대로 살아 있어요. 이 앱에 붙여줄 “간이 데이터베이스” 정도로 생각하시면 편합니다.
할 일 목록 데이터를 브라우저 localStorage에 저장하도록 수정해주세요. 추가·삭제·체크가 일어날 때마다 현재 목록을 저장하고, 페이지가 로드될 때 저장된 데이터를 불러와 화면에 표시합니다. 저장 키 이름은 “todos”로 통일해주세요.
Claude가 제안한 변경을 승인한 뒤 브라우저를 새로고침해 할 일 몇 개를 넣어봅니다. 그다음이 진짜 테스트인데요, 브라우저를 완전히 종료했다가 파일을 다시 열어도 이전 목록이 그대로 남아 있다면 다섯 번째 단계까지 잘 끝난 겁니다. 축하드려요. 이제 앱 한 개가 손에 생겼습니다.
✅ 제대로 만들어졌는지 확인하는 다섯 가지
완성본이 의도대로 움직이는지 아래 다섯 가지를 훑어봐 주세요. 하나라도 어긋나면 다음 섹션의 진단 가이드를 보시면 됩니다.
- 할 일을 입력하고 추가 버튼을 누르면 목록에 새 항목이 생긴다.
- 체크박스를 누르면 텍스트에 가로줄이 그어지고, 한 번 더 누르면 원래대로 돌아온다.
- 삭제 버튼을 누르면 그 항목만 사라지고 나머지 항목은 그대로 남는다.
- 필터 “전체 / 진행 중 / 완료” 중 어느 것이든 누르면 해당 상태의 항목만 보인다.
- 새로고침 또는 완전 종료 후 다시 열어도 이전 할 일이 그대로 남아 있다.
🧯 자주 막히는 세 가지 상황과 해결법
같은 흐름으로 투두앱을 만들어본 분들이 실제로 자주 멈춰 선 지점만 추려봤습니다. 증상이 비슷하면 해당 해결법부터 먼저 시도해보세요. 표에서 본인 상황을 빠르게 찾아보고, 아래 설명에서 자세한 절차를 확인하시면 됩니다.
| 증상 | 가장 흔한 원인 | 해결 |
|---|---|---|
| 파일을 열었는데 빈 화면만 보임 | 파일이 저장되지 않았거나 Claude 변경 제안이 미승인 | VS Code에서 Ctrl+S 저장 → 브라우저 새로고침 |
| 할 일 체크·저장이 꼬여서 앱이 이상하게 동작 | 이전 localStorage 데이터와 새 구조의 충돌 | 개발자도구(F12) → Application → Local Storage → “todos” 키 삭제 → 새로고침 |
| 여러 기능이 서로 간섭하면서 버그 발생 | 한 번에 여러 기능을 같이 요청 | “마지막 기능 되돌려주세요” 요청 → 하나씩 재요청 |
📄 파일을 열었는데 빈 화면만 뜹니다
경험상 이 증상의 90%는 저장이 안 된 상태에서 브라우저를 연 경우예요. VS Code로 돌아와 index.html에 실제 코드가 있는지부터 확인해보세요. 탭 이름 옆에 점(●)이 보이면 미저장 상태이니 Ctrl+S (mac은 Cmd+S)로 저장한 뒤 브라우저를 새로고침하면 대부분 바로 해결됩니다.
🗃 localStorage에 이상한 데이터가 쌓여 있어요
개발 도중 Claude가 저장 키 이름을 바꾸거나 데이터 구조를 손보면, 이전 데이터와 충돌하면서 화면이 깨지는 경우가 있습니다. 이럴 땐 F12 (mac은 Cmd+Option+I)로 개발자도구를 열고 상단 Application 탭 → 왼쪽 Local Storage → 현재 파일 항목을 선택한 뒤 우클릭 → Clear로 싹 비워보세요. 새로고침하면 깨끗한 상태에서 다시 시작할 수 있습니다.
💥 한 번에 여러 기능 요청했더니 동작이 엉켜요
“필터, 삭제, 저장 다 한꺼번에 넣어줘”처럼 큰 요청을 던지면 AI가 중간 로직을 빼먹고 넘어가는 일이 정말 자주 벌어집니다. 기능 하나가 끝까지 동작하는 걸 확인한 뒤 다음 기능을 부탁하는 게 가장 확실한 예방책이에요. 이미 엉킨 상태라면 “마지막에 추가한 필터 기능을 제거하고 이전 상태로 돌려주세요”처럼 되돌리기 요청을 해도 대부분 원상복구됩니다.
🪜 여기서 어디로 더 갈 수 있나
HTML 파일 하나짜리 앱이 완성됐습니다. 여기서 뻗어갈 수 있는 방향은 크게 세 가지예요. 본인 상황에 맞게 원하는 것부터 고르셔도 좋습니다.
⚛ 프레임워크로 옮겨서 실무 감각 익히기
Next.js 같은 최신 웹 프레임워크로 옮기면 컴포넌트 분리, TypeScript 같은 타입 안전성, Tailwind 기반 스타일링 같은 실무 도구를 자연스럽게 경험하게 됩니다. 처음이라면 바이브코딩 Next.js 프로젝트 만들기 글에서 이어가시면 편해요.
🚀 Vercel로 전 세계에 배포하기
지금 만든 파일은 내 컴퓨터에서만 돌아가는 상태입니다. Vercel에 올리면 URL 하나로 친구, 가족, 채용 담당자 누구에게나 바로 공유할 수 있어요. 무료 플랜만으로도 충분하고, 절차는 바이브코딩 Vercel 무료 배포 가이드에 정리돼 있습니다.
🎨 디자인과 UX 다듬기
Claude에게 “CSS를 다크 모드 감성으로 바꿔주세요”나 “완료 처리한 할 일이 자연스럽게 사라지는 애니메이션을 넣어주세요”처럼 결과 위주로 부탁하면 외관이 빠르게 달라집니다. 디자인을 따로 공부하지 않아도 기본적인 시각적 완성도 정도는 AI가 충분히 만들어주는 편이라, 적은 노력으로도 포트폴리오용 첫인상을 한 단계 올릴 수 있습니다.
💡 AI에게 더 잘 시키는 세 가지 습관
이번 프로젝트에서 몸으로 익힌 감각을 다른 앱 만들기에도 그대로 쓸 수 있도록, 효과가 가장 큰 습관 세 가지만 뽑아봤습니다.
🧱 한 번에 한 기능씩
한꺼번에 여러 기능을 요청하면 AI가 우선순위를 잘못 잡거나 중간 단계를 건너뛰는 확률이 눈에 띄게 올라갑니다. 기능 하나가 끝까지 동작하는 걸 확인한 뒤 다음 기능을 부탁하세요. 처음엔 느려 보여도, 버그 잡고 되돌리는 시간을 합치면 결국 이쪽이 더 빠른 길입니다.
🎨 “결과” 중심으로 말하기
AI에게 부탁할 때는 구현 방법보다 사용자가 보게 될 화면과 동작을 말로 그려주는 편이 결과가 훨씬 깔끔해집니다. “배열에 push 해주세요”보다 “할 일을 추가하면 목록 맨 아래에 새 항목이 나타나야 합니다” 쪽이 오해가 적어요. 같은 의도라도 말하는 방식에 따라 결과가 얼마나 달라지는지 몇 가지를 비교해두면 감이 금방 잡힙니다.
| 덜 좋은 요청 | 더 나은 요청 |
|---|---|
| “필터·삭제·저장 다 한 번에 넣어줘” | “먼저 삭제 버튼만 추가해주세요. 동작 확인한 뒤 체크박스를 부탁드릴게요.” |
| “배열에 push 해주세요” | “할 일을 추가하면 목록 맨 아래에 새 항목이 나타나야 합니다” |
| “디자인 예쁘게 해주세요” | “전체를 다크 테마로 바꾸고 버튼은 보라색 계열, 폰트는 Pretendard로 설정해주세요” |
| “이상한 버그 좀 고쳐줘” | “체크박스를 한 번 누른 뒤 새로고침하면 체크 상태가 풀립니다. 상태가 유지되도록 수정해주세요.” |
조금 더 체계적인 요청 방식은 AI에게 코딩 요청하는 프롬프트 작성법 10가지에 자세히 풀어뒀습니다.
🔖 기능 완성마다 Git 커밋 남기기
단계마다 git add . && git commit -m "add delete button"처럼 짧게 커밋을 남겨두면, 다음 요청이 엉켰을 때 이전 상태로 깔끔하게 돌아올 수 있습니다. AI가 덮어쓴 코드가 복잡해서 수동으로 되돌리기 막막한 순간이 반드시 한 번은 와요. 그때 이 커밋들이 안전망 역할을 해줍니다.
투두앱 다음에 도전할 거리가 필요하면 첫 작품으로 좋은 프로젝트 10가지를 참고하세요.
🪧 면책 조항
여기까지 따라오시느라 고생 많으셨어요. 첫 투두앱이 동작하는 순간을 확인하셨다면, 같은 흐름 그대로 다음 작은 아이디어에도 한 번 더 도전해보시면 감각이 훨씬 빨리 붙습니다.
❓ FAQ
질문을 누르면 답변이 펼쳐집니다.
🔰 처음 시작하기 전 궁금한 것들
Q. 코딩을 모르는데 정말 30분 안에 완성되나요?
Q. Claude Code와 Cursor 중 어느 게 더 좋을까요?
🛠 실행 중 자주 마주치는 상황
Q. 투두 목록이 새로고침하면 사라져요
Q. index.html을 열었는데 화면이 비어 있어요
index.html에 실제 코드가 있는지 먼저 보세요. 탭에 점(●)이 붙어 있다면 Ctrl+S (mac은 Cmd+S)로 저장한 뒤 브라우저를 새로고침하면 해결됩니다.Q. CSS 스타일을 제 취향대로 바꾸고 싶어요
Q. 체크박스 동작이 이상하게 움직여요
🚀 완성한 뒤 확장·응용하기
Q. 완성한 투두앱을 다른 사람에게 보여주려면 어떻게 하나요?
Q. 모바일에서도 쓸 수 있나요?
Q. AI가 써준 코드를 이해를 못 하겠어요
Q. 같은 방식으로 또 어떤 앱을 만들어볼 수 있을까요?
🔗 관련 글
- Claude Code 설치부터 첫 코딩까지 — 비전공자 가이드
- 바이브코딩용 VS Code 설정 가이드
- AI에게 코딩 요청하는 프롬프트 작성법 10가지
- 바이브코딩 Next.js 프로젝트 만들기
- 바이브코딩 Vercel 무료 배포 가이드
📑 참고 자료
- MDN Web Docs — Window.localStorage
- MDN Web Docs — <input type=”checkbox”>
- TodoMVC — 동일 앱을 여러 프레임워크로 구현한 공식 예제 모음
IT 기획 10년차 / 비전공자를 위한 바이브코딩 블로그 운영 / vibe-start.com 제작
Building VibeStart — the fastest path for non-devs into AI coding. Launching on Product Hunt 2026-05-26.
