Epic Games Store

잉크 블랙 스토어 크롬 + 시네마틱 키 아트 + 매주 무료 게임을 전면에 둔 게임 큐레이션

서양게이밍이커머스중립modern-minimal고딕comfortablesoftflat다크한글 지원출시 2018개정 2024

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

Brand DNA

브랜드 DNA

브랜드명: Epic Games Store
한 줄 정체성: Epic이 운영하는 멀티플랫폼 게임 스토어 — 시네마틱 발견 경험과 매주 무료 게임 제공
공식 디자인 철학: 공개 디자인 시스템 문서는 없으며, 실제 스토어는 게임 키 아트를 주인공으로 두고 탐색·구매 동선을 최소한의 크롬으로 정리한다.
시그니처 요소 1개: 잉크 블랙 캔버스 위 대형 시네마틱 캐러셀과 오른쪽 프로모션 레일. 흰 CTA와 절제된 파란 할인 배지가 게임별 키 아트의 색을 방해하지 않는다.

Tone & Mood

톤 & 무드

핵심 키워드 3개: 큐레이션, 시네마틱, 무료증정
무드 설명: 거의 검정에 가까운 스토어 크롬과 무채색 텍스트 위에 게임 키 아트만 강하게 채색한다. 대형 캐러셀, 세로 프로모션 레일, 가로 게임 선반이 OTT처럼 이어지고 매주 무료 게임이 핵심 큐레이션으로 반복된다.
비주얼 스타일: 모던 미니멀
밀도(Density): Comfortable
모서리 성향: Soft (4~8px)
평면성: Flat

Color System

컬러 시스템 (CSS 변수)

:root {
  /* Primary - Epic Charcoal */
  --color-primary-50:  #F5F5F5;
  --color-primary-100: #D6D6D6;
  --color-primary-200: #A8A8A8;
  --color-primary-300: #757575;
  --color-primary-400: #4D4D4D;
  --color-primary-500: #2F2F2F;       /* 시그니처 */
  --color-primary-600: #1F1F22;
  --color-primary-700: #18181B;
  --color-primary-800: #121212;
  --color-primary-900: #050505;

  /* Secondary - 스토어 액션은 모노크롬 */
  --color-secondary-300: #FFFFFF;
  --color-secondary-500: #F5F5F5;
  --color-secondary-700: #D6D6D6;

  /* 가격 할인·선택 상태에 제한적으로 쓰는 Store Blue */
  --color-discount: #0074E4;
  --color-discount-hover: #1689F8;
  --color-discount-bg: #003C78;

  /* Neutral */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #F5F5F5;
  --color-neutral-100:  #D6D6D6;
  --color-neutral-300:  #8A8A8A;
  --color-neutral-500:  #5A5A5A;
  --color-neutral-700:  #2F2F2F;
  --color-neutral-900:  #121212;
  --color-neutral-1000: #000000;

  /* Semantic */
  --color-success-bg: #062F1F;
  --color-success-fg: #4DD2A0;
  --color-warning-bg: #3B2C08;
  --color-warning-fg: #F5C451;
  --color-error-bg:   #2A0D14;
  --color-error-fg:   #FF6B5E;
  --color-info-bg:    #08284A;
  --color-info-fg:    #66B5FF;

  /* Surface */
  --bg-base:     #121212;
  --bg-subtle:   #18181B;
  --bg-elevated: #1F1F22;
  --bg-overlay:  rgba(0,0,0,0.78);

  /* Text */
  --text-primary:    #FFFFFF;
  --text-secondary:  #D6D6D6;
  --text-tertiary:   #8A8A8A;
  --text-on-primary: #121212;
  --text-disabled:   #5A5A5A;

  /* Border */
  --border-default: #2F2F2F;
  --border-subtle:  #18181B;
  --border-strong:  #4D4D4D;
  --border-focus:   #FFFFFF;
}

Typography

타이포그래피

폰트 페어링:
- UI(영문): Inter / 시스템 산세리프 폴백
- 한글: Pretendard / Noto Sans KR
- 코드: ui-monospace / JetBrains Mono
위계:
- Display: 48px / 700 / 1.15 / -0.02em
- H1: 32px / 700 / 1.2 / -0.015em
- H2: 22px / 700 / 1.3 / -0.01em
- H3: 16px / 700 / 1.35 / 0
- Body: 14px / 400 / 1.5 / 0
- Body Small: 13px / 400 / 1.45 / 0
- Caption: 11px / 700 / 1.4 / 0.06em uppercase
- Code: 13px / 400 / 1.5 mono

Spacing

스페이싱

Base unit: 4px
토큰: ``css --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 36px; --space-2xl: 56px; --space-3xl: 80px; ``
Container: max-width 1280px

Border Radius

--radius-none: 0;
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 8px;
--radius-xl: 12px;
--radius-full: 9999px;

Shadow / Elevation

