웹페이지 기획서

러닝 기록판

2026-10-01 · 주제 A 나를 위한 웹페이지 · 원본 brd.md · prd.md

퇴근 후 달린 기록을 한 곳에 적고, 이번 달 거리와 월별 변화를 휴대폰에서 10초 안에 본다

성공 지표

이번 달 누적 거리를 10초 안에 본다
기록 한 건을 30초 안에 적는다
손으로 더하는 일이 한 달 0번

먼저 만들 것 (Phase 1)

F1 기록 입력
F2 이번 달 요약 카드 3개
F3 월별 거리 그래프
F4 기록 지우기

BRD · 왜, 무엇을 만드나

1. 기능 목표

이 프로젝트로 무엇을 이루려는가?

지금은 : 일주일에 3번쯤 퇴근 후 달린다. 기록이 휴대폰 메모와 운동 앱 두 곳에 나뉘어 있어, 이번 달에 얼마나 달렸는지 알려면 두 곳을 열어 손으로 더한다 (한 달 4~5번, 한 번에 5분쯤)
최종 목적 : 기록을 한 곳에 모으고, 더하고 비교하는 일은 화면이 대신하게 한다
성공 지표
월요일 아침에 지난주 거리와 이번 달 누적 거리를 10초 안에 본다
달리고 난 뒤 기록 한 건을 30초 안에 적는다
손으로 거리를 더하는 일이 한 달 0번이 된다

2. 범위 및 요구사항

어디까지 만드는가?

구분	항목	이유
포함	기록 입력 (날짜 · 거리 · 시간)	모든 숫자의 출발점이다
포함	이번 달 요약 (누적 거리 · 목표까지 남은 거리 · 최고 기록)	월요일 아침에 10초 안에 보는 자리다
포함	월별 거리 막대그래프	지난달보다 늘었는지를 한눈에 본다
제외	친구와 기록 공유	로그인과 서버가 필요해 100분 안에 못 끝낸다. 한 달 써 본 뒤 다시 본다
제외	운동 앱에서 기록 자동 가져오기	앱마다 방식이 달라 오늘 범위를 넘는다

3. 이해관계자

누가 쓰고 누가 관여하는가?

누구	역할	원하는 것
나	달리고 난 저녁에 적고, 월요일 아침에 본다	휴대폰에서 빠르게 적고 바로 보기
함께 보는 사람	없음
클로드 코드	이 문서와 prd.md 대로 만든다	정해진 범위

4. 타임라인

언제까지 만드는가?

단계	언제	끝나면 손에 있는 것
기획	06 (오늘)	brd.md · prd.md · 기획서.pdf
1차 제작	07 7교시	Phase 1 이 도는 HTML 파일
수정 · 배포	07 8교시	한 가지 이상 고친 HTML · vercel.app 주소
한 달 써 보기	10월 한 달	제외한 두 가지를 다시 볼지 정한다

5. 예산

얼마나 들고 무엇이 남는가?

비용	기대 효과
돈 0원 (클로드 코드 · 무료 배포)	손으로 더하던 시간 한 달 약 25분(5분 × 5번)이 없어진다
시간 2교시 (100분)	목표까지 남은 거리가 보여 주 3회를 지키기 쉬워진다

6. 제약 사항

무엇이 걸림돌이 될 수 있는가?

제약 · 장애물	대응
회사 자료와 개인정보를 넣지 않는다	내 운동 기록만 넣는다. 이름과 위치는 적지 않는다
화면 하나 · 로그인과 알림 없음	100분 안에 끝낼 범위만 넣는다
브라우저에 남긴 기록은 브라우저 데이터를 지우면 사라진다	기록을 파일로 내려받는 기능을 Phase 2 로 둔다

7. 분석

SWOT

강점	약점
내가 원하는 항목만 담는다 · 광고가 없다	기록을 손으로 적어야 한다
기회	위협
한 달 치가 쌓이면 페이스 변화도 볼 수 있다	적는 것을 잊으면 숫자가 틀어진다

비용 대비 효과 · 100분을 들여 한 달 25분을 아낀다. 4개월이면 들인 시간을 되찾는다.

정할 것

페이스(1km당 몇 분)를 요약에 넣을지. 이번에는 빼고, 한 달 써 본 뒤 정한다

PRD · 어떻게 만드나

1. 목적

이 제품이 해결할 문제는?

손으로 흩어진 기록을 더하던 일을 웹페이지로 옮긴다. 달리고 난 기록을 휴대폰에서 30초 안에 적고, 이번 달 누적 거리와 월별 변화를 한 화면에서 10초 안에 본다.

2. 대상 고객

누가 쓰는가?

누구	근무 환경 · 기기	행동 패턴	주요 이슈
나	휴대폰 (가끔 PC)	퇴근 후 주 3회 달리고, 저녁에 적고, 월요일 아침 출근길에 본다	적는 게 번거로우면 안 적는다. 30초를 넘기면 안 된다

