Life OS
개인 라이프 관리 앱
01
Design Principles
형태를 최소화하고 텍스트와 여백으로 구성합니다. 색은 시간의 흐름을 나타내는 데에만 사용합니다.
White Ground
배경은 순백. 콘텐츠가 스스로 위계를 만듭니다.
Text Only
100% Black으로 강조, 80% Gray로 본문. 장식 없이 글자만으로 구분합니다.
No Shape
카드, 테두리, 그림자 없이 여백과 구분선으로 구조를 잡습니다.
One Color
하나의 색이 시간에 따라 천천히 변합니다. 그 외에 색은 쓰지 않습니다.
02
Text Hierarchy
두 가지 농도만 사용합니다. 강조할 때는 Black, 읽을 때는 Gray.
Good Morning
진 집사가 준비한 오늘의 브리핑입니다. 어제 완료하지 못한 일정이 2건 있습니다.
수면 7시간 / 컨디션 4 / 일정 3건
THU, MAY 01 / 08:42 AM
03
Time Color
유일한 색. 시간대에 따라 하나의 색이 천천히 변합니다. 구분선, 액센트, 추천 블록에만 사용됩니다.
Option A / Blue Cycle
아침엔 옅은 하늘색, 밤으로 갈수록 깊어집니다. 가장 보편적이고 차분한 선택.
Option B / Warm Shift
아침 햇살에서 시작해 따뜻한 호박색으로. 자연광의 흐름을 따릅니다.
Option C / Ink
색 자체를 쓰지 않습니다. 먹의 농도처럼 시간에 따라 진해지기만 합니다.
하루 중 현재 시각의 색만 UI에 나타납니다. 한 화면에 여러 색이 동시에 보이지 않습니다.
04
Typography
영문 제목 + 한글 본문. 본문은 Noto Sans KR 고정, 제목 서체만 선택합니다.
Good Morning
Today's Briefing
오늘 하루도 차분하게 시작해볼까요. 어제 완료하지 못한 일정이 2건 있습니다. 근로자의 날로 공식 일정은 없으니, 질적연구 과제에 집중하시는 것을 권해 드립니다.
수면 7시간 / 컨디션 4 / 일정 3건
Good Morning
Today's Briefing
오늘 하루도 차분하게 시작해볼까요. 어제 완료하지 못한 일정이 2건 있습니다. 근로자의 날로 공식 일정은 없으니, 질적연구 과제에 집중하시는 것을 권해 드립니다.
수면 7시간 / 컨디션 4 / 일정 3건
Good Morning
Today's Briefing
오늘 하루도 차분하게 시작해볼까요. 어제 완료하지 못한 일정이 2건 있습니다. 근로자의 날로 공식 일정은 없으니, 질적연구 과제에 집중하시는 것을 권해 드립니다.
수면 7시간 / 컨디션 4 / 일정 3건
Good Morning
Today's Briefing
오늘 하루도 차분하게 시작해볼까요. 어제 완료하지 못한 일정이 2건 있습니다. 근로자의 날로 공식 일정은 없으니, 질적연구 과제에 집중하시는 것을 권해 드립니다.
수면 7시간 / 컨디션 4 / 일정 3건
05
Morning Briefing
세 가지 시간 컬러 옵션으로 본 동일한 브리핑 화면. 아침 8시 기준.
Blue / 08:00 AM
Thu, May 01
Good Morning
진 집사가 준비한 오늘의 브리핑입니다
Yesterday
주간 리포트 작성 완료
10-일상다반사 v1.5 리뷰
질적연구 데이터 수집 계획
Today
근로자의 날 — 공식 일정 없음
질적연구 과제 집중 권장
Recommendation
일정이 비어있는 오늘, 5/28 과제의 데이터 수집 계획 초안을 작성해보시면 어떨까요.
Warm / 08:00 AM
Thu, May 01
Good Morning
진 집사가 준비한 오늘의 브리핑입니다
Yesterday
주간 리포트 작성 완료
10-일상다반사 v1.5 리뷰
질적연구 데이터 수집 계획
Today
근로자의 날 — 공식 일정 없음
질적연구 과제 집중 권장
Recommendation
일정이 비어있는 오늘, 5/28 과제의 데이터 수집 계획 초안을 작성해보시면 어떨까요.
Ink / 08:00 AM
Thu, May 01
Good Morning
진 집사가 준비한 오늘의 브리핑입니다
Yesterday
주간 리포트 작성 완료
10-일상다반사 v1.5 리뷰
질적연구 데이터 수집 계획
Today
근로자의 날 — 공식 일정 없음
질적연구 과제 집중 권장
Recommendation
일정이 비어있는 오늘, 5/28 과제의 데이터 수집 계획 초안을 작성해보시면 어떨까요.
06
Architecture
웹과 모바일이 동일한 DB와 테마 토큰을 공유합니다.
Frontend
Next.js (Web) + Expo (Mobile) / Turborepo monorepo
Shared
packages/types, packages/theme, packages/api / 타입, 테마 토큰, API 클라이언트 공유
Backend
Supabase / PostgreSQL + Auth + Realtime + Storage
Storage
Supabase Storage / 배경 이미지 업로드, 이미지 최적화
AI
Claude API / 캐릭터별 시스템 프롬프트, Edge Function 스트리밍
Theme
Design Tokens / 런타임 교체 가능, CSS Variables + RN StyleSheet
07
Database
| Table | Columns | Description |
|---|
| users |
id, name, theme, time_color, bg_image_url |
인증 + 개인 설정 |
| daily_briefings |
date, yesterday, today, recommendation |
진의 3블록 브리핑 |
| health_logs |
date, sleep_hours, sleep_quality, exercise, condition |
모미의 1줄 트래커 |
| journal_entries |
date, sentences, emotion, coach_note |
마음의 3문장 일지 |
| finance_logs |
month, category, budget, actual |
월간 예산/지출 |
| schedules |
date, time, title, completed |
일정 + 완료 체크 |
08
Theme Token
가변 구조. 색 옵션과 시간대만 바꾸면 전체 앱이 바뀝니다.
// packages/theme/tokens.ts
export const text = {
primary: "#000000", // 100% black — 제목, 강조
body: "#333333", // 80% gray — 본문
muted: "#808080", // 50% — 보조
faint: "#B3B3B3", // 30% — 라벨
}
export const surface = {
background: "#FFFFFF",
divider: "#E6E6E6",
}
// 시간에 따라 보간되는 단일 색
export const timeColor = {
blue: ["#93C5FD", "#60A5FA", "#3B82F6", "#2563EB", "#1D4ED8", "#1E3A5F"],
warm: ["#FCD34D", "#F59E0B", "#D97706", "#B45309", "#92400E", "#78350F"],
ink: ["#A8A29E", "#78716C", "#57534E", "#44403C", "#292524", "#1C1917"],
}
// 현재 시각 → 색 보간
function getCurrentColor(palette, hour) {
const index = Math.floor((hour / 24) * palette.length)
return palette[Math.min(index, palette.length - 1)]
}