Netmarble (넷마블)

ㅋㅋ 마스코트 실루엣 + 브라운·그레이 — 친근한 글로벌 게임 브랜드

한국게이밍소비자따뜻한humanismmodern-minimal고딕comfortableroundsubtle라이트한글 지원출시 2000개정 2023

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

Brand DNA

브랜드 DNA

브랜드명: Netmarble (넷마블)
한 줄 정체성: PC·모바일·콘솔을 아우르며 전 세계에 다양한 장르의 게임을 서비스하는 글로벌 게임 컴퍼니
공식 디자인 철학: "We entertain the world with fun games." — 재미있는 게임으로 세상을 즐겁게 한다
시그니처 요소 1개: 캐릭터 ‘ㅋㅋ’의 뿔·꼬리·팔다리 실루엣을 닮은 넷마블체와 브라운·그레이 CI. 따뜻한 브라운은 재미를, 보편적인 그레이는 글로벌을 상징한다

Tone & Mood

톤 & 무드

핵심 키워드 3개: 친근한, 유쾌한, 글로벌
무드 설명: 흰색과 따뜻한 웜 그레이를 넓게 사용하고, 넷마블 브라운을 로고·제목·핵심 행동에 집중한다. 게임 IP의 강한 아트워크 사이에는 노란 ‘ㅋㅋ’ 마스코트와 둥근 형태를 배치해 회사 브랜드의 친근한 리듬을 유지한다.
비주얼 스타일: 휴머니즘 + 모던 미니멀
밀도(Density): Comfortable — 다채로운 게임 콘텐츠 사이에 충분한 여백을 두어 탐색 피로를 낮춘다
모서리 성향: Round (12~20px)
평면성: Subtle

Color System

컬러 시스템 (CSS 변수)

