CHZZK (치지직)

검은 화면 위 네온 그린 #00FFA3 한 줄기 — 번개처럼 기운 「치지직」 워드마크와 라이브 링이 켜지는 스트리밍 화면

한국미디어게이밍소셜차가운modern-minimal고딕compactsoftflat다크라이트한글 지원출시 2023개정 2025

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

Brand DNA

브랜드 DNA

브랜드명: CHZZK (치지직, 네이버)
한 줄 정체성: 네이버가 만든 게임·라이브 스트리밍 플랫폼. 2023년 12월 19일 베타, 2024년 5월 9일 정식 출시했고 트위치의 한국 철수 뒤 스트리머와 시청자를 받아냈다.
공식 디자인 철학: 이름은 오래된 전자기기에서 나는 「치지직」 소리, 즉 TV 주파수를 맞춰 화면이 켜지는 순간이다. 브랜딩(BRENDEN, Red Dot 2025)은 헤르츠·주파수를 모티프로 대각선 키 비주얼과 글리치 그리드를 만들었고, "다양한 즐거움을 탐색하고 새 스트리머를 발견한다"를 서비스 경험의 방향으로 삼았다. 사이트 설명 문구는 「지금, 스트리밍이 시작됩니다. 치지직-」.
시그니처 요소 1개: 검은 화면(#141517) 위 네온 그린 #00FFA3 한 줄기. 네모꼴을 해체해 오른쪽으로 기울이고 「치」와 「직」을 번개처럼 꺾은 워드마크, 방송 중인 채널 아바타를 감싸는 네온→청록 라이브 링(#00FFA3 → #027F80)이 같은 색을 쓴다.

Tone & Mood

톤 & 무드

핵심 키워드 3개: 짜릿함, 몰입, 에너지
무드 설명: 영상이 주인공인 서비스라 바탕은 거의 검정(#141517·#0E0F10)으로 가라앉히고, 초록은 라이브 링·팔로우 버튼·진행 바처럼 "지금 켜져 있다"는 신호에만 쓴다. 제목과 이벤트 배너는 워드마크를 닮은 각진 디스플레이 서체(산돌 네모니2)로 힘을 주고, 목록과 채팅은 Pretendard 로 조밀하게 채운다.
비주얼 스타일: 모던 미니멀 (이벤트·e스포츠 배너에서만 대각선·글리치 그래픽)
밀도(Density): Compact — 라이브 썸네일 그리드와 초당 수십 줄 올라오는 채팅을 한 화면에 담는다. 본문 12~14px, 자간 -0.3px.
모서리 성향: Soft (썸네일·카드 8px, 버튼 6~8px, 태그·LIVE 배지 4px, 아바타만 원형)
평면성: Flat — 면 단계(#141517 → #202224 → #2E3033)로 위계를 만들고 그림자는 팝오버에만 쓴다.

Color System

컬러 시스템 (CSS 변수)

chzzk.naver.com 번들 CSS(vendor-*.css)의 --ref-color-*(원색)·--sem-color-*(의미) 토큰을 그대로 옮겼다. 기본 테마는 다크(:root)이고 툴바 설정(toolbar.light_theme)으로 라이트([data-theme=light])로 바꿀 수 있다. 라이트에서는 네온 대신 한 단계 짙은 브랜드 그린(ref-color-brand-*, #1BB373)을 쓴다. 의미색 배경 일부만 (추정) 합성값이다.

:root {
  /* Primary - Chzzk Neon (ref-color-brand-neon-*) — 다크 기본 */
  --color-primary-50:  #E6FFF6;  /* neon-5 */
  --color-primary-100: #CCFFED;  /* neon-10 */
  --color-primary-200: #99FFDA;  /* neon-20 */
  --color-primary-300: #66FFC8;  /* neon-30 */
  --color-primary-400: #33FFB5;  /* neon-40 */
  --color-primary-500: #00FFA3;  /* neon-50 — surface-brand-strongest, 라이브 링 시작색 */
  --color-primary-600: #00E693;  /* neon-55 — content-brand-base, 링크·강조 글자 */
  --color-primary-700: #00CC82;  /* neon-60 — content-brand-weak */
  --color-primary-800: #009962;  /* neon-70 — surface-brand-base */
  --color-primary-900: #006641;  /* neon-80 — surface-brand-weak */

  /* Secondary - 라이브 그라디언트 끝색 */
  --color-secondary-500: #027F80;  /* gradient-function-live-stop-2 */

  /* Neutral (ref-color-neutral-*) */
  --color-neutral-0:    #0E0F10;  /* neutral-95 — 가장 깊은 바탕 */
  --color-neutral-50:   #141517;  /* neutral-90 — 페이지 배경 */
  --color-neutral-100:  #202224;  /* neutral-60 — 입력·태그 면 */
  --color-neutral-300:  #2E3033;  /* neutral-50 — 구분선·호버 면 */
  --color-neutral-500:  #6D6E70;  /* neutral-30 */
  --color-neutral-700:  #979899;  /* neutral-20 */
  --color-neutral-900:  #E8E9EB;  /* neutral-4 */
  --color-neutral-1000: #FFFFFF;  /* neutral-0 — 본문 글자 */

  /* Semantic */
  --color-success-bg: #003321;  /* surface-brand-weakest */
  --color-success-fg: #00E693;  /* content-brand-base */
  --color-warning-bg: #2E2614;  /* surface-accent-prime(#A67B0E 20%) 합성 (추정) */
  --color-warning-fg: #D9B04F;  /* content-accent-prime-strong */
  --color-error-bg:   #3A1719;  /* (추정) red 20% 합성 */
  --color-error-fg:   #FF5454;  /* content-accent-red-strong */
  --color-info-bg:    #15273A;  /* (추정) blue 20% 합성 */
  --color-info-fg:    #3B8FD8;  /* content-accent-blue */

  /* 서비스 전용 */
  --color-live:   #E02020;  /* surface-accent-red-weak — LIVE 배지 */
  --color-cheese: #F2DA00;  /* content-accent-cheese — 후원 화폐 「치즈」 */
  --color-subscribe: #3E34AF; /* surface-function-subscribe-tier-1 — 구독 배지 */

  /* Surface */
  --bg-base:     #141517;  /* background-neutral-base */
  --bg-subtle:   #0E0F10;  /* background-neutral-weak — 사이드바·플레이어 뒤 */
  --bg-elevated: #202224;  /* surface-neutral-weak — 카드·입력·태그 */
  --bg-overlay:  #2E3033;  /* surface-neutral-base — 드롭다운·팝오버 */

  /* Text */
  --text-primary:    #FFFFFF;  /* content-neutral-primary */
  --text-secondary:  #C9CEDC;  /* content-neutral-cool-strong */
  --text-tertiary:   #9DA5B6;  /* content-neutral-cool-base — 시청자 수·시간 */
  --text-on-primary: #0E0F10;  /* content-neutral-inverse-static — 네온 버튼 위 검정 글자 */
  --text-disabled:   #545A69;  /* content-neutral-cool-weaker */

  /* Border */
  --border-default: #2E3033;  /* border-neutral-weak */
  --border-subtle:  #202224;  /* border-neutral-weaker */
  --border-strong:  #697183;  /* border-neutral-strong */
  --border-focus:   #00FFA3;  /* border-brand-strong */
}

[data-theme="light"] {
  /* Primary - Chzzk Green (ref-color-brand-*) — 라이트에서는 네온 대신 */
  --color-primary-50:  #E8F7F1;  /* brand-5 — surface-brand-weakest */
  --color-primary-100: #D1F0E3;  /* brand-10 — surface-brand-weak */
  --color-primary-200: #A4E1C7;  /* brand-20 */
  --color-primary-300: #76D1AB;  /* brand-30 — surface-brand-base */
  --color-primary-400: #49C28F;  /* brand-40 */
  --color-primary-500: #1BB373;  /* brand-50 — surface-brand-strongest, border-brand-strong */
  --color-primary-600: #168F5C;  /* brand-60 — content-brand-base */
  --color-primary-700: #23815A;  /* brand-65 — content-brand-strong */
  --color-primary-800: #106B45;  /* brand-70 */
  --color-primary-900: #0B482E;  /* brand-80 */

  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #F9F9F9;
  --color-neutral-100:  #F0F1F2;
  --color-neutral-300:  #E1E1E5;
  --color-neutral-500:  #979899;
  --color-neutral-700:  #6D6E70;
  --color-neutral-900:  #202224;
  --color-neutral-1000: #0E0F10;

  --color-success-bg: #E8F7F1;
  --color-success-fg: #168F5C;
  --color-warning-bg: #FBF0D1;  /* surface-function-nickname-yellow */
  --color-warning-fg: #CF9A12;
  --color-error-bg:   #FADAD9;  /* surface-function-nickname-red */
  --color-error-fg:   #E02020;  /* content-accent-red-strong(라이트) */
  --color-info-bg:    #D1E4FB;  /* surface-function-nickname-blue */
  --color-info-fg:    #2D63DD;

  --color-cheese: #F2DA00;

  --bg-base:     #FFFFFF;
  --bg-subtle:   #F9F9F9;
  --bg-elevated: #F0F1F2;
  --bg-overlay:  #FFFFFF;

  --text-primary:    #0E0F10;
  --text-secondary:  #2E3033;
  --text-tertiary:   #6D6E70;
  --text-on-primary: #FFFFFF;
  --text-disabled:   #C0C1C2;

  --border-default: #D0D1D3;
  --border-subtle:  #E1E1E5;
  --border-strong:  #6D6E70;
  --border-focus:   #1BB373;
}

Typography

타이포그래피

폰트 페어링:
- 한글: Pretendard (SIL OFL) — --sem-typography-font-style-default. 목록·채팅·UI 전부
- 디스플레이: 산돌 네모니2 (Sandoll Nemony2, 상용) — --sem-typography-font-style-decorative. 워드마크처럼 각진 네모꼴이라 배너 제목·카테고리 헤더·배지에 쓴다. 대체는 Pretendard 800
- 영문: Pretendard 라틴 글리프 그대로
위계 (번들 --sem-typography-* 토큰 실측. 크기/굵기/행간/자간):
- Display: 40px / 400(네모니) / 48px / 0 — display-nemony-40
- H1: 32px / 400(네모니) / 40px / 0 — display-nemony-32
- H2: 24px / 700 / 32px / -0.3px — title-pretendard-24-700 (네모니 24/32 변형 있음)
- H3: 20px / 700 / 28px / -0.3px — title-pretendard-20-700
- Body Large: 16px / 400 / 22px / -0.3px — body-16-400
- Body: 14px / 400 / 20px / -0.3px — body-14-400
- Body Small: 13px / 400 / 19px / -0.3px — body-13-400 (채팅 본문)
- Caption: 12px / 400 / 17px / -0.3px — body-12-400 (라벨은 11px/13px)
굵기: Pretendard 400·500·600·700·800 다섯 단계를 토큰으로 둔다. 방송 제목 600~700, 스트리머 이름 600, 메타 400.

Spacing

스페이싱

Base unit: 4px (2px 보조) — --sem-layout-spacing-* 실측: 4xs 2 · 3xs 4 · 2xs 6 · xs 8 · sm 10 · md 12 · lg 16 · xl 20 · 2xl 24 · 3xl 28 · 4xl 32 · 5xl 36
토큰: ``css --space-xs: 4px; /* 3xs */ --space-sm: 8px; /* xs */ --space-md: 16px; /* lg */ --space-lg: 24px; /* 2xl */ --space-xl: 32px; /* 4xl */ --space-2xl: 48px; /* (추정) */ --space-3xl: 64px; /* (추정) */ ``
Container: 헤더 60px + 좌측 사이드바(펼침 240px / 접힘 68px, (추정)) + 가변 본문. 라이브 그리드는 폭에 따라 3~6열, 방송 화면은 플레이어 + 우측 채팅 340~350px (추정)

Border Radius

--radius-none: 0;
--radius-sm: 4px;      /* sem-radius-xs — LIVE 배지·카테고리 태그 */
--radius-md: 8px;      /* sem-radius-md — 썸네일·버튼·입력 */
--radius-lg: 12px;     /* sem-radius-lg — 카드·팝오버 */
--radius-xl: 16px;     /* sem-radius-xl — 모달·바텀시트 */
--radius-full: 9999px; /* sem-radius-circular — 아바타·검색창 */

토큰은 2·4·6·8·12·16·20·24·32px까지 있고, 실사용 빈도는 8px > 6px > 12px > 4px 순(번들 CSS 집계).

Shadow / Elevation

다크 기본에서는 그림자가 거의 보이지 않아 면 색으로 위계를 만든다. 쓰는 곳은 팝오버·툴팁·플로팅 버튼 정도다. 번들 실측 2겹 구조(shadow-strong + shadow-base).

--shadow-none: none;
--shadow-sm: 0 2px 2px rgba(0,0,0,.30), 0 2px 6px 2px rgba(0,0,0,.20);    /* 툴팁·작은 칩 */
--shadow-md: 0 4px 4px rgba(0,0,0,.30), 0 4px 12px 4px rgba(0,0,0,.20);   /* 드롭다운·프로필 메뉴 */
--shadow-lg: 0 6px 6px rgba(0,0,0,.30), 0 6px 18px 6px rgba(0,0,0,.20);   /* 팝오버·채팅 설정 레이어 */
--shadow-xl: 0 8px 20px rgba(0,0,0,.40), 0 0 1px rgba(0,0,0,.40);         /* 모달 (추정) */

라이트 테마는 같은 구조에 알파만 #0000001a / #0000000d 로 낮춘다.

Iconography

스타일: Outline 중심 + 활성 상태는 Filled (사이드바 메뉴·하트 팔로우)
Stroke 굵기: 2~2.3px (28px 아이콘 기준 2.333 실측), 끝은 round
모서리 처리: Round
추천 라이브러리: 번들 내장 SVG 컴포넌트가 정본. 대체로는 Lucide (선 굵기 2 맞춤)

Component Guide

컴포넌트 가이드 (상태별 CSS)

Button (Primary / Secondary / Ghost / Danger)

.cz-btn { height: 36px; padding: 0 14px; border: 0; border-radius: var(--radius-md); font: 700 14px/20px Pretendard, -apple-system, sans-serif; letter-spacing: -0.3px; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; position: relative; overflow: hidden; transition: background-color .2s cubic-bezier(.65,0,.35,1); }
.cz-btn--primary { background: var(--color-primary-500); color: var(--text-on-primary); }   /* 팔로우·방송 시작 */
.cz-btn--primary:hover { background: var(--color-primary-600); }
.cz-btn--primary:active { background: var(--color-primary-700); }
.cz-btn--secondary { background: var(--bg-overlay); color: var(--text-primary); }            /* 구독·공유 */
.cz-btn--secondary:hover { background: #4D4D4D; }                                            /* surface-neutral-strong */
.cz-btn--ghost { background: transparent; color: var(--text-secondary); }
.cz-btn--ghost:hover { background: rgba(255,255,255,.05); color: var(--text-primary); }      /* interaction-darken-hovered */
.cz-btn--danger { background: var(--color-live); color: #fff; }
.cz-btn--danger:hover { background: #FF5454; }
.cz-btn:disabled { background: var(--bg-elevated); color: var(--text-disabled); cursor: not-allowed; }
.cz-btn.is-loading { color: transparent; pointer-events: none; }
.cz-btn.is-loading::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 2px solid rgba(14,15,16,.3); border-top-color: var(--text-on-primary); border-radius: 50%; animation: cz-spin .7s linear infinite; }
@keyframes cz-spin { to { transform: rotate(360deg); } }

Input

.cz-input { height: 40px; padding: 0 14px; border: 1px solid transparent; border-radius: var(--radius-md); background: var(--bg-elevated); color: var(--text-primary); font: 400 14px/20px Pretendard, sans-serif; letter-spacing: -0.3px; }
.cz-input::placeholder { color: var(--text-tertiary); }
.cz-input:focus { outline: none; border-color: var(--border-focus); }
.cz-input.is-error { border-color: var(--color-error-fg); }
.cz-input:disabled { color: var(--text-disabled); background: var(--bg-subtle); }
.cz-search { height: 40px; border-radius: var(--radius-full); padding: 0 16px; }             /* 헤더 검색창 */

Card (라이브 썸네일 카드)

.cz-live { display: flex; flex-direction: column; gap: 10px; }
.cz-live__thumb { position: relative; aspect-ratio: 16/9; border-radius: var(--radius-md); overflow: hidden; background: var(--bg-elevated); }
.cz-live__thumb:hover { outline: 2px solid var(--color-primary-500); outline-offset: -2px; }
.cz-card--accent { background: var(--color-success-bg); border-radius: var(--radius-lg); padding: 16px; }
.cz-card--outlined { border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 16px; }
.cz-avatar--live { padding: 2px; border-radius: 50%; background: linear-gradient(180deg, var(--color-primary-500), var(--color-secondary-500)); }  /* 방송 중 링 */
.cz-avatar--live > img { border: 2px solid var(--bg-base); border-radius: 50%; display: block; }

Badge / Tag

.cz-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: var(--radius-sm); font: 700 12px/16px Pretendard, sans-serif; }
.cz-badge--solid { background: var(--color-live); color: #fff; }                               /* LIVE */
.cz-badge--subtle { background: rgba(0,0,0,.8); color: #fff; font-weight: 600; }             /* 썸네일 위 시청자 수 */
.cz-badge--outline { box-shadow: inset 0 0 0 1px var(--border-default); color: var(--text-tertiary); }
.cz-tag { height: 20px; padding: 0 6px; border-radius: var(--radius-sm); background: var(--bg-elevated); color: var(--text-tertiary); font: 500 12px/20px Pretendard, sans-serif; }  /* 카테고리·태그 */

Navigation (좌측 사이드바)

.cz-sidenav { width: 240px; background: var(--bg-base); padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.cz-sidenav__item { height: 40px; padding: 0 12px; border-radius: var(--radius-md); display: flex; align-items: center; gap: 12px; color: var(--text-secondary); font: 500 14px/20px Pretendard, sans-serif; }
.cz-sidenav__item:hover { background: rgba(255,255,255,.05); color: var(--text-primary); }
.cz-sidenav__item.is-active { background: rgba(255,255,255,.12); color: var(--text-primary); font-weight: 700; }  /* interaction-darken-selected */
.cz-sidenav__channel .viewers { margin-left: auto; color: var(--text-tertiary); font-size: 12px; }
.cz-sidenav__channel .viewers::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--color-live); margin-right: 4px; }

Motion

--duration-fast: 200ms;   /* 버튼 배경·호버 (transition .2s 실측 최다) */
--duration-base: 400ms;   /* 패널·사이드바 접힘 (.4s 실측) */
--duration-slow: 600ms;   /* 배너 캐러셀 전환 (추정) */
--ease-out: cubic-bezier(0.33, 1, 0.68, 1);      /* (추정) */
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);   /* 버튼 배경 전환 실측 */

로고는 헤더에서 GIF 애니메이션(graphic.logo-gif.dark/light)으로 신호가 잡히듯 깜빡인다.

Anti-patterns

1. 네온 #00FFA3 을 넓은 면(배경·긴 본문 글자)에 깔지 않는다 — 라이브 링·팔로우·진행 바 같은 "켜짐" 신호에만 쓴다. 2. 네온 버튼 위에 흰 글자를 올리지 않는다 — 버튼 글자는 검정(#0E0F10)이다. 3. 라이트 테마에서 네온을 그대로 쓰지 않는다 — 흰 바탕에선 #1BB373 계열로 바꾼다. 4. LIVE 배지를 초록으로 만들지 않는다 — 방송 중 표시는 빨강(#E02020) 배지와 초록 링으로 역할이 나뉜다. 5. 워드마크를 똑바로 세우거나 둥근 서체로 바꾸지 않는다 — 기운 네모꼴과 번개처럼 꺾인 「치」「직」이 로고 그 자체다.

CHZZK (치지직)

Brand DNA

브랜드 DNA

Tone & Mood

톤 & 무드

Color System

컬러 시스템 (CSS 변수)

Typography

타이포그래피

Spacing

스페이싱

Border Radius

Border Radius

Shadow / Elevation

Shadow / Elevation

Iconography

Iconography

Component Guide

컴포넌트 가이드 (상태별 CSS)

Motion

Motion

Anti-patterns

Anti-patterns

Sources

출처