App 05몸 시계 기반 플래너

제때
Jettae

제때

할 일에도 제때가 있어요

몸의 하루 박자(3-과정 각성 모델)를 계산해 무거운 일은 기운이 오르는 때에, 가벼운 일은 처지는 때에 놓습니다. 웨어러블 없이 첫날부터 쓰고, 시험·발표·면접 같은 중요한 날의 그 시각에 한창이 오도록 며칠에 걸쳐 몸 시계를 옮깁니다.

각성 모델할 일 자동 배치D-day 맞추기낮 · 밤 · 불씨

분야: 생산성 · 헬스케어
대상: 웨어러블 없이 컨디션에 맞춰 일하고 싶은 사람, 시험·발표·면접을 앞둔 사람
작업 범위: 서비스 기획 · 리서치, UX/UI 디자인, 인터랙티브 HTML 프로토타입, 디자인 시스템(토큰 · 아이콘 · 서체), 자동 QA, Flutter 이전 가이드
구분: 자체 기획 컨셉 프로젝트 · 모바일 앱(iOS · Android)

Overview

무엇을 풀었나

대상 — 웨어러블 없이 컨디션에 맞춰 일하고 싶은 사람, 시험·발표·면접을 앞둔 사람

01문제

일반 플래너는 모든 시간을 똑같이 취급합니다. 하지만 같은 한 시간도 기운이 오를 때와 처질 때 할 수 있는 일이 다릅니다. 중요한 날의 컨디션은 운에 맡겨집니다.

02해결

각성 모델로 하루의 기운 곡선을 예측하고, 짧은 체크인으로 내 곡선을 보정하며, 할 일을 맞는 시간에 자동으로 놓습니다. 중요한 날에는 그 시각에 한창이 오도록 수면을 미리 옮깁니다.

03디자인 언어

굵기 = 에너지. 시간표의 시 숫자 굵기(Sofia Sans 가변 100–1000)가 그 시간의 예측 기운입니다. 그라데이션 없이 굵기와 선 두께만으로 말합니다. 백자 위의 코발트.

Key features

핵심 기능

제때을(를) 다르게 만드는 4가지

01

굵기 = 에너지

오늘 화면의 시 숫자는 그 시간에 예측되는 기운만큼 굵어집니다. 한창인 시간은 가장 굵게, 처지는 시간은 가늘게. 색 없이도 하루의 모양이 읽힙니다.

가변 서체 굵기로 데이터 표현
지금 · 한창 · 처짐 구간 표시

02

제때 맞추기 — 할 일 자동 배치

무거운 일은 기운이 오르는 구간에, 가벼운 일은 처지는 구간에. 적어 둔 할 일을 한 번에 제때로 옮기고, 미리보기에서 바뀌는 자리를 확인합니다.

자연어 입력 파싱 — “보고서 90분 몰입 금요일까지”
맞지 않는 시간에 놓인 일 경고

03

체크인으로 내 곡선 보정

지금 기운을 1~5로 답하면 개인 곡선을 다시 맞춥니다. 모델 검증에서 체크인 24회 만에 1단계 이내 적중 100%, 정확 적중 88%를 확인했습니다.

체크인 → 곡선 파라미터 재추정
모델 단위 테스트로 수치 검증

04

D-day 맞추기와 불씨 화면

중요한 날 그 시각에 한창이 오도록 하루 20분씩 수면을 옮기는 사다리를 만듭니다. 취침 2시간 전부터는 청색 성분을 낮 테마의 23%로 줄인 불씨 화면으로 바뀝니다.

수능 템플릿 · 수면 사다리
커피 층 — 카페인 반감기 5시간

All screens

전체 화면 90장

모든 화면은 실제로 동작하는 HTML 프로토타입에서 자동 촬영했습니다. 화면을 누르면 크게 볼 수 있어요.

크게 보기에서 ← → 키 또는 좌우로 밀어 넘기기

오늘

9

01오늘 · 오전(기본 10:40)
02오늘 · 잠 깨는 중
03오늘 · 오후 저점
04오늘 · 한창
05오늘 · 지난 시간 펼침
06오늘 · 제때 맞춘 뒤
07오늘 · 아래(자리 없는 할 일)
08오늘 · 빈 하루
09오늘 · 글자 아주 크게

주간

3

