[바이브코딩 HTML 웹앱 20일 챌린지] 13일차 - 오늘 얼마나 해냈는지 진행률로 보여주기
13일차에서는 오늘 해낸 양을 숫자와 막대로 보여주는 진행률 기능을 만듭니다. 지금까지 쌓은 할 일/습관 데이터를 바탕으로 완료 비율을 시각화하면 사용자는 하루 성취를 더 직관적으로 확인할 수 있습니다.
이 기능은 단순 계산처럼 보여도 사용자 동기 유지에 매우 효과적입니다. 초보자도 완료 개수와 전체 개수만 정확히 계산하면 쉽게 구현할 수 있습니다.
1. 오늘 만들 기능 소개
오늘 목표는 완료한 할 일과 체크한 습관을 기준으로 진행률을 계산해 보여주는 것입니다. 예를 들어 완료 5개 / 전체 8개라면 62%를 출력하고, 진행률 바 너비도 62%로 표시합니다.
2. AI에게 요청할 프롬프트
계산식과 표시 형식을 함께 요청하면 원하는 결과를 빠르게 받을 수 있습니다.
하루 관리 웹앱 13일차 작업이야.
완료한 할 일과 체크한 습관 개수를 합산해 전체 대비 진행률(%)을 계산해줘.
진행률 텍스트(예: 62%)와 진행률 바(width %)를 함께 업데이트하는 JavaScript 코드를 작성해줘.
0개일 때는 0%로 안전하게 처리해줘.3. 코드 작성과 실행 과정
먼저 진행률 텍스트 영역과 바 컨테이너를 HTML에 추가합니다. JavaScript에서 완료 수와 전체 수를 집계한 뒤, `(완료/전체)*100`으로 퍼센트를 계산해 반영합니다. 할 일/습관 상태가 바뀔 때마다 업데이트 함수를 호출하도록 연결하면 실시간으로 수치가 바뀝니다.
| 구성 | 구현 내용 | 검증 포인트 |
|---|---|---|
| 진행률 계산 | 완료 개수 / 전체 개수 | 전체 0개 예외 처리 |
| 텍스트 표시 | `xx%` 문자열 업데이트 | 반올림 규칙 일관성 |
| 바 표시 | width를 퍼센트로 반영 | 0~100 범위 유지 |
4. 코드 이해하기
핵심은 "계산 함수 분리"입니다. 집계/계산/렌더링을 한 함수에 몰아넣기보다 역할을 나누면 디버깅이 쉬워집니다. 또한 전체 개수가 0일 때 나눗셈 오류가 나지 않도록 0%를 기본값으로 처리해야 안정적입니다.
진행률은 숫자 정확도보다 갱신 타이밍이 더 중요합니다. 체크 상태가 바뀔 때마다 즉시 반영되도록 호출 지점을 정확히 연결해두세요.
5. 오늘 만든 내용 정리
오늘은 완료량 기반 진행률 기능을 추가해 하루 성취를 시각적으로 확인할 수 있게 만들었습니다. 이제 웹앱은 기록과 실행뿐 아니라 피드백까지 제공하는 구조가 되었고, 다음 14일차 다크모드 추가로 사용성까지 더 끌어올릴 수 있습니다.
6. 자주 묻는 질문
Q1. 진행률이 100%를 넘어요.
완료 개수 집계 기준이 중복됐을 가능성이 큽니다. 집계 대상을 할 일/습관 각각 한 번씩만 세는지 확인하세요.
Q2. 체크를 바꿔도 퍼센트가 안 바뀝니다.
상태 변경 이벤트에서 진행률 업데이트 함수를 호출하는지 확인해야 합니다. 저장 함수만 호출하고 표시 갱신을 빼먹는 경우가 흔합니다.
Q3. 퍼센트 소수점을 표시하고 싶어요.
가능합니다. `Math.round` 대신 `toFixed(1)` 같은 방식으로 포맷을 바꾸면 됩니다. 다만 초반에는 정수 퍼센트가 읽기 쉬워 추천됩니다.