Logo · Voice

브랜드는 두 가지로 말해요 — 워드마크와 말투.

워드마크

• 서체: Paperlogy 900 — 디스플레이 전용, 본문에는 사용하지 않아요
• 기본색 #fff (White) — 배경 명도에 관계없이 교체하지 않아요
• 네온 그린 배경 위에서만 #0A0A0A로 반전 허용
• SVG 소스: assets/img/cover-logo-text.svg

컬러 사용 원칙

Voice & Tone

Color

컬러는 2계층이에요. Primitive(순수 색값)를 정의하고, Semantic(역할 토큰)이 이를 참조해요. 작업 시엔 반드시 시맨틱 토큰명으로 소통해요. 스펙·핸드오프 문서에도 원시 HEX 대신 토큰명을 적어요 — 값이 바뀌어도 문서가 낡지 않아요.

Primitive — Gray Scale

Primitive — Neon

Primitive — Chart / Data Viz

도넛 차트·바 차트 시리즈 색이에요. 브랜드 네온 컬러와 동시에 쓸 수 있도록 채도를 맞췄어요.

Semantic Tokens

Status Color

상태 전달에만 사용하는 색이에요. 브랜드 색(그린·퍼플)과 동시에 한 화면에 쓰지 않아요.

대비 검증 (실측)

역할 조합을 사전 검증해둬요 — 아래 조합 외의 색 조합은 만들지 않는 게 규칙이에요.

Typography

두 서체의 역할이 겹치지 않아요. Paperlogy는 소리치는 곳(디스플레이·헤드라인), Pretendard는 설명하는 곳(본문·라벨·수치). 이 경계가 무너지면 페이지 전체 위계가 무너져요.

서체 패밀리

타입 스케일 (사이트 실측)

규칙

• Paperlogy는 두 웨이트만. 900은 커버·챕터 디스플레이, 800은 섹션 헤드라인. 700 이하로 얇게 쓰지 않아요.
• 자간의 방향이 반대예요. 큰 글자(디스플레이)는 좁게(−0.02em), 작은 라벨은 넓게(+0.12em 이상). 반대로 쓰면 어색해져요.
• 본문은 word-break: keep-all — 한국어 어절 단위 줄바꿈이 전 요소 기본값이에요.
• 수치 강조(87%, −40%)는 Pretendard 800 + 네온 컬러. Paperlogy로 숫자를 치지 않아요 — 숫자는 데이터의 목소리라 본문 서체가 맞아요.

Spacing

4px 배수 기반 17단계예요. 컴포넌트 내부는 sp-2~7, 컴포넌트 사이는 sp-8~11, 섹션 사이는 sp-13~16 — 세 구간을 넘나들지 않는 것이 리듬의 핵심이에요.

스케일

시맨틱 스페이싱 (상황 이름)

반복되는 간격 결정에는 이름을 붙여요 — 간격이 어휘가 되면 고민을 다시 하지 않아요.

규칙

• 가까운 것은 더 가깝게, 먼 것은 확실히 멀게. 라벨→헤드라인 8px, 헤드라인→본문 16px, 본문→다음 그룹 48px처럼 격차를 계단식으로.
• 섹션 세로 리듬은 --section-y(100px) 하나로 통제 — 개별 섹션에서 임의 값을 넣지 않아요.
• 모바일(640px 이하)에서는 섹션 패딩만 60~70%로 줄이고 컴포넌트 내부 간격은 유지해요.

Shape

Radius · Drop Shadow · Divider 세 요소로 컴포넌트의 깊이와 경계를 표현해요. 모서리는 요소 크기를 따라 작은 것은 각지게, 큰 것은 부드럽게 — 깊이는 그림자가 아닌 표면 밝기로.

Radius 스케일

Drop Shadow

다크 테마에서 그림자는 잘 보이지 않아요. 기본적으로 표면 밝기(surface 사다리)로 깊이를 표현하고, 꼭 필요한 경우에만 글로우로.

Divider

요소 간 경계선이에요. 색이 아닌 선 하나로 — 명시적 구분이 꼭 필요한 곳에만 써요.

• Divider는 마지막 수단이에요 — 여백만으로 충분히 구분되면 선을 넣지 않아요.
• 연속 항목(테이블 행)은 border-lo, 컴포넌트 간 경계는 border, 강조 영역은 border-hi.

규칙

• 칩·태그처럼 완전한 알약형은 --r-full(9999px) — 어중간한 곡률이 제일 어색해요.
• 같은 카드 안에서 부모보다 자식의 radius가 크면 안 돼요. 부모 --r-lg면 자식은 --r-sm~--r-md.
• 다크에서 그림자는 불투명도를 2배로 — Fluent 기준(라이트 14% → 다크 28%). 이미 토큰에 반영돼 있어요.

Layout · Grid

1440px 캔버스 위 1248px 콘텐츠 — 12컬럼 그리드예요. 규칙은 하나: 같은 크기를 연속 두 번 쓰지 않기. 대/중/소 3단계 변주가 에디토리얼 리듬을 만들어요.

기준값

브레이크포인트

리듬 원칙

• 크기 3단계(대/중/소) 변주 — 폰 목업 밴드는 줄마다 위계를 다르게. 같은 크기 4대 일렬은 금지 패턴이에요.
• 오프셋 — 인용·카드류는 좌/우/좌 55~60% 폭 배치. 세로로 8vh 정도 어긋나게.
• 풀블리드는 아껴서 — 마퀴·테이프 등 화면 끝까지 미는 요소는 페이지에 2~3곳만.

