Channel Talk (채널톡)

블루바이올렛 #5E56F0 말풍선과 42% 스무스 코너 아바타가 만드는 대화형 상담 톤

한국생산성마케팅디자인 시스템차가운modern-minimalhumanism고딕comfortablesoftsubtle라이트다크공식한글 지원출시 2020개정 2025

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

Brand DNA

브랜드 DNA

브랜드명: Channel Talk (채널톡, 채널코퍼레이션)
한 줄 정체성: 상담 채팅·마케팅 메시지·팀 메신저를 한 인박스로 묶은 올인원 고객 대화 플랫폼
공식 디자인 철학: 오픈소스 디자인 시스템 「Bezier」 — "제품 전반에 걸쳐 일관된 룩앤필을 갖도록 돕는다". 이름 그대로 부드러운 베지어 곡선(cubic-bezier(0.3, 0, 0, 1))이 모션과 모서리 감각의 기준이다.
시그니처 요소 1개: 블루바이올렛 #5E56F0 말풍선 + 42% 스무스 코너(스퀴클) 아바타 — 고객이 보는 채팅 위젯과 상담원이 보는 데스크가 같은 대화형 톤을 공유한다.

Tone & Mood

톤 & 무드

핵심 키워드 3개: 친근함, 산뜻함, 대화형
무드 설명: 흰 캔버스와 아주 옅은 회색 면(#F7F7F8) 위에 블루바이올렛 한 가지만 강조색으로 쓴다. 선 대신 1px 퍼짐 그림자로 요소를 띄워 메신저처럼 가볍고 말랑한 인상을 만들고, 아바타·런처·앱 아이콘은 원이 아닌 스퀴클로 통일한다.
비주얼 스타일: 모던 미니멀 + 휴머니즘 (이모지·일러스트 친화적인 메신저 감성)
밀도(Density): Comfortable — 상담원이 하루 종일 대화 목록을 훑는 도구라 정보량은 많되 13~15px 본문으로 숨 쉴 틈을 둔다.
모서리 성향: Soft (6~8px 기본, 말풍선·입력창은 12~20px, 아바타는 42% 스무스 코너)
평면성: Subtle — 테두리 대신 0 0 2px 1px 기본 그림자 링 + 짧은 드롭 그림자

Color System

컬러 시스템 (CSS 변수)

Bezier 토큰(bezier-tokens global/functional light-theme) 기준. 9단계 중 공식 원색은 500(blue.400)·600(blue.500)이고, 50~200은 공식 알파 토큰(blue.400-10/20/30)을 흰 바탕에 합성한 값, 나머지는 (추정) 보간이다.

:root {
  /* Primary - Bezier Blue (라이트 기본) */
  --color-primary-50:  #EFEEFE;  /* bg-blue-lightest (400 10%) — 선택 행 배경 */
  --color-primary-100: #DFDDFC;  /* bg-blue-lighter (400 20%) — 칩 호버 */
  --color-primary-200: #CFCCFA;  /* bg-blue-light (400 30%) — 포커스 링 면 */
  --color-primary-300: #A6A1F7;  /* (추정) 보간 */
  --color-primary-400: #7E77F3;  /* (추정) 보간 — 다크 대비 링크 */
  --color-primary-500: #5E56F0;  /* bgtxt-blue-normal — 기본 버튼·내 말풍선 */
  --color-primary-600: #4E40C9;  /* bgtxt-blue-dark — hover/pressed */
  --color-primary-700: #3F34A3;  /* (추정) 보간 */
  --color-primary-800: #2F277A;  /* (추정) 보간 */
  --color-primary-900: #201A52;  /* (추정) 보간 */

  /* Secondary - 브랜드 마크 바이올렛(로고) + Cobalt(accent 시맨틱) */
  --color-secondary-500: #572DFF;  /* 로고 스퀴클 실측 (channel.io) */
  --color-accent-500:    #329BE7;  /* bgtxt-cobalt-normal — accent 시맨틱 */

  /* Neutral - Bezier grey */
  --color-neutral-0:    #FFFFFF;  /* surface-normal */
  --color-neutral-50:   #FCFCFC;  /* grey.50 — surface-lower */
  --color-neutral-100:  #F7F7F8;  /* grey.100 — surface-lowest, 위젯 채팅 배경 */
  --color-neutral-200:  #EFEFF0;  /* grey.200 — 입력 비활성 면 */
  --color-neutral-300:  #E2E2E4;  /* grey.300 */
  --color-neutral-500:  #A7A7AA;  /* grey.500 — 아이콘 비활성 */
  --color-neutral-700:  #464748;  /* grey.700 */
  --color-neutral-900:  #242428;  /* grey.900 — 제목·로고타입 */
  --color-neutral-1000: #000000;

  /* Semantic - success=green, warning=orange, critical=red, accent=cobalt */
  --color-success-bg: #EAF6EE;  /* green.400 10% */
  --color-success-fg: #31A552;  /* green.400 */
  --color-warning-bg: #FEF2E7;  /* orange.400 10% */
  --color-warning-fg: #F4800B;  /* orange.400 */
  --color-error-bg:   #FDEDEE;  /* red.400 10% */
  --color-error-fg:   #E94E58;  /* red.400 */
  --color-info-bg:    #EBF5FD;  /* cobalt.400 10% */
  --color-info-fg:    #329BE7;  /* cobalt.400 */

  /* Surface (배경 위계) */
  --bg-base:     #FFFFFF;             /* bg-white-normal — 데스크 본문 */
  --bg-subtle:   #F7F7F8;             /* surface-lowest — 사이드바·위젯 대화 영역 */
  --bg-elevated: #FFFFFF;             /* bg-white-high — 카드·말풍선 */
  --bg-overlay:  rgba(0, 0, 0, 0.40); /* dim-black-normal — 모달 딤 */

  /* Text 위계 (fg-black 알파를 흰 바탕에 합성) */
  --text-primary:    #262626;  /* txt-black-darkest (black 85%) — 본문 */
  --text-secondary:  #666666;  /* txt-black-darker (black 60%) — 보조 */
  --text-tertiary:   #999999;  /* txt-black-dark (black 40%) — 시간·캡션 */
  --text-on-primary: #FFFFFF;  /* bgtxt-absolute-white */
  --text-disabled:   #D9D9D9;  /* txt-black-light (black 15%) */

  /* Border */
  --border-default: #EBEBEB;  /* bg-black-light (black 8%) */
  --border-subtle:  #F2F2F2;  /* bg-black-lighter (black 5%) */
  --border-strong:  #D9D9D9;  /* bg-black-dark (black 15%) */
  --border-focus:   #5E56F0;  /* bgtxt-blue-normal */
}

Typography

타이포그래피

폰트 페어링:
- 한글: Noto Sans KR (SIL OFL) — Bezier font.family.sans.kr 폴백 순서 2번째
- 영문: Inter (SIL OFL) — 스택 첫 번째. 일본어는 Noto Sans JP 가 앞으로 온다
위계 (Bezier global font 토큰. 크기·행간 쌍 매핑 일부 (추정)):
- Display: 36px / 700 / 44px / 0
- H1: 30px / 700 / 36px / 0
- H2: 24px / 700 / 32px / 0
- H3: 18px / 700 / 24px / -0.1px
- Body Large: 16px / 400 / 22px / -0.1px (추정)
- Body: 14px / 400 / 18px / -0.1px
- Body Small: 13px / 400 / 18px / -0.1px
- Caption: 12px / 400 / 16px / 0 (11px/16px 는 배지·타임스탬프)
- Message(채팅 전용): 15.5px / 400 / 23px / -0.4px — 말풍선 본문만 쓰는 전용 스타일
굵기: 400·700 두 가지만 쓴다(중간 굵기 없음).

Spacing

스페이싱

Base unit: 4px (데스크 상세 여백은 2px 단위 보정 (추정))
토큰: ``css --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; ``
Container: 데스크는 화면 전체 폭(3단 레이아웃: 내비 64px + 목록 320~360px + 대화), 채팅 위젯 390px 폭 고정, 마케팅 랜딩 max-width 1200px / 좌우 24px (추정)

Border Radius

--radius-none: 0;
--radius-sm: 4px;      /* 체크박스·태그 */
--radius-md: 8px;      /* 버튼 M·입력창·드롭다운 */
--radius-lg: 12px;     /* 카드·말풍선·모달 */
--radius-xl: 20px;     /* 위젯 패널·큰 입력 */
--radius-smooth: 42%;  /* 아바타·런처·앱 아이콘 (스무스 코너 근사) */
--radius-full: 9999px;

Shadow / Elevation

Bezier shadow.1~6 은 공통으로 "안쪽 흰 광택 + 1px 퍼짐 링 + 드롭"의 3겹 구조다. 테두리 대신 이 링이 경계선 역할을 한다.

--shadow-none: none;
--shadow-sm: inset 0 0 2px rgba(255,255,255,0.12), 0 0 2px 1px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.08);   /* ev1 — 말풍선·리스트 카드 */
--shadow-md: inset 0 0 2px rgba(255,255,255,0.12), 0 0 2px 1px rgba(0,0,0,0.05), 0 2px 6px rgba(0,0,0,0.08);   /* ev2 — 카드 hover·툴팁 */
--shadow-lg: inset 0 0 2px rgba(255,255,255,0.12), 0 0 2px 1px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.15);  /* ev3 — 드롭다운·팝오버 */
--shadow-xl: inset 0 0 2px rgba(255,255,255,0.12), 0 0 2px 1px rgba(0,0,0,0.05), 0 6px 40px rgba(0,0,0,0.30);  /* ev5 — 모달·채팅 위젯 패널 */

