채널톡

흰 지면·검정 알약 CTA·1320 폭 3열 카드 — 색은 요금 페이지의 파스텔 섹션 배경과 채널 그린 한 점에만.

채널톡 국문 랜딩은 흰 지면에 검정 알약 버튼 하나로 액션을 몰아두고, 브랜드 그린은 아이콘과 강조에만 남겨 버튼에는 쓰지 않습니다. 한 사이트 안에서 템플릿이 둘로 갈리는 점이 특이한데, 홈 계열은 폭 1320px에 Pretendard로 짜이고 요금·채용 같은 나머지 페이지는 폭 1160px에 한글이 Noto Sans KR로 떨어집니다. 그래서 국문 조판 값을 가져올 때는 Pretendard 쪽 제목(54px·44px)만 쓰고, 폴백으로 그려진 64px 제목은 의도로 읽지 않는 편이 좋습니다. 요금 페이지에서 챕터마다 섹션 배경을 파스텔로 갈아 끼우는 방식은 따로 볼 만합니다.

https://channel.io/kr

Color Palette

Primary

Label

Fill

Line

Background

Static

Accent

Typography

Pretendard Variable · 400 / 500 / 600 / 700한글·영문 통합 — 1320 템플릿(홈·채널웍스·톡)과 글로벌 nav
Noto Sans KR Regular / Bold · 400 / 700한글 폴백 — 1160 템플릿(ALF·요금·도큐먼트·팀·채용·블로그)
Inter · 400 / 600 / 700라틴·숫자·문장부호 — 1160 템플릿 선언 1순위
Apple SD Gothic Neo · 400OS 폴백 (극소)
Courier · 400code
Type Scaleraw 86종 중 count·역할로 10단 추림(1440 layout px와 raw 1920 px 일치 — clamp 없음)
h1-sub64px · 600 · 1.38
다람쥐 헌 쳇바퀴
h1-home54px · 600 · 1.3
다람쥐 헌 쳇바퀴
h2-chapter52px · 600 · 1.38
다람쥐 헌 쳇바퀴
section-title44px · 600 · 1.41
다람쥐 헌 쳇바퀴
h342px · 600 · 1.29
다람쥐 헌 쳇바퀴
card-title25px · 600 · 1.28
다람쥐 헌 쳇바퀴
body-lg18px · 400 · 1
다람쥐 헌 쳇바퀴
body16px · 400 · 1.56
다람쥐 헌 쳇바퀴
ui16px · 600 · 1.38
다람쥐 헌 쳇바퀴
label14px · 500 · 1.29
다람쥐 헌 쳇바퀴

국문 · Korean

