[바이브코딩 HTML 웹앱 20일 챌린지] 20일차 - 20일 동안 만든 웹앱 돌아보고 확장 아이디어 정리하기
20일차에서는 지금까지 만든 웹앱을 전체 점검하고, 다음 확장 방향을 정리합니다. 기능을 하나씩 쌓아온 흐름을 돌아보며 무엇이 완성됐고 무엇을 개선할지를 명확히 하는 마무리 단계입니다.
이번 회차의 핵심은 새로운 기능 추가보다 회고와 우선순위 설정입니다. 완성본을 점검하고 다음 프로젝트로 자연스럽게 이어질 수 있는 기준을 만드는 데 집중합니다.
1. 오늘 만들 기능 소개
오늘 목표는 20일 동안 구현한 기능을 체크리스트로 검토하는 것입니다. 할 일, 메모, 기분 기록, 타이머, 습관 체크, 진행률, 다크모드, 검색/필터, 반응형, 배포까지 핵심 흐름이 실제로 동작하는지 확인합니다.
2. AI에게 요청할 프롬프트
회고 단계에서는 기능별 점검표와 개선 우선순위를 요청하면 좋습니다.
20일 동안 만든 하루 관리 웹앱을 점검하고 싶어.
기능별 QA 체크리스트(동작, 저장, UI, 모바일, 배포)를 만들어줘.
발견된 개선점을 '즉시 수정', '다음 버전', '아이디어 보류'로 나눠 정리해줘.3. 코드 작성과 실행 과정
먼저 배포 URL 기준으로 주요 기능을 순서대로 테스트합니다. 동작 오류가 있다면 재현 조건을 짧게 메모하고, 작은 수정부터 우선 반영합니다. 동시에 "다음 버전에서 하고 싶은 기능"을 별도 목록으로 분리해 현재 버전 범위를 지킵니다.
| 점검 영역 | 확인 항목 | 판단 기준 |
|---|---|---|
| 핵심 기능 | 추가/완료/삭제/저장 동작 | 오류 없이 일관 동작 |
| 사용성 | 문구, 버튼, 입력 흐름 | 초보 사용자도 직관적으로 사용 |
| 환경 대응 | 모바일/다크모드/배포 상태 | 화면 깨짐 및 경로 오류 없음 |
4. 코드 이해하기
오늘 핵심은 "완성의 기준 정의"입니다. 기능이 많아도 기준 없이 보면 끝이 없기 때문에, 현재 버전에서 반드시 지켜야 할 품질 기준을 먼저 정하는 것이 중요합니다.
좋은 마무리는 더 많이 추가하는 것이 아니라, 지금 만든 것을 안정화하는 것입니다. 이 과정이 다음 프로젝트의 속도와 자신감을 함께 올려줍니다.
5. 오늘 만든 내용 정리
오늘은 20일 챌린지 결과물을 기능/사용성/배포 관점에서 점검하고, 즉시 수정할 항목과 다음 버전 아이디어를 분리해 정리했습니다. 첫 HTML 웹앱 프로젝트를 끝까지 완주했다는 경험 자체가 큰 자산이며, 이제는 같은 방식으로 새로운 주제의 웹앱도 스스로 설계하고 완성할 수 있습니다.
6. 자주 묻는 질문
Q1. 아직 아쉬운 부분이 많은데 완료라고 해도 될까요?
충분히 가능합니다. 완성은 "완벽"이 아니라 "목표 범위 충족"으로 판단합니다. 핵심 기능이 안정적으로 동작하면 다음 버전으로 넘겨도 좋습니다.
Q2. 다음 프로젝트는 무엇부터 시작하면 좋을까요?
이번 앱의 확장형이 가장 좋습니다. 로그인, 클라우드 저장, 통계 대시보드 중 하나만 선택해 1~2주 스코프로 시작해보세요.
Q3. 코드를 더 깔끔하게 만들려면 어디부터 손대야 하나요?
상태 관리 로직과 DOM 조작 로직 분리부터 진행하면 효과가 큽니다. 이후 공통 유틸 함수 추출, 파일 구조 정리 순으로 확장하면 됩니다.