파파야 디자인 시스템
— 지도 위에서 겹쳐도 읽히게
노랑은 반가운 면, 오렌지는 행동과 목적지 A, 파랑은 목적지 B. 역할이 겹치지 않게 나눴습니다. 아래 값은 지도 화면·화면 보드가 실제로 쓰는 값이며, 같은 값을 W3C Design Tokens 형식의 tokens.json으로 내려받을 수 있습니다(토큰 구조 예시 — 편집 가능한 Figma 원본은 아닙니다).
01
색 토큰
중립축은 따뜻한 노랑(hue≈45)을 4% 섞었습니다. 대비가 모자라면 명도만 조정하고 hue는 바꾸지 않습니다. 각 칸의 숫자는 옆에 적은 짝과의 WCAG 대비비입니다.
canvas#FAF8F3
페이지 바탕(순백 금지)
16.32:1 AA
surface#FFFFFF
카드·시트
17.32:1 AA
subtle#F3EFE6
칩·입력 배경
15.09:1 AA
border#E6DFD1
경계선
muted#6A6152
보조 텍스트
5.74:1 AA
ink#1E1A13
본문·교집합 해치
17.32:1 AA
brand#FFB81C
파파야 노랑 — 선택 칩·브랜드 면(글자색 금지)
10.00:1 AA
accent#F2780C
주요 CTA 한 곳 + 목적지 A · 위 글자는 ink
6.16:1 AA
accent-text#A64B00
오렌지 계열을 글자로 쓸 때만
5.79:1 AA
dest-b#2563C9
목적지 B 전용
5.67:1 AA
loan#1F7A4D
「대출 가능」 배지 전용
4.56:1 AA
danger#B63A32
오류
5.77:1 AA
파생 — 같은 hue에서 명도만 바꾼 값
02
타이포그래피
한글은 Pretendard Variable, 숫자·가격·시간·면적은 Geist + tabular-nums. 리스트에서 가격 자릿수가 세로로 맞아 비교가 빨라집니다.
display · 26/800 · Geist tnum
전세 1억 8,500
title-lg · 24/800 · Pretendard
둘 다 가까운 곳도 찾을 수 있어요
title · 18/700 · Pretendard
45분 안 142곳
body-strong · 15/700 · Pretendard
연세대 신촌캠퍼스까지 32분
body · 14/400 · Pretendard
통근 시간을 넓히거나 조건을 풀면 가까운 곳부터 보여 드려요
label · 13/600 · Pretendard
통근 45분 · 연세대
caption · 12/400 · Pretendard
원룸 · 23.0㎡ · 7.0평 · 3층
micro · 11/600 · Pretendard
전세대출 가능
price-tag · 12/700 · Geist tnum
1000/55 1.8억
tabular-nums 켬 — 자릿수가 맞는다
1억 1,500
2억 8,000
1,000/55
기본(비례 숫자)
1억 1,500
2억 8,000
1,000/55
03
간격 · 반경 · 그림자 · 모션
반경은 2단계(10px 컨트롤·칩 / 20px 카드·시트 상단), 그림자는 2단계(떠 있는 면 / 선택 마커)만 씁니다. 모션은 180ms ease-out이 기본이고, 동작 줄이기 설정에서는 전부 멈춥니다.
간격
radius-control 10px
버튼·칩·입력
radius-card 20px
카드·시트 상단
shadow-float
시트·떠 있는 카드
shadow-marker
선택된 마커
모션
- base180ms · 기본 전환 · 진입 opacity+6px
- stagger32ms · 리스트 처음 8개
- sheet-snap220ms · 바텀시트 스냅
- zone-reveal240ms · 권역 30→45→60 · 60ms 간격
- camera650ms · flyTo·fitBounds (700ms 이내)
04
아이콘
lucide 한 벌, 선 두께 1.75로 통일했습니다. 지도 위 작은 아이콘이 타일 위에서도 뭉개지지 않도록 기본 1.5보다 조금 굵게 잡았습니다. 이모지 아이콘은 쓰지 않습니다.
05
컴포넌트 · variants
지도 화면이 실제로 쓰는 컴포넌트를 그대로 꺼내 놓았습니다. 범례는 눌러 볼 수 있습니다.
버튼
필터 칩 · 상태 칩
세그먼트
배지
리스트 카드 — 권역 안 / 선택 / 권역 밖 / 목적지 2개 / 스켈레톤
범례 = 컨트롤(시그니처) — 눌러 보세요
통근 권역
단계를 누르면 그 시간이 상한이 되고, 지도에서는 폴리곤 강조·안/밖 마커·리스트·필터 칩·시트 머리 숫자가 한꺼번에 바뀝니다. 각 항목의 숫자는 「그 조건으로 바꾸면 몇 곳이 남는지」를 미리 알려 줍니다.
바텀시트 — 3단 스냅(peek 132 · half 50% · full)
상태 — 빈 결과 · 오류
30분 안에 조건에 맞는 매물이 없어요
통근 권역을 계산하지 못했어요
06
지도 레이어 토큰
권역 채움은 도로 아래, 외곽선은 도로 위·지명 라벨 아래에 끼워 넣어 라벨과 길이 항상 폴리곤 위에 읽힙니다. 30·45·60 폴리곤은 포개지므로, 겹친 결과가 아래 불투명도가 되게 레이어마다 실제 칠할 값을 역산해 씁니다.
권역 A — accent #F2780C · 외곽선 #C2600A
30분
fill 0.32
레이어 0.150
선 1.5px
45분
fill 0.2
레이어 0.111
선 1.25px
60분
fill 0.1
레이어 0.100
선 1px
권역 B — dest-b #2563C9 · 외곽선 #1E4FA1
30분
fill 0.28
레이어 0.133
선 1.5px
45분
fill 0.17
레이어 0.088
선 1.25px
60분
fill 0.09
레이어 0.090
선 1px
계단형 — fill 0.06 · 외곽선 2px · 선 위 라벨
교집합 — ink 사선 해치 8px · 선 1px · 0.35 + ink 외곽선 2px
마커 · 클러스터 · 목적지 핀
가격 태그는 흰 바탕(surface)에 목적지 색 테두리만 씁니다. 태그를 오렌지로 칠하면 같은 오렌지 권역 위에서 사라지기 때문입니다. 권역 밖은 한 단계 작게 · 0.55 투명 · 회색, 클러스터도 안(잉크)·밖(옅은 원)을 따로 묶습니다.
halo: 흰색 3px · 0.9 — 외곽선 밑에 깔아 어떤 타일 위에서도 경계가 끊기지 않게 합니다.