NaverWebtoon (네이버웹툰)

Brand DNA

브랜드 DNA

• 브랜드명: NaverWebtoon (네이버웹툰 / WEBTOON)
• 한 줄 정체성: 한국 웹툰의 종주 — 글로벌 웹툰 표준을 만든 디지털 만화 플랫폼
• 공식 디자인 철학: "Stories are for everyone — colorful, mobile-first, infinite scroll"
• 시그니처 요소 1개: Webtoon Green(#00DC64) + 다채로운 썸네일 그리드 + 무한 스크롤 reading

Tone & Mood

톤 & 무드

• 핵심 키워드 3개: 컬러풀, 만화, 글로벌
• 무드 설명: 흰 캔버스를 기본으로 다채로운 작품 썸네일과 Green 액센트를 선명하게 배치한다. 공식 다크 모드에서도 만화 자체가 화면의 주된 색을 담당한다.
• 비주얼 스타일: 모던 미니멀 + 휴머니즘
• 밀도(Density): Comfortable
• 모서리 성향: Round (8~12px)
• 평면성: Subtle

Color System

컬러 시스템 (CSS 변수)

:root {
  /* Primary - Webtoon Green */
  --color-primary-50:  #E0FCEC;
  --color-primary-100: #B5F4D2;
  --color-primary-200: #7DEBA9;
  --color-primary-300: #4EE187;
  --color-primary-400: #22DC72;
  --color-primary-500: #00DC64;  /* Webtoon Green */
  --color-primary-600: #00B854;
  --color-primary-700: #008F40;
  --color-primary-800: #00682E;
  --color-primary-900: #003D1B;

  /* Secondary - Webtoon Pink (UP) */
  --color-secondary-500: #FF3478;

  /* Neutral */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #FAFAFA;
  --color-neutral-100:  #F5F5F5;
  --color-neutral-200:  #E0E0E0;
  --color-neutral-300:  #C7C7C7;
  --color-neutral-500:  #A0A0A0;
  --color-neutral-700:  #888888;
  --color-neutral-800:  #2D2D2D;
  --color-neutral-900:  #191919;
  --color-neutral-1000: #000000;

  /* Semantic */
  --color-success-bg: #E0FCEC;
  --color-success-fg: #00DC64;
  --color-warning-bg: #FFF1D9;
  --color-warning-fg: #FFC700;
  --color-error-bg:   #FFE5E5;
  --color-error-fg:   #FF3838;
  --color-info-bg:    #E0F0FE;
  --color-info-fg:    #2563EB;

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

  /* Text */
  --text-primary:    #191919;
  --text-secondary:  #555555;
  --text-tertiary:   #888888;
  --text-on-primary: #191919;
  --text-disabled:   #C7C7C7;

  /* Border */
  --border-default: #F0F0F0;
  --border-subtle:  #FAFAFA;
  --border-strong:  #E0E0E0;
  --border-focus:   #00DC64;
}

[data-theme="dark"] {
  --bg-base: #0E0E10;
  --bg-subtle: #1A1A1C;
  --bg-elevated: #232325;
  --text-primary: #F2F2F2;
  --text-secondary: #B8B8B8;
  --text-tertiary: #8A8A8A;
  --text-disabled: #5A5A5C;
  --border-default: #2D2D2D;
  --border-subtle: #1E1E20;
  --border-strong: #3D3D3D;
}

Typography

타이포그래피

• 폰트 페어링: 한글 Pretendard, 영문 -apple-system
• 위계:
  • Display: 32px / 800 / 1.15 / -0.025em
  • H1: 22px / 800 / 1.2 / -0.02em
  • H2: 17px / 800 / 1.27 / -0.015em
  • H3: 14px / 700 / 1.3 / -0.01em
  • Body: 13px / 500 / 1.5 / 0
  • Body Small: 12px / 500 / 1.43 / 0
  • Caption: 11px / 700 / 1.27 / 0

Spacing

스페이싱

• Base unit: 4px
• 토큰: --space-xs:4px; --space-sm:8px; --space-md:12px; --space-lg:16px; --space-xl:24px; --space-2xl:32px;
• Container: max-width 480px (모바일 우선)

Border Radius

Border Radius

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

Shadow / Elevation

Shadow / Elevation

--shadow-none: none;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.10);
--shadow-md: 0 4px 12px rgba(0,0,0,0.20);
--shadow-lg: 0 8px 24px rgba(0,0,0,0.30);
--shadow-xl: 0 16px 32px rgba(0,220,100,0.20);