서브페이지 레이아웃 (SPA / 도구형)

케이스 스터디 하위 서브페이지(운동 MBTI 등 단일 SPA 도구)는 별도 레이아웃 기준을 따라요.

서브페이지 브레이크포인트

Motion

모션은 콘텐츠를 소개하는 역할까지만 해요. 이징 하나, 지속시간 3단계 — 그리고 반드시 prefers-reduced-motion에 응답해요.

토큰

Z-Index 스케일

스테이트 레이어 (전역 규칙)

Material 3 방식이에요. 컴포넌트마다 호버색·눌림색을 따로 정하지 않고, 표면 위 텍스트색(on-color)을 낮은 불투명도로 덮는 규칙 하나로 통일해요. 컴포넌트가 늘어도 상태 색을 새로 정의할 일이 없어요.

다크 테마 모션·깊이 규칙

• 깊이는 그림자가 아니라 표면 밝기로 — 다크에서 그림자는 보이지 않아요. surface-1 → 2 → 3 사다리로 올려요 (Carbon의 layer 토큰 방식).
• 그림자를 써야 하면 다크에서는 불투명도를 2배로 (Fluent 기준 14% → 28%).
• 다크는 라이트의 단순 반전이 아니에요 (Apple HIG) — 색을 뒤집지 말고 역할별로 다시 정해요.

규칙

• 리빌은 IntersectionObserver 기반 — GSAP(ScrollTrigger)이 죽어도 콘텐츠는 보이는 방어 설계를 유지해요.
• 등장 모션은 opacity + translateY만. scale·rotate 등장은 테이프 요소 한정.
• prefers-reduced-motion: reduce에서 마퀴 정지 · 리빌 즉시 표시.

Icon

서비스의 분위기와 목적을 전달할 수 있도록 간결하면서도 일관성 있게 제작해요. UI Icon(라인 기반)과 Visual Icon(색상 강조) 두 종류로 나뉘어요. 갤러리는 카테고리당 대표 샘플이에요 — 전체 810개 세트는 Figma에 있어요.

Key Line

키라인은 아이콘의 기준 격자예요. 구조(Structure), 기호(Character), 아이덴티티(Identity)를 고려해 4가지 기본 도형의 밀도감이 균일해 보이도록 각각 다른 크기로 맞춰요.

Naming Rule

슬래시(/) 3단계 구조예요. 첫 번째 폴더명과 카테고리명의 첫 글자는 대문자, 나머지는 소문자로.

UI Icon vs Visual Icon

카테고리 (18개 · 810개)

아이콘 갤러리

Security 28

face-id-01

lock-01

shield-01

key-02

scan

password-01

Layout 61

grid-01

layers-01

layout-01

flex-rows

divider

align-down-01

Profiles & Users 29

user-profile-01

user-profile-circle

users-profiles-01

user-profile-add

user-profile-x

smiley-happy

Media 65

play-01

pause-01

headphones

microphone-01

volume-01

battery-01

Shapes 9

circle

diamond

hexagon

octagon

pentagon

square

star-01

star-02

triangle

Charts 36

bar-chart-01

pie-chart-01

line-chart-up-01

trend-up-01

presentation-01

compass

Finance 64

wallet-01

card-01

bank

receipt

coins

tag

Editor 78

bold-01

italics-01

type-01

color-picker

pencil-01

crop-01

Travel & Location 32

globe-01

marker-01

plane

passport

train

target-01

Time 34

clock-01

calendar-01

alarm-01

stopwatch-01

hourglass-01

watch-01

Weather 30

cloud-01

sun-01

cloud-rain

moon-01

snowflake

temperature-01

규칙

• 내비게이션 아이콘은 20px 라인 아이콘 고정 — 활성: --neon-green · 비활성: --text-lo.
• 버튼 아이콘은 16px · 레이블 왼쪽 · 간격 6px(sp-3).
• 퍼플 도메인 화면에서는 아이콘 색도 --neon-purple로 — 색 신호는 도메인과 일관되게.
• 아이콘만으로 의미를 전달할 때는 반드시 aria-label 또는 툴팁을 함께.

Button

화면당 Primary는 하나예요. 네온 그린 위 텍스트는 항상 블랙(--bg) — 화이트를 올리는 순간 대비가 무너져요.

구성요소

상태

변형

사이즈

Primary(그린 채움)와 Secondary(그린 보더)는 동일한 5단계 높이를 공유해요. 화면에서 가장 흔히 쓰는 건 Medium(40px)이에요.

카피 규칙 (Content)

Polaris·Fluent 방식이에요 — 문구 규칙을 먼 곳의 라이팅 가이드가 아니라 컴포넌트 문서 안에 둬요. 쓰는 자리에서 바로 보여야 지켜져요.

언제 무엇을 쓰나 (비교)

스펙

• 기본 크기(Medium): 높이 40px · 폰트 13px/600 · 수평 패딩 20px · radius 8px
• 터치 대상: Large(48px) 이상 권장 · Medium(40px)은 상하 여백 포함 시 최소 44px 확보
• 버튼 사이 간격: 12px(sp-5) · 아이콘-레이블: 6px(sp-3)
• 전환: background 150ms var(--easing)

키보드 인터랙션

Chip

