클래스팅

흰 지면 위에 100px 국문 굵은 제목, 색은 민트그린 한 점 — 자간은 손대지 않는다.

클래스팅은 흰 지면에 100px/700 국문 제목을 그대로 올리는, 국문 대형 조판의 드문 사례입니다. 색은 민트그린 #00C896 한 점과 회색 네 단(#333333 → #424242 → #757575 → #9E9E9E)이 전부이고, 요금제 페이지에서만 보라 #9F7AEA가 한 번 더 나옵니다. 타입 스타일 14종 가운데 자간을 지정한 것이 하나도 없어서, 자간을 조이지 않고도 큰 국문 제목이 성립하는지 확인할 때 참고할 만합니다. 기능 섹션 604px와 간격 120px이 계속 반복되는 단순한 세로 리듬이라, 스크롤이 긴 제품 소개 페이지의 골격을 잡을 때 쓰기 좋습니다.

https://www.classting.com

Color Palette

Primary

Label

Fill

Line

Background

Static

Accent

Typography

Noto Sans KR · 400 / 500 / 700display·heading·body·ui — 한글 99.7%, 라틴 99.8%

Pretendard · 400 / 500선언 2순위 — 사실상 미사용

Noto Sans HK · 선언만 있고 렌더 0

Type Scale기준 뷰포트는 layout

display100px · 700 · 1.26

다람쥐 헌 쳇바퀴

display-sub80px · 700 · 1.26

다람쥐 헌 쳇바퀴

h156px · 700 · 1.21

다람쥐 헌 쳇바퀴

h242px · 700 · 1.29

다람쥐 헌 쳇바퀴

h328px · 700 · 1.5

다람쥐 헌 쳇바퀴

body-lg20px · 500 · 1.4

다람쥐 헌 쳇바퀴

body16px · 400 · 1

다람쥐 헌 쳇바퀴

ui14px · 500 · 1

다람쥐 헌 쳇바퀴

caption14px · 400 · 1.43

다람쥐 헌 쳇바퀴

국문 · Korean

hangulFont	Noto Sans KR (Google Fonts 가변, CDP 보고명 Noto Sans KR Thin) — 한글 13,155글리프 99.7%. Pretendard 38글리프 0.3%
hangulWeights	400 5,178 · 500 3,778 · 700 4,199글리프 세 단(전부 Noto Sans KR). Pretendard는 400 24 · 500 14글리프뿐
body	20px/500 lh1.40(섹션 본문 24회) · 16px/400 lh1.0(링크·항목 17회)
sub	히어로 부제 20px, 기능 섹션 설명 16~20px, 카드 요약 14px/400 lh1.43
label	nav·칩 14px/500 lh1.0(16회) · 푸터 링크 14px/400 lh1.43(16회) · 강조 라벨 14px/700 lh1.5(7회)
mixing	국문 문장 안에 AI · CAT · CBT · RAG · LLM · Gen AI 같은 라틴 약어와 Sandbox · Writing · Learning 제품명이 그대로 섞이는데 서체를 바꾸지 않는다 — 라틴 5,388글리프 중 5,378개(99.8%)를 같은 Noto Sans KR이 그린다. 혼용 노드 368개는 한글만 담은 프로브로 재측정했다(mixedProbed 368/368)
hangulHeadings	있다. 홈 h1 100px/700 lh1.26 2행(개인화 교육을 실현하는 / 가장 앞선 AI 솔루션) · 적용대상 2페이지 80px/700 · 56px/700 7회 · 42px/700 44회 — 상위 네 단이 전부 국문이며 라틴은 문장 안 약어로만 섞인다
verdict	국문 대형 제목 레퍼런스로 유효하다. 100px/700은 라이브러리 최대급 국문 히어로이고, 자간을 0으로 둔 채 성립하는 사례라는 점이 특징이다. 다만 서체가 Pretendard가 아니라 Noto Sans KR이라 획 대비와 자폭이 달라 그대로 이식하면 인상이 바뀐다
rendered	Noto Sans KR Thin ×13155 · Pretendard ×24 · Pretendard Medium ×14

영문 · Latin국문과 동일