Iconography

Iconography

• 스타일: Outline + Filled
• Stroke 굵기: 2px
• 모서리 처리: Round
• 추천 라이브러리: Phosphor / Lucide

Component Guide

컴포넌트 가이드

Button

.btn { font: 800 14px/1 Pretendard, sans-serif; letter-spacing:-0.01em; border-radius: var(--radius-md); padding: 12px 16px; border: 0; cursor: pointer; }
.btn-primary { background: var(--color-primary-500); color: var(--text-on-primary); }
.btn-secondary { background: var(--bg-subtle); color: var(--text-primary); }
.btn-ghost { background: transparent; color: var(--color-primary-500); }
.btn-danger { background: var(--color-error-fg); color: #fff; }

Input

.input { background: var(--bg-subtle); border: 0; border-radius: var(--radius-md); padding: 10px 12px; font-size: 13px; font-family: inherit; }
.input:focus { outline: 2px solid var(--border-focus); outline-offset: -2px; }

Card (Webtoon thumbnail)

.toon { cursor: pointer; }
.toon .img { aspect-ratio: 2/3; border-radius: var(--radius-md); position: relative; }
.toon h3 { font-size: 13px; font-weight: 700; margin: 6px 0 2px; line-height: 1.25; }
.toon .rating { font-size: 11px; color: var(--text-tertiary); }
.card { background: var(--bg-base); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 14px; }
.card-elevated { box-shadow: var(--shadow-md); border-color: transparent; }
.card-outlined { box-shadow: none; }

Badge

.tag { padding: 1px 6px; border-radius: 3px; font-size: 9px; font-weight: 800; line-height: 14px; display: inline-flex; align-items: center; }
.tag-up { background: #FF3478; color: #fff; }
.tag-new { background: #00DC64; color: #191919; }
.tag-solid { background: var(--color-primary-500); color: var(--text-on-primary); }
.tag-subtle { background: var(--color-primary-50); color: var(--color-primary-700); }
.tag-outline { border: 1px solid var(--border-default); color: var(--text-primary); }

Navigation (Tab — 요일별)

.tabs { display: flex; gap: 0; padding: 0 12px; border-bottom: 1px solid var(--border-default); }
.tabs .tab { padding: 12px 14px; font-size: 14px; font-weight: 700; color: var(--text-tertiary); cursor: pointer; }
.tabs .tab.active { color: var(--color-primary-500); border-bottom: 2px solid var(--color-primary-500); }

Motion

Motion

--duration-fast: 100ms; --duration-base: 200ms; --duration-slow: 350ms;
--ease-out: cubic-bezier(0.4, 0, 0.2, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

Anti-patterns

Anti-patterns

1. UP/신작 배지 색을 임의 매핑 금지 — Pink UP / Green 신작 보존 2. 썸네일 라운드를 16px+ 변경 금지 — 8px 시그니처 3. brand green을 본문 텍스트에 사용 금지 4. 무한 스크롤 reader에 가로 페이지 모드 강제 금지 — 세로가 표준 5. 작품 썸네일보다 배경 장식을 강하게 사용 금지 — 콘텐츠가 화면의 색을 주도해야 함

Sources

출처

1. https://comic.naver.com/
2. https://www.webtoons.com/