타이포 스케일 생성기: 모듈러 스케일로 --text-* 토큰과 유틸 클래스를 만드는 실전 가이드
타이포그래피는 UI의 품질을 가장 빠르게 바꾸는 요소입니다. 같은 레이아웃이라도 글자 크기, 줄 높이, 자간(letter-spacing) 규칙이 정리되어 있으면 화면이 “제품처럼” 보입니다. 이 페이지의 타이포 스케일 도구는 모듈러 스케일(modular scale)을 기반으로 폰트 사이즈 토큰(--text-*)과 유틸 클래스를 자동 생성해 줍니다. 또한 static(rem) 방식과 fluid(clamp/calc) 방식 중 원하는 운영 방식을 선택할 수 있습니다.
타이포 스케일이 중요한 이유
타이포는 정보 구조를 만듭니다. 제목/부제/본문/보조 텍스트의 크기와 간격이 논리적으로 이어지면, 사용자는 스캔하듯 내용을 읽을 수 있습니다. 반대로 글자 크기가 제각각이면 읽기 흐름이 끊기고, 화면이 산만해 보입니다.
- 계층: H1/H2/H3와 본문의 관계가 명확해집니다.
- 가독성: line-height 규칙이 있으면 긴 문장도 편하게 읽힙니다.
- 일관성: 페이지가 늘어나도 같은 톤으로 유지됩니다.
- 협업: 토큰 이름(--text-lg 등)으로 소통하면 빠릅니다.
추천: 타이포 스케일을 먼저 정하고, 그 다음에 스페이싱을 맞추면 UI 리듬이 훨씬 안정적으로 잡힙니다. 간격 규칙은 스페이싱 스케일에서 같이 맞출 수 있습니다.
모듈러 스케일 이해하기(base/ratio/steps)
모듈러 스케일은 base(기준 크기)에 ratio(비율)를 곱해 단계적으로 크기를 만드는 방식입니다. 예를 들어 base가 16px이고 ratio가 1.2라면, 다음 단계는 19.2px, 그 다음은 23.04px…처럼 증가합니다. 이 방식은 “감으로” 크기를 고르는 것보다 규칙을 만들기 쉽고, 계층이 자연스럽게 이어지기 때문에 UI에서 자주 사용됩니다.
- base: 본문 크기의 출발점(보통 14~18px 범위)
- ratio: 크기 증가의 리듬(1.125~1.333 사이가 흔함)
- steps up/down: 위로 몇 단계(헤딩), 아래로 몇 단계(보조 텍스트)를 만들지
- prefix: 토큰/클래스 네이밍 규칙(예: text, fs 등)
ratio가 너무 크면 헤딩이 과하게 커지고, 너무 작으면 계층 차이가 약해집니다. 프로젝트의 정보 밀도(콘텐츠 길이)에 맞게 조정하는 것이 중요합니다.
생성기 사용 방법(권장 흐름)
- prefix 설정: text, type 등 프로젝트 규칙에 맞게 선택합니다.
- 모드 선택: Static(rem) 또는 Fluid(clamp 기반) 중 하나를 고릅니다.
- base/ratio: 본문 기준 크기와 증가 리듬을 잡습니다.
- steps: 헤딩/보조 텍스트 범위를 커버할 만큼 단계 수를 정합니다.
- line-height: base/tight 값을 정해 읽기 리듬을 만듭니다.
- 복사/저장: 출력 CSS를 복사하고 프리셋으로 저장합니다.
타이포는 색 대비와도 연결됩니다. 작은 텍스트는 더 높은 대비가 필요할 수 있으니, 대비 체크로 본문/보조 텍스트의 가독성을 함께 확인하는 습관이 좋습니다.
Static vs Fluid 타이포(언제 무엇을 쓸까)
Static(rem)은 브레이크포인트에 따라 값이 고정되며 이해하기 쉽습니다. Fluid(clamp)는 뷰포트에 따라 크기가 부드럽게 변해, 화면이 커질수록 타이포도 자연스럽게 확장됩니다.
- Static 추천: 팀 규모가 크고, 유지보수를 단순하게 하고 싶을 때
- Fluid 추천: 마케팅/콘텐츠 페이지에서 스케일감을 자연스럽게 만들고 싶을 때
- 검증: 극단적인 화면 크기에서 너무 크거나 작아지지 않도록 min/max를 확인
- 일관성: Fluid를 쓰면 스페이싱도 함께 유동화할지 검토
Fluid를 적용할 때는 컨테이너 폭과 함께 검증하는 것이 좋습니다. 컨테이너 계산기로 주요 폭 규칙을 잡아 두면, 타이포의 변화가 더 안정적으로 느껴집니다.
line-height와 자간 규칙
글자 크기만 바꿔서는 좋은 타이포가 되지 않습니다. line-height는 문장의 호흡을 만들고, 자간은 제목의 인상을 결정합니다. 일반적으로 본문은 여유 있는 line-height(예: 1.5~1.75), 헤딩은 타이트한 line-height(예: 1.1~1.3)를 사용하는 경우가 많습니다.
- 본문: line-height를 높여 읽기 쉬움 확보
- 헤딩: 타이트하게 두어 덩어리감을 만들기
- 자간: 큰 헤딩은 약간 줄이고(tracking-tight), 작은 글자는 기본으로 두기
- 줄 길이: 너무 긴 줄은 읽기 어렵기 때문에 컨테이너 폭과 함께 조절
타이포가 정리되면, 그 다음은 여백이 중요합니다. 타이포와 스페이싱을 함께 맞추면 “보기 좋은 UI”가 빠르게 완성됩니다.
자주 묻는 질문(FAQ)
- Q. ratio는 어떤 값을 쓰는 게 좋나요? A. 본문 중심 UI는 1.125~1.25, 강조 헤딩이 필요한 랜딩은 1.25~1.333 범위를 많이 씁니다.
- Q. steps를 많이 늘리면 더 좋나요? A. 많아지면 관리가 어려워집니다. 실제로 쓰는 단계만 남기는 것이 유지보수에 좋습니다.
- Q. fluid가 항상 더 좋은가요? A. 아닙니다. 팀/프로젝트 성격에 따라 static이 더 안정적일 수 있습니다. 중요한 건 규칙의 일관성입니다.