Life OS — Design History

Stage 1 — 5/2 오전 | 초기 무드보드

다크 배경 + 멀티 컬러

3가지 컬러 팔레트, 4가지 폰트 조합, 캐릭터별 액센트 컬러를 비교하는 초기 무드보드.

배경: 다크 (#0f0f0f)
팔레트 A: Teal Productivity (#0D9488 + #EA580C)
팔레트 B: Mono + Blue (#18181B + #2563EB)
팔레트 C: Calm Lavender (#8B5CF6 + #059669)
캐릭터 액센트: 진(Slate) / 모미(Emerald) / 마음(Violet)
타이포: Outfit / Plus Jakarta Sans / Sora / DM Sans + Noto Sans KR

컬러 팔레트 3종 폰트 4종 비교 캐릭터 액센트 아키텍처 설계 DB 스키마

무드보드 열기

Stage 2 — 5/2 오전 | 디자인 전환

흰 배경 + 텍스트 중심 + 단일 컬러

"배경 흰색, 색 최소화, 형태 최소화, 시간에 따른 컬러 하나만" 피드백 반영.

배경: 순백 (#FFFFFF)
텍스트: 100% Black(#000) 강조 + 80% Gray(#333) 본문
형태: 카드/테두리/그림자 전부 제거 → 여백과 구분선만
색: 유일한 색 하나가 시간에 따라 변함
시간 컬러 3옵션: Blue Cycle / Warm Shift / Ink
폰트 확정: Outfit(영문 제목) + Noto Sans KR(한글 본문)

다크 → 흰 배경 멀티 컬러 → 단일 컬러 3가지 팔레트 → 시간 기반 1컬러 텍스트 계층 (Black/Gray)

무드보드 v2 열기

* 무드보드 파일은 v2(흰 배경)로 덮어써짐

Stage 3 — 5/2 오후 | 인터랙티브 프로토타입

날씨 헤더 + 브리핑 화면

실제 브리핑 화면을 인터랙티브 HTML로 구현. 시간대/컬러 전환 가능.

날씨 헤더: 하늘 그라디언트 12종 (morning/afternoon/evening/night × blue/warm/ink)
기온 표시: 5.4rem 대형 폰트 + 맑음/최저/최고
인사말: Good Morning/Afternoon/Evening/Night 자동 전환
3블록 브리핑: Yesterday(취소선) / Today / Recommendation(액센트 선)
캐릭터 탭: 진(Butler) / 모미(Trainer) / 마음(Coach)
디자인 조정: 그라디언트 폭, 온도 위치, 영역 높이 등 여러 차례 미세조정

하늘 그라디언트 12종 시간대 전환 기온 + 날씨 3블록 브리핑 캐릭터 탭

브리핑 프로토타입 열기

Stage 4 — 5/2 저녁 | design1 (Next.js 앱)

실제 앱 구현 + DB 연동

프로토타입을 Next.js 앱으로 구현. Supabase DB, AI 대화, Todo, Google Calendar 연동.

하단 3탭: 진 / 모미 / 마음
홈: 날씨 헤더 + Daily Insight + Today/Tomorrow/Yesterday + Recommendation + Todo
모미 탭: Health Status 입력 (수면/컨디션/운동) + AI 대화
마음 탭: 감정 선택 + AI 대화
설정: 톱니바퀴 팝업에서 API 키 입력
DB: Supabase — health_logs, journal_entries, chat_messages, todos, schedules
배포: Vercel (life-os-7wj2.vercel.app)

Next.js 16 Supabase ChatGPT API Vercel Todo 리스트 Health 입력 AI 대화 Google Calendar 데이터

* design1 태그로 GitHub에 보존

Stage 5 — 5/3 오전 | 기록 탭 + 네비게이션 기획

Diary 시안 + Nav A vs B + 친구들 합동

날짜별 다이어리 화면 기획. 3가지 네비게이션 옵션 시안 비교.

Diary 시안: 날짜 스크롤 피커 + Health/Emotion/Schedule/Conversations 표시
기록 있는 날 vs 없는 날: 두 화면 비교
스케줄 3일: 오늘/내일/모레 일정 동시 표시
Nav Option A: 3탭 (홈/기록/설정) + 홈 내부에 진/모미/마음
Nav Option B: 5탭 (홈/모미/마음/기록/설정) → 각 캐릭터 독립
친구들 합동: 모미+마음 한 대화방, 키워드로 자동 분기
최종 선택: 4탭 (홈/친구들/기록/설정)

Diary 시안 Nav A vs B 비교 친구들 합동 대화방 3탭 → 4탭 결정

Diary 시안 Nav A vs B 친구들 시안

Stage 6 — 5/3 오후 | design2 (현재)

하루 캐릭터 + 퍼포먼스 대시보드

모미+마음 → "하루" 통합 비서. 기록 탭에 Today/Week/Month 서브 탭. 블루 계열 통일.

하단 4탭: 홈 / 하루(Assistant) / 기록(Diary) / 설정(Settings)
하루 캐릭터: 진+모미+마음 통합 만능 비서, 모든 주제 대화 가능
Daily Insight: DB에서 건강/감정/스케줄 실시간 조합 (30분 갱신)
Recommendation: 하루 대화 내용 기반 팁 추출 + 체크 기능 (1시간 갱신)
기록 Today: 날짜 스크롤 피커 + Health/Emotion/Schedule + Memo + Daily Review 4질문
기록 Week: 달성률 카드 + 수면 바 차트 + 감정 흐름 + 한줄 요약
기록 Month: 히트맵 캘린더 + 30일 차트(수면/컨디션/달성률) + 감정 분포 + 월간 요약
컬러 룰: 블루(#60A5FA) = 달성/7h+, 그레이(#E6E6E6) = 미달성
Daily Review 4질문: 감사/완료/내일/나에게 한마디

친구들 → 하루 모미+마음 → 통합 비서 Week 대시보드 Month 대시보드 Recommendation 체크 Daily Review 4질문 달성률 DB 저장 컬러 통일 (블루+그레이) 모미/마음 독립 탭 친구들 탭

* design2 초기 태그로 GitHub에 보존.

Stage 7 — 5/3~4 | design2 확장 (현재)

루틴 시스템 + 리포트/회고 + MI 공감 대화

습관 추적, 자동 리포트, 회고 시스템, 하루 대화 스타일 전면 개편. "기록하고 돌아보고 개선하는" 완전한 생산성 사이클 완성.

루틴 시스템
- 홈: Today 아래 Routine 섹션 — 체크 토글, 연속 일수, 🔥(3일+), "잊지 않으셨죠?"
- 하루 대화로 루틴 추가/삭제 ("명상 루틴 추가해줘")
- 기록 Today: 루틴 완료 상태 + 연속 기록 요약
- 기록 Month: 루틴별 달성률 프로그래스 바
주간/월간 리포트 (자동 문장)
- Week: "이번 주는 7일 중 5일을 기록하셨어요. 수면은 평균 5.7시간으로..."
- Month: "5월은 30일 중 20일을 기록하셨어요. 건강 면에서 평균 수면 6.2시간..."
- 데이터 기반 자동 생성 — 수면, 컨디션, 운동, 감정, 루틴, Recommendation 달성률 종합
회고 시스템 (직접 입력)
- Week: 다음 주 다짐 + 한줄 소감
- Month: 기억에 남는 순간 + 다음 달 목표 + 나에게 한 마디
- DB 저장 (weekly_reviews, monthly_reviews)
하루 MI 공감 대화
- 동기면담(MI) 4원칙: 경청/반영, 열린 질문, 공감 먼저, 자율성 존중
- 바로 리스트 금지 → "정리해드릴까요?" → 동의 후 제공
- 체크박스: 실행 가능한 팁(3개+)일 때만, 체크된 것만 Rec/Todo 추가
- 마크다운 렌더링 (**볼드**, *이탤릭*, `코드`)
- 모바일 Enter = 줄바꿈 (전송은 버튼만)
- 헤더 상단 고정 (fixed)
Recommendation 개선
- 상단: 맥락 요약 ("수면이 부족해요, 수업이 있어요. 이런 부분을 챙겨보세요:")
- 하단: 체크 가능한 실행 항목 + 달성 카운트
- 하루 대화 내용 자동 추출 + 홈 탭 복귀 시 즉시 갱신
기록 Today 개선
- 스케줄: 오늘만 표시 (내일/모레 제거 — 홈에서 확인)
- 하루 대화 요약: 주제별 인과관계 서술 ("출판에 대해 이야기함 — 접근성이 핵심")
- 상투어 필터링 ("응", "해줘" 등 제외)
기록 Week 확장
- 달성률 카드: Recommendation + Todo 나란히
- 일별 상세: 요일별 수면/컨디션/운동/감정
- 운동 로그 + Recommendation 세부 항목
기록 Month 확장
- 캘린더: 요일 헤더(일~토), 월 네비게이션(←→), 폰트 확대
- 차트: 마우스오버/터치 시 데이터 값 표시
- 월간 요약: 건강/감정/루틴/활동 4섹션
Todo 시간 기록: completed_at 타임스탬프 저장

루틴 시스템 연속 일수 + 🔥 주간 리포트 (자동) 월간 리포트 (자동) 주간 회고 (입력) 월간 회고 (입력) 하루 루틴 관리 Todo 완료 시간 Rec 맥락 요약 마크다운 렌더링 하루 대화 → MI 공감 대화 요약 → 인과관계 서술 기록 Today 스케줄 → 오늘만 Week → 리포트+회고+상세 Month → 리포트+회고+루틴 딱딱한 리스트 응답

인터랙티브 프로토타입 홈 (raw) 하루 (raw) 기록 (raw)

UI 아키텍처 문서 하루 대화 진화 과정

* 현재 배포 버전. DB 12개 테이블.
* 핵심 사이클: 대화(하루) → 기록(자동) → 리포트(자동) → 회고(직접) → 개선

Stage 8 — 5/7 | UX 개선 (적용 완료)

대비/폰트/접힘/채팅 최적화 + 차트 범례

UX Audit 기반 P0+P1 개선 적용. 시안 제작 → 승인 → 코드 반영 완료.

P0 — 텍스트 대비: #b3b3b3(2.6:1) → #6B7280(4.6:1) 77곳
P0 — 최소 폰트: 0.55~0.65rem → 0.7rem 전체 상향
P1 — 홈 접힘: Tomorrow/Day After/Yesterday → 접힘 가능 섹션 통합
P1 — 섹션 간격: 라벨 margin-top 24px (내부 행간은 축소)
P1 — 하루 채팅: "하루" 이름 제거, 헤더 최소화(pill만), 버블 10px 간격
P1 — 차트 범례: 수면 ● 7h+ ○ 미달, 감정 컬러 비율 범례
좌정렬: 모든 콘텐츠 텍스트 좌정렬 통일

텍스트 대비 4.6:1 라벨 0.7rem 하루 헤더 최소화 콘텐츠 접힘 차트 범례 섹션 간격 24px "하루" 버블 이름

홈 Before/After 하루/기록 시안 최종 프로토타입 UX Audit 문서

* 2026-05-07 시안 승인 후 코드 반영 완료

Stage 9 — 5/11~12 | v2.0 시도 → 폐기 (KILLED)

대규모 리팩토링 + 컴포넌트 분리 + React Query

45 commits / 114 files / +14,435 −2,691 규모의 거대 리팩토링 시도. UI 디테일·인터랙션 손실로 사용자 폐기 결정 → v0.8.1로 롤백.

시도한 것:
- Diary Today (621줄) → 5개 분리 컴포넌트 (DateSelector / ScheduleSection / RoutineSection / HealthInput / MemoSection)
- Diary Week (441줄) → 6개 컴포넌트 + TimeNav
- Diary Month (478줄) → 5개 컴포넌트 + CalendarGrid + ReviewModal
- /haru (467줄) → 64줄 + hooks + components + lib
- /friends 삭제 (deprecate)
- React Query 5 + vitest + Testing Library 도입
- BottomNav 순서: 홈/기록/하루/설정
폐기 원인 7가지:
- 1. 디테일 누락 — Week/Month 정보 영역 Plan에 명세 빠짐
- 2. DateSelector 인터랙션 재작성 — scroll handler picker → scrollIntoView (패턴 자체 변경)
- 3. /haru 작동 불가 — hook 분리 시 인자 순서 변경
- 4. dev 서버 브랜치 혼동 — worktree 환경 안내 미흡
- 5. 시안 ≠ 인터랙션 검증 — 정적 mockup OK ≠ 동작 OK
- 6. 자동 조정 누적 — 각각 합리적, 합치면 원본과 다름
- 7. "분리=좋다" 가정 — 작동하는 코드의 refactor는 항상 회귀 위험
핵심 교훈: "개선해주세요" = 새 기능 추가. refactor 동의는 별도 명시. 기존 UI 위에 layer로 얹기.
롤백: git read-tree --reset으로 v0.8.1 (a6f0774) 안전 복원
보존: stage-9/v0.9-release 브랜치에 전체 코드 보존 (cherry-pick 가능)

Diary 컴포넌트 분리 (폐기) /haru hook 분리 (폐기) React Query 5 (폐기) vitest (폐기) /friends 삭제 (폐기) CalendarGrid 새 디자인 (폐기) 회고 색상 도트 (폐기, 재도입 가능) 45 commits / 114 files

Postmortem 리포트 SPEC.md (10절)

▼ 16개 Brainstorming 시안 (킬 전 제작)

01 Scope 02 IA Friends 03 BottomNav 04 Time Nav 05 Today Scroll 06 Diary Final 07 Diary v2 08 Diary v3 09 Diary v4 10 Diary v5 11 Home Priority 12 Home v2 13 Area4 Summary 14 Area4 Deep 15 Architecture 16 Impact 표 17 Final Spec (최종 시안)

* KILLED — 2026-05-12 01:30 사용자 폐기 결정.
* v0.8.1 (a6f0774, 2026-05-09)로 안전 롤백 완료.
* 가치 있는 산출물은 cherry-pick으로 향후 점진 도입 가능.

Stage 10 — 5/12~13 | v0.9.1 → v0.9.4 점진 복구

메모리 시스템 + Calendar 해결 + 메뉴 순서 변경

v2.0 교훈 기반 — 기존 코드 위에 기능을 layer로 얹는 점진 개선. v0.8.1에서 v0.9.4까지 안전하게 진화.

v0.9.1~v0.9.2 (05-12):
- Google Calendar OAuth 8시간 디버깅 — Vercel env client_secret 끝 \n 제거
- Google Calendar KST 이중 변환 수정 — ISO에서 직접 HH:MM 추출
- OAuth token 만료 시 refresh token 자동 갱신
- Calendar 무한 호출 방지 — sessionStorage 1회 실행
- Calendar 중복 저장 방지 — 날짜+제목+시간 3조건 체크
- 루틴 "물 8잔" → "물 3잔"
- max_tokens 300 → 600
v0.9.3 (05-13):
- 하루 메모리 시스템: 프로필(교수, 수면 7h 목표, 커피 관리) + 주간 대화 300자 요약 + 오늘 컨텍스트(6테이블 병렬)
- 맞춤 첫 인사: 시간대 + 스케줄 + 건강 기반 (AI 호출 없이 즉시)
- 홈 스케줄 체크 버튼: 루틴/Todo처럼 완료 토글
- Recommendation 삭제(✕)
- Daily Review 분리: "완료한 것 / 못한 것" 2개 별도 입력
- Week 주간 네비: ← → 이전주/다음주 + "N월 N번째 주" 타이틀
- 차트 기준선: 수면 7h 점선 + 커피 2잔 점선
- 설정 버전 히스토리: v0.1~v0.9.2 전체 표시
- schedules: done boolean 컬럼 추가
- journal_entries: not_done_today 컬럼 추가
v0.9.4 (05-13):
- BottomNav 순서 변경: 홈/하루/기록/설정 → 홈/기록/하루/설정
- 기록(Diary)이 하루(Assistant)보다 더 자주 접근 → 가운데 배치
- Design History 업데이트 (v2.0 KILLED + v0.9.4 기록)

하루 메모리 시스템 맞춤 첫 인사 홈 스케줄 체크 Rec 삭제(✕) Week 주간 네비(←→) 차트 기준선(7h/2잔) Review 완료/못한것 분리 BottomNav: 기록↔하루 순서 교환 Calendar OAuth 수정 Calendar KST 수정 schedules.done journal_entries.not_done_today

v0.9.4 Before/After 시안

* v2.0 교훈 적용: 기존 코드 수정 최소화, 기능 layer로 추가.
* 단일 거대 파일 패턴 유지 — 작동하는 것을 건드리지 않음.
* 2026-05-13 현재 운영 중.

Stage 11 — 5/25 | v0.9.7 Todo · Done 개편 (소요일 + 7일 필터)

Daily 무한 누적 해결 + Done 회고 시그널 강화

"홈 데일리의 완료 todo와 done 페이지의 차이가 모호하고, 완료 항목이 무한 누적된다"는 사용자 피드백에서 출발. 역할 분리 + 시작→완료 메타 추가로 두 영역의 가치 명확화.

문제 진단:
- TodoList 완료 섹션이 전체 완료 todo를 다 보여줘 무한 누적 → 5/25 시점 11+ 항목
- Done 탭(CompletedThisWeek)은 동일 데이터의 주차별 리포트 — 두 영역이 기능적으로 중복
- Done에 "언제 시작했나 / 며칠 걸렸나" 정보 부재 → 회고 가치 약함
역할 분리 (v0.9.7):
- Daily 탭 TodoList = "최근 7일 액션 가능한 작업창" (오늘 포함 7일 완료만, 토글/삭제 가능)
- Done 탭 CompletedThisWeek = "주·월 단위 회고 리포트" (읽기 전용, 통계 + 메타)
소요일 메타 라인:
- 모든 완료 항목에 5/22 → 5/24 2일 형태로 시작→완료 + 소요일 표시
- 당일 = 5/25 · 당일 조용한 회색 (시각 부담 최소)
- 1~2일 = 회색 배지 / 3~6일 = amber / 7일+ = red 굵게 → 색상으로 "묵힌 정도" 자연 시각화
- 데이터 출처: todos.created_at / completed_at — DB 스키마 변경 0건
소팅 토글:
- 날짜순 (기본, 완료일 역순 + 날짜 그룹)
- 기간순 (소요일 내림차순 평면 리스트) → 회고 모드
회고 자동 picking:
- 이번 주 7일+ 항목 최대 3건을 통계 카드 아래 빨강 "오래 묵힌 일" 배너로 자동 노출
- 의도: 사용자가 능동적으로 찾지 않아도 회고 글감이 먼저 다가옴
Stage 9 워크트리 정리 (병행):
- 폴더 이동으로 깨진 app-stage9 워크트리 폐기
- archive/stage-9-tip 태그로 d36a576 영구 보존 + 미커밋 새 파일 50+개 tarball 아카이브
- 복구 매뉴얼 docs/archive/stage9-worktree-2026-05-25.md

소요일 메타 (created→completed) 색상 규칙 (3일 amber / 7일 red) 소팅 토글 (날짜순 ↔ 기간순) 회고 자동 picking (7일+ 배너) TodoList 완료: 누적 → 7일 필터 역할 분리: Daily=작업 / Done=회고 DB 스키마 변경 없음 stage-9 워크트리 아카이브

v0.9.7 Before/After 시안 (소요일·소팅·디테일) Stage 9 워크트리 아카이브 매뉴얼

* 사용자 피드백 → 시안 → 코드 반영 → 재피드백("당일 항목도 보이게") → 재수정 → 커밋(064193f, 5917a2f).
* 표시 규칙 수정: 처음엔 "당일 = 메타 숨김"이었으나, 데이터가 대부분 당일이라 화면이 비어 보임 → "당일도 표시하되 조용히"로 변경.
* 2026-05-25 현재 운영 중.

Life OS Design History

정보구조·작업 입력 재설계 시안 10종