Gmarket (지마켓)

Gmarket Green·Blue와 Gmarket Sans가 연결하는 직관적 쇼핑

한국이커머스소비자복합modern-minimal고딕comfortablesoftflat라이트공식한글 지원출시 2021개정 2021

갤러리에서 열기 — 적용 예시 · 가이드 다운로드

Brand DNA

브랜드 DNA

브랜드명: Gmarket (G마켓)
한 줄 정체성: 다양한 판매자와 사용자를 연결해 발견부터 구매까지 효율적으로 이어 주는 한국형 온라인 마켓플레이스
공식 디자인 철학: GDS의 원칙인 일관성·확장성·효율성, 그리고 기업 비전 We Connect를 제품 경험에 반영
시그니처 요소 1개: G 심볼의 초록 점에서 출발해 Green·Teal·Blue로 이어지는 연결의 컬러 언어와 Gmarket Sans

Tone & Mood

톤 & 무드

핵심 키워드 3개: 직관적, 친근한, 효율적
무드 설명: 흰 캔버스와 명료한 정보 위계 위에 Gmarket Green을 혜택·활성 상태로, Gmarket Blue를 구매 CTA로 제한해 사용합니다. Gmarket Sans는 제목·가격처럼 브랜드 인지가 필요한 지점에만 배치해 친근하지만 과밀하지 않은 커머스 화면을 만듭니다.
비주얼 스타일: 모던 미니멀
밀도(Density): Comfortable — 8-point grid와 페이지 좌우 16px 여백을 기본으로 정보량과 탐색성을 균형 있게 유지
모서리 성향: Soft (4~8px) — 기본 상품 썸네일은 8px, 작은 영역은 4px
평면성: Flat — 그림자보다 여백·디바이더·배경색으로 위계를 구분

Color System

컬러 시스템 (CSS 변수)

:root {
  /* Main Green — 혜택·활성 상태·Primary action */
  --color-primary-50:  #E5FCE3;
  --color-primary-100: #A5F4A0;
  --color-primary-200: #6CEF64;
  --color-primary-300: #39E532;
  --color-primary-400: #11D70D;
  --color-primary-500: #00C400; /* GDS 서비스 메인 Green */
  --color-primary-600: #01A900;
  --color-primary-700: #018600;
  --color-primary-800: #015F00;
  --color-primary-900: #013600;

  /* Gmarket Blue — 주문·결제 CTA */
  --color-secondary-50:  #EEF7FF;
  --color-secondary-100: #CBE8FF;
  --color-secondary-200: #A7D9FF;
  --color-secondary-300: #68BBFF;
  --color-secondary-400: #329CFF;
  --color-secondary-500: #067DFD;
  --color-secondary-600: #0062E5;
  --color-secondary-700: #0048C8;
  --color-secondary-800: #0231A6;
  --color-secondary-900: #072182;
  --color-cta: #0028AC; /* 공식 Brand Blue */

  /* Neutral — GDS Gray */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #FAFAFA;
  --color-neutral-100:  #F5F5F5;
  --color-neutral-200:  #EEEEEE;
  --color-neutral-300:  #E0E0E0;
  --color-neutral-400:  #BDBDBD;
  --color-neutral-500:  #9E9E9E;
  --color-neutral-600:  #757575;
  --color-neutral-700:  #616161;
  --color-neutral-800:  #424242;
  --color-neutral-900:  #222222;
  --color-neutral-1000: #000000;

  /* Semantic */
  --color-success-bg: #E5FCE3;
  --color-success-fg: #018600;
  --color-info-bg:    #EEF7FF;
  --color-info-fg:    #067DFD;
  --color-warning-bg: #FFF6F2;
  --color-warning-fg: #F9560E;
  --color-error-bg:   #FFF5F5;
  --color-error-fg:   #EF2B2A;
  --color-star-delivery: #7130F3; /* 현재 서비스 관찰 */

  /* Surface */
  --bg-base:     #FFFFFF;
  --bg-subtle:   #F5F5F5;
  --bg-elevated: #FFFFFF;
  --bg-overlay:  rgba(0,0,0,0.50);

  /* Text */
  --text-primary:    #222222;
  --text-secondary:  #616161;
  --text-tertiary:   #9E9E9E;
  --text-caption:    #BDBDBD;
  --text-on-primary: #FFFFFF;
  --text-price:      #000000; /* 가격 숫자 */
  --text-discount:   #018600; /* 흰 배경 위 접근성 확보 */
  --text-disabled:   #9E9E9E;

  /* Border */
  --border-default: #E0E0E0;
  --border-subtle:  #EEEEEE;
  --border-strong:  #BDBDBD;
  --border-focus:   #222222;
}

