Gmarket Design System 지마켓 · GDS v1.3.0 · derived dark

연결로 완성하는 쇼핑 경험

지마켓은 고객과 상품, 고객과 고객을 잇는 오픈마켓입니다. GDS는 모바일 앱·웹 전반의 일관성·확장성·효율성을 표준화하는 디자인 시스템입니다.

Center 시장과 일상의 중심

Forward 이커머스 흐름 선도

Variety 각각의 삶에 맞는 제안

다크 모드 고지. GDS v1.3.0은 라이트 모드 전용 시스템이며 공개된 다크 팔레트가 없습니다. 이 페이지의 모든 색상값은 카탈로그 요구사항을 위해 다운스트림에서 파생한 다크 렌더링이며, 공식 GDS 다크 테마가 아닙니다. 아래 스와치는 라이트 토큰이 아닌 파생 다크값을 표기합니다.

컬러 — 파생 다크값

그린 1색·블루 3색 구조를 유지하되, 다크 표면 대비를 위해 명도를 끌어올린 파생값입니다. 공식 GDS 토큰이 아닌 다운스트림 렌더링입니다.

브랜드 핵심

그린 1 · 블루 3 · 캔버스 (파생 다크값)

PRIMARY

Gmarket Green · 다크 파생

oklch(0.815 0.234 146)

라이트 green-500(0.747)에서 명도 상향

CTA

Gmarket Blue · 다크 파생

oklch(0.560 0.205 266)

구매·결제·장바구니 뱃지 (cta 0.395 상향)

INFORMATIVE

Informative Blue · 다크 파생

oklch(0.700 0.180 257)

별점·공식 태그 (blue-500 0.598 상향)

BRAND LABEL

Blue-800 · 다크 파생

oklch(0.640 0.150 262)

아이템 카드 공식 브랜드 라벨

CANVAS

카드 표면 · 다크 파생

oklch(0.215 0.005 150)

라이트 bg-white를 대체하는 다크 표면

상태 색상

Positive · Informative · Warning · Delay (파생 다크값)

POSITIVE

Positive · 다크 파생

oklch(0.815 0.234 146)

쿠폰·사은품 혜택·활성화

INFORMATIVE

Informative · 다크 파생

oklch(0.700 0.180 257)

별점·공식 태그 신뢰

WARNING

Warning · 다크 파생

oklch(0.680 0.200 27)

취소·탈퇴 등 주의·에러

DELAY

Delay · 다크 파생

oklch(0.730 0.180 45)

배송 지연

텍스트 위계

다크 표면 위 5단계 (파생 다크값)

CTO

text-cto · 다크 파생

oklch(1.000 0.000 0)

상품명·가격 숫자 (다크에서 White)

PRIMARY

text-primary · 다크 파생

oklch(0.945 0.004 150)

제목·본문

SECONDARY

text-secondary · 다크 파생

oklch(0.680 0.004 150)

서브 본문

TERTIARY

text-tertiary · 다크 파생

oklch(0.560 0.004 150)

설명·비활성·할인 전 가격·품절

CAPTION

text-caption · 다크 파생

oklch(0.470 0.004 150)

법적 규제 텍스트

Green 10단계

다크 표면 위 렌더링 — 라이트 토큰값 그대로 표기

100

200

300

400

500

600

700

800

900

Blue 10단계

다크 표면 위 렌더링 — 라이트 토큰값 그대로 표기

100

200

300

400

500

600

700

800

900

스마일 시리즈 & 카테고리 Sub Color

다크 표면 대비를 위한 파생값

SMILE

smile · 다크 파생

oklch(0.560 0.150 286)

스마일배송·페이·카드 (smile 0.291 상향)

SMILE YELLOW

smile-yellow

oklch(0.872 0.176 95)

스마일 브랜드 기본색 (밝아 다크에서도 유지)

SUB TEAL

sub-teal-500 · 다크 파생

oklch(0.760 0.110 211)

카테고리 섹션 강조 (칩 active)

SUB PURPLE

sub-purple-500 · 다크 파생

oklch(0.660 0.220 305)

카테고리 섹션 강조

타이포그래피

헤딩·가격·할인율은 Gmarket Sans, 본문은 Noto Sans KR. 가격 숫자는 Gmarket Sans로 고정하되 '원'은 본문 폰트를 씁니다.

heading-1 24px · Gmarket Sans · 400

디자인 시스템으로 만드는 쇼핑

heading-3 20px · Gmarket Sans · 400

오늘의 추천 상품 한국어 템플릿 타이틀

body-1 16px · Noto Sans KR · 400

한국어 본문 샘플 — 리스트와 서브 타이틀에 쓰이는 주요 본문 텍스트입니다.

body-2 14px · Noto Sans KR · 400

보조 본문입니다. 상품명과 리스트 항목에 쓰이며 두 줄까지 노출 후 줄임표 처리합니다.

detail 12px · Noto Sans KR · 400

인포박스 타이틀·본문 등 하위 위계 보조 텍스트입니다.

caption · xxs 11px · 법적 텍스트 예외

법적 규제 고지 텍스트에 한해 사용하는 11px 예외 사이즈입니다.

price 가격 — Gmarket Sans 700

189,000 132,000원

본문에는 Gmarket Sans를 쓰지 않습니다. Gmarket Sans Bold는 프로모션 메시지 강조 한정이며, 명확한 정보 전달 UI에서는 직관성이 낮아 사용을 지양합니다. 이탤릭은 시스템 어디에도 없습니다. 취소선은 도형 선이 아닌 텍스트 스타일 취소선을 씁니다.

컴포넌트

