Gmarket Design System
지마켓 · GDS v1.3.0
지마켓은 고객과 상품, 고객과 고객을 잇는 오픈마켓입니다. GDS는 모바일 앱·웹 전반의 일관성·확장성·효율성을 표준화하는 디자인 시스템입니다.
전환 동선 버튼·아이템 카드·가격 표기가 핵심 표면입니다. 버튼 8px, 카드 12px, 시트 16px 반경을 씁니다.
button-ctaCTA(전환 동선) · Primary(페이지당 1회) · Secondary(보조) · Action(더보기).
button-disabled비활성 상태는 opacity 40%로 표현합니다. 품절 상품의 CTA가 대표 사례입니다.
badge-basic장바구니·알림 동선은 CTA 컬러, Primary는 gray-900, 스마일클럽 쿠폰은 smile 컬러.
nudging-labelCoupon·Card·Gift 3타입. 검색 결과에서는 'AD'가 아닌 한글 '광고'로 노출합니다.
chipBasic Filter active는 gray-900 채움, Curation은 카테고리 그린으로 구분합니다.
tab선택 시 하단 Indicator(gray-900)가 이동합니다. 레이블+숫자 결합 시 숫자는 그린.
thumbnailSquare(1:1, 8px)와 Circle(딜 상품). 좌상단 Label·우상단 Badge 엘리먼트.
text-field레이블 우측에 '선택' 표시. 포커스 시 보더는 gray-900. 에러는 '-하세요.'.
dialog가로폭 280px 고정. 우선순위 높은 버튼은 Text 컬러로 blue-500.
취소 후에는 동일 혜택으로 재주문이 어려울 수 있습니다.
accordionBasic 48 / Large 56. 펼침 시 chevron 회전, 우측 알림 텍스트는 green.
dropdownLarge 56 / Small 48. floating label + 선택값, 펼침 시 보더 gray-900.
selection-controls체크박스·토글 on은 green, 라디오 단일선택은 gray-900으로 구분합니다.
info-boxDefault / Highlight(blue) / Warning(red) 3종. 아이콘 + 타이틀 + 본문.
popovergray-900 보더 + caret. 타이틀 + 불릿 + 닫기 버튼, 최대 280px.
스마일클럽 혜택
list-row행 최소 48px, 1px 디바이더. 보조 텍스트 숫자는 blue-500.
bannergreen-50 배경, 타이틀 Gmarket Sans + 서브타이틀 + 56px 썸네일.
slide-indicatorDots(활성 green) + Number Indicator(black 40% pill, 모노).
item-card-gallery
상품명은 최대 2줄 후 줄임표. 가격 숫자는 Gmarket Sans·text-cto, 공식 브랜드는 blue-800. 할인 전 원가는 텍스트 취소선·text-tertiary, 일시품절은 가격 위치를 'SOLD OUT'으로 대체합니다.
item-card-list
Gallery와 동일한 가격·브랜드 규칙을 공유하되 텍스트 정보 밀도를 높게 잡습니다.
GNB 헤더·진행 스텝·아이템 카드·도크 CTA·바텀 내비를 결합한 대표 제품 화면입니다. 모바일 360px 기준으로 스케치했습니다.
오늘 오후 6시 이전 도착 예정
나이키 에어맥스 97 트리플 화이트 러닝화
270mm / 화이트 · 1개
132,000원