============================================================================
프로그램명 : 생활 계획 및 시간 프로그램 (Life Plan Scheduler, LPS)
프로그램 한 줄 소개 : 설치 없이 웹에서 오늘 할 일, 일정, 집중 시간, 반복 루틴을 빠르게 관리하는 실전형 생활 계획 서비스
문서 목적 : 실제 구현 전에 화면, 흐름, 데이터, 예외 처리 기준을 한 번에 합의하기 위한 기획 문서
문서 범위 : MVP에서는 할 일 관리, 집중 타이머, 반복 루틴, 상태 메시지, localStorage 저장까지만 포함
설계 원칙 : 설치 없이 즉시 사용 가능해야 하며, 핵심 기능은 3단계 이내로 끝나야 하고, 실패하더라도 앱 전체는 유지되어야 함
문서 버전 : v0.1-spec 문서 기준일 : 2026-08-02 프로젝트 상태 : 기획 초안 단계
============================================================================
기능 정리
- 핵심 기능 :
- 웹 접속 즉시 할 일 확인 및 추가
- 로그인 없이 바로 오늘 할 일을 등록하고 확인할 수 있음
- 제목, 우선순위, 마감일을 함께 저장할 수 있음
- 오늘 일정과 마감일 한 화면 관리
- 오늘 해야 할 일과 마감이 가까운 항목을 분리해서 보여줌
- 중요도가 높은 항목이 먼저 보이도록 정렬 가능
- 집중 타이머(Pomodoro) 실행
- 기본 25분, 확장 시 50/90분 프리셋을 제공
- 시작, 일시정지, 리셋을 한 화면에서 처리
- 반복 루틴 및 습관 체크
- 운동, 약 복용, 독서처럼 매일 반복되는 행동을 체크할 수 있음
- 날짜별 기록과 연속 달성일을 저장할 수 있음
- 오늘의 우선순위 자동 정리
- 마감일과 우선순위 기준으로 오늘 우선 작업을 정리
- 사용자가 정리 기준을 직접 손대지 않아도 되도록 설계
- AI 보조 기능 :
- 건강 상태/컨디션 기반 일정 재조정
- 수면 시간, 피로도, 운동 여부, 약 복용 여부를 반영해 오늘 일정을 다시 배치
- 무리한 일정은 뒤로 미루고, 에너지 수준이 낮을 때는 가벼운 업무를 먼저 제안
- 음성 일정 입력
- 사용자가 말한 내용을 일정/할 일 항목으로 자동 변환
- 예: "내일 오후 3시에 병원 예약" → 날짜, 시간, 제목을 분리해서 저장
- AI 요약 안내
- 오늘 해야 할 일, 건강상 주의점, 집중하기 좋은 시간대를 한 줄 요약으로 제안
- 사용자는 추천안을 보고 적용 여부를 선택
- 부가 기능 :
- 오늘 할 일 우선순위 정렬
- 높은 우선순위 항목을 상단에 고정할 수 있음
- 모바일/PC 반응형 화면
- 360px부터 데스크톱까지 하나의 화면 규칙으로 대응
- 빠른 사용 안내 및 단축키 도움말
- 처음 들어온 사용자가 1분 안에 기능을 이해하도록 안내
- 한국어 우선 UI + 영어 확장 준비
- 버튼과 상태 메시지 모두 다국어 확장 구조를 고려
- 최근 입력/즐겨찾기 루틴 저장
- 자주 쓰는 루틴을 빠르게 다시 등록할 수 있도록 지원
- AI 기반 일정 추천
- 건강 상태, 집중 가능 시간, 마감일을 함께 고려한 추천 일정 제공
- 과부하가 예상되면 작업량을 줄이고 분산 배치를 제안
프로젝트 목표 :
- 사용자는 3분 안에 오늘 계획을 정리할 수 있어야 함
- 접속 후 오늘 할 일 확인, 추가, 완료 전환까지 한 흐름으로 끝내는 것을 목표로 함
- 집중 타이머는 1클릭으로 시작 가능해야 함
- 사용자가 시작 버튼만 누르면 별도 설정 없이 바로 집중 세션에 들어가야 함
- 복잡한 설정 없이 브라우저만으로 바로 사용 가능해야 함
- 설치, 회원가입, 서버 로그인 없이 바로 쓸 수 있어야 함
- 반복 루틴은 하루 10초 내 체크 가능해야 함
- 자주 하는 습관은 최소한의 클릭으로 기록될 수 있어야 함
- AI 추천은 사용자의 컨디션과 우선순위를 함께 반영해야 함
- 수면 부족, 피로 누적, 운동 여부 같은 상태를 고려해 일정 강도를 조절해야 함
- 음성 입력은 1문장으로 일정 추가가 가능해야 함
- 사용자가 말한 일정이 자동으로 날짜, 시간, 제목 형태로 정리되어야 함
정량 목표 (MVP 기준) :
- 첫 화면 로딩 목표: 3초 이내
- 할 일 추가 반응 목표: 1초 이내
- 타이머 시작 반응 목표: 1초 이내
- 타이머 종료 알림 반응 목표: 1초 이내
- 모바일 화면 대응 폭: 360px 이상
- 기본 작업 완료 클릭 수: 3회 이하
- localStorage 저장 실패 시에도 화면 유지율: 100%
- 음성 입력 후 초안 생성 목표: 2초 이내
- AI 일정 추천 응답 목표: 3초 이내
============================================================================
사용자 페르소나
-
A. 학생
- 공부 계획을 자주 세우지만 잘 흐트러짐
- 목표: 오늘 공부할 것과 집중 시간을 빠르게 관리
-
B. 직장인
- 회의, 마감, 개인 업무가 섞여 있음
- 목표: 오늘 해야 할 일을 우선순위대로 정리
-
C. 생활 루틴 관리 사용자
- 운동, 약 복용, 독서 같은 반복 습관을 챙기고 싶음
- 목표: 매일 반복되는 일을 잊지 않고 체크
-
D. 건강 상태 기반 일정 조정 사용자
- 수면, 피로, 운동량, 복약 상태에 따라 하루 일정을 조정하고 싶음
- 목표: 내 컨디션에 맞는 일정 강도와 순서를 추천받기
기대 효과 : 사용자는 계획을 따로 정리할 필요 없이 한 화면에서 오늘의 일정과 할 일을 확인할 수 있고, 집중 시간 관리까지 이어서 수행할 수 있다. 또한 AI가 건강 상태와 일정 밀도를 함께 고려해 무리한 계획을 줄여 주고, 음성으로 말한 내용도 바로 기록할 수 있다.
핵심 사용 흐름 :
- 오늘 할 일을 빠르게 입력한다.
- 중요한 항목을 위로 올린다.
- 집중 타이머를 시작해 작업 시간을 기록한다.
- 반복 루틴을 체크해 습관 달성 여부를 남긴다.
- 오늘 요약을 보고 남은 작업과 완료 항목을 확인한다.
============================================================================
계기
기존 일정 앱은 너무 범용적이거나 복잡해서, “오늘 뭐부터 해야 하는지”를 바로 보여주기 어려운 경우가 많음. 따라서 할 일, 일정, 집중 타이머, 반복 루틴만 모은 단순하고 빠른 생활용 계획 도구를 만들게 됨.
============================================================================
핵심 화면
┌─────────────────────────────────────────────────────────────────────┐
│ 1. 홈/오늘 화면 (Main Dashboard) - 레이아웃 요약 │
├─────────────────────────────────────────────────────────────────────┤
│ 데스크톱: [좌측 제어 35%] | [우측 메인 65%] │
│ 모바일: [상단 제어 50%] + [하단 메인 50%] │
│ 전환점: 뷰포트 ≤ 768px 시 모바일 레이아웃 적용 │
└─────────────────────────────────────────────────────────────────────┘
1-A. 제어 패널 상세 (Control Panel) - 5개 섹션 구성
섹션 A: 오늘 요약
├─ 상태 표시: "할 일 4개" | "집중 2회" | "마감 1개"
├─ 버튼: [오늘 정리]
└─ 스펙: 카드형, 100% 폭, 48px 최소 높이
섹션 B: 할 일 추가
├─ 입력필드: 플레이스홀더 "예: 영어 단어 20개 외우기"
├─ 버튼: [추가] | [빠른 추가]
├─ 옵션: 우선순위(높음/보통/낮음), 마감일 선택
└─ 스펙: 입력창 40px, 추가 버튼 #2196F3
섹션 C: 집중 타이머
├─ 표시: 25:00 기본 포모도로
├─ 버튼: [시작] | [일시정지] | [리셋]
├─ 옵션: 25/50/90분 프리셋
└─ 스펙: 활성 색상 #FF9800, 44px 이상
섹션 D: 반복 루틴
├─ 버튼 3개
│ ├─ [운동 체크] (#4CAF50)
│ ├─ [약 복용] (#9C27B0)
│ └─ [독서 체크] (#FF5722)
└─ 결과: 체크 시 날짜 기록 및 연속 달성 표시
섹션 E: 상태 메시지
├─ 높이: 고정 60px
├─ 샘플:
│ ├─ 처리 중: "저장 중입니다..."
│ ├─ 성공: "할 일이 추가되었습니다."
│ └─ 에러: "입력값을 확인해 주세요."
└─ 폰트: 13px, 색상 #333
1-B. 메인 영역 (Main Area)
* 구성 요소:
- 오늘 할 일 목록
- 마감 임박 항목
- 오늘 완료한 항목
- 집중 세션 기록
* 정렬:
- 마감일 빠른 순
- 우선순위 높은 순
* 상호작용:
- 항목 클릭 시 완료/미완료 토글
- 드래그로 순서 변경 가능
- 항목 펼침 시 메모 표시
┌─────────────────────────────────────────────────────────────────────┐
│ 2. 결과/기록 영역 (Activity Panel) │
├─────────────────────────────────────────────────────────────────────┤
│ 활성화: 할 일 추가, 타이머 종료, 루틴 체크 시 업데이트 │
│ 초기: "오늘의 기록이 아직 없습니다." │
└─────────────────────────────────────────────────────────────────────┘
구조:
├─ 헤더: "오늘의 기록 (6개)"
├─ 컬럼: [순번 | 항목 | 시간 | 상태]
├─ 정렬: 최신 순 / 완료 순 전환 가능
├─ 아이템 높이: 44px
└─ 최대 표시: 10개, 스크롤 활성화
예시 결과:
1. 영어 단어 20개 | 09:10 | 완료
2. 회의 자료 확인 | 10:30 | 진행 중
3. 운동 체크 | 18:00 | 완료
4. 독서 30분 | 22:10 | 완료
상호작용:
└─ 아이템 클릭 → 상세 메모/수정 패널 표시
- 상태 표시 체계 (State & Message System)
| 상태 | 아이콘 | 배경색 | 예시 메시지 |
|---|---|---|---|
| 처리 중 | ⏳ | #FFF3E0 | 저장 중입니다... |
| 성공 | ✓ | #E8F5E9 | 항목이 저장되었습니다. |
| 경고 | #FFF9C4 | 입력이 비어 있습니다. | |
| 에러 | ✗ | #FFEBEE | 요청이 실패했습니다. 다시 시도해 주세요. |
| AI 분석 중 | 🤖 | #E3F2FD | 컨디션과 일정을 분석하고 있습니다. |
| 음성 인식 중 | 🎙️ | #E8EAF6 | 말씀하신 일정을 정리하고 있습니다. |
- 반응형 레이아웃 (Responsive Breakpoints)
| 뷰포트 | 조건 | 레이아웃 구성 |
|---|---|---|
| 데스크톱 | ≥ 769px | 좌측 35% (제어) / 우측 65% (메인) |
| 태블릿 | 481~768px | 좌측 40% (제어) / 우측 60% (메인) |
| 모바일 | ≤ 480px | 상단 50% (제어) + 하단 50% (메인) |
버튼 너비: └─ 데스크톱/태블릿: 100% └─ 모바일: 100% 또는 3등분 버튼 영역
┌─────────────────────────────────────────────────────────────────────┐
│ 5. 디자인 원칙 및 스펙 (Design Guidelines) │
├─────────────────────────────────────────────────────────────────────┤
5-1. 색상 팔레트 (Color Palette)
├─ 기본 배경: #FFFFFF (메인) / #F5F5F5 (보조)
├─ 텍스트: #333333 (본문) / #666666 (보조)
├─ 기능별 강조:
│ ├─ 할 일 추가: #2196F3
│ ├─ 집중 타이머: #FF9800
│ ├─ 완료 상태: #4CAF50
│ ├─ 반복 루틴: #9C27B0
│ └─ 주의/마감: #F44336
└─ 비활성화: #CCCCCC 배경, #999999 텍스트
5-2. 타이포그래피 (Typography)
├─ 폰트군: sans-serif (Noto Sans 권장)
├─ 사이즈: 본문 14px, 제목 16px, 헤더 18px
└─ 라인높이: 1.5
5-3. 접근성 (Accessibility)
├─ 모든 버튼에 aria-label 추가
├─ 색상 + 아이콘/텍스트 병행
├─ 명도 대비: WCAG AA 4.5:1 이상
└─ 포커스 인디케이터: 파란색 테두리 2px
5-4. 상호작용 원칙 (Interaction)
├─ 핵심 흐름: 3회 이상 클릭 방지
├─ 버튼 문구: 동사 + 아이콘 조합
├─ 로딩: 스피너 + 메시지 표시
└─ 오류: 재시도 버튼 + 에러 코드 표시
└─────────────────────────────────────────────────────────────────────┘
============================================================================
기능 명세 (MVP)
FR-01. 오늘 화면 로드
- 입력: 페이지 접속
- 처리: 오늘 할 일, 타이머, 최근 루틴 요약 표시
- 출력: 메인 대시보드 렌더링
- 실패 처리: 로컬 데이터 로드 실패 시 빈 상태 안내 표시
FR-02. 할 일 추가
- 입력: 제목, 우선순위, 마감일
- 처리: 목록에 새 항목 추가
- 출력: 할 일 카드 표시
- 실패 처리: 빈 값/과도한 길이 입력 시 안내 메시지 표시
FR-03. 할 일 완료 처리
- 입력: 항목 클릭 또는 체크 버튼 클릭
- 처리: 완료 상태 토글 및 기록 저장
- 출력: 완료 목록 반영
- 실패 처리: 저장 실패 시 재시도 안내
FR-04. 집중 타이머 실행
- 입력: 시작 버튼 클릭
- 처리: 카운트다운 시작, 종료 시 알림
- 출력: 남은 시간 표시 및 세션 기록
- 실패 처리: 일시정지/복구 불가 시 상태 메시지 표시
FR-05. 반복 루틴 체크
- 입력: 운동/약 복용/독서 체크 버튼
- 처리: 날짜별 달성 기록 저장
- 출력: 연속 달성일 표시
- 실패 처리: 저장 실패 시 에러 메시지 출력
FR-06. 오늘 요약 자동 계산
- 입력: 현재 할 일/완료/타이머 기록
- 처리: 통계 계산
- 출력: 오늘 요약 카드 반영
- 실패 처리: 데이터 불일치 시 기본값 표시
FR-07. AI 일정 추천
- 입력: 할 일 목록, 건강 상태, 컨디션, 마감일, 집중 가능 시간
- 처리: 우선순위와 부하를 분석해 오늘 일정을 재배치
- 출력: 추천 일정, 조정 사유, 주의 포인트 표시
- 실패 처리: AI 분석 실패 시 기존 우선순위 정렬로 대체
FR-08. 음성 일정 입력
- 입력: 사용자가 말한 일정 문장
- 처리: 음성 인식 후 날짜, 시간, 제목을 추출해 초안 생성
- 출력: 할 일 또는 일정 초안 카드 표시
- 실패 처리: 음성 인식 실패 시 수동 입력창으로 전환
============================================================================
비기능 요구사항
NFR-01. 성능
- 첫 화면은 3초 이내 로드되어야 함
- 할 일 추가는 1초 이내 반응해야 함
- 중복 클릭 시 중복 저장이 발생하지 않아야 함
- 검색/저장 중에는 버튼을 비활성화해 중복 요청을 차단해야 함
- 타이머는 브라우저 탭 전환 이후에도 상태가 크게 어긋나지 않아야 함
NFR-02. 사용성
- 모바일 1열, 데스크톱 2열 레이아웃 자동 전환
- Enter 키로 할 일 추가 가능
- 집중 타이머는 1클릭 시작 가능
- 모든 주요 기능은 버튼 문구만 보고도 역할을 알 수 있어야 함
- 처음 보는 사용자도 도움말 없이 주요 기능을 찾을 수 있어야 함
NFR-03. 접근성
- 버튼/입력 요소에 명확한 라벨 제공
- 상태 메시지 영역으로 현재 처리 상태 표시
- 색상만으로 완료 상태를 전달하지 않음
- 키보드만으로 입력, 추가, 체크, 타이머 제어가 가능해야 함
- 포커스 상태가 명확히 보여야 함
NFR-04. 신뢰성
- 로컬 저장 실패 시 앱 전체가 멈추지 않아야 함
- 각 기능은 독립적으로 실패/복구 가능해야 함
- 외부 저장소가 없더라도 최소 기능은 계속 동작해야 함
- 오류 메시지는 원인과 다음 행동을 함께 제시해야 함
NFR-05. AI 보조 품질
- AI 추천은 사용자 컨디션과 일정 우선순위를 함께 반영해야 함
- AI가 제안한 일정은 반드시 사용자가 적용 여부를 선택할 수 있어야 함
- 음성 입력은 인식 실패 시 수동 입력으로 즉시 전환 가능해야 함
- AI 기능이 실패해도 기본 일정 관리 기능은 영향을 받지 않아야 함
============================================================================
기술 설계
- 프론트엔드
- HTML + CSS + JavaScript
- 단일 페이지 기반 구조
- 상태 관리: 로컬 객체 + localStorage
- 컴포넌트 분리 기준: 입력 영역, 목록 영역, 상태 영역, 타이머 영역
상태 관리 전략
- 화면 상태와 저장 상태를 분리해서 관리
- 저장 성공/실패 여부를 별도 메시지로 표시
- 탭 새로고침 후에도 오늘 데이터가 복원되도록 설계
- 외부 의존성
- MVP: 외부 API 미사용 가능
- 차기: 캘린더 연동 Google Calendar / ICS 검토
- 향후: 알림 권한 기반 브라우저 Notification 연동
- 장기적으로는 서버 동기화와 멀티디바이스 연동을 검토
- 데이터 저장
- MVP: localStorage
- 차기: 최근 입력, 반복 루틴, 사용자 설정 저장
- 향후: 계정 연동 시 서버 DB 도입 검토
- 저장 단위는 할 일, 집중 세션, 루틴, 환경설정으로 나눔
- AI/음성 처리
- 음성 입력은 브라우저 음성 인식 API 또는 외부 STT 연동을 검토
- AI 일정 조정은 추천 결과만 제공하고 최종 반영은 사용자 확인을 거침
- 건강 상태 데이터는 최소 입력 원칙을 적용해 민감 정보를 과도하게 수집하지 않음
- AI 상세 설계
5-1. AI 입력 신호
- 할 일 데이터: 제목, 마감일, 예상 소요 시간, 우선순위, 완료 여부
- 캘린더 데이터: 일정 시간, 이동 시간, 겹침 여부, 반복 일정 여부
- 컨디션 데이터: 수면 시간, 피로도, 운동 여부, 복약 여부, 집중 가능 시간
- 사용자 행동 데이터: 자주 미루는 시간대, 자주 완료하는 시간대, 반복 취소 패턴
- 환경 데이터: 현재 시각, 요일, 휴식 간격, 장시간 집중 가능 여부
5-2. AI 판단 규칙
- 하드 제약: 이미 잡힌 일정, 약속 시간, 마감 시간은 우선 보존
- 소프트 제약: 추천 순서, 집중 시간, 휴식 배치는 AI가 조정 가능
- 건강 우선 규칙: 피로도가 높거나 수면이 부족하면 고부하 작업을 뒤로 이동
- 시간대 규칙: 사용자가 집중이 잘 되는 시간대에는 깊은 작업을 우선 배치
- 분산 규칙: 같은 종류의 고난도 작업이 연속으로 몰리지 않도록 분산
5-3. AI 출력 형식
- 오늘 추천 순서: 1번부터 N번까지 실행 순서 제공
- 재배치 사유: 왜 이 순서가 나왔는지 짧게 설명
- 주의 문구: 건강 상태나 시간 부족에 따른 경고 안내
- 대안안: 더 가볍게 처리하는 플랜 B 제안
- 사용자 액션: [적용], [수정], [무시]처럼 선택 버튼 제공
5-4. AI 신뢰도와 안전장치
- 신뢰도 높음: 바로 적용 가능한 추천으로 표시
- 신뢰도 보통: 추천 + 설명을 함께 표시하고 적용은 선택형으로 처리
- 신뢰도 낮음: 추천 대신 참고용 안내만 제공
- 불확실한 정보가 있으면 AI가 단정하지 않고 "추가 확인 필요"로 표시
- 민감 정보가 부족하면 건강 상태를 과도하게 추정하지 않음
5-5. 음성 입력 처리 흐름
- 1단계: 사용자가 "내일 3시에 병원 예약"처럼 자연어로 말함
- 2단계: 음성 인식 결과를 텍스트로 변환
- 3단계: 날짜, 시간, 장소, 제목, 메모 후보를 분리
- 4단계: 문장 내 시간 표현이 애매하면 후보를 여러 개 보여줌
- 5단계: 사용자가 초안 확인 후 저장 여부를 선택
5-6. 음성 입력 예외 처리
- 인식 실패: 수동 입력창으로 즉시 전환
- 시간 파싱 실패: "오후 3시" 같은 후보를 다시 선택하게 함
- 장소 파싱 실패: 제목만 저장하고 세부 정보는 나중에 보완 가능하게 함
- 잡음이 많은 환경: 짧은 확인 질문으로 재입력 유도
5-7. 추천 예시
- 수면 5시간 이하 + 피로도 높음: 가벼운 정리 작업과 짧은 업무를 앞에 배치
- 오후 집중 가능 시간 존재: 어려운 업무를 해당 구간에 배치
- 마감이 임박한 업무 존재: 일정 충돌보다 마감 우선으로 조정
- 운동 완료 상태: 후속 집중 업무 전에 짧은 휴식 삽입
5-8. 사용자 제어권
- AI가 바꾼 일정은 항상 사용자가 되돌릴 수 있어야 함
- 추천을 한 번 적용해도 원래 순서와 비교할 수 있어야 함
- 자동 수정이 마음에 들지 않으면 AI 기능을 끄고 일반 일정 모드로 사용 가능해야 함
============================================================================
보안
- 입력 검증
- 할 일 제목 길이 제한 1~80자
- 비정상 공백/제어 문자 제거
- 반복 루틴 이름은 허용 목록 기반 관리 가능
- 비어 있는 입력은 저장 전에 즉시 차단
- 너무 긴 메모는 별도 경고로 안내
- 요청 제어
- 저장 버튼 연속 클릭 시 중복 요청 방지
- 타이머 시작/정지는 상태 전이 기반 제어
- 동일한 작업은 처리 중일 때 재실행하지 않음
- 실패 후 재시도는 사용자가 명시적으로 누르도록 함
- 개인정보 보호
- 일정/메모는 기본적으로 브라우저 로컬 저장만 사용
- 서버 저장 시에는 사용자 동의 필수
- 민감 메모는 별도 암호화 검토
- 위치나 개인 일정은 외부로 자동 전송하지 않음
- 건강 상태 입력은 필수 항목만 받도록 설계하고, 민감 정보는 선택적으로 입력하게 함
- 운영 확장 시 필수 항목
- API 도입 시 프록시 서버 구성
- 로컬/서버 저장 분리
- 감사 로그 및 장애 추적 추가
- 키값은 클라이언트에 노출하지 않는 구조를 우선 검토
============================================================================
사용자 예상 시나리오
- 프로그램 접속
- 오늘 해야 할 일 확인
- 새 할 일 입력 후 추가
- 집중 타이머 시작
- 타이머 종료 후 완료 처리
- 반복 루틴 체크
- 오늘 요약 확인 후 종료
- 음성으로 "내일 오전 9시에 회의"를 말해 일정으로 저장
- AI 추천 일정이 컨디션에 맞는지 확인하고 적용 여부 선택
성공 시나리오 완료 기준
- 할 일 추가 성공
- 집중 타이머 1회 이상 실행 성공
- 반복 루틴 체크 성공
- 오늘 요약이 정상 갱신됨
============================================================================
현재 프로토타입 구현 상태 (2026-08-02)
- 문서화 상태
- 프로젝트 비전, 기능 범위, 시나리오 정의 필요
- MVP 요구사항 및 확장 계획 초안 상태
- 구현 상태
- 현재 저장소 기준 코드 파일은 미포함 상태
- 다음 단계에서 화면/기능 코드 구성 필요
- 즉시 착수 우선순위
- P1: 오늘 화면 + 할 일 추가 + localStorage 저장
- P2: 집중 타이머 + 완료 처리
- P3: 반복 루틴 + 모바일 UX 개선
============================================================================
개발 일정 (제안)
1주차
- 기본 화면 뼈대 구성
- 오늘 요약 및 할 일 추가 기능
2주차
- 집중 타이머 구현
- 완료 처리 및 목록 정렬
3주차
- 반복 루틴 체크 및 localStorage 저장
- 상태 메시지 개선
4주차
- 반응형 UI 품질 개선
- 사용자 테스트 및 버그 수정
============================================================================
테스트 체크리스트
기능 테스트
- 빈 할 일 입력 시 안내가 정확한가?
- 할 일 추가 후 새로고침해도 유지되는가?
- 타이머 시작/일시정지/리셋이 정상 동작하는가?
- 반복 루틴 체크가 날짜별로 저장되는가?
- 완료 처리와 미완료 복구가 정상 동작하는가?
- 마감일이 같은 항목끼리 우선순위 정렬이 유지되는가?
호환성 테스트
- Chrome, Edge 최신 버전에서 동작하는가?
- 모바일 해상도(360px~430px)에서 버튼 사용성이 유지되는가?
- 키보드만으로도 주요 기능을 사용할 수 있는가?
안정성 테스트
- localStorage 오류 시 앱이 멈추지 않는가?
- 반복 클릭 시 중복 저장이 과도하게 발생하지 않는가?
- 브라우저 새로고침 후 상태 복원에 문제가 없는가?
============================================================================
실행 방법 (코드 추가 이후 기준)
- 프로젝트 루트에서 로컬 서버 실행
Python: python -m http.server 5500
Node.js: npx serve .
- 브라우저에서 http://localhost:5500 접속
============================================================================
프로젝트 파일 구성 (목표)
- README.md : 프로젝트 설명 문서
- index.html : 화면 구조
- style.css : 스타일 및 반응형 레이아웃
- app.js : 할 일/타이머/루틴 로직
============================================================================
다음 버전 목표 (v0.2)
- 최근 할 일 자동완성
- 반복 루틴 템플릿 저장
- 캘린더 뷰 추가
- 알림 기능 추가
- 한국어/영어 UI 전환
- AI 일정 추천 및 음성 입력 정식 지원
장기 목표 (v1.0)
- 사용자 계정 및 클라우드 동기화
- 캘린더/할 일/메모 통합
- 개인화 추천 루틴 및 집중 패턴 분석
============================================================================
상세 명세 부록 A. 화면 단위 요구사항
A-1. 메인 화면 (Dashboard)
- 목적: 사용자가 1개 화면에서 핵심 동작을 끝낼 수 있도록 제공
- 필수 컴포넌트
- 할 일 입력창
- 오늘 요약 카드
- 집중 타이머
- 반복 루틴 버튼
- 상태 메시지 영역
- 오늘 기록 영역
- UI 규칙
- 버튼 최소 터치 영역: 44x44px 이상
- 본문 기본 폰트 크기: 14px 이상
- 주요 대비 비율: WCAG 기준 4.5:1 이상 목표
A-2. 모바일 화면
- 360px~430px 폭에서 1열 레이아웃
- 메인 카드 높이 최소 55vh 보장
- 스크롤 시 상단 요약이 먼저 보이도록 배치
A-3. 상태 메시지 문구 정책
- 처리 시작: "저장 중입니다..."
- 처리 성공: "할 일이 추가되었습니다."
- 처리 실패: 원인 + 다음 행동 제시
- 예: "입력값을 확인해 주세요."
==============================================================================
상세 명세 부록 B. 데이터 저장 스펙
B-1. 할 일 항목 구조
- id: string
- title: string
- priority: high | normal | low
- dueDate: string | null
- completed: boolean
- createdAt: string
- updatedAt: string
B-2. 집중 세션 구조
- id: string
- durationMinutes: number
- startedAt: string
- endedAt: string | null
- status: running | paused | done
B-3. 반복 루틴 구조
- id: string
- name: string
- checkedDates: string[]
- streak: number
- lastCheckedAt: string | null
B-4. localStorage 키 설계
lps-settings
language: ko | en
timerDurationMinutes: number
showCompletedItems: boolean
lps-todos
[ ...할 일 배열... ]
lps-focus-sessions
[ ...집중 세션 배열... ]
lps-routines
[ ...반복 루틴 배열... ]
==============================================================================
상세 명세 부록 C. 상태 전이 (State Flow)
C-1. 초기 상태
S0: READY
C-2. 할 일 추가
S0 -> S1(ADDING) -> S2(ADDED) 또는 E1(VALIDATION_FAIL)
C-3. 집중 타이머
S0/S2 -> S3(TIMER_RUNNING) -> S4(TIMER_PAUSED) -> S5(TIMER_DONE)
C-4. 반복 루틴 체크
S0/S2 -> S6(ROUTINE_CHECKING) -> S7(ROUTINE_DONE) 또는 E2(STORAGE_FAIL)
==============================================================================
상세 명세 부록 D. 에러 코드 표준
| 코드 | 에러 타입 | 원인 | 사용자 메시지 |
|---|---|---|---|
| LPS-001 | EMPTY_TODO_TITLE | 할 일 제목 미입력 | 할 일을 입력해 주세요. |
| LPS-002 | TITLE_TOO_LONG | 제목 길이 초과 | 제목은 80자 이내로 입력해 주세요. |
| LPS-003 | STORAGE_UNAVAILABLE | localStorage 저장 실패 | 저장할 수 없습니다. 브라우저 설정을 확인해 주세요. |
| LPS-004 | TIMER_STATE_INVALID | 잘못된 타이머 상태 | 타이머 상태를 다시 확인해 주세요. |
| LPS-005 | ROUTINE_NOT_FOUND | 루틴 항목 없음 | 해당 루틴을 찾을 수 없습니다. |
==============================================================================
상세 명세 부록 E. 보안/운영 정책 상세
E-1. 입력 정책:
* 할 일 제목 최대 길이: 80자
* 허용 문자: 일반 텍스트 + 숫자 + 공백 + 기본 구두점
* 스크립트 삽입 패턴 발견 시 입력 무효 처리
E-2. 저장 정책:
* 할 일 추가 직후 즉시 저장
* 저장 실패 시 앱은 계속 동작
* 중요한 상태는 새로고침 후 복구 가능해야 함
E-3. 장애 대응:
* localStorage 오류 발생 시 메모리 상태로 임시 운영
* 재시도 버튼 노출
* 데이터 손실 가능성은 즉시 사용자에게 고지
E-4. 향후 서버 도입 시:
* 서버는 동기화용 역할만 수행
* 민감 메모는 암호화 고려
* 클라이언트는 프록시 엔드포인트만 호출
==============================================================================
상세 명세 부록 F. 테스트 시나리오 (상세)
F-1. 정상 흐름:
1. 할 일 "영단어 20개" 입력
2. 추가 버튼 클릭
3. 집중 타이머 시작
4. 기대결과: 할 일 추가 및 타이머 상태 반영
F-2. 빈 입력 흐름:
1. 빈 입력 상태에서 추가 버튼 클릭
2. 기대결과: 경고 메시지 출력
F-3. 저장 오류 흐름:
1. 브라우저 저장 제한 상황 유도
2. 할 일 추가 실행
3. 기대결과: 앱 중단 없이 오류 메시지 출력
F-4. 반복 클릭 흐름:
1. 추가 버튼 연속 5회 클릭
2. 기대결과: 중복 저장 제한, UI 멈춤 없음
==============================================================================
상세 명세 부록 G. 릴리스 기준 (Definition of Done)
MVP 릴리스 조건:
핵심 기능 FR-01~FR-06 전부 동작
주요 에러 코드 LPS-001~LPS-005 처리
모바일 360px 환경에서 기능 사용 가능
Chrome/Edge 최신 버전 수동 테스트 통과
README 실행 방법만으로 팀원이 재현 가능
- 핵심 기능 FR-01~FR-06 전부 동작
- 주요 에러 코드 LPS-001~LPS-005 처리
- 모바일 360px 환경에서 기능 사용 가능
- Chrome/Edge 최신 버전 수동 테스트 통과
- README 실행 방법만으로 팀원이 재현 가능
==============================================================================
상세 명세 부록 H. 작업 분해 (권장 태스크)
| 태스크 ID | 제목 | 산출물 | 우선순위 |
|---|---|---|---|
| FE-001 | 오늘 화면 기본 렌더링 | 대시보드, 요약 카드 | P1 |
| FE-002 | 할 일 추가/삭제 | 입력, 목록, 저장 | P1 |
| FE-003 | 완료 처리 | 체크 토글, 기록 반영 | P1 |
| FE-004 | 집중 타이머 | 시작, 일시정지, 종료 알림 | P2 |
| FE-005 | 반복 루틴 | 루틴 체크, streak 관리 | P2 |
| FE-006 | 상태 메시지 체계화 | 코드별 사용자 메시지 표준화 | P2 |
| FE-007 | 모바일 UI 개선 | 360px 기준 레이아웃 검증 | P3 |
==============================================================================
상세 명세 부록 I. 향후 확장 아키텍처 (요약)
I-1. 현재:
Browser -> Local State / localStorage
I-2. 확장형:
Browser -> Backend Sync -> Cloud Storage / Calendar API
장점:
- 기기 간 동기화
- 알림/캘린더 통합
- 분석 및 추천 기능 추가
============================================================================