Ch.6 타이포그래피 시스템
모듈러 스케일
왜 어떤 디자인의 글자 크기는 자연스럽고 어떤 건 어색할까?
디자이너가 제목은 32px, 소제목은 24px, 본문은 16px로 정했습니다. 그런데 어딘가 모르게 어색합니다. 반면 다른 디자인은 사이즈가 8가지나 되는데도 조화롭습니다. 차이는 '비율'에 있습니다.
감으로 정한 글자 크기 vs 수학적으로 계산한 크기, 차이가 뭘까?
모듈러 스케일은 하나의 비율(ratio)로 모든 글자 크기를 생성하는 시스템입니다. 음악의 화음처럼, 수학적 비율이 시각적 조화를 만듭니다.
핵심 내용
글자 크기에도 '화음'이 있습니다 — 모듈러 스케일(Modular Scale)
모듈러 스케일은 기본 크기(base)에 일정한 비율(ratio)을 반복 곱하여 크기 체계를 만드는 방법입니다. 음악에서 옥타브가 주파수의 2배 관계인 것처럼, 타이포그래피에서도 비율이 시각적 조화를 만듭니다.
base × ratio^n = 각 단계의 크기 (n = 0, 1, 2, 3, ...)
base: 기본 글자 크기(보통 16px), r: 비율, n: 단계 번호
비율이 클수록 크기 차이가 극적이고 비율이 작을수록 섬세합니다
왜 수학적 비율이 '편안하게' 느껴질까? 인간의 뇌는 일관된 패턴을 선호합니다. 임의로 정한 24px, 18px, 32px는 패턴이 없지만, 비율로 생성된 크기들은 암묵적인 규칙성을 가집니다. 눈이 '읽지 않아도' 구조를 파악할 수 있는 이유입니다.
타입 위계 (Type Hierarchy)
Display (49px): 히어로 섹션, 랜딩페이지 메인 타이틀
H1 (39px): 페이지 제목. 한 페이지에 하나만
H2 (31px): 주요 섹션 제목. 콘텐츠 구획 구분
H3 (25px): 하위 섹션 제목. 카드 헤더 등
H4 (20px): 소제목. 리스트 그룹 레이블 등
Body (16px): 본문. 기본 크기, 가장 많이 쓰이는 단계
Caption (13px): 부가 정보. 타임스탬프, 주석, 라벨
실무 팁: 비율 선택 가이드 • 정보 밀집 대시보드 → 1.125~1.200 (크기 차이 작게) • 일반 웹사이트/블로그 → 1.250 (Major Third, 가장 안전) • 마케팅 랜딩페이지 → 1.333~1.500 (극적 위계) • 모바일 → 데스크톱보다 한 단계 낮은 비율 사용
감으로 정한 크기와 비율로 계산한 크기의 차이
base 16px, ratio 1.25(Major Third)일 때 3단계 위의 크기(n=3)는?
정보 밀집 대시보드에는 1.5(Perfect Fifth)처럼 큰 비율이 적합하다
모듈러 스케일의 가장 큰 장점은 비율만 변경하면 전체 크기 체계가 자동 조정된다는 것이다
핵심 용어
1.125 (Major Second)
16 → 18 → 20 → 23 → 25 — 변화가 미세, 정보 밀집 UI
1.250 (Major Third)
16 → 20 → 25 → 31 → 39 — 가장 범용적, 웹 표준
1.333 (Perfect Fourth)
16 → 21 → 28 → 38 → 50 — 명확한 위계, 블로그·매거진
1.500 (Perfect Fifth)
16 → 24 → 36 → 54 → 81 — 극적 대비, 랜딩페이지
1.618 (Golden Ratio)
16 → 26 → 42 → 67 → 109 — 황금비, 장식적 디자인
비교 정리
| 항목 | 모듈러 스케일 | 임의 크기 지정 |
|---|---|---|
| 일관성 | 모든 크기가 하나의 비율로 연결 → 체계적 | 디자이너마다 다른 크기 → 비일관적 |
| 확장성 | 비율만 바꾸면 전체 스케일 자동 조정 | 크기 하나 바꾸면 나머지도 수동 조정 필요 |
| 협업 | 규칙이 명확해서 팀원 누구나 동일하게 적용 | 개인 감각 의존 → 사람마다 다른 결과 |
| 시각적 조화 | 수학적 비례 → 무의식적으로 '편안함' 인식 | 비례 관계 없음 → '어딘가 어색함' 발생 |
모듈러 스케일은 '감'이 아닌 '시스템'으로 타이포를 설계하는 방법이다
핵심 정리
- 1모듈러 스케일: base × ratio^n 으로 크기 체계 생성
- 2Major Third(1.25): 가장 범용적인 웹 비율
- 3비율이 클수록 극적 위계, 작을수록 섬세한 위계
- 4타입 위계: Display → H1~H4 → Body → Caption
- 5장점: 일관성, 확장성, 협업 용이, 시각적 조화
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 레슨 시작