디자인 시스템 갤러리 NC (엔씨)

NC (엔씨)

NC Blue + 맞물린 NC 워드마크 + 45° 플렉시블 윈도 — 미래로 연결되는 게임 허브

한국게이밍소비자차가운modern-minimal고딕comfortablesharplayered다크한글 지원출시 2020개정 2026

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

Brand DNA

브랜드 DNA

  • 브랜드명: NC (엔씨, 구 NCSOFT)
  • 한 줄 정체성: 게임·기술·콘텐츠·플랫폼을 통해 다음 세대의 즐거움을 연결하는 크리에이티브 기업
  • 공식 디자인 철학: "Next & Creative" — 미래에 대한 도전과 창의성을 바탕으로 다음 세대에 새로운 가치를 전달
  • 시그니처 요소 1개: 서로 맞물린 N·C 워드마크의 45° 커팅 엣지를 확장한 "플렉시블 윈도". NC Blue와 게임 키 비주얼을 이 각진 창 안에서 연결한다.

Tone & Mood

톤 & 무드

  • 핵심 키워드 3개: 미래지향, 시네마틱, 정밀
  • 무드 설명: 칠흑에 가까운 글로벌 게임 허브 위로 각 IP의 시네마틱 키 비주얼이 크게 열린다. NC Blue는 로고·포커스·정보선에 제한해 사용하고, 45° 커팅 프레임과 정밀한 그리드가 서로 다른 세계를 한 브랜드로 묶는다.
  • 비주얼 스타일: 모던 미니멀 + 시네마틱
  • 밀도(Density): Comfortable
  • 모서리 성향: Sharp (0~2px, 핵심 프레임은 45° 절삭)
  • 평면성: Layered (풀블리드 키 비주얼, 반투명 정보 레이어)

Color System

컬러 시스템 (CSS 변수)

:root {
  /* Primary - NC Blue (디지털 값 추정) */
  --color-primary-50:  #E8F7FC;
  --color-primary-100: #C4EBF8;
  --color-primary-200: #8FD9F1;
  --color-primary-300: #55C4E9;
  --color-primary-400: #19A7E0;
  --color-primary-500: #006EAA;     /* 인터랙션 강조 */
  --color-primary-600: #005786;
  --color-primary-700: #00466D;
  --color-primary-800: #00365E;     /* NC Blue */
  --color-primary-900: #001F38;

  /* IP key-art accents */
  --color-aion:    #8070FF;
  --color-tl:      #19A7E0;
  --color-lineage: #8C7267;
  --color-cinder:  #6079B9;

  /* Neutral - blue-black */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #F4F8FC;
  --color-neutral-100:  #DDE6EF;
  --color-neutral-300:  #93A3B5;
  --color-neutral-500:  #5D6D7E;
  --color-neutral-700:  #223044;
  --color-neutral-800:  #0E1621;
  --color-neutral-900:  #05080E;
  --color-neutral-1000: #000000;

  /* Semantic */
  --color-success-bg: #0B241B;
  --color-success-fg: #6FD2A0;
  --color-warning-bg: #2A200C;
  --color-warning-fg: #E7C36E;
  --color-error-bg:   #2C1118;
  --color-error-fg:   #FF788E;
  --color-info-bg:    #082238;
  --color-info-fg:    #55C4E9;

  /* Surface */
  --bg-base:     #05080E;
  --bg-subtle:   #09111B;
  --bg-elevated: #0E1621;
  --bg-page:     linear-gradient(180deg, #05080E 0%, #09111B 100%);
  --bg-overlay:  rgba(2,5,10,0.84);

  /* Text */
  --text-primary:    #F4F8FC;
  --text-secondary:  #C1CDDA;
  --text-tertiary:   #93A3B5;
  --text-on-primary: #FFFFFF;
  --text-disabled:   #5D6D7E;

  /* Border */
  --border-default: #223044;
  --border-subtle:  #142131;
  --border-strong:  #3E526A;
  --border-focus:   #19A7E0;
}

Typography

타이포그래피

  • 폰트 페어링:
    • UI(영문): NC Sans (자체) / Arial 폴백
    • 한글: Pretendard / Noto Sans KR
    • 디스플레이: NC Sans Black (자체, 45° 그래픽 모티프와 조합)
    • 코드: SFMono-Regular / Consolas
  • 위계:
    • Display: 56px / 800 / 1.05 / -0.03em uppercase
    • H1: 36px / 700 / 1.15 / -0.02em
    • H2: 24px / 700 / 1.25 / -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.08em uppercase

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: 2px;
--radius-md: 4px;       /* 카드 시그니처 */
--radius-lg: 6px;
--radius-xl: 10px;
--radius-full: 9999px;  /* 태그/버튼 일부 */

Shadow / Elevation

Shadow / Elevation

--shadow-none: none;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
--shadow-md: 0 8px 20px rgba(0,0,0,0.5);
--shadow-lg: 0 24px 56px rgba(0,0,0,0.7);
--shadow-blue: 0 0 0 1px rgba(25,167,224,0.52), 0 10px 28px rgba(0,110,170,0.22);

Iconography

Iconography

  • 스타일: Outline (얇고 날카로움) + 일부 Filled
  • Stroke 굵기: 1.5px
  • 모서리 처리: Square
  • 추천 라이브러리: Lucide / Phosphor (Thin variant)

Component Guide

컴포넌트 가이드

Button

.btn { font: 700 13px/1 'NC Sans',sans-serif; padding: 12px 22px; border-radius: 0; border: 0; cursor: pointer; letter-spacing: 0.08em; text-transform: uppercase; clip-path: polygon(0 0,100% 0,calc(100% - 8px) 100%,0 100%); transition: background var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); }
.btn-primary { background: var(--color-primary-500); color: var(--text-on-primary); }
.btn-primary:hover { background: var(--color-primary-400); box-shadow: var(--shadow-blue); }
.btn-primary:active { background: var(--color-primary-600); transform: translateY(1px); }
.btn-secondary { background: transparent; color: var(--text-primary); border: 1px solid var(--border-strong); }
.btn-secondary:hover { border-color: var(--color-primary-400); color: var(--color-primary-300); }
.btn-ghost { background: rgba(255,255,255,0.04); color: var(--text-secondary); }
.btn-danger { background: var(--color-error-bg); color: var(--color-error-fg); }
.btn:disabled { opacity: .38; cursor: not-allowed; box-shadow: none; }
.btn.is-loading { color: transparent; pointer-events: none; }

