01문제
컬러 워크 앱은 사진첩으로 끝나 며칠 뒤 다시 열 이유가 없고, 캐릭터 성장 앱은 걸음 수 같은 ‘양’을 보상합니다. 무엇을 보았는지는 남지 않습니다.
App 03캐릭터 성장 · 색 수집 산책 앱
색채집
Saekchaejip
Saekchaejip
색채집
걷다가 만난 색을 채집해요
매일 모두에게 같은 ‘오늘의 색’이 하나 있습니다. 산책하며 카메라 조준점으로 색을 채집해 애벌레 꼬물이에게 먹이면, 그 색이 몸의 마디가 됩니다. 12마디가 되면 번데기, 다음 날 아침 먹은 12색으로 날개를 편 나비가 됩니다.
캐릭터 성장카메라 색 채집오늘의 색 테마라이트 · 다크
Overview
무엇을 풀었나
대상 — 산책 습관을 만들고 싶은 사람, 일상의 색을 알아차리고 싶은 사람
02해결
‘무엇을 보았나(알아차림)’를 보상합니다. 모두에게 같은 오늘의 색을 찾아 꼬물이에게 먹이고, 모은 12색이 그대로 나비의 날개가 됩니다.
03디자인 언어
구슬 문법(Bead Grammar). 채집한 색은 먹선 테두리를 두른 구슬이 되고, 구슬이 이어져 애벌레의 몸이 되고, 번데기로 접혔다가 날개로 펼쳐집니다.
Key features
핵심 기능
색채집을(를) 다르게 만드는 4가지
01
색을 먹고 나비가 되는 캐릭터
먹인 색 하나가 몸 마디 하나. 12마디가 되면 번데기가 되고, 다음 날 아침 그 12색으로 날개를 편 나비가 정원에 내려앉습니다.
- 알 → 애벌레 → 번데기 → 우화의 상태 설계
- 우화한 나비에 이름 붙이기 · 공유 카드
02
채집 카메라
조준점 아래의 색을 읽어 CIEDE2000으로 도감의 색과 맞춥니다. 카메라를 쓸 수 없는 환경에서는 한국에서 찍은 실사 장면 7장으로 자동 전환됩니다.
- 조준점 색 판독 · 가장 가까운 도감 색 매칭
- 앨범 사진에서도 채집
03
한국 거리 · 계절 도감 72색
수박 빨강, 개나리 노랑, 메론바 초록, 누룽지 갈색… 이름만 들어도 떠오르는 72색. 계절 한정 색이 있고, 비슷한 색끼리 헷갈리지 않도록 색 간 거리를 검증했습니다.
- 색 간 최소 ΔE2000 7.5 이상 자동 검증
- 계절 한정 · 미발견 · 발견 상태
04
오늘의 색으로 물드는 앱
오늘의 색을 시드로 HCT 색 체계를 만들어 앱 전체가 그날의 색으로 물듭니다. 시드 73개 × 라이트·다크 스킴을 토큰으로 미리 생성했습니다.
- material-color-utilities 기반 HCT 스킴
- WCAG 대비 1,687건 검사 · 미달 0
All screens
전체 화면 74장
모든 화면은 실제로 동작하는 HTML 프로토타입에서 자동 촬영했습니다. 화면을 누르면 크게 볼 수 있어요.
오늘
701오늘 02오늘 · 아래 03오늘 · 11마디 04오늘 · 번데기 05오늘 · 우화 준비 06오늘 · 새 알 35오늘의 색 찾는 법
도감 · 색
707도감 08도감 · 가을 한정 09도감 · 아래 10색 상세 · 찾은 색 11색 상세 · 못 찾은 색 12색 상세 · 제철 아님 13색 상세 · 기록
정원 · 나비
514정원 · 나비 15정원 · 일지 16나비 상세 17하루 기록 18채집 기록
채집 카메라
422채집 카메라 23채집 카메라 · 버스 24채집 결과 25찾는 색 바꾸기
우화
226우화 · 두드리기 27우화 · 이름 짓기
나 · 설정
519나 20설정 21라이선스 36규칙 37이름 바꾸기
온보딩 · 구독
528온보딩 · 첫인사 29온보딩 · 이렇게 자라요 30온보딩 · 이름 31온보딩 · 권한 32색채집+
공유
233공유 카드 · 오늘 34공유 카드 · 나비
오늘
701오늘 02오늘 · 아래 03오늘 · 11마디 04오늘 · 번데기 05오늘 · 우화 준비 06오늘 · 새 알 35오늘의 색 찾는 법
도감 · 색
707도감 08도감 · 가을 한정 09도감 · 아래 10색 상세 · 찾은 색 11색 상세 · 못 찾은 색 12색 상세 · 제철 아님 13색 상세 · 기록
정원 · 나비
514정원 · 나비 15정원 · 일지 16나비 상세 17하루 기록 18채집 기록
채집 카메라
422채집 카메라 23채집 카메라 · 버스 24채집 결과 25찾는 색 바꾸기
우화
226우화 · 두드리기 27우화 · 이름 짓기
나 · 설정
519나 20설정 21라이선스 36규칙 37이름 바꾸기
온보딩 · 구독
528온보딩 · 첫인사 29온보딩 · 이렇게 자라요 30온보딩 · 이름 31온보딩 · 권한 32색채집+
공유
233공유 카드 · 오늘 34공유 카드 · 나비
Design system
디자인 시스템
색 · 서체 · 아이콘을 DTCG 토큰 JSON과 SVG 에셋으로 정리해 그대로 개발에 넘깁니다.
색 라이트 · 다크 토큰
브랜드
먹
#1C1A17종이
#FFFDF7꼬물 연두
#B5D94C꼬물 그늘
#93BC34볼터치
#F59AAE은행잎 노랑(오늘의 색)
#F4C12A오늘의 색 스킴 · 라이트 / 다크
surface
#FFF8F1onSurface
#1F1B12primary
#765A00primaryFixed
#FFDF95surface · 다크
#17130Aprimary · 다크
#FFE19B도감 72색 중 12색
수박 빨강
#F0585A홍시 주황
#E2541C개나리 노랑
#FFDD1F형광 연두
#D2EC22메론바 초록
#B3DF9E민트 초록
#98DCC7얼음 하늘
#D3E9F2수국 파랑
#5B77CE라벤더 보라
#C5B4E2벚꽃 분홍
#F5C8D1누룽지 갈색
#C99B61백자 흰색
#EEE9DD서체 OFL 라이선스
꼬물이
오늘의 색은 은행잎 노랑
#F4C12A · 12/12
브랜드 · 에셋
Deliverables & QA
산출물과 품질 검수
보기 좋은 시안에서 멈추지 않고, 개발자가 바로 옮길 수 있는 기준본을 만듭니다.
20화면
(탭 4 · 푸시 6 · 모달 4 · 시트 6)
(탭 4 · 푸시 6 · 모달 4 · 시트 6)
74스크린샷
라이트 37 · 다크 37
라이트 37 · 다크 37
72도감 색
ΔE2000 자동 검증
ΔE2000 자동 검증
73오늘의 색 시드
× 라이트 · 다크 스킴
× 라이트 · 다크 스킴
12/12인터랙션 플로우
자동 검증 통과
자동 검증 통과
1,687WCAG 대비 검사
미달 0
미달 0
198터치 영역 검사 요소
미달 0
미달 0
17화면 명세 문서
동작하는 HTML 프로토타입
휴대폰에서 열면 후면 카메라로 실제 색을 읽습니다. 데모 시계로 번데기 → 우화까지 바로 볼 수 있고, 딥링크로 모든 상태에 바로 갈 수 있습니다.
Flutter 이전 가이드
시드 73개의 HCT 스킴 JSON, CIEDE2000 검증 벡터, 워드마크 윤곽선 SVG, 앱 아이콘(iOS · Android 적응형 · 테마)까지 Flutter에서 그대로 쓰도록 준비했습니다.
기술 스택
프로토타입 · 자동 검수
React 19TypeScriptViteTailwind CSS v4MotionZustandPlaywright