생활 계획 및 시간 프로그램 (Life Plan Scheduler, LPS)

============================================================================

프로그램명 : 생활 계획 및 시간 프로그램 (Life Plan Scheduler, LPS)

프로그램 한 줄 소개 : 설치 없이 웹에서 오늘 할 일, 일정, 집중 시간, 반복 루틴을 빠르게 관리하는 실전형 생활 계획 서비스

문서 목적 : 실제 구현 전에 화면, 흐름, 데이터, 예외 처리 기준을 한 번에 합의하기 위한 기획 문서

문서 범위 : MVP에서는 할 일 관리, 집중 타이머, 반복 루틴, 상태 메시지, localStorage 저장까지만 포함

설계 원칙 : 설치 없이 즉시 사용 가능해야 하며, 핵심 기능은 3단계 이내로 끝나야 하고, 실패하더라도 앱 전체는 유지되어야 함

문서 버전 : v0.1-spec 문서 기준일 : 2026-08-02 프로젝트 상태 : 기획 초안 단계

============================================================================

기능 정리

• 핵심 기능 :

1. 웹 접속 즉시 할 일 확인 및 추가
   • 로그인 없이 바로 오늘 할 일을 등록하고 확인할 수 있음
   • 제목, 우선순위, 마감일을 함께 저장할 수 있음
2. 오늘 일정과 마감일 한 화면 관리
   • 오늘 해야 할 일과 마감이 가까운 항목을 분리해서 보여줌
   • 중요도가 높은 항목이 먼저 보이도록 정렬 가능
3. 집중 타이머(Pomodoro) 실행
   • 기본 25분, 확장 시 50/90분 프리셋을 제공
   • 시작, 일시정지, 리셋을 한 화면에서 처리
4. 반복 루틴 및 습관 체크
   • 운동, 약 복용, 독서처럼 매일 반복되는 행동을 체크할 수 있음
   • 날짜별 기록과 연속 달성일을 저장할 수 있음
5. 오늘의 우선순위 자동 정리
   • 마감일과 우선순위 기준으로 오늘 우선 작업을 정리
   • 사용자가 정리 기준을 직접 손대지 않아도 되도록 설계

• AI 보조 기능 :

1. 건강 상태/컨디션 기반 일정 재조정
   • 수면 시간, 피로도, 운동 여부, 약 복용 여부를 반영해 오늘 일정을 다시 배치
   • 무리한 일정은 뒤로 미루고, 에너지 수준이 낮을 때는 가벼운 업무를 먼저 제안
2. 음성 일정 입력
   • 사용자가 말한 내용을 일정/할 일 항목으로 자동 변환
   • 예: "내일 오후 3시에 병원 예약" → 날짜, 시간, 제목을 분리해서 저장
3. AI 요약 안내
   • 오늘 해야 할 일, 건강상 주의점, 집중하기 좋은 시간대를 한 줄 요약으로 제안
   • 사용자는 추천안을 보고 적용 여부를 선택

• 부가 기능 :

1. 오늘 할 일 우선순위 정렬
   • 높은 우선순위 항목을 상단에 고정할 수 있음
2. 모바일/PC 반응형 화면
   • 360px부터 데스크톱까지 하나의 화면 규칙으로 대응
3. 빠른 사용 안내 및 단축키 도움말
   • 처음 들어온 사용자가 1분 안에 기능을 이해하도록 안내
4. 한국어 우선 UI + 영어 확장 준비
   • 버튼과 상태 메시지 모두 다국어 확장 구조를 고려
5. 최근 입력/즐겨찾기 루틴 저장
   • 자주 쓰는 루틴을 빠르게 다시 등록할 수 있도록 지원
6. AI 기반 일정 추천
   • 건강 상태, 집중 가능 시간, 마감일을 함께 고려한 추천 일정 제공
   • 과부하가 예상되면 작업량을 줄이고 분산 배치를 제안

프로젝트 목표 :

• 사용자는 3분 안에 오늘 계획을 정리할 수 있어야 함
  • 접속 후 오늘 할 일 확인, 추가, 완료 전환까지 한 흐름으로 끝내는 것을 목표로 함
• 집중 타이머는 1클릭으로 시작 가능해야 함
  • 사용자가 시작 버튼만 누르면 별도 설정 없이 바로 집중 세션에 들어가야 함
• 복잡한 설정 없이 브라우저만으로 바로 사용 가능해야 함
  • 설치, 회원가입, 서버 로그인 없이 바로 쓸 수 있어야 함
• 반복 루틴은 하루 10초 내 체크 가능해야 함
  • 자주 하는 습관은 최소한의 클릭으로 기록될 수 있어야 함
• AI 추천은 사용자의 컨디션과 우선순위를 함께 반영해야 함
  • 수면 부족, 피로 누적, 운동 여부 같은 상태를 고려해 일정 강도를 조절해야 함
• 음성 입력은 1문장으로 일정 추가가 가능해야 함
  • 사용자가 말한 일정이 자동으로 날짜, 시간, 제목 형태로 정리되어야 함

정량 목표 (MVP 기준) :