hangulFont두 체계 병존 — Noto Sans KR Regular 24,968(67.0%) + Bold 7,855(21.1%) = 32,823글리프(88.0%)가 1160 템플릿(ALF·요금·도큐먼트·팀·채용·블로그) 본문을 그리고, Pretendard Variable 4,431글리프(11.9%)가 홈·톡·웍스·다운로드와 글로벌 nav를 그린다. Apple SD Gothic Neo 37글리프(0.1%)는 OS 폴백(무시 가능). Inter는 한글을 한 글자도 그리지 않는다 — 이전 집계의 27.8%는 한글 노드 속 영문·숫자·공백을 한글로 센 허수였고 재측정값은 0이다
hangulWeights400: Noto Regular 24,942 / Pretendard 3,497 · 500: Pretendard 210 / Noto Regular 26(65·35px 숫자·제목) · 600: Noto Bold 5,527 / Pretendard 696 · 700: Noto Bold 2,316 / Apple SD 34 / Pretendard 28 · 900: Noto Bold 12. Noto는 Regular·Bold 두 벌뿐이라 600·700·900이 같은 획으로 나온다
body1320 템플릿: 16/400 lh1.56 ls−0.16px Pretendard ×17 · 1160 템플릿: 18/400 lh1.44 ls−0.4px(Noto Regular) ×4, 17/400 lh1.41 ls−0.4 ×4, 16/400 lh1.38 ls−0.4 ×8
sub히어로 부제 18px(홈 bodyPx 18) — 18/400 ls−0.72px Pretendard ×9. 카드 설명 16/400 lh1.56
label16/600 lh1.38 ls−0.128px ×13(탭·링크) · 14/500 lh1.29 ls0 ×11(칩) · 15/400 lh1.33 Inter 스택 ×17(팀·채용 nav → Noto Regular ×4 + Inter ×1) · 12/400 lh1.50 ×4(캡션)
mixing한 줄 혼용 — 'AI 에이전트 ALF', '상담은 채널톡, 업무는 채널웍스에서' 처럼 영문 약어를 국문 문장 안에 넣는다. Pretendard 페이지는 한 서체로 국영문을 그리고(라틴 3,621글리프), Inter 스택 페이지는 영문·숫자·공백을 Inter, 한글을 Noto Sans KR로 갈라 그린다 — 표본 '프렌들리AI, 업스테이지,' 18/700 → Noto Bold×11 + Inter×6. 자간은 전 단계 음수
hangulHeadings있음 — 홈 h1 54/600 lh1.30 ls−1.08px Pretendard '상담은 채널톡, 업무는 채널웍스에서 시작하세요'(20자, 2행 미확인), 웍스 h1 54/600 '업무 환경의 중심에 고객을 두는 채널웍스', 섹션 제목 44/600 ls−0.88px ×8('채널톡, 고객 상담에 최적화된 AI 솔루션' 등 홈 9개), 톡 h1 44/600. 1160 템플릿은 64/600 ls−2px가 Noto Sans KR Bold로('고객 상담의 완전한 자동화'·'비즈니스 단계에 따른 합리적인 가격'·'파는 사람과 사는 사람'), 팀 통계 80/600 '247,473'·'98%'
verdict국문 히어로·섹션 제목 레퍼런스로 유효 — 단 표본은 Pretendard 쪽(54/600 −2%, 44/600 −2%)만. 64px Noto Sans KR Bold 제목은 폴백 산물이라 획 대비·자간(−3.1%)을 조판 의도로 옮기지 말 것. 본문 16/400 lh1.56 −1%는 Pretendard 국문 본문 표본으로 쓸 수 있다
renderedNoto Sans KR Regular ×24968 · Noto Sans KR Bold ×7855 · Pretendard Variable ×4431 · Apple SD Gothic Neo ×37
영문 · Latin영문 전용
latinFontInter 11,101글리프(72.4%) · Noto Sans KR 2,501글리프(16.3%) · Pretendard 1,696글리프(11.1%) · Courier 28글리프(0.2%)
latinWeights실측 페이스 Regular · Bold
share라틴 15,330글리프 / 한글 37,291글리프 — 지면의 29.1%가 라틴이다 (1440 CDP 실측)
scale타입 스케일에서 Inter를 쓰는 단: h1-sub 64px/600 · h2-chapter 52px/600 · h3 42px/600
mixing국영문 혼용 노드 1,200개(전체 3,203개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다
roleNoteInter 영문 전용(72.4% · 선언됨)
verdict영문 전용 서체가 있다 — Inter 라틴 72.4% / 한글 0.0%. 영문 디스플레이 레퍼런스로 유효(타입 스케일 최대 64px)
sharedWithKorean국문과 같은 서체: Noto Sans KR · Pretendard · Apple SD Gothic Neo
renderedInter ×11101 · Noto Sans KR Regular ×1782 · Pretendard Variable ×1696 · Noto Sans KR Bold ×719 · Courier ×28 · Arial ×2 · Apple Color Emoji ×1 · Apple SD Gothic Neo ×1

Spacing & Shape

Spacing

PurposeValuePreview
Densityregular
Base unit4px
Max width1320px
Docs width1160px
Section gap홈 pad 80/80 ×5섹션
Header135px sticky
Grid Home3열 427px 거터 20 (427×3+20×2=1321) · 탭형 3열 440 거터 0 (440×3=1320) · 통계 3열 429 거터 16
Grid Logo5열 238×72 거터 0 (238×5=1190, 홈·웍스·톡 동일)
Grid Pricing플랜 4열 289×216 거터 0 (289×4=1156≈1160) · 비교표 19행 1160×48 · 체크리스트 2열 204×46 · FAQ 9행 1080×216
Card Padding통계 카드 429×148 r35 / 팀 인용 카드 320×370 r16 / ALF 카드 371×160 g24
Button Padding10×22 (알약 CTA 18/400) / 9×15·21 (검정 알약 15/600) / 11×12 (검색) / 2×10 (칩) / 8×20 (지원하기 20/700)
Header Note홈만 135(sticky) — 상단 공지 배너('프렌들리AI, 업스테이지, 채널…' 18/700) + nav. 제품·요금 등 7페이지는 75(fixed 5·sticky 2), 팀·채용 서브사이트는 68(fixed). 135−75=60px가 배너 높이(해석). 스크롤 시 top·background-color·backdrop-filter 0.35s/0.3s ease 전환(×2)

Border Radius

RoleValuePreview
hairline1px 44회 · 구분선(separator)
micro2.5px 48회 · 목업 내부 버튼(스케일 축소 산물, 해석)
small4px 99회 · 링크 배지
control6px 74회 · span 태그·소형 컨트롤 (OmD rounded.control 6 일치)
standard8px 206회 · a/button 표준 · '더 보기'
medium12px 43회 · 입력·'지원하기' 버튼 (input r12 0 0 12)
card16px 39회 · 팀 인용 카드 320×370
thumb20px 46회 · 이미지·도큐먼트 카드 406×212
feature-card25px 29회 · 웍스·톡 3~4열 피처 카드(419×255·320×233)
editorial-card35px 55회 · 홈 통계 카드 429×148 #F7F6F3 (OmD rounded.card 35 일치)
circle50% 164회 · 아바타·아이콘 원
pill999px / 9999px 111회 · 알약 CTA·검색·탭 (999 ×86 + 9999 ×25). 환산 알약 1534px ×3·1368.71px ×14·958.52px ×12는 같은 역할

Guidelines

Do

Don't

Pages

More like this

잔디 (JANDI)
잔디 (JANDI)
같은 도메인 · SaaS · 10 pages
flex
flex
같은 도메인 · SaaS · 10 pages
아임웹
아임웹
같은 도메인 · SaaS · 10 pages
서울바이오시스 (Seoul Viosys)
서울바이오시스 (Seoul Viosys)
Big Korean display · Card grid · 10 pages