필터·태그·키워드에 쓰는 알약형 요소예요. 선택 상태는 네온 그린 배경을 채워 명확하게 구분해요.

구성요소

상태

Checkbox · Radio

둘 다 20×20px, 같은 문법이에요. 다른 건 모서리 하나 — 체크박스는 5px, 라디오는 원. 선택은 언제나 그린이에요.

상태

스펙

언제 무엇을 쓰나 (비교)

키보드 인터랙션

사용규칙

• 복수 선택은 체크박스, 단일 선택은 라디오 — 온보딩 5단계의 "하나만 고르는 질문"은 전부 라디오예요.
• 라디오 그룹은 최소 2개, 기본값을 미리 선택해두지 않아요(사용자의 답을 유도하지 않기).

Text Field

입력 필드는 조용해요. 포커스가 왔을 때만 그린 보더로 응답하고, 나머지 시간엔 서피스에 가라앉아 있어요.

상태

상태 스펙

사용 규칙

• 플레이스홀더는 질문형 문장으로 — "어떤 장비를 찾고 있어요?" (명령형 "입력하세요" 금지)
• 플레이스홀더 색은 --text-lo — 입력값과 혼동되지 않게 두 단계 낮춰요.
• 에러는 색으로만 말하지 않고 반드시 헬퍼 텍스트를 함께 — 색약 사용자 대응이에요.
• Disabled 상태에서 커서는 not-allowed — 왜 입력이 안 되는지 툴팁이나 안내가 가까이 있어야 해요.

App Bar

모든 화면 상단에 붙는 내비게이션 바예요. 현재 컨텍스트와 핵심 액션을 제공해요. 7가지 변형이 있어요.

변형

구성요소

스펙