• 첫 화면 로딩 목표: 3초 이내
• 할 일 추가 반응 목표: 1초 이내
• 타이머 시작 반응 목표: 1초 이내
• 타이머 종료 알림 반응 목표: 1초 이내
• 모바일 화면 대응 폭: 360px 이상
• 기본 작업 완료 클릭 수: 3회 이하
• localStorage 저장 실패 시에도 화면 유지율: 100%
• 음성 입력 후 초안 생성 목표: 2초 이내
• AI 일정 추천 응답 목표: 3초 이내

============================================================================

사용자 페르소나

• A. 학생

  • 공부 계획을 자주 세우지만 잘 흐트러짐
  • 목표: 오늘 공부할 것과 집중 시간을 빠르게 관리

• B. 직장인

  • 회의, 마감, 개인 업무가 섞여 있음
  • 목표: 오늘 해야 할 일을 우선순위대로 정리

• C. 생활 루틴 관리 사용자

  • 운동, 약 복용, 독서 같은 반복 습관을 챙기고 싶음
  • 목표: 매일 반복되는 일을 잊지 않고 체크

• D. 건강 상태 기반 일정 조정 사용자

  • 수면, 피로, 운동량, 복약 상태에 따라 하루 일정을 조정하고 싶음
  • 목표: 내 컨디션에 맞는 일정 강도와 순서를 추천받기

기대 효과 : 사용자는 계획을 따로 정리할 필요 없이 한 화면에서 오늘의 일정과 할 일을 확인할 수 있고, 집중 시간 관리까지 이어서 수행할 수 있다. 또한 AI가 건강 상태와 일정 밀도를 함께 고려해 무리한 계획을 줄여 주고, 음성으로 말한 내용도 바로 기록할 수 있다.

핵심 사용 흐름 :

1. 오늘 할 일을 빠르게 입력한다.
2. 중요한 항목을 위로 올린다.
3. 집중 타이머를 시작해 작업 시간을 기록한다.
4. 반복 루틴을 체크해 습관 달성 여부를 남긴다.
5. 오늘 요약을 보고 남은 작업과 완료 항목을 확인한다.

============================================================================

계기

기존 일정 앱은 너무 범용적이거나 복잡해서, “오늘 뭐부터 해야 하는지”를 바로 보여주기 어려운 경우가 많음. 따라서 할 일, 일정, 집중 타이머, 반복 루틴만 모은 단순하고 빠른 생활용 계획 도구를 만들게 됨.

============================================================================

핵심 화면

┌─────────────────────────────────────────────────────────────────────┐
│ 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 | 완료

   상호작용:
   └─ 아이템 클릭 → 상세 메모/수정 패널 표시

3. 상태 표시 체계 (State & Message System)

상태	아이콘	배경색	예시 메시지
처리 중	⏳	#FFF3E0	저장 중입니다...
성공	✓	#E8F5E9	항목이 저장되었습니다.
경고	⚠️	#FFF9C4	입력이 비어 있습니다.
에러	✗	#FFEBEE	요청이 실패했습니다. 다시 시도해 주세요.
AI 분석 중	🤖	#E3F2FD	컨디션과 일정을 분석하고 있습니다.
음성 인식 중	🎙️	#E8EAF6	말씀하신 일정을 정리하고 있습니다.

