컴포넌트
Color
Neutral
900
800
700
600
500
400
300
200
100
S20 L4
S12 L15
S8 L32
S6 L42
S5 L53
S7 L63
S10 L75
S18 L90
S17 L98
Primary
900
800
700
600
500
400
300
200
100
S39 L20
S36 L29
S34 L38
S32 L47
S30 L56
S35 L65
S40 L75
S46 L84
S52 L95
Warning
900
700
500
300
100
S90 L28
S86 L39
S80 L50
S86 L71
S90 L92
Success
900
700
500
300
100
S30 L24
S25 L39
S20 L55
S25 L70
S32 L92
Error
900
700
500
300
100
S52 L40
S46 L52
S40 L65
S45 L78
S51 L92
Typography
KIMM은 간판 전용 · 본문은 Pretendard
영화볼지도
display/h1 · KIMM 24
오늘 뭐 볼까
display/h2 · KIMM 20
괴인 · 이정홍
body · Pretendard 14
19:30 상영 후 · 잔여 12석
meta · Pretendard 12
GV · 매진 임박
label · Pretendard 10
Step 1 · 토큰
프리미티브 토큰 & 시멘틱 레이어 구축
색상을 HSL 기반으로 재설계해, 39개 프리미티브 토큰을 정립했습니다.
시멘틱 레이어를 구성해 컴포넌트가 컬러 값을 직접 참조하지 않고 역할 단위로 유연하게 대응하도록 설계했습니다.
Icon
Lucide · stroke 1.75 · currentColor 상속
Spacing
n = px÷4 · 인접 차 ≥33% · 20/40 삭제(16·24/32·48로 수렴)
spacing/1 · 4px
칩·배지 내부, 아이콘-글자 사이
spacing/2 · 8px
요소 간 기본 간격
spacing/3 · 12px
카드 내부 요소 사이
spacing/4 · 16px
카드 패딩, 거터
spacing/6 · 24px
카드 내부 그룹 사이
spacing/8 · 32px
카드 사이, 큰 패딩
spacing/12 · 48px
섹션 사이
spacing/16 · 64px
큰 섹션 사이, 화면 상하
spacing/24 · 96px
히어로 위아래
spacing/32 · 128px
특대 — 엠티 스테이트·랜딩
2.0/BookingCTA
스파이더맨: 브랜드 뉴 데이
16:00 · 잔여 69석
예매하러 가기
회차 선택됨
스파이더맨: 브랜드 뉴 데이
16:00 → 18:24 · 잔여석 69/89석
예매하러 가기
Step 2 · 컴포넌트
컴포넌트 조합 및 모듈화
화면을 매번 새로 그리지 않고 쌓아 올릴 수 있도록 버튼, 칩, 배지 등 19종의 프리미티브 컴포넌트를 정의했습니다.
2.0/Button
적용하기
적용하기
적용하기
지도에서 보기
지도에서 보기
지도에서 보기
더보기
더보기
더보기
삭제
삭제
삭제
2.0/ShowtimeCell
20:10
-21:51
82/120석
21:40
-23:21
6/90석
23:10
-00:51
45/90석
20:10
-21:51
지금 상영중
19:30
-21:11
매진
11:20
-13:01
상영 완료
2.0/PosterPin
괴인
+11
괴인
+11
괴인
너와 나
세기말의 사랑
+9
괴인
너와 나
세기말의 사랑
+9
기준을 값으로 옮기고, 값을 컴포넌트로 묶었습니다
프리미티브 구성
정한 방향이 화면까지 닿도록, 색·간격·글자를 토큰으로 정의하고 같은 역할의 요소를 컴포넌트로 묶었습니다.