Input

.input { background: rgba(255,255,255,0.04); border: 1px solid var(--border-default); border-radius: 2px; padding: 12px 16px; font: 400 14px/1.4 'NC Sans',sans-serif; color: var(--text-primary); width: 100%; }
.input:focus { outline: none; border-color: var(--color-primary-400); box-shadow: 0 0 0 2px rgba(25,167,224,0.18); }
.input[aria-invalid="true"] { border-color: var(--color-error-fg); }
.input:disabled { background: var(--bg-subtle); color: var(--text-disabled); }

Card (Game)

.card { background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: 2px; aspect-ratio: 16/9; overflow: hidden; position: relative; cursor: pointer; clip-path: polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%); transition: transform var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); }
.card:hover { transform: translateY(-2px); border-color: var(--color-primary-400); box-shadow: var(--shadow-blue); }
.card .title { position: absolute; left: 14px; bottom: 14px; font: 800 18px/1.2 'NC Sans',sans-serif; color: #fff; letter-spacing: -0.01em; text-transform: uppercase; }
.card-emphasis { border-top: 2px solid var(--color-primary-400); }
.card-outlined { background: transparent; }

Badge

.tag { display: inline-flex; padding: 3px 8px; border-radius: 0; font: 700 10px/1.4 'NC Sans',sans-serif; letter-spacing: 0.12em; text-transform: uppercase; }
.tag-solid { background: var(--color-primary-400); color: var(--color-neutral-900); }
.tag-subtle { background: var(--color-info-bg); color: var(--color-info-fg); }
.tag-outline { background: transparent; color: var(--text-tertiary); border: 1px solid var(--border-strong); }

Navigation

.topbar { background: var(--bg-base); border-bottom: 1px solid var(--border-default); padding: 14px 28px; display: flex; align-items: center; gap: 24px; }
.topbar .logo { font: 900 18px/1 'NC Sans',sans-serif; letter-spacing: -0.08em; color: var(--text-primary); }
.topbar .item { font: 600 12px/1 'NC Sans',sans-serif; color: var(--text-tertiary); padding: 6px 0; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; border-bottom: 2px solid transparent; }
.topbar .item:hover, .topbar .item.active { color: var(--text-primary); border-color: var(--color-primary-400); }

Motion

Motion

--duration-fast: 150ms;
--duration-base: 280ms;
--duration-slow: 500ms;
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-cinematic: cubic-bezier(0.65, 0, 0.35, 1);

Anti-patterns

Anti-patterns

1. 게임 허브를 밝은 생산성 앱처럼 구성하지 않는다 — 기본 캔버스는 블루 블랙이다. 2. 핵심 프레임에 과도한 라운드(>8px)를 적용하지 않는다 — 45° 커팅 엣지가 우선이다. 3. NC Blue를 모든 면에 채우지 않는다 — 로고·포커스·정보선에 제한하고 IP 키 비주얼을 살린다. 4. 서로 다른 게임의 고유 색을 한 화면에서 같은 비중으로 경쟁시키지 않는다. 5. 맞물린 NC 워드마크의 비율·연결부·절삭 각도를 임의로 둥글게 바꾸지 않는다.

Sources

출처

  1. https://www.nc.com/?locale=ko-KR
  2. https://about.ncsoft.com/news/article/nc-ci-renewal-project
  3. https://about.ncsoft.com/news/article/news_update_260402