Typography

타이포그래피

폰트 페어링:
- 한글 본문: Noto Sans KR (OFL) 또는 OS 시스템 산세리프
- 영문·일반 숫자: Roboto / SF Pro (시스템별)
- 제목·가격·일부 버튼: Gmarket Sans (SIL OFL, 브랜드 지정 서체)
위계:
- Display / Heading 1: 24px / 400 / 1.35 / -0.02em — Gmarket Sans
- H1 / Heading 2: 22px / 400 / 1.4 / -0.015em — Gmarket Sans
- H2 / Heading 3: 20px / 400 / 1.4 / -0.01em — Gmarket Sans
- H3 / Heading 4: 18px / 400 / 1.45 / -0.01em — Gmarket Sans
- Body Large: 16px / 400·700 / 1.5 / 0 — 시스템 폰트
- Body: 14px / 400·700 / 1.5 / 0 — 시스템 폰트
- Body Small: 12px / 400·700 / 1.45 / 0 — 시스템 폰트
- Caption: 11px / 400·500 / 1.4 / 0 — 예외적 최소 크기
사용 원칙: Gmarket Sans Bold(700)는 프로모션 메시지에 한정하고, 가격·할인율에는 Gmarket Sans와 tabular-nums를 사용합니다.

Spacing

스페이싱

Base unit: 8-point grid (2px·4px 보조 단위 허용)
토큰: ``css --space-xxxs: 2px; --space-xxs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; /* 기본 컴포넌트 간격 */ --space-lg: 20px; --space-xl: 24px; /* 기본 템플릿 여백 */ --space-2xl: 32px; --space-3xl: 40px; ``
Container: 모바일 페이지 좌우 16px, 기본 템플릿 상하 24px, 카드 템플릿 사이 12px

Border Radius

--radius-none: 0;
--radius-sm: 4px;  /* 작은 레이블·보조 영역 */
--radius-md: 8px;  /* 공식 사각 상품 썸네일 기본값 */
--radius-lg: 12px;
--radius-xl: 16px;
--radius-full: 9999px;

Shadow / Elevation

--shadow-none: none;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.06);   /* 고정 내비게이션 */
--shadow-md: 0 6px 20px rgba(0,0,0,0.10);  /* 팝오버 */
--shadow-lg: 0 12px 32px rgba(0,0,0,0.14); /* 다이얼로그 */
--shadow-xl: 0 20px 48px rgba(0,0,0,0.18); /* 제한적 오버레이 */

기본 상품 카드에는 --shadow-none을 사용하고 배경·디바이더로 위계를 만듭니다.

Iconography

스타일: Outline 중심 + 선택 상태에 한해 Filled
Stroke 굵기: 2px (추정)
모서리 처리: Round
제작 규격: 48×48 그리드, 사방 4px 안전 여백
추천 라이브러리: GDS 시스템 아이콘 우선, 대체 시 Tabler Icons

Component Guide

컴포넌트 가이드

Button