--shadow-none: none;
--shadow-sm: 0 1px 0 rgba(0,0,0,0.4);
--shadow-md: 0 8px 24px rgba(0,0,0,0.5);
--shadow-lg: 0 20px 56px rgba(0,0,0,0.7);
--shadow-focus: 0 0 0 2px rgba(255,255,255,0.42);

Iconography

스타일: Outline (1.75px)
Stroke 굵기: 1.75px
모서리 처리: Round
추천 라이브러리: Lucide / Phosphor

Component Guide

컴포넌트 가이드

Button

.btn { min-height: 40px; padding: 0 20px; border: 0; border-radius: var(--radius-sm); font: 700 12px/1 Inter,sans-serif; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: background var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out); }
.btn-primary { background: var(--color-secondary-500); color: var(--text-on-primary); }
.btn-primary:hover { background: var(--color-secondary-300); }
.btn-primary:active { background: var(--color-secondary-700); }
.btn-secondary { background: rgba(255,255,255,.12); color: var(--text-primary); }
.btn-secondary:hover { background: rgba(255,255,255,.18); }
.btn-secondary:active { background: rgba(255,255,255,.22); }
.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-ghost:hover { background: rgba(255,255,255,.08); color: var(--text-primary); }
.btn-danger { background: var(--color-error-fg); color: #121212; }
.btn:disabled, .btn[aria-busy="true"] { cursor: default; opacity: .4; }
.btn[aria-busy="true"]::before { content: ""; width: 12px; height: 12px; margin-right: 8px; display: inline-block; vertical-align: -2px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: epic-spin .8s linear infinite; }
@keyframes epic-spin { to { transform: rotate(360deg); } }

Input

.input { width: 100%; background: var(--bg-elevated); border: 1px solid transparent; border-radius: var(--radius-full); padding: 10px 16px; font: 400 14px/1.4 Inter,sans-serif; color: var(--text-primary); }
.input:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--shadow-focus); }
.input[aria-invalid="true"] { border-color: var(--color-error-fg); }
.input:disabled { color: var(--text-disabled); cursor: not-allowed; opacity: .6; }

Card (Game tile)

.tile { min-width: 0; background: transparent; border-radius: var(--radius-md); cursor: pointer; }
.tile .cover { position: relative; overflow: hidden; aspect-ratio: 3/4; border-radius: var(--radius-md); background: var(--bg-elevated); transition: filter var(--duration-fast) var(--ease-out); }
.tile:hover .cover { filter: brightness(1.12); }
.tile.is-featured .cover { outline: 1px solid var(--border-strong); }
.tile.is-outlined { padding: var(--space-sm); border: 1px solid var(--border-default); }
.tile .name { margin-top: 8px; font: 600 13px/1.35 Inter,sans-serif; color: var(--text-primary); }
.tile .price { margin-top: 5px; font: 500 12px/1.3 Inter,sans-serif; color: var(--text-secondary); }

Badge

.tag { display: inline-flex; align-items: center; padding: 3px 7px; border-radius: 3px; font: 700 10px/1.4 Inter,sans-serif; letter-spacing: .03em; }
.tag-solid { background: var(--color-discount); color: #FFFFFF; }
.tag-subtle { background: rgba(255,255,255,.10); color: var(--text-primary); }
.tag-outline { border: 1px solid var(--border-strong); color: var(--text-secondary); }

Navigation

.topbar { min-height: 52px; background: var(--bg-subtle); padding: 0 20px; display: flex; align-items: center; gap: 22px; border-bottom: 1px solid var(--border-default); }
.topbar .logo { width: 28px; height: 32px; color: var(--text-primary); display: grid; place-items: center; }
.topbar .item { font: 600 13px/1 Inter,sans-serif; color: var(--text-secondary); padding: 18px 2px; cursor: pointer; }
.topbar .item:hover, .topbar .item.active { color: var(--text-primary); }
.launcher-rail { width: 74px; background: var(--bg-subtle); border-right: 1px solid var(--border-default); display: flex; flex-direction: column; align-items: center; gap: 8px; }

Motion

--duration-fast: 150ms;
--duration-base: 250ms;
--duration-slow: 400ms;
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);

Anti-patterns

1. Steam 톤의 짙은 네이비 그라데이션을 스토어 크롬에 차용하지 않는다. 2. Unreal Engine Blue를 모든 CTA에 쓰지 않는다. 핵심 CTA는 흰색, 파랑은 할인·선택 상태에 제한한다. 3. 게임 키 아트 위에 장식 그라데이션을 과도하게 덮어 작품별 색을 평준화하지 않는다. 4. 카드 모서리를 12px보다 크게 만들어 모바일 앱처럼 보이게 하지 않는다. 5. 라이트 캔버스를 기본값으로 강제하거나 게임별 아트보다 스토어 장식을 앞세우지 않는다.

Epic Games Store

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

출처