latinFont	Noto Sans KR 5,378글리프(99.8%) · Lucida Grande 5글리프(0.1%) · Pretendard 3글리프(0.1%) · Helvetica 2글리프(0.0%)
latinWeights	실측 페이스 Thin · Medium
share	라틴 5,388글리프 / 한글 13,193글리프 — 지면의 29.0%가 라틴이다 (1440 CDP 실측)
scale	타입 스케일에서 Noto Sans KR를 쓰는 단: display 100px/700 · display-sub 80px/700 · h1 56px/700 · h2 42px/700 · h3 28px/700 · body-lg 20px/500 · body 16px/400 · ui 14px/500 · caption 14px/400
mixing	국영문 혼용 노드 368개(전체 1,052개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다
roleNote	라틴 29.0%를 국문 서체가 그대로 그린다 — 영문용 선택 없음
verdict	영문 전용 서체 없음 — 라틴 99.8%를 그리는 Noto Sans KR가 한글도 99.7% 그린다. 국영문을 한 서체가 맡는다
sharedWithKorean	국문과 같은 서체: Noto Sans KR · Pretendard
rendered	Noto Sans KR Thin ×5378 · Lucida Grande ×5 · Helvetica ×2 · Pretendard ×2 · Pretendard Medium ×1

Spacing & Shape

Spacing

Purpose	Value	Preview
Density	spacious
Base unit	4px
Max width	1248px
Section gap	기능 섹션 604px 높이 + 120px 간격 = 724px 반복(기능 3페이지·적용대상 2페이지 공통)
Header	60px sticky
Content Widths	1060(적용대상 2 · 기능 3페이지, 후보 1060×13) / 1248(홈·요금제·도입문의, 후보 1248×35) 두 값. 두 폭 모두 1280 컨테이너 안에 든다
Grid Blog	3열 424px, 거터 24px, r16 (424×3+24×2=1320 → 1248 폭에서 카드가 넘치는 캐러셀 형태)
Grid Pricing	3열 400×485 거터 24 r16(플랜 카드) · 3열 288×485 거터 24 r16(제품 카드)
Grid Footer	5열 72×244, 거터 72
Card Padding	다크 4단계 블록 700×182 r24 · FAQ 행 1061×28
Button Padding	20px 24px(주 CTA 3종) · 16px 24px(소개서 다운로드) · 0px 16px(오류 화면 버튼)

Border Radius

Role	Value	Preview
button	6px	7회 · 작은 버튼·링크 버튼
button	8px	18회 · 표준 버튼 — 도입 문의하기·시작하기·소개서 다운로드·무료 체험하기 전부 r8
card	16px	6회 · 카드·리스트 아이템 — 블로그 424×401, 요금제 400×485·288×485 실측과 일치
block	24px	25회 · 큰 블록(div) — 홈 다크 밴드의 4단계 블록 700×182
잔재	38px · 71px · 100%	3회 · 각 1회씩(button)뿐 — 재현 대상 아님

Guidelines

국문 대형 제목의 자간을 건드리지 않는다 — 타입 스타일 14종 전부 letter-spacing 미지정이고 100px/700 히어로도 기본 자간이다
제목 위계를 100 → 80 → 56 → 42 → 28px 다섯 단으로 끊는다. 실질 기준선은 42px/700(44회)이고 카드 제목은 28px/700(16회)이다
기능 섹션은 높이 604px + 간격 120px = 724px 리듬으로 반복한다(기능 3페이지·적용대상 2페이지 공통)
액센트 #00C896은 버튼 배경(패딩 20×24 r8)·1px 테두리(16회)·체크 아이콘에만 쓴다 — 흰 배경 대비 2.16:1이라 글자색으로 쓰면 읽히지 않는다
라운드는 버튼 8px(18회) · 카드 16px(6회) · 큰 블록 24px(25회) 세 값만 쓴다
콘텐츠 폭은 1060(기능·적용대상)과 1248(홈·요금제·도입문의) 두 값만 쓴다
교사 후기는 28px/700 인용 + #FAFAFB 지면 + padding 120/120으로 흰 본문에서 떼어낸다(5페이지 반복)

Don't

#757575을 #FAFAFA 지면 위 본문에 쓰지 않는다 — 4.41:1로 AA 미달인데 28쌍으로 가장 많이 쓰인 조합이다
그림자로 카드를 띄우지 않는다 — 4종 전부 blur 12px 이하·알파 0.1 이하이고 최다가 rgba(0,0,0,0.05) 0 0 12px(6회)다
스크롤 연출을 넣지 않는다 — raw durations·easings 0종, motion.mjs 3페이지 실측에서 라이브러리 0 · ScrollTrigger 0 · 스크롤 구동 전환 0이다
다크 지면을 여러 곳에 쓰지 않는다 — #100F10은 홈 한 밴드(y990 h1174)뿐으로 95섹션 중 2다
보라 #9F7AEA를 브랜드 색처럼 쓰지 않는다 — 팔레트 5회·1페이지, 요금제 CTA 섹션 하나와 버튼 하나가 전부다
알약(9999px) 버튼을 만들지 않는다 — 이 사이트의 라운드에는 알약이 0회이고 38px·71px·100%는 각 1회짜리 잔재다
Pretendard를 이 사이트의 서체로 인용하지 않는다 — 서브셋 4파일이 올라가 있어도 실제 한글 렌더는 38글리프(0.3%)뿐이다