.btn {
  min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 700 14px/1 'Noto Sans KR', -apple-system, sans-serif;
  cursor: pointer; transition: background var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.btn-primary { background: var(--color-primary-500); color: #000; }
.btn-primary:hover { background: var(--color-primary-400); }
.btn-primary:active { background: var(--color-primary-600); transform: translateY(1px); }
.btn-secondary { background: #fff; color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--border-strong); }
.btn-secondary:hover { background: var(--bg-subtle); }
.btn-secondary:active { background: var(--color-neutral-200); }
.btn-ghost { background: transparent; color: var(--text-primary); }
.btn-ghost:hover { background: var(--bg-subtle); }
.btn-ghost:active { background: var(--color-neutral-200); }
.btn-danger { background: var(--color-error-fg); color: #fff; }
.btn-danger:hover { background: #DA120D; }
.btn-danger:active { background: #BF0A03; }
.btn-cta { background: var(--color-cta); color: #fff; } /* 구매·결제에만 사용 */
.btn-cta:hover { background: var(--color-secondary-800); }
.btn-cta:active { background: var(--color-secondary-900); }
.btn:disabled, .btn.is-disabled { background: var(--color-neutral-200); color: var(--text-disabled); box-shadow: none; cursor: not-allowed; transform: none; }
.btn.is-loading { color: transparent; pointer-events: none; position: relative; }
.btn.is-loading::after { content: ""; width: 16px; height: 16px; border: 2px solid #fff; border-right-color: transparent; border-radius: 50%; position: absolute; animation: gm-spin .7s linear infinite; }
@keyframes gm-spin { to { transform: rotate(360deg); } }

Input

.field {
  min-height: 48px; padding: 0 16px; background: #fff; color: var(--text-primary);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  font: 400 14px/1.5 'Noto Sans KR', -apple-system, sans-serif; outline: 0;
}
.field::placeholder { color: var(--text-tertiary); }
.field:focus { border-color: var(--border-focus); box-shadow: inset 0 0 0 1px var(--border-focus); }
.field.is-error { border-color: var(--color-error-fg); }
.field:disabled { background: var(--bg-subtle); color: var(--text-disabled); cursor: not-allowed; }
.search-field { border: 2px solid var(--color-primary-500); border-radius: var(--radius-full); }

Card

.item-card { min-width: 0; background: #fff; }
.item-card.outlined { padding: 12px; border: 1px solid var(--border-default); border-radius: var(--radius-md); }
.item-card.emphasis { padding: 12px; border-radius: var(--radius-md); background: var(--color-primary-50); }
.item-card__thumb { aspect-ratio: 1; position: relative; overflow: hidden; border-radius: var(--radius-md); background: var(--bg-subtle); }
.item-card__label { position: absolute; top: 0; left: 0; padding: 5px 7px; border-radius: var(--radius-md) 0 var(--radius-sm) 0; background: var(--color-primary-500); color: #000; font: 700 11px/1 'Gmarket Sans', sans-serif; }
.item-card__name { margin-top: 8px; min-height: 42px; color: var(--text-primary); font: 400 14px/1.5 'Noto Sans KR', sans-serif; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.item-card__price { margin-top: 4px; color: var(--text-price); font: 700 18px/1.25 'Gmarket Sans', sans-serif; font-variant-numeric: tabular-nums; }
.item-card__price b { margin-right: 6px; color: var(--text-discount); }
.item-card__price small { font: 500 12px/1 'Noto Sans KR', sans-serif; }
.item-card__meta { margin-top: 6px; color: var(--text-tertiary); font: 400 12px/1.4 'Noto Sans KR', sans-serif; }
.item-card__meta--official { color: var(--color-secondary-800); }

Badge / Tag

.tag { min-height: 22px; padding: 3px 7px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; font: 700 11px/1.2 'Noto Sans KR', sans-serif; }
.tag-solid { background: var(--color-primary-500); color: #000; }
.tag-subtle { background: var(--color-primary-50); color: var(--color-primary-700); }
.tag-outline { background: #fff; color: var(--text-secondary); box-shadow: inset 0 0 0 1px var(--border-default); }
.tag-star { background: #F2ECFF; color: var(--color-star-delivery); }

Navigation

.gnb { min-height: 56px; padding: 0 16px; background: #fff; border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; gap: 16px; }
.gnb__title { font: 500 18px/1.3 'Gmarket Sans', sans-serif; color: var(--text-primary); }
.bottom-nav { min-height: 64px; background: #fff; border-top: 1px solid var(--border-subtle); display: grid; grid-template-columns: repeat(5, 1fr); }
.bottom-nav__item { display: grid; place-items: center; color: var(--color-neutral-900); font: 500 11px/1.2 'Noto Sans KR', sans-serif; }
.bottom-nav__item.is-active { color: var(--color-primary-700); font-weight: 700; }

Motion

--duration-fast: 120ms;
--duration-base: 200ms;
--duration-slow: 320ms;
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

전환은 상태 피드백과 콘텐츠 이동을 명확히 하는 데만 사용하며, 가격·상품 정보에는 장식적 모션을 적용하지 않습니다.

Anti-patterns

1. Green-500을 흰 배경의 작은 본문 텍스트에 사용하지 않기 — 정보 텍스트는 접근성이 확보된 Green-700 이상 2. 주문·결제가 아닌 일반 액션에 Gmarket Blue CTA를 남용하지 않기 3. Gmarket Sans를 긴 본문 전체에 사용하지 않기 — 제목·가격·선택 컴포넌트에 한정 4. 상품명·가격·썸네일 중 하나를 생략하거나 상품명을 세 줄 이상 노출하지 않기 5. 로고의 G 안쪽 초록 점을 제거하거나 Green→Teal→Blue 연결 그라디언트를 임의 색으로 바꾸지 않기

Gmarket (지마켓)

Brand DNA

브랜드 DNA

Tone & Mood

톤 & 무드

Color System

컬러 시스템 (CSS 변수)

Typography

타이포그래피

Spacing

스페이싱

Border Radius

Border Radius

Shadow / Elevation

Shadow / Elevation

Iconography

Iconography

Component Guide

컴포넌트 가이드

Motion

Motion

Anti-patterns

Anti-patterns

Sources

출처