:root {
  /* Primary - Netmarble Brown */
  --color-primary-50:  #F7F1ED;
  --color-primary-100: #EADCD3;
  --color-primary-200: #D5BDAF;
  --color-primary-300: #B89480;
  --color-primary-400: #8C6048;
  --color-primary-500: #5C3824;       /* CI 워드마크 브라운 */
  --color-primary-600: #4B2D1D;
  --color-primary-700: #3D2518;
  --color-primary-800: #2F1D13;
  --color-primary-900: #21140D;

  /* Secondary - 캐릭터 ‘ㅋㅋ’의 유쾌한 포인트 */
  --color-secondary-50:  #FFF9DF;
  --color-secondary-100: #FFF0AD;
  --color-secondary-300: #FFDC61;
  --color-secondary-500: #FFC928;     /* 마스코트 옐로 (화면용 추정) */
  --color-secondary-700: #B87800;

  /* Neutral - CI의 보편적인 Gray */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #F7F5F2;
  --color-neutral-100:  #ECE8E4;
  --color-neutral-300:  #C8C1BB;
  --color-neutral-500:  #8A817B;
  --color-neutral-700:  #514A46;
  --color-neutral-900:  #241C18;
  --color-neutral-1000: #000000;

  /* Semantic */
  --color-success-bg: #EAF6EE;
  --color-success-fg: #237A43;
  --color-warning-bg: #FFF4D6;
  --color-warning-fg: #9A6200;
  --color-error-bg:   #FCE9E6;
  --color-error-fg:   #B84235;
  --color-info-bg:    #EAF2F7;
  --color-info-fg:    #356C8C;

  /* Surface */
  --bg-base:     #FFFFFF;  /* 페이지 */
  --bg-subtle:   #F7F5F2;  /* 콘텐츠 레일 */
  --bg-elevated: #FFFFFF;  /* 게임 카드 */
  --bg-hero:     linear-gradient(135deg, #5C3824 0%, #36251D 72%, #25201D 100%);
  --bg-overlay:  rgba(36,28,24,0.68);

  /* Text */
  --text-primary:    #241C18;
  --text-secondary:  #514A46;
  --text-tertiary:   #756B65;
  --text-on-primary: #FFFFFF;
  --text-disabled:   #AFA7A1;

  /* Border */
  --border-default: #E7E2DD;
  --border-subtle:  #F0ECE8;
  --border-strong:  #C8C1BB;
  --border-focus:   #5C3824;
}

Typography

타이포그래피

폰트 페어링:
- UI: Netmarble Sans (자체) / Pretendard 폴백
- 한글: Pretendard / Noto Sans KR
- 영문: Inter / SF Pro
- 코드: JetBrains Mono
위계:
- Display: 48px / 800 / 1.1 / -0.02em
- H1: 32px / 700 / 1.2 / -0.015em
- H2: 22px / 700 / 1.3 / -0.01em
- H3: 18px / 600 / 1.35 / 0
- Body Large: 16px / 400 / 1.6 / 0
- Body: 14px / 400 / 1.55 / 0
- Body Small: 12px / 400 / 1.5 / 0
- Caption: 11px / 600 / 1.4 / 0.04em uppercase

Spacing

스페이싱

Base unit: 4px
토큰: ``css --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 72px; ``
Container: max-width 1200px

Border Radius

--radius-none: 0;
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 20px;       /* 게임 카드 시그니처 */
--radius-xl: 28px;
--radius-full: 9999px;

Shadow / Elevation

--shadow-none: none;
--shadow-sm: 0 2px 8px rgba(36,28,24,0.06);   /* 기본 카드 */
--shadow-md: 0 10px 28px rgba(36,28,24,0.10); /* 카드 hover */
--shadow-lg: 0 24px 56px rgba(36,28,24,0.16); /* 모달 */
--shadow-brand: 0 14px 36px rgba(92,56,36,0.22); /* 브라운 히어로 */

Iconography

스타일: Outline + Filled 혼합
Stroke 굵기: 2px
모서리 처리: Round
추천 라이브러리: Phosphor / Lucide. 기능 아이콘은 단순한 아웃라인, 브랜드 접점에는 ‘ㅋㅋ’의 둥근 실루엣을 채움형으로 사용

Component Guide

컴포넌트 가이드

Button

.btn { min-height: 44px; padding: 0 20px; border: 1px solid transparent; border-radius: var(--radius-full); font: 700 14px/1 'Netmarble Sans',Pretendard,sans-serif; cursor: pointer; transition: transform var(--duration-fast) var(--ease-out), background var(--duration-fast), box-shadow var(--duration-fast); }
.btn-primary { background: var(--color-primary-500); color: var(--text-on-primary); }
.btn-primary:hover { background: var(--color-primary-600); transform: translateY(-1px); box-shadow: var(--shadow-brand); }
.btn-primary:active { background: var(--color-primary-700); transform: translateY(0) scale(.98); }
.btn-secondary { background: var(--bg-base); color: var(--color-primary-500); border-color: var(--color-primary-200); }
.btn-secondary:hover, .btn-ghost:hover { background: var(--color-primary-50); }
.btn-ghost { background: transparent; color: var(--color-primary-500); }
.btn-danger { background: var(--color-error-fg); color: #fff; }
.btn:disabled { background: var(--color-neutral-100); color: var(--text-disabled); box-shadow: none; cursor: not-allowed; transform: none; }
.btn.loading { color: transparent; position: relative; pointer-events: none; }
.btn.loading::after { content: ''; position: absolute; width: 14px; height: 14px; border: 2px solid #fff; border-right-color: transparent; border-radius: 50%; animation: nm-spin .8s linear infinite; }

Input

.input { width: 100%; min-height: 46px; padding: 0 15px; background: var(--bg-base); border: 1px solid var(--border-strong); border-radius: var(--radius-md); color: var(--text-primary); font: 400 15px/1.4 'Netmarble Sans',sans-serif; }
.input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--color-primary-100); }
.input.error { border-color: var(--color-error-fg); background: var(--color-error-bg); }
.input:disabled { background: var(--color-neutral-50); border-color: var(--border-default); color: var(--text-disabled); cursor: not-allowed; }

Card (Game)

.card { background: var(--bg-elevated); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); cursor: pointer; transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card.emphasis { box-shadow: var(--shadow-md); }
.card.outlined { border: 1px solid var(--border-default); box-shadow: none; }
.card .cover { aspect-ratio: 16/10; background: var(--bg-hero); display: flex; align-items: flex-end; padding: 18px; color: #fff; font: 800 18px/1.2 inherit; }
.card .meta { padding: 16px 18px 18px; }
.card h3 { font: 700 16px/1.3 'Netmarble Sans',sans-serif; color: var(--text-primary); margin: 0 0 4px; }
.card .platform { font: 600 11px/1.3 inherit; color: var(--text-tertiary); letter-spacing: 0.06em; text-transform: uppercase; }

Badge

.tag { display: inline-flex; padding: 4px 12px; border-radius: 9999px; font: 700 11px/1.4 'Netmarble Sans',sans-serif; }
.tag-solid { background: var(--color-primary-500); color: var(--text-on-primary); }
.tag-subtle { background: var(--color-secondary-100); color: var(--color-primary-700); }
.tag-outline { background: transparent; color: var(--color-primary-500); border: 1px solid var(--color-primary-200); }

Navigation

.topbar { min-height: 64px; padding: 0 32px; display: flex; align-items: center; gap: 26px; background: var(--bg-base); border-bottom: 1px solid var(--border-default); }
.topbar .logo { font: 900 22px/1 'Netmarble Sans',sans-serif; letter-spacing: -0.05em; color: var(--color-primary-500); }
.topbar .item { padding: 9px 11px; border-radius: var(--radius-sm); color: var(--text-secondary); font: 600 13px/1 inherit; cursor: pointer; }
.topbar .item:hover, .topbar .item.active { background: var(--color-primary-50); color: var(--color-primary-700); }

Motion

--duration-fast: 150ms;
--duration-base: 260ms;
--duration-slow: 460ms;
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--ease-spring: cubic-bezier(0.34, 1.45, 0.64, 1);
@keyframes nm-spin { to { transform: rotate(360deg); } }

Anti-patterns

1. 넷마블의 기업 UI를 차가운 블루 단색 시스템으로 해석하지 않는다 — 공식 CI는 브라운의 재미와 그레이의 글로벌 보편성을 핵심으로 한다 2. 개별 게임 IP의 컬러를 회사 로고·탐색·공통 CTA까지 확장하지 않는다 — 콘텐츠 아트와 기업 브랜드 층위를 분리한다 3. 노란 마스코트 컬러를 넓은 본문 배경에 과용하지 않는다 — ‘ㅋㅋ’ 캐릭터와 짧은 포인트에 집중한다 4. 각진 카드와 기계적인 압축 타이포를 기본으로 사용하지 않는다 — 둥근 실루엣과 넉넉한 행간으로 친근함을 유지한다 5. 공식 근거 없는 다크 모드를 기본 테마로 제시하지 않는다 — 회사·게임 포털의 밝은 캔버스를 기준으로 한다

Netmarble (넷마블)

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

출처