2026-05-03 ~ 05-04 | design2의 전체 UI 구조, 화면별 구성, 데이터 흐름 기록
┌─────────────────────────────────────────┐
│ Life OS │
├──────┬──────┬──────┬───────────────────┤
│ 홈 │ 하루 │ 기록 │ 설정 │
│ │ │ │ │
│ Home │ Haru │Diary │ Settings │
└──────┴──────┴──────┴───────────────────┘
하단 4탭 고정. 각 탭은 독립 페이지 (/, /haru, /diary, /settings).
┌─────────────────────────────┐
│ 18° │ ← 날씨 헤더 (하늘 그라디언트)
│ 맑음 최저12°/최고22° │
├─────────────────────────────┤
│ SAT, MAY 03 │
│ Good Morning │ ← 시간대별 자동 변경
│ 진 집사가 준비한 브리핑입니다 │
├─────────────────────────────┤
│ 맑음18° │ 몸 수면5.7h │ 마음 │ ← Daily Insight (30분 갱신)
│ │
│ │ 수면이 부족해요, 오늘 │ ← 맥락 요약 (건강+일정+대화 기반)
│ │ 아고라 수업이 있어요... │
├─────────────────────────────┤
│ TODAY │
│ 일요일 — 1건 │ ← 폰트 1.26rem 볼드
│ 08:30-17:30 아고라02 │
├─────────────────────────────┤
│ ROUTINE 🔥 2/4│ ← 매일 리셋, 연속 일수 표시
│ ☑ 아침 스트레칭 3일째 │
│ ☐ 물 8잔 잊지않음│
│ ☑ 감사 일기 5일째 │
│ ☐ 30분 운동 잊지않음│
├─────────────────────────────┤
│ TOMORROW │
│ 월요일 — 2건 │
│ 교무회의, 취업전담 회의 │
├─────────────────────────────┤
│ DAY AFTER │
│ 화요일 — 어린이날 │
├─────────────────────────────┤
│ YESTERDAY │
│ 아고라01 (취소선) │
├─────────────────────────────┤
│ RECOMMENDATION 3/5 │ ← 1시간 갱신, 홈 탭 복귀 시 즉시
│ │
│ 수면이 부족해요, 오늘 수업이 │ ← 맥락 설명 (하루 대화 기반)
│ 있어요. 이런 부분을 챙겨보세요│
│ │
│ ☑ 수분 보충 │ ← 체크 가능
│ ☐ 짧은 스트레칭 │
│ ☑ 호흡 연습 │
├─────────────────────────────┤
│ TODO │
│ [할 일 추가...] [추가]│
│ ○ 질적연구 과제 │
│ ● 수업 마무리 (취소선) │
└─────────────────────────────┘
| 영역 | 소스 | 갱신 |
|---|---|---|
| 날씨 | mockWeatherByTime (추후 API) | 시간대별 |
| Daily Insight | health_logs + journal_entries + schedules | 30분 |
| Schedule | schedules (Supabase) | 페이지 로드 |
| Routine | routines + routine_logs | 클릭 즉시 |
| Recommendation | chat_messages + health + schedules | 1시간 + 탭 복귀 |
| Todo | todos (Supabase) | 클릭 즉시 |
┌─────────────────────────────┐ ← 상단 고정 (fixed)
│ 하루 │
│ 당신의 개인 비서 │
│ [수면5.7h,컨디션3/5] [기쁨] │ ← 상태 태그
├─────────────────────────────┤
│ │
│ 하루: 안녕하세요! 오늘 │ ← 마크다운 렌더링 (**볼드**)
│ 몸 상태는 어떠세요? │
│ │
│ 오늘 좀 피곤해 :나│
│ │
│ 하루: 피곤하시구나... 어젯밤 │ ← MI 공감 대화 스타일
│ 잘 주무셨어요? │
│ │
│ 하루: 이런 방법이 있어요: │
│ ☐ 수분 보충 │ ← 체크박스 (액션 감지 시)
│ ☐ 짧은 스트레칭 │
│ ☑ 호흡 연습 │
│ [Rec 추가] [Todo 추가] │ ← 체크된 것만 저장
│ │
├─────────────────────────────┤
│ [메시지 입력...] 🔵 │ ← 모바일: Enter=줄바꿈
└─────────────────────────────┘
| 기능 | 작동 방식 |
|---|---|
| 건강 기록 | "7시간 잤어" → 자동 DB 저장 |
| 감정 기록 | "막막해" → 자동 DB 저장 |
| 루틴 관리 | "명상 루틴 추가해줘" → routines 테이블 |
| API 확인 | "API 확인" → 연결 상태 표시 |
| 도움말 | "뭐 할 수 있어?" → 기능 안내 |
| Rec/Todo | 체크박스 → 선택 항목만 저장 |
❌ 바로 리스트 → ✅ 먼저 공감 대화
❌ "다음 포인트를 고려하세요" → ✅ "어떤 부분이 고민이세요?"
❌ 한번에 5개 나열 → ✅ "정리해드릴까요?" 후 동의 시 제공
[ Today ] [ Week ] [ Month ]
─────────────────────────────
┌─────────────────────────────┐
│ Diary TODAY │
│ May 2026 │
│ ← 30 [1] 2 3 4 5 → │ ← 스크롤 피커 (scroll-snap)
├─────────────────────────────┤
│ SCHEDULE │
│ 오늘 5/3 (일요일) │ ← 오늘만 표시
│ 08:30-17:30 아고라02 │
├─────────────────────────────┤
│ ROUTINE │
│ ☑ 아침 스트레칭 3일째 │
│ ☐ 물 8잔 │
│ │
│ 🔥 아침 스트레칭 — 3일째 │ ← 연속 기록 요약
│ 하고 계십니다 │
│ 물 8잔 — 잊지 않으셨죠? │
├─────────────────────────────┤
│ EMOTION │
│ [기쁨][평온][설렘]...[외로움]│ ← 10종 선택
├─────────────────────────────┤
│ HEALTH │
│ 수면 [4]h [36]m [OK] │
│ 컨디션 [1][2][3][④][5] │
│ 운동 [조깅 30분] [기록] │
├─────────────────────────────┤
│ MEMO │
│ [자유 메모 입력...] │
├─────────────────────────────┤
│ DAILY REVIEW │
│ 감사한 것 [_____] │
│ 완료/미완 [_____] │
│ 내일 하고싶은 것 [_____] │
│ 나에게 한마디 [_____] │
├─────────────────────────────┤
│ 하루와의 대화 │
│ 하루 — 8건의 대화 │
│ • 출판에 대해 이야기함 — │ ← 주제별 인과관계 요약
│ 접근성과 실용성이 핵심 │
│ • 수면에 대해 이야기함 — │
│ 컨디션 관리법 논의 │
├─────────────────────────────┤
│ [저장] │
└─────────────────────────────┘
┌─────────────────────────────┐
│ [72%] [65%] │ ← 달성률 카드
│ Recommendation Todo │
├─────────────────────────────┤
│ SLEEP │
│ █ █ ▄ █ █ ▂ █ │ ← 7일 바 차트 (블루/그레이)
│ 일 월 화 수 목 금 토 │
├─────────────────────────────┤
│ EMOTION │
│ [평온] [기쁨] [피곤] │
├─────────────────────────────┤
│ 이번 주 요약 │
│ 평균 수면 6.5h · 컨디션 3.8 │
├─────────────────────────────┤
│ DAILY DETAILS │
│ ┌ 토 — 수면4.6h 컨디션4/5 │
│ └ 일 — 수면5.7h 컨디션3/5 │
├─────────────────────────────┤
│ WEEKLY REPORT │ ← 자동 문장 생성
│ "이번 주는 7일 중 5일을 │
│ 기록하셨어요. 수면은 평균 │
│ 5.7시간으로..." │
├─────────────────────────────┤
│ WEEKLY RETROSPECTIVE │ ← 직접 입력
│ 다음 주 다짐 [_____] │
│ 한줄 소감 [_____] │
│ [회고 저장] │
└─────────────────────────────┘
┌─────────────────────────────┐
│ ← 2026년 5월 → │
│ 일 월 화 수 목 금 토 │
│ 1 2 3 4 5 6 │ ← 히트맵 (기록=블루)
│ 7 8 9 10 11 12 13 │
│ ... │
├─────────────────────────────┤
│ SLEEP — 31 Days │
│ ▁▃█▅▂█▃█... │ ← 마우스오버 시 데이터 표시
├─────────────────────────────┤
│ CONDITION — 31 Days │
├─────────────────────────────┤
│ RECOMMENDATION — 31 Days │ ← opacity로 달성률 표현
├─────────────────────────────┤
│ ROUTINE │
│ 스트레칭 20/30 ████████░░ │ ← 프로그래스 바
│ 물 8잔 15/30 █████░░░░░ │
├─────────────────────────────┤
│ EMOTION │
│ [평온(8)] [피곤(5)] [기쁨(4)]│
├─────────────────────────────┤
│ 5월 요약 │ ← 4섹션 (건강/감정/루틴/활동)
├─────────────────────────────┤
│ MONTHLY REPORT │ ← 자동 문장 생성
│ "5월은 30일 중 20일을 │
│ 기록하셨어요..." │
├─────────────────────────────┤
│ MONTHLY RETROSPECTIVE │ ← 직접 입력
│ 기억에 남는 순간 [_____] │
│ 다음 달 목표 [_____] │
│ 나에게 한 마디 [_____] │
│ [회고 저장] │
└─────────────────────────────┘
┌─────────────────────────────┐
│ Settings │
├─────────────────────────────┤
│ CHATGPT API KEY │
│ ● 연결됨 │
│ [sk-... ] │
│ [저장] │
├─────────────────────────────┤
│ ABOUT │
│ Life OS design2 │
│ 진 · 모미 · 마음 → 하루 │
└─────────────────────────────┘
| 용도 | 색상 | 코드 |
|---|---|---|
| 강조/제목 | Black | #000000 |
| 본문 | Dark Gray | #333333 |
| 보조 | Gray | #808080 |
| 라벨 | Light Gray | #B3B3B3 |
| 구분선 | Border | #E6E6E6 |
| 배경 | White | #FFFFFF |
| 액센트 (시간 기반) | Blue | #60A5FA |
| 목표 달성 | Blue | #60A5FA |
| 목표 미달성 | Light Gray | #E6E6E6 |
| 용도 | 폰트 | 크기 |
|---|---|---|
| 영문 제목 | Outfit 700 | 1.3~1.7rem |
| 한글 본문 | Noto Sans KR 400 | 0.82~0.84rem |
| 라벨 | Outfit 500 uppercase | 0.6rem |
| 날씨 온도 | Outfit 300 | 5.4rem |
| 입력 | system (16px) | iOS 확대 방지 |
health_logs → 수면, 운동, 컨디션
journal_entries → 감정, 메모, Daily Review 4질문, 감사
chat_messages → 하루 대화 기록 (날짜별)
todos → 할 일 (완료 시간 기록)
schedules → 캘린더 일정
daily_insights → 일일 인사이트
recommendation_logs → 추천 달성률
routines → 루틴 항목 (추가/삭제)
routine_logs → 루틴 일별 완료 기록
weekly_reviews → 주간 회고
monthly_reviews → 월간 회고
users → 사용자 설정
사용자 → 하루 대화 → chat_messages + health_logs + journal_entries + routines
↓
홈 탭 복귀 → Daily Insight (30분) + Recommendation (1시간) 갱신
↓
기록 탭 → 날짜별 열람 + 주간/월간 리포트 자동 생성
↓
회고 입력 → weekly_reviews / monthly_reviews 저장
*작성일: 2026-05-04*
*프로젝트: Life OS design2*
*블로그 게시용 원고*