Coupang Play (쿠팡플레이)

멀티컬러 플레이 리본과 선명한 블루가 빛나는 다크 엔터테인먼트 무대

한국미디어소비자복합modern-minimal고딕comfortablesoftlayered다크한글 지원출시 2020개정 2024

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

Brand DNA

브랜드 DNA

브랜드명: Coupang Play (쿠팡플레이)
한 줄 정체성: 쿠팡 회원 누구나 시작할 수 있고 오리지널·영화·HBO·라이브 스포츠를 한 무대에 모은 엔터테인먼트 플랫폼
공식 디자인 철학: 콘텐츠를 전면에 두고 기기와 장르의 경계를 넘어 몰입도 높은 시청 경험을 제공
시그니처 요소 1개: 블루를 중심으로 시안·퍼플·핑크가 흐르는 입체적 플레이 리본 심벌

Tone & Mood

톤 & 무드

핵심 키워드 3개: 역동, 몰입, 라이브
무드 설명: 검정에 가까운 네이비 캔버스가 포스터와 영상 스틸을 무대처럼 띄운다. 선명한 블루 CTA와 멀티컬러 플레이 리본이 스포츠의 속도감과 엔터테인먼트의 스펙트럼을 함께 전달한다.
비주얼 스타일: 모던 미니멀 — 콘텐츠 중심 다크 UI에 빛나는 그라디언트 포인트
밀도(Density): Comfortable — 큰 히어로 뒤로 가로형 콘텐츠 레일을 여유 있게 반복
모서리 성향: Soft (4~8px) — 버튼과 썸네일에 절제된 곡률 적용
평면성: Layered — 영상 페이드, 반투명 컨트롤, 포커스 글로우로 깊이 구분

Color System

컬러 시스템 (CSS 변수)

:root {
  /* Primary - Coupang Play Blue */
  --color-primary-50:  #E8F7FF;
  --color-primary-100: #CDEEFF;
  --color-primary-200: #9EDFFF;
  --color-primary-300: #64CEFF;
  --color-primary-400: #2CB9FF;
  --color-primary-500: #00A8FF;  /* 핵심 CTA와 활성 상태 */
  --color-primary-600: #0089D8;
  --color-primary-700: #006AA8;
  --color-primary-800: #084D73;
  --color-primary-900: #0B3045;

  /* Secondary - 플레이 리본의 엔터테인먼트 스펙트럼 */
  --color-secondary-500: #8B65FF;
  --color-secondary-pink: #FF4F9A;
  --color-secondary-cyan: #25D1FF;

  /* Neutral (Dark-first) */
  --color-neutral-0:    #050609;
  --color-neutral-50:   #090A0E;
  --color-neutral-100:  #111318;
  --color-neutral-200:  #20232C;
  --color-neutral-300:  #303541;
  --color-neutral-500:  #666E7D;
  --color-neutral-700:  #A7ADBB;
  --color-neutral-900:  #F0F3F8;
  --color-neutral-1000: #FFFFFF;

  /* Semantic */
  --color-success-bg: #092D24;
  --color-success-fg: #42D6A4;
  --color-warning-bg: #332608;
  --color-warning-fg: #FFD166;
  --color-error-bg:   #351219;
  --color-error-fg:   #FF6474;
  --color-info-bg:    #08273A;
  --color-info-fg:    #4CC9FF;

  /* Surface */
  --bg-base:     #07080C;               /* 페이지 기본 */
  --bg-subtle:   #0C0E13;               /* 콘텐츠 레일 */
  --bg-elevated: #14171D;               /* 카드와 메뉴 */
  --bg-overlay:  rgba(7,8,12,0.82);     /* 영상 위 컨트롤 */

  /* Text */
  --text-primary:    #F7F9FC;
  --text-secondary:  #C5CAD5;
  --text-tertiary:   #8991A0;
  --text-on-primary: #001624;
  --text-disabled:   #565D6A;

  /* Border */
  --border-default: #272B35;
  --border-subtle:  #1B1E26;
  --border-strong:  #3D4350;
  --border-focus:   #00A8FF;
}

Typography

타이포그래피

폰트 페어링:
- 한글: Coupang Sans (자체) → 폴백 Pretendard, Noto Sans KR
- 영문: Coupang Sans Latin → 폴백 SF Pro, Inter
- 콘텐츠 제목은 700~900의 굵은 웨이트, 설명과 메타는 500~650으로 명확히 분리
위계:
- Display: 48px / 900 / 1.04 / -0.045em
- H1: 32px / 850 / 1.1 / -0.035em
- H2: 22px / 800 / 1.2 / -0.025em
- H3: 16px / 750 / 1.3 / -0.015em
- Body Large: 16px / 600 / 1.5 / -0.01em
- Body: 14px / 550 / 1.55 / -0.005em
- Body Small: 12px / 600 / 1.45 / 0
- Caption: 10px / 750 / 1.4 / 0.06em

Spacing

스페이싱

Base unit: 4px
토큰: ``css :root { --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; } ``
Container: max-width 1440px, 데스크톱 좌우 48px / 모바일 좌우 16px

Border Radius

