모든 도구 브랜드 룩북

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

Border Radius

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

Shadow / Elevation

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

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

Motion

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

Anti-patterns

Anti-patterns

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

Sources

출처

  1. https://store.epicgames.com/
  2. https://static-assets-prod.epicgames.com/eos-docs/files/marketing-overview-files/EGS_Storefront_Merchandising_Carousel-Guidelines.pdf

Epic Games Store 이름과 로고는 각 권리자의 상표입니다.