Iconography

스타일: Filled 중심 (단색 면 아이콘, 활성·비활성을 색으로 구분) (추정)
Stroke 굵기: 면 아이콘이라 선 두께 개념이 약함. 외곽선형을 쓸 경우 1.75~2px (추정)
모서리 처리: Round
추천 라이브러리: 공식 @channel.io/bezier-icons(24px 그리드). 대체로는 Phosphor Fill 또는 Tabler Filled

Component Guide

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

Button (Primary / Secondary / Ghost / Danger)

.ct-btn { height: 36px; padding: 0 14px; border: 0; border-radius: var(--radius-md); font: 700 14px/18px Inter, 'Noto Sans KR', sans-serif; letter-spacing: -0.1px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; transition: background var(--duration-fast) var(--ease-out); }
.ct-btn--primary { background: var(--color-primary-500); color: var(--text-on-primary); }
.ct-btn--primary:hover { background: var(--color-primary-600); }
.ct-btn--primary:active { background: var(--color-primary-700); }
.ct-btn--secondary { background: var(--color-primary-50); color: var(--color-primary-500); }
.ct-btn--secondary:hover { background: var(--color-primary-100); }
.ct-btn--ghost { background: transparent; color: var(--text-secondary); }
.ct-btn--ghost:hover { background: var(--border-subtle); color: var(--text-primary); }
.ct-btn--danger { background: var(--color-error-fg); color: var(--text-on-primary); }
.ct-btn--danger:hover { filter: brightness(0.92); }
.ct-btn:disabled { opacity: 0.4; cursor: not-allowed; }           /* Bezier opacity disabled 0.4 */
.ct-btn.is-loading { color: transparent; position: relative; pointer-events: none; }
.ct-btn.is-loading::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff; border-radius: 50%; animation: ct-spin 0.8s linear infinite; }
@keyframes ct-spin { to { transform: rotate(360deg); } }

