Vibe coding

04강. 첫 프로젝트: To-Do 웹앱 완성

🎯 학습 목표

  • 실제 동작하는 To-Do 웹앱을 Claude와 함께 완성한다.
  • HTML/CSS/JS 파일을 단계적으로 생성하고 연결하는 흐름을 경험한다.
  • PowerShell에서 결과를 빠르게 확인하는 방법을 익힌다.
  • 완성 후 기능을 점검하고 개선을 요청하는 사이클을 체험한다.

📖 개념 설명

이번 강에서는 앞서 배운 기획 흐름을 실제로 적용해 To-Do 웹앱을 완성합니다. To-Do 앱은 작지만 입력, 목록 렌더링, 상태 변경, 영속 저장이라는 웹 개발의 핵심 요소를 모두 담고 있어 첫 프로젝트로 이상적입니다.

우리가 만들 앱은 외부 서버 없이 브라우저의 localStorage에 데이터를 저장합니다. 따라서 별도의 백엔드 없이 HTML 파일을 브라우저로 열기만 하면 동작합니다. Claude는 파일을 직접 생성하고, 우리는 브라우저에서 결과를 확인하며 부족한 부분을 즉시 피드백합니다.

핵심은 한 번에 완성하려 하지 않는 것입니다. 먼저 뼈대(입력+목록)를 만들고, 동작을 확인한 뒤, 완료 토글과 삭제, 영속 저장을 차례로 붙여 나갑니다. 각 단계마다 실제로 동작하는 상태를 유지하면 문제가 생겨도 원인을 좁히기 쉽습니다.

이 ‘항상 동작하는 상태를 유지하는’ 방식은 전문 개발에서도 통용되는 원칙입니다. 큰 변화를 한꺼번에 쏟아부으면 어디서 무엇이 깨졌는지 추적하기 어렵지만, 작은 변화를 더하고 매번 확인하면 방금 추가한 부분이 곧 원인이므로 디버깅 범위가 좁습니다. Vibe Coding에서는 Claude가 코드를 빠르게 만들어 주는 만큼, 사람은 ‘한 단계씩 확인하며 진행하는’ 속도 조절자 역할을 맡는 것이 좋습니다.

💻 실습

프로젝트 폴더를 만들고 Claude Code를 실행합니다.

mkdir C:devtodo-app
cd C:devtodo-app
claude

1단계: 기본 뼈대를 요청합니다.

> To-Do 웹앱을 만들 거야. 1단계로 index.html과 app.js를 만들어줘.
> - 입력창과 "추가" 버튼
> - 입력한 할 일이 아래 목록(ul)에 추가되도록
> 아직 저장이나 삭제는 넣지 말고 추가 기능만 동작하게 해줘.

브라우저로 열어 동작을 확인합니다.

# 기본 브라우저로 열기
start index.html

2단계: 완료 토글과 삭제, localStorage 저장을 추가합니다.

// app.js — Claude가 생성하는 핵심 로직 예시
const KEY = 'todos';
let todos = JSON.parse(localStorage.getItem(KEY) || '[]');

function save() {
  localStorage.setItem(KEY, JSON.stringify(todos));
}

function render() {
  const ul = document.getElementById('list');
  ul.innerHTML = '';
  todos.forEach((todo, i) => {
    const li = document.createElement('li');
    li.textContent = todo.text;
    li.className = todo.done ? 'done' : '';
    li.onclick = () => { todos[i].done = !todos[i].done; save(); render(); };
    const del = document.createElement('button');
    del.textContent = '삭제';
    del.onclick = (e) => { e.stopPropagation(); todos.splice(i, 1); save(); render(); };
    li.appendChild(del);
    ul.appendChild(li);
  });
}

document.getElementById('add').onclick = () => {
  const input = document.getElementById('text');
  const value = input.value.trim();
  if (!value) return;
  todos.push({ text: value, done: false });
  input.value = '';
  save();
  render();
};

render();

새로고침해도 데이터가 유지되는지 확인하고, 부족하면 개선을 요청합니다.

> 완료된 항목은 취소선과 회색으로 표시되게 style.css를 추가해줘.

⚠️ Windows 환경 주의사항

  • start index.html은 PowerShell 전용입니다. cmd에서는 start "" index.html 형태로 따옴표가 필요할 수 있습니다.
  • 파일을 저장한 뒤 브라우저에서 변경이 안 보이면 Ctrl+F5로 강력 새로고침(캐시 무시)하세요.
  • localStorage는 file://로 열어도 동작하지만, 일부 브라우저 정책에 따라 제한될 수 있습니다. 이 경우 간단한 로컬 서버(npx serve)를 사용하세요.

💡 팁

  • 단계마다 “지금까지 만든 걸 브라우저에서 테스트할 방법을 알려줘”라고 물으면 검증이 쉬워집니다.
  • UI가 마음에 안 들면 “더 깔끔한 모던 스타일로 CSS만 다시 짜줘”처럼 부분 개선을 요청하세요.
  • 완성 후 “이 코드에서 개선할 점이 있으면 알려줘”로 코드 품질 피드백을 받을 수 있습니다.