4. 반응형 레이아웃 (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 기능이 실패해도 기본 일정 관리 기능은 영향을 받지 않아야 함

============================================================================

기술 설계

1. 프론트엔드

• HTML + CSS + JavaScript
• 단일 페이지 기반 구조
• 상태 관리: 로컬 객체 + localStorage
• 컴포넌트 분리 기준: 입력 영역, 목록 영역, 상태 영역, 타이머 영역

상태 관리 전략

• 화면 상태와 저장 상태를 분리해서 관리
• 저장 성공/실패 여부를 별도 메시지로 표시
• 탭 새로고침 후에도 오늘 데이터가 복원되도록 설계

2. 외부 의존성

• MVP: 외부 API 미사용 가능
• 차기: 캘린더 연동 Google Calendar / ICS 검토
• 향후: 알림 권한 기반 브라우저 Notification 연동
• 장기적으로는 서버 동기화와 멀티디바이스 연동을 검토

3. 데이터 저장

• MVP: localStorage
• 차기: 최근 입력, 반복 루틴, 사용자 설정 저장
• 향후: 계정 연동 시 서버 DB 도입 검토
• 저장 단위는 할 일, 집중 세션, 루틴, 환경설정으로 나눔

4. AI/음성 처리

• 음성 입력은 브라우저 음성 인식 API 또는 외부 STT 연동을 검토
• AI 일정 조정은 추천 결과만 제공하고 최종 반영은 사용자 확인을 거침
• 건강 상태 데이터는 최소 입력 원칙을 적용해 민감 정보를 과도하게 수집하지 않음

5. 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. 입력 검증

• 할 일 제목 길이 제한 1~80자
• 비정상 공백/제어 문자 제거
• 반복 루틴 이름은 허용 목록 기반 관리 가능
• 비어 있는 입력은 저장 전에 즉시 차단
• 너무 긴 메모는 별도 경고로 안내

2. 요청 제어

• 저장 버튼 연속 클릭 시 중복 요청 방지
• 타이머 시작/정지는 상태 전이 기반 제어
• 동일한 작업은 처리 중일 때 재실행하지 않음
• 실패 후 재시도는 사용자가 명시적으로 누르도록 함

3. 개인정보 보호

• 일정/메모는 기본적으로 브라우저 로컬 저장만 사용
• 서버 저장 시에는 사용자 동의 필수
• 민감 메모는 별도 암호화 검토
• 위치나 개인 일정은 외부로 자동 전송하지 않음
• 건강 상태 입력은 필수 항목만 받도록 설계하고, 민감 정보는 선택적으로 입력하게 함

4. 운영 확장 시 필수 항목

• API 도입 시 프록시 서버 구성
• 로컬/서버 저장 분리
• 감사 로그 및 장애 추적 추가
• 키값은 클라이언트에 노출하지 않는 구조를 우선 검토

============================================================================

사용자 예상 시나리오

1. 프로그램 접속
2. 오늘 해야 할 일 확인
3. 새 할 일 입력 후 추가
4. 집중 타이머 시작
5. 타이머 종료 후 완료 처리
6. 반복 루틴 체크
7. 오늘 요약 확인 후 종료
8. 음성으로 "내일 오전 9시에 회의"를 말해 일정으로 저장
9. AI 추천 일정이 컨디션에 맞는지 확인하고 적용 여부 선택

성공 시나리오 완료 기준

• 할 일 추가 성공
• 집중 타이머 1회 이상 실행 성공
• 반복 루틴 체크 성공
• 오늘 요약이 정상 갱신됨

============================================================================

현재 프로토타입 구현 상태 (2026-08-02)

1. 문서화 상태

• 프로젝트 비전, 기능 범위, 시나리오 정의 필요
• MVP 요구사항 및 확장 계획 초안 상태

2. 구현 상태

• 현재 저장소 기준 코드 파일은 미포함 상태
• 다음 단계에서 화면/기능 코드 구성 필요

3. 즉시 착수 우선순위

• P1: 오늘 화면 + 할 일 추가 + localStorage 저장
• P2: 집중 타이머 + 완료 처리
• P3: 반복 루틴 + 모바일 UX 개선

============================================================================

개발 일정 (제안)

1주차

• 기본 화면 뼈대 구성
• 오늘 요약 및 할 일 추가 기능

2주차

• 집중 타이머 구현
• 완료 처리 및 목록 정렬

3주차

• 반복 루틴 체크 및 localStorage 저장
• 상태 메시지 개선

4주차

• 반응형 UI 품질 개선
• 사용자 테스트 및 버그 수정

============================================================================

테스트 체크리스트

기능 테스트

• 빈 할 일 입력 시 안내가 정확한가?
• 할 일 추가 후 새로고침해도 유지되는가?
• 타이머 시작/일시정지/리셋이 정상 동작하는가?
• 반복 루틴 체크가 날짜별로 저장되는가?
• 완료 처리와 미완료 복구가 정상 동작하는가?
• 마감일이 같은 항목끼리 우선순위 정렬이 유지되는가?

호환성 테스트

• Chrome, Edge 최신 버전에서 동작하는가?
• 모바일 해상도(360px~430px)에서 버튼 사용성이 유지되는가?
• 키보드만으로도 주요 기능을 사용할 수 있는가?

안정성 테스트

• localStorage 오류 시 앱이 멈추지 않는가?
• 반복 클릭 시 중복 저장이 과도하게 발생하지 않는가?
• 브라우저 새로고침 후 상태 복원에 문제가 없는가?

============================================================================

실행 방법 (코드 추가 이후 기준)

1. 프로젝트 루트에서 로컬 서버 실행

Python: python -m http.server 5500

Node.js: npx serve .

2. 브라우저에서 http://localhost:5500 접속

============================================================================

프로젝트 파일 구성 (목표)

• README.md : 프로젝트 설명 문서
• index.html : 화면 구조
• style.css : 스타일 및 반응형 레이아웃
• app.js : 할 일/타이머/루틴 로직

============================================================================

다음 버전 목표 (v0.2)

1. 최근 할 일 자동완성
2. 반복 루틴 템플릿 저장
3. 캘린더 뷰 추가
4. 알림 기능 추가
5. 한국어/영어 UI 전환
6. AI 일정 추천 및 음성 입력 정식 지원

장기 목표 (v1.0)

1. 사용자 계정 및 클라우드 동기화
2. 캘린더/할 일/메모 통합
3. 개인화 추천 루틴 및 집중 패턴 분석

============================================================================

상세 명세 부록 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 실행 방법만으로 팀원이 재현 가능

1. 핵심 기능 FR-01~FR-06 전부 동작
2. 주요 에러 코드 LPS-001~LPS-005 처리
3. 모바일 360px 환경에서 기능 사용 가능
4. Chrome/Edge 최신 버전 수동 테스트 통과
5. 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

장점:
- 기기 간 동기화
- 알림/캘린더 통합
- 분석 및 추천 기능 추가

============================================================================