• 높이: 52px (단일 행) · scroll 변형은 52 + 40 + 16px = 108px
• 배경: --surface-1 (#111111) · 하단 1px --border-lo
• 패딩: 16px (좌우 동일)
• 아이콘 탭 영역: 36×36px · 내부 아이콘 24px
• 스크롤 시 --shadow-sm 추가 — 콘텐츠가 바 아래로 올라옴을 표시

변형 선택 규칙

Navigation Bar

앱의 4탭 하단 내비게이션이에요. 활성 탭 하나만 그린 — 나머지는 침묵해요. 이 4탭이 IA(정보구조)의 최상위 노드예요.

구성

스펙

• 크기: 393px × 53px (디바이스 너비 고정 · 높이 고정)
• 컨테이너: --surface-2 · 상단 1px --border · radius 14px(디바이스 프레임 안)
• 활성: 아이콘+레이블 --neon-green / 비활성: --text-lo
• 탭 전환에 애니메이션을 넣지 않아요 — 즉답이 내비게이션의 미덕이에요.

접근성 (Aria)

FAB Deprecated

Floating Action Button이에요. 현재 화면의 부가 기능이 필요할 때 화면 위에 띄워 쓰는 버튼이에요. Quick Menu(메뉴 열기)와 Go to Top(최상단 이동) 두 종류예요.

변형

Quick Menu — 액션 목록

FAB을 탭하면 최대 5개의 액션 항목이 위로 펼쳐져요. 각 항목은 아이콘 + 레이블 조합이에요.

상태

스펙

• 크기: 56×56px · radius --r-full(9999px) · 아이콘 24px
• 위치: 화면 우하단 · 하단 내비게이션 바 위 16px(sp-6) 간격
• Go to Top은 스크롤 200px 이상 내려갔을 때만 표시 — 최상단에서는 숨김

사용 규칙

• 화면당 FAB은 하나 — Quick Menu와 Go to Top을 동시에 쓰지 않아요.
• Quick Menu 항목은 최대 5개 — 많아질수록 목적이 흐려져요.
• 레이블은 동사형 — "저장" 대신 "저장하기", "공유" 대신 "공유하기".

Overflow

표시할 수 있는 것보다 더 많은 옵션이 존재할 때 쓰는 버튼이에요. 탭하면 컨텍스트 메뉴가 펼쳐지고, 나머지 액션에 접근할 수 있어요.

구성요소

상태

사용 규칙

• 카드·목록 항목 오른쪽 끝에 배치 — 카드 패딩 안쪽, 상단 정렬.
• 메뉴 항목은 최대 7개 — 많아질수록 "기타" 아래 묶어요.
• 파괴적 액션(삭제 등)은 메뉴 가장 아래 · #FF5D5D 색 처리.
• Overflow와 Primary Button을 같은 카드에 함께 쓰지 않아요 — 행동 경로가 둘로 갈라지면 인지 비용이 늘어요.

Date Picker Beta

날짜 또는 연도·월을 선택하는 컴포넌트예요. Type A는 단일 날짜, Type B는 연도·월 선택이에요.

Type A — 단일 날짜 (Date)

Type B — 연도·월 (Year & Month)

스펙

• 컨테이너: --surface-2 · 1px --border · --r-md · padding 16px
• Type A 최소 너비: 264px · Type B: 연도 열(56px) + 구분선 + 월 그리드
• 날짜 셀: 기본 7px 패딩 · --r-sm · 호버 --surface-3
• 피커는 인풋 아래 배치 · --shadow-md · --z-overlay

키보드 인터랙션

사용 규칙

• Type A는 특정 날짜 선택 (운동 기록, 일정 등), Type B는 월 단위 조회 (통계, 필터)에 사용해요.
• 선택 가능한 날짜 범위가 있으면 범위 밖은 반드시 Unselectable 처리 — 탭해도 반응 없음.
• 오늘 날짜는 항상 Today 상태로 강조 — 사용자가 현재 위치를 잃지 않도록.

Card / Product

상품의 썸네일·브랜드·이름·평점·태그를 하나의 단위로 묶는 카드예요. M은 그리드 나열, S는 랭킹 리스트 행에 써요.

Card/Product/M

Card/Product/S 랭킹 리스트

구성 요소

Tag/Product 색 규칙

스펙

Badge

작은 레이블로 상태·카테고리·중요도를 시각화해요. 치트키 컨텍스트에 맞는 변형(variant)을 선택해 사용하세요.

Tone × Size

Tone 선택 규칙

스펙

클래스명 패턴

<span class="jb-badge jb-badge--{md|lg} jb-badge--{brand-solid|brand-weak|brand-outline|critical|positive|warning|neutral}">
  레이블 텍스트
</span>

카드와의 조합

Card / Review

리뷰 목록에서 하나의 리뷰를 나타내는 카드예요. 유저 정보 · 별점 · 텍스트 · 좋아요로 구성되고, 3줄 이상은 잘라요.

구성요소

구성 요소 규칙

별점 표기 규칙

스펙

• 카드 배경: --surface-2 · 보더: --border-lo · radius: --r-md(12px)
• 내부 패딩: 16px · 섹션 간격(gap): 12px
• 좋아요 버튼: height 28px · px 12px · radius 99px

Review / Content

리뷰 상세(펼친 상태)예요. Card/Review의 본문을 완전히 펼치고 이미지 갤러리와 스펙 별점을 추가해요.

구성요소

Card/Review vs Review/Content

스펙 별점 항목

Rank / Card

리뷰 수·평점 기준 순위를 2열 그리드로 나열해요. 1~3위는 그린, 4위부터는 기본 텍스트 색을 써요.

구성요소

구성 요소 규칙

스펙

• 레이아웃: 2열 그리드 · 열 간격 24px · 행 간격 12px
• 최대 항목: 기본 6개 (3×2) · "전체보기" 시 무한 스크롤
• 기준: 최근 7일 리뷰 수 (헤더 부제 표기 필수)

Avatar / Face

유저를 나타내는 원형 이미지예요. 사진이 없으면 앱 기본 3D 캐릭터 아이콘을 써요 — 이모지나 이니셜 폴백은 쓰지 않아요.

사이즈

사이즈 규칙

상태

구성 요소 규칙

스펙

• 모양: 원형 고정 (border-radius 50%)
• 배경: --surface-3 (사진 없을 때) · 그린 (선택된 캐릭터)
• 보더: 1px --border-lo 기본 · 사진 등록 시 2px --neon-green
• 편집 핀(+): 20px · 그린 배경 · 검정 아이콘 · 원 우하단 절대위치

Filter / Bar

상품 목록 상단에 붙는 가로 스크롤 필터 행이에요. "전체"가 항상 첫 번째 칩이고, 하나 이상 선택되면 "전체" 선택은 해제돼요.

기본 상태

필터 선택 상태

구성 요소 규칙

칩 상태

스펙

• 칩 높이: 32px · 수평 패딩: 14px · radius: 99px
• 칩 간격: 6px · 폰트: 12px/500
• 스크롤: 가로 스크롤 · 스크롤바 숨김 · 끝단 페이드 처리 권장
• 위치: 섹션 헤더 바로 아래 · sticky 또는 컨텐츠 상단

Select / Category

카테고리·정렬 기준을 드롭다운으로 선택하는 컴포넌트예요. AppBar의 SUB 변형에서 카테고리명 + ▾ 형태로도 나타나요.

인라인 드롭다운

AppBar 연동 — SUB 변형

AppBar > SUB 변형 — 카테고리명이 직접 AppBar 타이틀 역할을 해요. 탭 하면 Select/Category 드롭다운이 열려요.

구성 요소 규칙

스펙

• 트리거 높이: 44px · 수평 패딩: 16px · radius: --r-sm(8px)
• 드롭다운 최소 폭: 180px · 내부 패딩: 4px · 항목 높이: 44px
• 드롭다운 출현: opacity 0→1 + translateY -6px→0 · --dur-fast
• 오버레이: 드롭다운 외부 탭 시 닫힘 (별도 dim 없음)

Segmented Control

같은 레벨의 뷰·모드를 전환하는 컴포넌트예요. 한 번에 하나만 선택되고, 탭 사이를 이동해도 데이터는 유지돼요.

2세그먼트

3세그먼트

리뷰 정렬 (3세그먼트)

비활성 (Disabled)

구성 요소 규칙

Segmented Control vs Chip vs Tab

스펙

• 컨테이너: 내부 패딩 3px · radius 8px · 배경 --surface-2
• 세그먼트: 높이 40px · radius 6px · 폰트 14px/500 → 선택 14px/600
• 선택 전환: background + color --dur-fast
• 최대 세그먼트: 4개 (5개↑부터는 Filter/Bar 권장)

Progress / Step

리뷰 작성·온보딩 같은 멀티스텝 플로우에서 현재 단계를 보여줘요. 완료된 단계는 그린 채움, 현재 단계는 그린 보더, 미래 단계는 회색이에요.

3단계 — 리뷰 작성

4단계 — 온보딩

구성 요소 규칙

스텝 상태

스펙

• 닷 크기: 28×28px · 보더: 2px · radius: 50%
• 연결선: 1px · 닷 세로 중앙(top 14px) · 닷 끝에서 시작
• 레이블: 10px · 닷 하단 6px
• 최대 스텝 수: 4개 (5개↑ 시 닷 폭이 너무 좁아짐)

Toast

일시적인 시스템 피드백을 화면 하단에 표시하는 컴포넌트예요. 3초 후 자동으로 사라지며 사용자 동작을 차단하지 않아요.

기본 타입

타입별 용도

구성 요소 규칙

스펙

• 위치: 화면 하단 중앙 · safe area 위 16px · 최대 폭 360px
• 수직 패딩: 14px · 수평 패딩: 16px · radius: --r-md(16px)
• 표시 시간: 3초(기본) / 액션 있으면 5초 / 오류는 수동 닫기 권장
• 동시 표시: 최대 1개 · 새 토스트는 기존 토스트를 밀어내며 등장
• 등장: translateY +8px → 0 + opacity 0→1 · --dur-fast

Bottom Sheet

모바일에서 필터·정렬·단순 선택 등 보조 작업을 수행하는 하단 슬라이드업 패널이에요. 스크림을 탭하거나 핸들을 드래그하면 닫혀요.

정렬 옵션 — 기본 리스트형

필터 옵션 — 액션 버튼 포함

구성 요소 규칙

스펙

• radius: top 22px(r-lg) · bottom 0
• 배경: --surface-2 · 그림자: --shadow-md
• 최대 높이: 화면의 80% · 초과 시 내부 스크롤
• 등장: translateY +100% → 0 · --dur-base + --ease-spring
• 해제: 핸들 드래그 다운 or 스크림 탭 or 단일 선택 즉시

Empty State

데이터가 없는 상태를 사용자에게 알리고, 다음 행동을 유도하는 화면 패턴이에요. 빈 상태는 오류가 아니라 진입 포인트예요.

검색 결과 없음

리뷰 없음 — CTA 포함

네트워크 오류 — 재시도 포함

구성 요소 규칙

빈 상태 3종 패턴

Skeleton

콘텐츠 로딩 중 레이아웃 이동을 방지하고 대기 경험을 개선하는 플레이스홀더예요. 실제 컴포넌트 형태와 일치시켜야 해요.

상품 카드 스켈레톤

랭킹 리스트 스켈레톤

리뷰 카드 스켈레톤

구성 요소 규칙

사용 원칙

• 300ms 이상 로딩 예상 시 스켈레톤 표시 (그 미만은 스켈레톤 없이 바로 콘텐츠)
• 스피너와 스켈레톤은 같은 화면에 동시 사용 금지
• 스켈레톤 → 실제 콘텐츠 전환 시 fade-in 0.2s 권장 (레이아웃 이동 방지)
• 페이지 전체 로딩 시 AppBar는 실제 렌더, 콘텐츠 영역만 스켈레톤

Search Bar

상품·리뷰를 찾는 전역 검색 입력이에요. AppBar 하단 또는 카테고리 상단에 고정 배치돼요.

기본 상태

위에서부터: 기본(Placeholder) · 입력값 있음(Clear 표시) · 포커스 상태

비활성 (Disabled)

구성 요소 규칙

스펙

• 높이: 48px · 수평 패딩: 16px · radius: --r-full(9999px)
• 배경: --surface-2 · 보더: --border → 포커스: --neon-green-dim
• 플레이스홀더: 카테고리별로 다름 ("궁금한 러닝 장비 검색해보세요")
• 모바일: 탭 시 키보드 즉시 노출 · 검색은 키보드 확인 키 사용

Product Card

상품 목록 화면에서 사용하는 2열 그리드 카드예요. 썸네일 + 브랜드 + 상품명 + 별점·리뷰 수로 구성돼요.

기본 그리드 (2열)

구성 요소 규칙

스펙

• 카드 radius: --r-md(16px) · 배경: --surface-2 · 보더: --border-lo
• 바디 패딩: 10px 12px 12px
• 뱃지: 10px/700 · 좌상단 8px · radius 99px
• 리뷰 0건: 별 회색 · "(0)" 표시
• 호버: border-color → --border-hi

Banner

사용자를 특정 행동이나 기능으로 유도하는 전폭 프로모 카드예요. 홈·카테고리 상단에 1개만 배치해요.

브랜드 배너 (그린 강조)

뉴트럴 배너 (이벤트·공지)

구성 요소 규칙

배너 타입 선택 기준

Section Header

홈·카테고리 페이지 내 콘텐츠 블록 구분에 사용하는 타이틀 행이에요. 타이틀 + 서브텍스트 + 더보기 화살표로 구성돼요.

기본 (타이틀만)

서브텍스트 포함

더보기 없음 (전체 노출 시)

구성 요소 규칙

스펙

• 콘텐츠까지 하단 간격: 12px
• 더보기 링크 정렬: align-items: flex-end (서브텍스트 있어도 링크는 하단 정렬)
• 더보기 탭 영역: 최소 44×44px

Rating

상품·리뷰의 만족도를 별점으로 표현하는 컴포넌트예요. 표시형(읽기 전용)과 입력형(탭 선택) 두 가지로 사용돼요.

표시형 — 사이즈 변형

입력형 — 리뷰 작성

점수-레이블 매핑

스펙

• 별 색상: 선택됨 = --neon-green / 반 별 = 50% clip / 비선택 = --border-hi
• SM: 11px · MD: 16px · LG: 24px
• 입력형: 32px · 탭 영역 최소 44×44px · 선택 후 레이블 즉시 표시

Tag / Label

상품 속성과 상태를 작은 알약 형태로 표시해요. 필터 칩보다 작고 인터랙션 없이 정보 전달만 해요.

속성 태그 (Attribute)

선택된 속성 (Selected)

상태 레이블 (Status)

실제 사용 예 — Product Card 조합

구성 요소 규칙

스펙

• 높이: 24px · 수평 패딩: 10px · radius: 99px · 폰트: 11px/500
• 상태 레이블 텍스트: 대문자(uppercase) 권장
• 카드 1개당 태그 최대 3개 (이상이면 "+N" 생략 처리)

Divider

섹션·콘텐츠·리스트 아이템을 시각적으로 구분하는 1px 선이에요. 세기에 따라 3가지 토큰을 사용해요.

강도별 3종

레이블 구분선

사용 매핑

Spinner

단순 액션(버튼 탭 후 응답 대기, 데이터 재요청)의 짧은 로딩 상태에 사용해요. 300ms 이상 예상될 때만 표시하고, 긴 로딩은 Skeleton을 우선해요.

사이즈

버튼 로딩 상태

전체 오버레이 로딩

사용 기준

Carousel / Swiper

홈 배너·상품 이미지를 가로로 슬라이드하는 컴포넌트예요. 자동 재생과 스와이프 제스처를 지원해요.

홈 배너 캐러셀

구성 요소 규칙

스펙

• 슬라이드 전환: transform translateX · --dur-base + --ease-spring
• 스와이프 임계값: 50px 이상 드래그 시 다음/이전으로
• 닷: 기본 24×4px · 현재 32×4px · radius 2px · 간격 6px

Profile Card

마이페이지 상단에 표시되는 사용자 신원·활동 요약 카드예요. 아바타 + 닉네임 + 리뷰·좋아요 통계로 구성돼요.

기본 프로필 카드

미설정 상태 (게스트)

구성 요소 규칙

Stat Block

리뷰 집계·상품 성능 수치를 나란히 보여주는 수평 통계 블록이에요. 홈 요약·상품 상세 상단에 사용해요.

리뷰 통계

앱 전체 통계 (홈)

구성 요소 규칙

스펙

• 최대 항목: 3개 (4개↑ 수치 폰트 18px으로 축소)
• 배경: --surface-2 · radius: --r-md · 외곽 보더: --border-lo
• 그린 강조: 페이지당 1개 KPI 수치에만 사용

Load More

목록 하단에서 추가 콘텐츠를 불러오는 패턴이에요. 무한 스크롤(자동)과 버튼 로드(수동) 두 가지 방식을 지원해요.

무한 스크롤 — 로딩 중

더보기 버튼 (수동)

목록 끝

방식 선택 기준

Modal / Dialog

삭제 확인·구매 확인처럼 사용자의 명시적 결정이 필요한 순간에 사용해요. 배경을 딤 처리해 포커스를 모달에 집중시켜요.

확인 다이얼로그

정보 다이얼로그

구성 요소 규칙

Accordion

FAQ·상품 상세 정보처럼 콘텐츠를 접고 펼치는 패턴이에요. 여러 항목이 공존하며 독립적으로 열리고 닫혀요.

자주 묻는 질문 (FAQ)

구성 요소 규칙

스펙

• 기본 동작: 독립 개폐 (하나 열어도 나머지 닫히지 않음)
• 애니메이션: max-height: 0 → 400px + --dur-base + --easing
• 터치 영역: 트리거 전체 행 (아이콘만 X)

Notice / Alert

페이지 내 인라인 상태 알림이에요. 사용자의 행동 결과(성공·오류)나 중요 안내를 콘텐츠 흐름 안에서 보여줄 때 사용해요. Toast와 달리 사라지지 않아요.

타입별 예시

Toast vs Notice 선택 기준

Quantity Stepper

장바구니·상품 상세에서 수량을 증감하는 인터랙티브 컨트롤이에요. − / 숫자 / + 세 영역으로 구성돼요.

기본 스테퍼

장바구니 행 (컨텍스트 사용)

구성 요소 규칙

Tab Bar

동일 페이지 내에서 관련 콘텐츠를 수평으로 전환하는 탭이에요. 상품 상세(정보/리뷰/Q&A)나 마이페이지 서브 섹션에 사용해요.

상품 상세 탭

구성 요소 규칙

Price Display

상품 가격을 일관되게 표시하는 패턴이에요. 정가·할인율·최종가를 계층 구조로 시각화해요.

할인 가격

가격 표시 규칙

천 단위 형식

• 항상 Intl.NumberFormat('ko-KR') 사용 — 213,000 형식
• 소수점 가격 없음 · "원" 단위를 숫자 바로 오른쪽에 별도 span으로
• 0원은 "무료" 텍스트 (숫자 표기 X)

Form Group

레이블 + 입력 필드 + 힌트/에러 메시지를 묶은 최소 단위예요. 로그인·프로필 수정·리뷰 작성 폼에서 반복 사용해요.

기본 폼 예시 (프로필 수정)

구성 요소 규칙

Switch / Toggle

알림·다크모드처럼 즉각 효과가 있는 On/Off 설정에 사용해요. 체크박스와 달리 탭 즉시 적용돼요.

상태별 예시

알림 설정 목록 (컨텍스트)

Switch vs Checkbox 선택

List Item / Row

설정·메뉴·선택 목록의 각 행 단위 패턴이에요. 아이콘 + 텍스트 + 우측 부가 요소의 3-존 레이아웃으로 구성돼요.

설정 목록

값 선택 목록

구성 요소 규칙

스펙

• 최소 행 높이: 52px · 실제 패딩: 14px 상하
• 항목 구분: 하단 1px --border-lo · 마지막 항목 구분선 없음
• 터치 영역: 전체 행 (cursor:pointer + :hover 배경 --surface-2)

Tooltip

아이콘·약어·잘린 텍스트의 의미를 탭하거나 호버했을 때 말풍선으로 설명해요. 12자 이하의 짧은 보조 텍스트에만 사용해요.

위치 변형

구성 요소 규칙

스펙

• 표시 지연: 탭 즉시 / 호버 300ms 후
• 사라짐: 포커스 이탈 또는 2초 타임아웃(모바일)
• z-index: --z-raised (10)

Bottom CTA Bar

상품 상세 하단에 고정된 구매 행동 유도 바예요. 스크롤 여부와 관계없이 항상 화면 하단에 떠 있어요.

상품 상세 CTA

리뷰 작성 CTA

구성 요소 규칙

스펙

• 위치: position: sticky; bottom: 0 (SPA 내) 또는 fixed (전체 페이지)
• 안전 영역: iOS 홈 인디케이터를 위해 padding-bottom: env(safe-area-inset-bottom)
• CTA 최대 2개 (아이콘 버튼 제외)

Score / Metric

장비 세부 성능 항목(쿠셔닝·그립·무게)을 막대 그래프와 숫자로 시각화해요. 상품 상세 리뷰 집계 섹션에 사용해요.

세부 평점 (러닝화)

구성 요소 규칙

Variant Selector

색상·사이즈·옵션을 선택하는 상품 상세 내 인터랙티브 선택기예요. 칩 형태(텍스트)와 컬러 스왓치 두 가지로 구성돼요.

사이즈 선택

색상 선택

구성 요소 규칙

Photo Grid

리뷰 작성 시 사진을 첨부하거나, 상품·리뷰의 사진을 격자로 보여주는 컴포넌트예요.

리뷰 작성 — 사진 첨부

상품 리뷰 갤러리 (보기)

구성 요소 규칙

스펙

• 그리드 간격: 4px · 셀 radius: --r-sm
• 최대 업로드: 5장 · jpg/png/webp · 5MB 이하
• "+N" 오버레이: background:rgba(0,0,0,.45) · 텍스트 16px/700 · 흰색

Sort Sheet

피드·목록 화면에서 정렬 기준을 바꾸는 바텀 시트 변형이에요. 상단 "정렬" 버튼 탭 시 슬라이드업돼요.

리뷰 정렬 (인라인 데모)

랭킹 피드 정렬

구성 요소 규칙

Spec Table

장비의 기술 제원(무게·소재·드롭)을 레이블-값 쌍으로 나열해요. 상품 상세 "상품 정보" 탭 내 주요 섹션이에요.

러닝화 제원

헬멧 제원 (사이클링)

구성 요소 규칙

Chip Input

리뷰 태그·키워드를 칩 형태로 추가·삭제하는 인풋이에요. Enter 또는 스페이스로 칩을 생성해요.

리뷰 태그 입력

구성 요소 규칙

Step Wizard

결제·회원가입·온보딩처럼 단계가 정해진 플로우에서 현재 위치와 진행률을 보여줘요.

결제 단계 (3단계 중 2번째)

리뷰 작성 단계 (4단계 중 1번째)

구성 요소 규칙

스펙

• 최대 단계: 5 (6↑ 레이블 잘림)
• 연결선: 인접한 두 단계 사이 · 각 닷의 중앙(top:14px) 기준 수평
• 이전 단계 클릭: 허용 여부를 플로우마다 명시 (결제는 허용 / 리뷰 작성은 순차 강제)

Swipe Action

리스트 아이템을 좌우로 스와이프해 북마크·삭제 등 액션을 노출하는 패턴이에요.

왼쪽 스와이프 (북마크 노출)

구성 요소 규칙

Pull to Refresh

리스트 최상단에서 아래로 당겨 콘텐츠를 갱신하는 네이티브 제스처 패턴이에요.

당기는 중

로딩 중

구성 요소 규칙

Onboarding

첫 실행 시 핵심 가치를 전달하는 인트로 카드예요. 스킵 옵션은 항상 제공해야 해요.

온보딩 카드 (2/3)

구성 요소 규칙

Search Result

검색어 하이라이트와 썸네일을 포함한 상품·콘텐츠 검색 결과 아이템이에요.

상품 검색 결과

검색 기록

결과 없음

구성 요소 규칙

Range Slider

가격 범위·사이즈 등 연속 값의 최솟값·최댓값을 동시에 설정하는 듀얼 핸들 슬라이더예요.

가격 범위 필터

무게 범위 필터

구성 요소 규칙

Notification Item

알림 센터에 표시되는 이벤트·가격 변동·댓글 등 단건 알림 아이템이에요.

알림 목록

구성 요소 규칙

Size Chart

신발·의류 사이즈를 그리드로 선택하는 컴포넌트예요. 품절 사이즈는 시각적으로 구분해요.

신발 사이즈 선택

의류 사이즈 선택

구성 요소 규칙

Quick Action

홈 화면·빠른 메뉴에서 주요 기능으로 즉시 이동하는 아이콘+라벨 버튼 그룹이에요.

홈 퀵 액션 (4열)

상품 상세 퀵 액션

구성 요소 규칙

Countdown Timer

세일 종료·이벤트 마감까지 남은 시간을 시각화해 긴박감을 부여하는 컴포넌트예요.

플래시 세일 배너형

긴박 상태 (1시간 미만)

구성 요소 규칙

Comparison Table

두 상품의 스펙을 나란히 비교해 구매 결정을 돕는 테이블이에요.

러닝화 2종 비교

구성 요소 규칙

Review Summary

전체 리뷰 분포를 막대 차트로 보여주는 총합 평점 컴포넌트예요.

종합 평점

키워드 요약

구성 요소 규칙

Error State

네트워크 오류·404·빈 결과 등 예외 상황에서 사용자가 다음 행동을 취할 수 있도록 안내하는 페이지예요.

네트워크 오류

404 페이지 없음

서버 오류

구성 요소 규칙

FAB Extended

텍스트 라벨이 붙은 확장형 플로팅 버튼이에요. 화면의 주요 액션 1개에만 사용해요.

Primary (메인 액션)

Secondary (보조 액션)

구성 요소 규칙

Progress Bar

다운로드·업로드·단계 진행 등 완료율을 선형으로 표시하는 컴포넌트예요.

확정 진행률

불확정 (Indeterminate)

얇은 형태 (4px)

구성 요소 규칙

Color Swatch

상품의 색상 옵션을 원형 스와치로 선택하는 컴포넌트예요.

러닝화 색상 선택

어패럴 색상

구성 요소 규칙

Timeline

주문 배송 현황·이력·단계 완료를 세로 타임라인으로 표시하는 컴포넌트예요.

배송 추적

구성 요소 규칙

Gear Card

운동 장비·상품을 그리드에서 표시하는 핵심 카드예요. 썸네일·브랜드·이름·가격·평점을 포함해요.

2열 그리드

구성 요소 규칙

Filter Chip Group

카테고리·브랜드·조건 등 필터를 가로 스크롤 칩 그룹으로 제공하는 컴포넌트예요.

카테고리 필터

브랜드 + 조건 복합

구성 요소 규칙

Map Pin

지도 위 매장·픽업 포인트를 표시하는 핀 말풍선이에요. 선택 상태와 비선택 상태를 구분해요.

핀 변형

구성 요소 규칙

사용 규칙

• 핀 라벨에 브랜드명만 넣어요 — 거리나 영업 상태는 선택 후 팝업에서 표시해요.
• 선택된 핀(selected)은 화면 중앙으로 지도를 이동시키고 하단 정보 카드를 올려요.
• 핀이 3개 이상 겹치면 클러스터 핀으로 그룹화해요 — 숫자를 표시하고 탭하면 확대해요.
• 지도 로딩 전에는 Skeleton으로 대체해요. 핀은 지도 타일이 완성된 후 순차 등장.
• 핀 색은 neon-green · surface-2 두 가지만 — 임의 색 추가 금지.

Coupon Card

할인 쿠폰을 시각화하는 카드예요. 금액/퍼센트 할인과 사용 완료 상태를 구분해요.

사용 가능 쿠폰

사용 완료

구성 요소 규칙

Wishlist Button

상품을 찜 목록에 추가/제거하는 하트 버튼이에요. 찜 상태는 red 계열로 표시해요.

상품 카드 내 찜하기

크기 변형

구성 요소 규칙

Cart Item

장바구니의 단건 상품 행이에요. 썸네일·옵션·수량 조절·가격·삭제를 포함해요.

장바구니 목록

구성 요소 규칙

Member Tier

브론즈·실버·골드·플래티넘 등 멤버십 등급을 배지로 표시하고 다음 등급까지의 진행률을 보여줘요.

등급 배지

등급 카드 (골드)

구성 요소 규칙

Callout

본문 내 중요 정보를 강조하는 인라인 블록이에요. 좌측 컬러 보더로 유형을 구분해요.

유형별 콜아웃

구성 요소 규칙

Delivery Status

주문의 배송 단계를 시각적으로 보여줘요. 현재 단계를 강조 표시해요.

배송 현황 트래커

배송 히스토리

Order Summary

결제 전 금액 내역을 보여주는 요약 카드예요. 할인·배송비·최종 결제액을 포함해요.

주문 요약

Share Sheet

콘텐츠를 외부 채널로 공유할 때 나타나는 바텀 시트예요.

공유 시트

채널 우선순위

아이콘 스펙

사용 규칙

• 공유 진입점은 상품 상세 우상단 아이콘이에요. 탭 시 바텀 시트로 올라와요.
• 공유 내용에 상품명 + 가격 + 딥링크 URL을 기본 포함해요.
• 채널은 최대 4개 — 그 이상은 "더보기"에 숨겨요.
• 취소 버튼은 항상 마지막에 전체 너비로 배치해요.

Rating Prompt

앱 사용 중 적절한 시점에 평점을 요청하는 카드예요. 긍정 경험 이후 노출해요.

앱 평점 요청