3. 핵심 기능 / 요구사항 정의서

무엇이 되어야 하는가?

번호	기능	사용자가 하는 것	화면에 생기는 것	우선순위
F1	기록 입력	날짜 · 거리 · 시간을 적고 「저장」을 누른다	기록 표 맨 위에 한 줄이 생긴다	Phase 1
F2	이번 달 요약	연다	카드 3개 (이번 달 · 목표까지 · 최고 기록)	Phase 1
F3	월별 거리 그래프	연다	최근 6개월 막대그래프. 이번 달 막대는 색이 다르다	Phase 1
F4	기록 지우기	표의 줄 끝 「지우기」를 누른다	한 번 더 묻고 지운 뒤 카드와 그래프가 바뀐다	Phase 1
F5	기록 내려받기	「파일로 저장」을 누른다	기록 전체가 CSV로 내려받아진다	Phase 2

숫자 정의

화면의 숫자	셈하는 법
이번 달	날짜가 이번 달인 기록의 거리 합 · km · 소수 1자리
목표까지	50 − 이번 달. 0보다 작으면 「목표 달성」
최고 기록	한 번에 가장 멀리 달린 거리
월별 거리	달마다 그 달 기록의 거리 합. 기록이 없는 달은 0

예외 상황

이럴 때	이렇게 보인다
기록이 하나도 없을 때	카드는 0, 표 자리에 「첫 기록을 적어 보세요」
거리나 시간을 비우거나 글자를 넣었을 때	저장하지 않고 그 칸 아래에 빨간 글씨로 「숫자를 넣어 주세요」
같은 날 두 번 달렸을 때	두 줄 모두 저장하고 합계에 둘 다 넣는다

4. UI 디자인 / 와이어프레임

화면을 어떻게 구성하는가?

러닝 기록판 · 2026년 10월머리

이번 달23.4 km

목표까지26.6 km

최고 기록10.0 km

월별 거리최근 6개월 막대그래프 · 이번 달은 다른 색

입력[날짜] [거리 km] [시간 분] [저장]

기록 표최근 것부터 · 줄 끝에 지우기

구역	보이는 것	누르거나 적으면
맨 위	요약 카드 3개 (F2)	누르는 것 없음
가운데	월별 막대그래프 (F3)	막대에 손가락을 대면 그 달 거리가 뜬다
아래	입력 칸 한 줄 (F1)	「저장」을 누르면 표 · 카드 · 그래프가 바로 바뀐다
맨 아래	기록 표 (F4)	「지우기」를 누르면 한 번 더 묻고 지운다

5. 플로우차트

사용자가 어떤 순서로 작업하는가?

연다→기록이 있나? 없다 → 첫 기록 안내 / 있다 → 카드와 그래프 확인→거리 · 시간 적기→저장→목표까지 남은 거리 확인→닫는다

달리고 난 저녁 : 연다 → 거리와 시간 적기 → 저장 → 목표까지 남은 거리 확인 → 닫는다
월요일 아침 : 연다 → 카드와 그래프 확인 → 닫는다 (10초)

6. 기술 사양

무엇으로 만드는가?

구조 : HTML 파일 하나 (index.html) · 브라우저로 열어 본다 · 외부 설치 없음
데이터 저장소 : 브라우저에 남긴다 (localStorage). 닫았다 열어도 기록이 남는다
그래프 : 파일 안의 코드로 직접 그린다. 인터넷이 없어도 열린다
화면 폭 : 휴대폰(390px)에서 넘치지 않게

데이터 항목	형식	예시 값	반드시
날짜	YYYY-MM-DD · 기본값은 오늘	2026-10-01	⭕
거리	km · 소수 1자리 · 0.1 이상 100 이하	5.2	⭕
시간	분 · 정수 · 1 이상	31	⭕

7. 구현 계획 / 확장 포인트

어떤 순서로 만드는가?

Phase	무엇	언제
1 (먼저)	F1 기록 입력 · F2 요약 · F3 그래프 · F4 지우기	07 7교시
2 (다음)	F5 기록 내려받기 · 페이스 표시	8교시에 시간이 남으면
3 (구상)	친구와 공유 · 운동 앱 기록 가져오기	한 달 써 본 뒤

Phase 1 완료 기준 (07에서 이것으로 확인한다)

파일을 열면, 기록이 없을 때 카드 3개가 0 이고 「첫 기록을 적어 보세요」가 보인다
5.2km · 31분을 저장하면 표 맨 위에 한 줄이 생기고 「이번 달」 카드가 5.2 로 바뀐다
거리 칸을 비우고 저장하면 저장되지 않고 빨간 글씨가 보인다
브라우저를 닫았다 다시 열어도 기록이 남아 있다
휴대폰 폭으로 줄여도 카드 3개와 입력 칸이 넘치지 않는다