전환 동선 버튼·아이템 카드·가격 표기가 핵심 표면입니다. 버튼 8px, 카드 12px, 시트 16px 반경을 씁니다.

버튼 — 위계

button-cta

CTA(전환 동선) · Primary(페이지당 1회) · Secondary(보조) · Action(더보기).

CTA · default

CTA · pressed

PRIMARY

버튼 — Disabled

button-disabled

비활성 상태는 opacity 40%로 표현합니다. 품절 상품의 CTA가 대표 사례입니다.

opacity 40%

primary · disabled

카운터 뱃지

badge-basic

장바구니·알림 동선은 CTA 컬러, Primary는 gray-900, 스마일클럽 쿠폰은 smile 컬러.

🛒3 🔔5 🎟️2

넛징 라벨

nudging-label

Coupon·Card·Gift 3타입. 검색 결과에서는 'AD'가 아닌 한글 '광고'로 노출합니다.

10% 쿠폰 카드 즉시할인 사은품 증정 광고

필터 칩

chip

Basic Filter active는 gray-900 채움, Curation은 카테고리 그린으로 구분합니다.

무료배송 스마일배송 오늘출발 신선식품

탭

tab

선택 시 하단 Indicator(gray-900)가 이동합니다. 레이블+숫자 결합 시 숫자는 그린.

전체128 베스트 신상품

썸네일

thumbnail

Square(1:1, 8px)와 Circle(딜 상품). 좌상단 Label·우상단 Badge 엘리먼트.

👟 쿠폰 2 ⏱️

텍스트 필드

text-field

레이블 우측에 '선택' 표시. 포커스 시 보더는 border-active. 에러는 '-하세요.'.

배송 메모 선택

받는 분 연락처 연락처를 입력하세요.

다이얼로그

dialog

가로폭 280px 고정. 우선순위 높은 버튼은 Text 컬러로 blue-500.

주문을 취소할까요?

취소 후에는 동일 혜택으로 재주문이 어려울 수 있습니다.

아코디언

accordion

Basic 48 / Large 56. 펼침 시 chevron 회전, 우측 알림 텍스트는 green.

스마일배송 · 오후 6시 이전 도착 예정입니다.

드롭다운

dropdown

Large 56 / Small 48. floating label + 선택값, 펼침 시 보더 gray-900.

선택 컨트롤

selection-controls

체크박스·토글 on은 green, 라디오 단일선택은 gray-900으로 구분합니다.

✓ 전체 동의 마케팅 수신 동의 스마일페이 신용카드 알림 받기

인포박스

info-box

Default / Highlight(blue) / Warning(red) 3종. 아이콘 + 타이틀 + 본문.

ℹ️ 쿠폰 적용됨
최대 10%까지 중복 할인됩니다.

⚠️ 품절 임박
재고가 3개 남았습니다.

● 주문 후 평균 1~2일 내 출고됩니다.

팝오버

popover

gray-900 보더 + caret. 타이틀 + 불릿 + 닫기 버튼, 최대 280px.

리스트

list-row

행 최소 48px, 1px 디바이더. 보조 텍스트 숫자는 blue-500.

🔔알림 설정2 새 알림›

📋주문 내역›

🎟️쿠폰함5›

배너

banner

green-50 배경, 타이틀 Gmarket Sans + 서브타이틀 + 56px 썸네일.

슬라이드 인디케이터

slide-indicator

Dots(활성 green) + Number Indicator(black 40% pill, 모노).

3 / 12

아이템 카드 — Gallery / Price 상태

item-card-gallery

상품명은 최대 2줄 후 줄임표. 가격 숫자는 Gmarket Sans·text-cto, 공식 브랜드는 blue-800. 할인 전 원가는 텍스트 취소선·text-tertiary, 일시품절은 가격 위치를 'SOLD OUT'으로 대체합니다.

👟

공식 나이키

나이키 에어맥스 97 트리플 화이트 러닝화 남녀공용

31% 132,000원

189,000원

10% 쿠폰 사은품

🎧

공식 소니

소니 WH-1000XM5 노이즈 캔슬링 무선 헤드폰

16% 499,000원

599,000원

카드 즉시할인 ★ 4.9 (2,184)

☕

공식 스타벅스

스타벅스 스테인리스 텀블러 500ml 시즌 한정판

SOLD OUT

아이템 카드 — List variant

item-card-list

Gallery와 동일한 가격·브랜드 규칙을 공유하되 텍스트 정보 밀도를 높게 잡습니다.

🧴

공식 라운드랩

라운드랩 1025 독도 토너 대용량 500ml 기획세트

42% 17,900원 31,000원

중복쿠폰 +미니어처 2종

주문 배송 조회 화면

GNB 헤더·진행 스텝·아이템 카드·도크 CTA·바텀 내비를 결합한 대표 제품 화면입니다. 모바일 360px 기준으로 스케치했습니다.

9:41 5G 100%

‹ 주문 배송 조회 🛒3

배송 중

오늘 오후 6시 이전 도착 예정

✓

결제완료

✓

상품준비

🚚

배송중

배송완료

주문 상품

👟

나이키 에어맥스 97 트리플 화이트 러닝화

270mm / 화이트 · 1개

132,000원

● 스마일배송 상품입니다. 송장번호 6184-2057-3391 (한진택배)

🏠홈

▦카테고리

📋구매내역

👤MyG

Known Gap. GDS v1.3.0은 라이트 모드 전용 시스템입니다 — 공개된 다크 팔레트가 없어, 이 dark.html은 카탈로그 요구사항을 위해 다운스트림에서 파생한 다크 렌더링이며 공식 GDS 다크 테마가 아닙니다. 다크 토큰이 필요하면 제품 근거 위에서 별도 정의해야 합니다.