Input

.ct-input { height: 36px; padding: 0 12px; border: 0; border-radius: var(--radius-md); background: var(--bg-elevated); color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--border-default); font: 400 14px/18px Inter, 'Noto Sans KR', sans-serif; }
.ct-input:focus { outline: none; box-shadow: inset 0 0 0 1px var(--border-focus), 0 0 0 3px var(--color-primary-100); }
.ct-input.is-error { box-shadow: inset 0 0 0 1px var(--color-error-fg), 0 0 0 3px var(--color-error-bg); }
.ct-input:disabled { background: var(--bg-subtle); color: var(--text-disabled); }

Card

.ct-card { background: var(--bg-elevated); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-sm); }
.ct-card:hover { box-shadow: var(--shadow-md); }
.ct-card--accent { background: var(--color-primary-50); box-shadow: none; }
.ct-card--outlined { box-shadow: inset 0 0 0 1px var(--border-default); }

Badge / Tag

.ct-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: var(--radius-sm); font: 700 11px/16px Inter, sans-serif; }
.ct-badge--solid { background: var(--color-primary-500); color: #fff; }
.ct-badge--subtle { background: var(--color-primary-50); color: var(--color-primary-500); }
.ct-badge--outline { box-shadow: inset 0 0 0 1px var(--border-strong); color: var(--text-secondary); }
.ct-unread { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--color-error-fg); color: #fff; font: 700 11px/18px Inter, sans-serif; text-align: center; }  /* 안 읽은 상담 수 */

Navigation (데스크 좌측 내비 레일)

.ct-rail { width: 64px; background: var(--bg-subtle); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 0; box-shadow: 1px 0 0 var(--border-default); }
.ct-rail__item { width: 40px; height: 40px; border-radius: var(--radius-md); display: grid; place-items: center; color: var(--text-tertiary); }
.ct-rail__item:hover { background: var(--border-subtle); color: var(--text-secondary); }
.ct-rail__item.is-active { background: var(--color-primary-50); color: var(--color-primary-500); }
.ct-avatar { width: 32px; height: 32px; border-radius: var(--radius-smooth); object-fit: cover; }

Motion

Bezier transition 토큰 그대로. 이징 곡선 하나만 쓴다.

--duration-fast: 150ms;   /* transition.s — 호버·토글 */
--duration-base: 300ms;   /* transition.m — 패널·드롭다운 */
--duration-slow: 450ms;   /* transition.l — 위젯 열림·모달 */
--ease-out: cubic-bezier(0.3, 0, 0, 1);      /* timing-function.default */
--ease-in-out: cubic-bezier(0.3, 0, 0, 1);   /* 별도 in-out 없음 — 같은 곡선 재사용 */

Anti-patterns

1. 아바타·런처를 완전한 원이나 날카로운 사각형으로 그리지 않는다 — 스퀴클(42%)이 브랜드 식별자다. 2. 카드·말풍선에 진한 1px 회색 테두리를 두르지 않는다 — 경계는 퍼짐 그림자 링(ev1)이나 8% 알파 선으로 처리한다. 3. 블루바이올렛 외에 두 번째 강조색을 버튼에 쓰지 않는다 — 초록·주황·빨강은 상태(성공·경고·위험) 표시 전용이다. 4. 400·700 외의 중간 굵기(500·600)를 섞지 않는다 — Bezier 는 400·700 두 굵기만 쓴다. 5. 상담 대화 영역에 그라디언트·사진 배경을 깔지 않는다 — 메시지 가독성을 위해 흰 바탕 또는 #F7F7F8 단색만 쓴다.

Channel Talk (채널톡)

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

출처