10주간 · 컨디션 예보
11주간 · 다음 주
12목요일 미리보기(발표 날)

할 일

3

13할 일 · 오늘
14할 일 · 언젠가
15할 일 · 완료

리듬 · 과학

4

16리듬
17리듬 · 2주 리듬표
18곡선 계산법
19곡선 계산법 · C 끔

D-day

4

20D-day 목록
21D-day · 분기 발표(빚 갚기)
22D-day · 하프 마라톤(시각 당기기)
23D-day · 수면 사다리

설정

6

24나 · 설정
25나 · 설정(아래)
26크로노타입
27수면 기록
28위젯 · 잠금 화면 · Live Activity
29라이선스 · 출처

시트

16

30할 일 추가 · 빈 입력
31할 일 추가 · 해석 결과
32할 일 추가 · 시각 지정
33할 일 상세 · 무난(더 좋은 자리)
34할 일 상세 · 때 아님
35체크인
36체크인 · 기록 후
37어젯밤 잠
38어젯밤 잠 · 고치는 중
39커피
40제때 맞추기
41구간 · 한창
42구간 · 저점
43D-day 만들기 · 수능
44D-day 만들기 · 면접
45화면 테마

집중

2

50집중 · 한창
51집중 · 저점(가는 숫자)

온보딩

8

52온보딩 1 · 시작
53온보딩 2 · 굵기 = 기운
54온보딩 3 · 설문 1/5
55온보딩 · 설문 5/5
56온보딩 · 결과
57온보딩 · 잠 데이터
58온보딩 · 알림
59온보딩 · 첫 하루

구독

1

60제때 플러스

Design system

디자인 시스템

색 · 서체 · 아이콘을 DTCG 토큰 JSON과 SVG 에셋으로 정리해 그대로 개발에 넘깁니다.

색 라이트 · 다크 토큰

낮 · 백자와 코발트

canvas#F5F5F1

surface#FFFFFF

먹#0B0D1A

text-2#4F5263

코발트#2335F0

text-accent#1A28C7

밤

canvas#0B0C14

surface#14161F

text#ECEDF3

text-2#A9ACBB

accent#7C89FF

불씨

canvas#0D0806

surface#170E0A

text#F6A383

text-2#C07A5E

불씨#FF6A3D

ember#D9481F

서체 OFL 라이선스

06 10 14 17

Sofia Sans (가변 1–1000)시 숫자 · 라틴 — 굵기가 곧 데이터

지금은 한창이에요

IBM Plex Sans KR한글 본문 · UI (Light – Bold)

브랜드 · 에셋

앱 아이콘기본 · 다크 · 틴트, Android 적응형 3층

워드마크‘제’는 Thin, ‘때’는 Bold — 굵기 = 에너지

브랜드 시트앱 아이콘 · 스플래시(낮 · 불씨) · 워드마크

아이콘 70종 × 2 굵기 — 아이콘 70종 × 2 굵기regular · bold SVG 140개

Deliverables & QA

산출물과 품질 검수

보기 좋은 시안에서 멈추지 않고, 개발자가 바로 옮길 수 있는 기준본을 만듭니다.

25화면 · 시트 · 모달
(탭 4 · 푸시 9 · 시트 9 · 모달 3)

90스크린샷
낮 56 · 밤 22 · 불씨 12

140SVG 아이콘
70종 × 2 굵기

21화면별 명세 문서

13/13인터랙션 플로우
자동 검증 통과

69/69WCAG 대비 검사
(23 조합 × 3 테마)

182터치 영역 검사 요소
44pt 미달 0

0360dp 화면 넘침
(20개 화면)

동작하는 HTML 프로토타입

검수 패널의 데모 시계(1초 = 1분)로 시각을 옮기면 헤드라인 · 구간 · 테마가 함께 바뀝니다. 실제 터치로 체크인 · 스와이프 · 시트 끌어 닫기를 해볼 수 있습니다.

Flutter 이전 가이드

각성 모델 · 자동 배치 · 보정을 순수 함수로 분리하고 모델 테스트를 붙였습니다. 토큰 9종(3 테마), 서체 서브셋, 앱 아이콘 세트를 Flutter로 옮길 수 있게 정리했습니다.

기술 스택

프로토타입 · 자동 검수

React 19TypeScriptViteTailwind CSS v4MotionZustandPlaywright