WCAG 1.4.8 기준으로 한글(CJK)은 40자 이하. 너무 길면 다음 줄 시작점을 놓치고, 너무 짧으면 리듬이 깨집니다.
GOOD · max-width 36ch
좋은 타이포그래피는 보이지 않습니다. 독자가 글의 내용에 몰입할 수 있도록 텍스트는 조용히 뒤로 물러섭니다. 한 줄에 25자에서 40자 사이로 제한할 때, 눈은 자연스러운 리듬으로 다음 줄을 찾아갑니다.
반대로 줄이 너무 길면 독자는 다음 줄의 시작점을 놓치기 쉽습니다. Baymard Institute 연구에 따르면 80자가 넘는 줄은 60–70자 대비 41% 더 자주 스킵됩니다.
BAD · 제한 없음
한 줄이 너무 길어지면 독자의 눈은 다음 줄의 시작점을 찾는 데 피로를 느낍니다. 특히 한글은 영어보다 한 글자당 시각적 정보량이 많기 때문에, 영문 기준 65자를 그대로 적용하면 지나치게 답답해집니다. 그래서 한글 사이트는 반드시 본문 컨테이너의 최대 너비를 제한해야 하는데, 이 문단은 일부러 제한을 풀어 얼마나 읽기 불편한지 보여주기 위한 예시입니다.
03 Korean-Specific
한글에 가장 중요한 한 줄
word-break: keep-all 하나로 가독성이 확연히 달라집니다.
기본값 (적용 안 함)
오늘 아침 회의에서 우리 팀은 새로운 프로젝트의 방향성에 대해 논의했습니다.
keep-all 적용
오늘 아침 회의에서 우리 팀은 새로운 프로젝트의 방향성에 대해 논의했습니다.
브라우저 너비를 줄여보면 차이가 선명해집니다. 왼쪽은 "아침"의 중간에서도 줄이 끊길 수 있지만, 오른쪽은 띄어쓰기 단위로만 줄바꿈됩니다.
04 Color System
글자색 4단계 체계
본문·부제·메타·비활성 네 단계로 고정. 순수 검정(#000)은 쓰지 않습니다.
Primary
Primary
#1a1a1a
본문, 제목, 주요 텍스트
AAA · 17.4:1
Secondary
Secondary
#4a4a4a
부제목, 보조 본문, 인용문
AAA · 9.7:1
Tertiary
Tertiary
#6e6e6e
작성자, 날짜, 캡션, 메타
AA · 5.3:1
Muted
Muted
#a1a1a1
비활성, placeholder, 힌트
FAIL · 2.8:1 · 본문 금지
왜 위계가 중요한가
모든 텍스트가 같은 색이면 독자는 중요도를 시각적으로 구분할 수 없습니다. 4단계로 나누면 눈이 자연스럽게 중요한 정보부터 훑습니다.
BAD · 전체 순수 검정
좋은 타이포그래피는 눈에 띄지 않는다
독자가 내용에 몰입할 수 있도록 텍스트는 조용히 뒤로 물러섭니다
이지만 · 2026년 4월 19일 · 5분 읽기
웹 디자인에서 타이포그래피는 가장 먼저 보이지만 가장 마지막에 의식되는 요소입니다.
GOOD · 4단계 적용
좋은 타이포그래피는 눈에 띄지 않는다
독자가 내용에 몰입할 수 있도록 텍스트는 조용히 뒤로 물러섭니다
이지만 · 2026년 4월 19일 · 5분 읽기
웹 디자인에서 타이포그래피는 가장 먼저 보이지만 가장 마지막에 의식되는 요소입니다.
액센트 컬러
보라 계열(purple, indigo, violet)은 쓰지 않습니다. 채도가 낮은 딥 네이비 계열로 차분하고 묵직한 프리미엄 인상을 유지합니다.
Primary Accent
#15253d · Deep Navy
Accent Hover
#0e1a2b · Darker
Accent BG
#eef1f6 · Subtle
Accent Border
#c8d0de · Border
배경 · 보더 (Slate)
네이비 액센트와 조화되도록 아주 옅은 slate 계열을 사용합니다. 섹션 구분·테이블 헤더·카드 보더 모두 이 스케일 안에서만.
BG
#ffffff · Base
BG Subtle
#f5f7fa · 섹션·테이블 헤더
BG Muted
#eef1f5 · 코드·비활성
Border
#e2e7ee · 카드·입력
Border Strong
#cbd2dc · 강조 구분선
다크 네이비 (반전 영역)
Navbar 등 반전된 영역에 사용. 액센트보다 한 단계 더 깊은 네이비를 기본으로, 밝은 파생색으로 활성·호버 상태를 표현합니다.
Navbar BG
#0b1528 · 기본 배경
Navbar Avatar
#24395c · 밝은 파생
Navbar Text
#cbd5e1 · 기본 링크
On Accent
#ffffff · 반전 전경
상태 색상
각 상태마다 main / strong / bg / border 4개 토큰으로 구성. 배지·알럿·아이콘 모두 같은 세트를 참조합니다.
Success
Warning
Error
Info (= Accent)
05 8pt Grid
모든 간격은 8의 배수
현대 디자인 시스템의 표준. 해상도 스케일링에서 깨지지 않고, 개발자가 암산으로도 간격을 맞출 수 있습니다.
4
8
16
24
32
48
64
96
06 12 Column Grid
12 컬럼 레이아웃
12는 2, 3, 4, 6으로 모두 나눠지는 유일한 작은 수. 가장 유연한 분할 단위입니다.
span 12
span 6
span 6
span 4
span 4
span 4
span 3
span 3
span 3
span 3
07 Real-world Example
실제 적용 예시
이지만2026년 4월 19일 · 5분 읽기
좋은 타이포그래피는 눈에 띄지 않는다
웹 디자인에서 타이포그래피는 가장 먼저 보이지만 가장 마지막에 의식되는 요소입니다. 잘 설계된 본문은 독자가 내용에 몰입하는 동안 존재감을 드러내지 않습니다. 반대로 서체, 행간, 자간, 그리고 글자색이 조화롭지 못하면 읽는 행위 자체가 피로해집니다.
한글 웹 타이포그래피는 영문 기준을 그대로 적용하면 실패합니다. 한글은 음절 단위로 조합되는 문자라 한 글자당 시각 정보가 훨씬 많고, 획의 밀도도 높습니다. 그래서 행간 1.7, 자간 -0.01em, 한 줄 40자 이하, 본문 색 #1a1a1a라는 별도 기준이 필요합니다.
Noto Sans KR이 표준이 된 이유
Noto Sans CJK(한글판 Noto Sans KR)는 Apache 2.0 오픈 라이선스로 배포되는 오픈 서체입니다. 모든 운영체제와 브라우저에서 동일하게 렌더링되며, 본문용으로 충분한 가독성이 검증되었습니다.
한글 본문의 가독성은 서체 선택보다 행간, 한 줄 글자 수, 글자색 체계에 더 크게 좌우됩니다.
Noto Sans KR은 영문 폰트에 비해 획이 두꺼운 편이라 순수 검정(#000)을 쓰면 화면이 답답해집니다. 가독성을 중시하는 디자인 시스템들이 본문에 #1a1a1a ~ #242424 대역의 약간 옅은 검정을 쓰는 이유도 같습니다. 이 문서는 #1a1a1a를 권장합니다.
수치는 근거가 있다
행간을 100%에서 120%로 늘리면 읽기 정확도가 20% 향상되고 눈 피로도는 30% 감소한다는 대학 연구가 있습니다. 대비비 4.5:1(WCAG AA)을 만족하면 시각 장애인 포함 90% 이상의 사용자가 편하게 읽을 수 있습니다.
디자인 시스템의 숫자들은 취향이 아닙니다. 누적된 실험과 관찰의 결과이고, 그래서 임의로 바꾸면 반드시 어딘가가 어색해집니다.
참고: WCAG 2.1 (1.4.3, 1.4.8), Bringhurst The Elements of Typographic Style, Baymard Institute — Line Length Readability Study, Nielsen Norman Group — F-Pattern 아이트래킹.
08 Tokens · Interaction · Icons
시각 토큰과 상호작용 원칙
모서리 반경·그림자·포커스·모션·아이콘을 한 화면에서 검토합니다. 절제된 미니멀 지향 — 보더와 공간으로 위계를 만들고, 움직임은 쓰지 않습니다.
Border Radius
모서리 반경 4단계
4, 6, 8px 범위. 12px 이상은 쓰지 않아 단단한 인상을 유지.
4px
6px
8px
full
Depth
그림자 없이, 보더로
깊이감은 1px 보더로 표현. 그림자는 드롭다운처럼 꼭 필요할 때만.
Border only
기본값
Subtle
드롭다운용
Focus Ring
포커스 링은 얇고 단색
키보드로 Tab 키를 눌러보세요. 아래 버튼에 1.5px 얇은 라인이 나타납니다.
Icons
Heroicons Outline · 1.5px
16은 버튼·리스트, 20은 내비, 24는 독립 아이콘, 32는 큰 카드. heroicons.com
16202432
버튼내비독립카드
Korean Baseline
한글 폰트 아이콘 1px 시각 보정
한글은 글자가 line-box 위쪽에 가득 차 있어 align-items: center만으로 svg 아이콘을 배치하면 1~2px 위로 쏠려 보임. flex 자식엔 margin-top: 1px, position: absolute + translateY(-50%) 패턴엔 translateY(calc(-50% + 1px))로 보정. 시스템 컴포넌트(.ui-btn, .ui-menu-icon, .ui-search-icon, .ui-tab, .ui-toast, .ui-tree-*, .ui-sidebar-link-icon, .ui-alert-icon)에 자동 적용.
보정 전 (line-box 정중앙)
한글 텍스트 옆 아이콘
받은 메시지 보관함
보정 후 (margin-top: 1px)
한글 텍스트 옆 아이콘
받은 메시지 보관함
Motion
모션은 쓰지 않는다
transform, opacity, height 애니메이션 모두 금지. 상태 변경은 즉각적. 단 하나 예외는 색상 전환 150ms로 버튼 호버가 자연스럽도록. prefers-reduced-motion: reduce 사용자에게는 색상 전환도 제거.
09 Components
핵심 UI 컴포넌트
모든 컴포넌트는 그림자 없이 보더로 깊이를 만들고, 상태 변화는 색상 전환만 150ms로 유지합니다.
Stacked Layout · Navbar + 페이지 헤더
대시보드
팀 전체 현황과 주요 지표를 한눈에 확인할 수 있습니다.
페이지 본문 영역 (header와 좌측 정렬 일치)
Sidebar Layout · 좌측 세로 내비 (Stacked의 짝 패턴)
대시보드
좌측 Sidebar와 메인 영역이 그리드로 나란히. 모바일(<900px)에선 Sidebar가 Drawer로 접힙니다.
페이지 본문 영역
Navbar · Dark (기본형 · 앱 쉘용)
Navbar · Light (블로그·랜딩용 변형)
Breadcrumb
Page Header · Stacked
백엔드 개발자
풀타임
서울 강남구
2일 전 공지
Buttons
Buttons · 비활성화 (disabled)
Icon Button
Dropdown Menu
프리뷰용으로 메뉴가 펼쳐진 상태를 고정 표시. 실제 구현은 JS 토글.
Button Group · 동급 n개
Segmented Control
Split Button · 주 액션 + ▼ 파생 메뉴
Form Input
회사 이메일 주소를 입력하세요.
이미 존재하는 이름입니다.
Field Wrapper (.ui-field) · bare label/input 자동 스타일
`.ui-field` 안에서 `.ui-input`/`.ui-field-label` 명시해도 동일.