01문제
걷기 앱은 빨리, 멀리 걸은 사람을 보상합니다. 땅따먹기 게임은 경쟁과 실시간 위치 노출을 함께 데려옵니다. 매일 같은 골목을 걷는 사람의 꾸준함은 어디에도 남지 않습니다.
App 06동네 산책 영역 앱
한땀
자주 걷는 길이 내 땅이 되는 산책
동네를 약 120m 조각으로 나눕니다. 조각을 지나며 걸으면 하루 한 땀, 28일 동안 가장 자주 들른 사람의 천연 염료 색으로 조각이 물듭니다. 빨리, 멀리 걷지 않아도 괜찮아요.
지도 · 조각보하루 한 땀 규칙위치 약속라이트 · 다크
Overview
무엇을 풀었나
대상 — 동네를 자주 걷는 사람 — 유모차·휠체어 산책도 똑같이 셉니다
02해결
자주 걷는 사람이 이기는 규칙(하루 한 땀, 28일)과 차·자전거 속도 제외, 이웃에게는 하루 늦게 조각으로만 보이는 위치 약속. 조각보는 경쟁이 아니라 함께 채우는 것.
03디자인 언어
깨끼 조각보. 동네 지도가 조각보가 됩니다. 조각마다 주인의 천연 염료 색(쪽 · 옥 · 쑥 · 송화 · 치자 · 감물 · 홍화 · 자초)으로 물들고, 내 위치는 바늘, 내 길은 자홍색 홈질 실입니다.
Key features
핵심 기능
한땀을(를) 다르게 만드는 4가지
01
하루 한 땀, 28일의 조각 규칙
z18 타일(한 변 121.2m)을 하루에 한 번 지나면 한 땀. 28일 동안 가장 자주 들른 사람의 색으로 조각이 물듭니다. 시속 16km 이상은 세지 않고, 매일 04:00에 확정됩니다.
- 빠르기 · 거리 대신 꾸준함을 보상
- 차 · 자전거 속도 제외
02
지킬 조각 · 오늘 가면 내 것
빼앗길 위기의 조각은 풀리는 실로, 오늘 걸으면 가져올 수 있는 조각은 시침질로 보여 줍니다. 오늘 어디로 걸을지 지도가 먼저 알려 줍니다.
- 조각 상태 6가지 시각 언어
- 지킬 조각 목록
03
위치 약속
위치는 산책 중에만 씁니다. 이웃에게는 하루 늦게, 조각 단위로만 보이고, 집 근처는 빗금으로 가립니다. 온보딩에서 이 약속을 먼저 보여 준 뒤 권한을 묻습니다.
- 집 가림 · 공개 범위 설정
- 권한 거부 · 꺼짐 상태 설계
04
동네 조각보와 인사
동네 전체가 하나의 조각보가 되고, 길이 겹친 이웃에게 인사를 남길 수 있습니다. 색을 구분하기 어려운 사람을 위해 색 대신 무늬로 구분하는 옵션을 넣었습니다.
- 조각보 카드 공유
- 무늬로 구분 · 글자 아주 크게
All screens
전체 화면 106장
모든 화면은 실제로 동작하는 HTML 프로토타입에서 자동 촬영했습니다. 화면을 누르면 크게 볼 수 있어요.
지도
701지도 홈 02지도 홈 · 시트 펼침 03지도 · 내 조각만 04지도 보기·범례 19지도 · 산책 후 48새 사용자 첫 지도 49위치 권한 꺼짐
조각
905조각 · 지켜야 할 06조각 · 오늘 가면 내 것 07조각 · 내 조각 08조각 · 이웃 조각 09조각 · 가려진 이웃 10조각 · 빈 조각 11지킬 조각 목록 20조각 · 오늘 가져옴 21조각보 카드
산책
812산책 시작 직후 13산책 중 · 가져옴 14산책 중 · 2.4km 15산책 중 · 멈춤 16산책 끝내기 확인 17산책 결과 18산책 결과 · 아래 28산책 자세히
이웃
422인사 남기기 23이웃 · 소식 24이웃 · 겹친 이웃 25이웃 자세히
기록
226기록 27기록 · 아래
나 · 동네 조각보
429나 30나 · 아래 31동네 조각보 32동네 조각보 · 아래
설정 · 알림
1033알림 34규칙 안내 35공개 범위 36집 가림 37화면과 글자 38알림 설정 39별명과 염료 40내 기록과 계정 41지도 출처 50권한 안내
온보딩
642온보딩 1 · 인사 43온보딩 2 · 규칙 44온보딩 3 · 위치 약속 45온보딩 · 위치 권한 창 46온보딩 4 · 별명·염료 47온보딩 5 · 집 가림
접근성
351글자 아주 크게 52글자 아주 크게 · 조각 53무늬로 구분
지도
701지도 홈 02지도 홈 · 시트 펼침 03지도 · 내 조각만 04지도 보기·범례 19지도 · 산책 후 48새 사용자 첫 지도 49위치 권한 꺼짐
조각
905조각 · 지켜야 할 06조각 · 오늘 가면 내 것 07조각 · 내 조각 08조각 · 이웃 조각 09조각 · 가려진 이웃 10조각 · 빈 조각 11지킬 조각 목록 20조각 · 오늘 가져옴 21조각보 카드
산책
812산책 시작 직후 13산책 중 · 가져옴 14산책 중 · 2.4km 15산책 중 · 멈춤 16산책 끝내기 확인 17산책 결과 18산책 결과 · 아래 28산책 자세히
이웃
422인사 남기기 23이웃 · 소식 24이웃 · 겹친 이웃 25이웃 자세히
기록
226기록 27기록 · 아래
나 · 동네 조각보
429나 30나 · 아래 31동네 조각보 32동네 조각보 · 아래
설정 · 알림
1033알림 34규칙 안내 35공개 범위 36집 가림 37화면과 글자 38알림 설정 39별명과 염료 40내 기록과 계정 41지도 출처 50권한 안내
온보딩
642온보딩 1 · 인사 43온보딩 2 · 규칙 44온보딩 3 · 위치 약속 45온보딩 · 위치 권한 창 46온보딩 4 · 별명·염료 47온보딩 5 · 집 가림
접근성
351글자 아주 크게 52글자 아주 크게 · 조각 53무늬로 구분
Design system
디자인 시스템
색 · 서체 · 아이콘을 DTCG 토큰 JSON과 SVG 에셋으로 정리해 그대로 개발에 넘깁니다.
색 라이트 · 다크 토큰
라이트 · 모시와 실
모시 canvas
#F2F2EEsurface
#FFFFFFtext
#18191D실 accent
#C2146Aaccent-text
#9C0E55길 route
#E2237Emap-ground
#ECECE6다크
canvas
#121419surface
#1B1E25text
#EDEEEA실 accent
#F7589Faccent-text
#FF8CBE천연 염료 8색
쪽
#4462AE옥
#2C9184쑥
#6B9640송화
#A9A136치자
#E09E26감물
#CC7036홍화
#C93C44자초
#7B56B1서체 OFL 라이선스
오늘 한 땀 가져왔어요
2.4 km · 28 days
브랜드 · 에셋
쪽
옥
쑥
송화
치자
감물
홍화
자초
Deliverables & QA
산출물과 품질 검수
보기 좋은 시안에서 멈추지 않고, 개발자가 바로 옮길 수 있는 기준본을 만듭니다.
53화면 상태
(탭 4)
(탭 4)
106스크린샷
라이트 53 · 다크 53
라이트 53 · 다크 53
70아이콘 정의
(SVG 경로)
(SVG 경로)
8천연 염료 색 체계
297시연용 조각 데이터
(망원 · 합정 · 서교 일대)
(망원 · 합정 · 서교 일대)
40시연용 산책 기록
9디자인 토큰 파일 (DTCG)
2테마 · 라이트 · 다크
동작하는 HTML 프로토타입
실제 동네 지도(OpenStreetMap, ODbL) 위에 조각 규칙을 계산해 그립니다. 산책 시작 → 가져옴 → 결과, 조각 상태, 이웃 · 기록 · 설정 · 온보딩 · 권한 상태까지 53개 상태를 담았습니다.
디자인 토큰 · 접근성
모시 · 실 · 염료 · 지도 색을 라이트 · 다크 토큰(DTCG)으로 정리했습니다. 색 대신 무늬로 구분하기, 글자 아주 크게 상태를 화면으로 검증했습니다.
기술 스택
프로토타입 · 자동 검수
React 19TypeScriptViteTailwind CSS v4MotionZustandPlaywright