실전: 미니 앱 만들기

지금까지 배운 의도 전달, 계획, 작은 반복을 한 흐름으로 묶어 본다. 목표는 간단한 할 일 목록(To-do) 앱이다. 추가/완료/삭제와 새로고침 후에도 유지되는 저장 기능까지. 실제로 따라 칠 수 있는 예시 프롬프트와 함께, 어디서 멈춰 확인하고 커밋하는지를 강조한다.

학습 목표

• 하나의 작은 앱을 계획부터 완성까지 바이브 코딩으로 진행한다.
• 단계마다 실행·확인·커밋하는 리듬을 체득한다.
• 검토와 범위 조절을 실제 상황에서 적용한다.

0단계: 계획 받기

바로 만들지 않고 계획부터 받는다(3강).

> 브라우저에서 도는 간단한 할 일 목록 앱을 만들고 싶어.
> 기술은 HTML + 바닐라 JS면 충분하고, 외부 라이브러리는 쓰지 마.
> 기능: 할 일 추가, 완료 체크, 삭제, localStorage로 저장.
> 바로 코드 짜지 말고, 파일 구성과 단계별 순서를 계획으로 먼저 보여줘.

계획을 읽고 단계가 각각 실행 가능한 크기인지, 의도와 맞는지 확인한다. 보통 아래와 비슷한 단계가 나온다.

1. index.html 골격 + 입력창/버튼/빈 목록
2. 할 일 추가 → 메모리 배열에 담고 목록 렌더
3. 완료 토글, 삭제 버튼
4. localStorage 저장/복원
5. 빈 상태 안내, 다듬기

1단계: 골격 만들고 실행

> 1단계만 하자. index.html에 제목, 텍스트 입력창, "추가" 버튼,
> 그 아래 빈 <ul>을 배치해줘. 아직 동작 로직은 넣지 마.

브라우저로 열어 레이아웃을 확인한다.

# 파일을 브라우저로 직접 열거나 간단한 서버 실행
npx serve .

좋으면 커밋한다.

git add -A && git commit -m "할 일 앱 기본 골격"

2단계: 추가 기능

> 2단계. "추가"를 누르면 입력값을 배열에 넣고 목록에 렌더해줘.
> 빈 값이면 추가하지 말고, 추가 후 입력창은 비워줘.
> 저장은 아직 하지 말고 메모리에만 두자.

실행해 몇 개 추가해 본다. 빈 값 입력, 한글/공백도 확인한다. 동작하면 커밋한다.

3단계: 완료와 삭제

> 3단계. 각 항목에 완료 체크박스와 삭제 버튼을 추가해줘.
> 완료하면 텍스트에 취소선, 삭제하면 목록에서 제거.

여기서 결과 코드를 한 번 읽어 본다. 항목을 어떻게 구분하는지(id? 인덱스?) 확인한다. 인덱스로 삭제하면 정렬이 바뀔 때 버그가 날 수 있으니, 필요하면 고쳐 달라고 한다.

> 삭제를 인덱스 대신 각 할 일의 고유 id로 처리하게 바꿔줘.

확인하고 커밋한다.

4단계: 저장과 복원

> 4단계. 할 일 목록을 localStorage에 저장하고,
> 페이지를 새로 열면 복원해줘. 추가/완료/삭제할 때마다 저장하면 돼.

새로고침해서 데이터가 유지되는지 확인한다. 개발자 도구에서 localStorage 값을 직접 봐도 좋다. 동작하면 커밋한다.

5단계: 마무리

> 마지막. 할 일이 하나도 없으면 "할 일이 없습니다" 안내를 보여주고,
> 간단히 보기 좋게 여백과 글자 크기만 다듬어줘. 과한 디자인은 필요 없어.

전체 흐름을 한 번 더 통과시켜 본다: 추가 → 완료 → 삭제 → 새로고침 → 모두 삭제 후 빈 상태. 마지막 커밋.

git add -A && git commit -m "빈 상태 안내와 스타일 정리"

돌아보기

이 과정에서 실제로 한 일을 정리하면 다음과 같다.

• 계획을 먼저 받아 합의했다(3강).
• 한 단계씩 만들고 매번 실행·확인했다(4강).
• 결과를 읽고 id 처리 같은 문제를 잡았다(7강에서 더 다룬다).
• 단계마다 커밋해 안전망을 만들었다.

코드를 한 줄도 직접 타이핑하지 않았지만, 무엇이 만들어졌는지는 매 단계 이해하고 있었다. 그게 핵심이다.

요약

미니 앱은 계획 → 작은 단계 반복 → 매 단계 실행·확인·커밋의 흐름을 한 번에 연습하기 좋은 소재다. 할 일 목록처럼 작은 범위를 골라, 한 조각씩 만들고 결과를 읽으며 진행하면, 빠르게 완성하면서도 무엇을 만들었는지 놓치지 않을 수 있다.