:root {
  --radius-none: 0;
  --radius-sm: 4px;      /* 배지 */
  --radius-md: 8px;      /* 버튼, 썸네일 */
  --radius-lg: 12px;     /* 콘텐츠 카드 */
  --radius-xl: 16px;     /* 팝오버, 모달 */
  --radius-full: 9999px; /* 프로필, 상태점 */
}

Shadow / Elevation

:root {
  --shadow-none: none;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.36);                /* 썸네일 */
  --shadow-md: 0 8px 24px rgba(0,0,0,0.52);               /* hover 카드 */
  --shadow-lg: 0 18px 48px rgba(0,0,0,0.68);              /* 메뉴, 모달 */
  --shadow-xl: 0 28px 80px rgba(0,0,0,0.78);              /* 풀스크린 dialog */
  --shadow-focus: 0 0 0 3px rgba(0,168,255,0.34);          /* 포커스 */
}

Iconography

스타일: Outline(탐색) + Filled(재생·활성 상태) 혼합
Stroke 굵기: 1.75~2px
모서리 처리: Round
추천 라이브러리: Lucide / Material Symbols Rounded, 재생 심벌은 브랜드 전용 형태 사용

Component Guide

컴포넌트 가이드

Button

.btn { min-height: 42px; padding: 0 18px; border: 0; border-radius: var(--radius-md); font: 800 14px/1 'Coupang Sans', Pretendard, sans-serif; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out), opacity var(--duration-fast) linear; cursor: pointer; }
.btn-primary { background: var(--color-primary-500); color: var(--text-on-primary); }
.btn-primary:hover { background: var(--color-primary-400); }
.btn-primary:active { background: var(--color-primary-600); transform: scale(.97); }
.btn-secondary { background: rgba(255,255,255,.14); color: var(--text-primary); backdrop-filter: blur(12px); }
.btn-secondary:hover { background: rgba(255,255,255,.22); }
.btn-ghost { background: transparent; color: var(--text-primary); }
.btn-danger { background: var(--color-error-fg); color: #170207; }
.btn:disabled { background: var(--color-neutral-200); color: var(--text-disabled); cursor: not-allowed; }
.btn.is-loading { color: transparent; pointer-events: none; position: relative; }
.btn.is-loading::after { content: ''; position: absolute; width: 14px; height: 14px; border: 2px solid var(--text-primary); border-right-color: transparent; border-radius: var(--radius-full); animation: cp-spin .8s linear infinite; }

Input

.input { min-height: 44px; background: var(--bg-elevated); border: 1px solid var(--border-default); color: var(--text-primary); border-radius: var(--radius-md); padding: 0 14px; font: 550 14px/1.4 inherit; }
.input::placeholder { color: var(--text-tertiary); }
.input:focus { outline: 0; border-color: var(--border-focus); box-shadow: var(--shadow-focus); }
.input[aria-invalid="true"] { border-color: var(--color-error-fg); }
.input:disabled { background: var(--bg-subtle); color: var(--text-disabled); }

Card

.content-card { background: var(--bg-elevated); border-radius: var(--radius-lg); overflow: hidden; transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); }
.content-card:hover { transform: translateY(-4px) scale(1.015); box-shadow: var(--shadow-md); }
.content-card-featured { border: 1px solid rgba(0,168,255,.58); box-shadow: 0 0 24px rgba(0,168,255,.12); }
.content-card-outlined { background: transparent; border: 1px solid var(--border-default); }

Badge / Tag

.tag { padding: 4px 7px; border-radius: var(--radius-sm); font: 850 10px/1 'Coupang Sans', sans-serif; letter-spacing: .07em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 4px; }
.tag-solid { background: var(--color-primary-500); color: var(--text-on-primary); }
.tag-subtle { background: rgba(0,168,255,.14); color: var(--color-primary-300); }
.tag-outline { border: 1px solid var(--border-strong); color: var(--text-secondary); background: transparent; }

Navigation (Header)

.nav { height: 64px; padding: 0 var(--space-xl); background: rgba(7,8,12,.88); backdrop-filter: blur(18px); border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; gap: 28px; }
.nav-link { color: var(--text-tertiary); font-size: 14px; font-weight: 700; }
.nav-link:hover { color: var(--text-primary); }
.nav-link.active { color: var(--text-primary); position: relative; }
.nav-link.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -21px; height: 2px; background: var(--color-primary-500); }

Motion

:root {
  --duration-fast: 120ms;
  --duration-base: 220ms;
  --duration-slow: 420ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}
@keyframes cp-spin { to { transform: rotate(360deg); } }
@keyframes cp-live { 50% { opacity: .38; transform: scale(.8); } }

Anti-patterns

1. 쿠팡 쇼핑의 오렌지레드를 쿠팡플레이 핵심 CTA로 사용하지 말 것 — 현재 제품 액센트는 블루 중심 2. 밝은 흰색 페이지를 기본 캔버스로 사용하지 말 것 — 포스터와 영상의 몰입이 깨진다 3. 모든 카드에 강한 멀티컬러 그라디언트를 적용하지 말 것 — 리본 심벌과 핵심 프로모션에만 제한 4. 콘텐츠 이미지 위에 페이드 없이 흰 텍스트를 직접 놓지 말 것 — 하단 다크 스크림으로 대비 확보 5. LIVE 배지와 파란 포커스 글로우를 비활성 콘텐츠에 남용하지 말 것

Coupang Play (쿠팡플레이)

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

출처