모듈러스케일 (Modular Scale)
쉽게 풀면
하나의 기준 숫자에 정해진 비율을 계속 곱해서 크기 단계를 만드는 수학적 방법이다.
왜 중요한가
모듈러 스케일은 기준 글자 크기에 일정한 비율(1.25, 1.333, 1.618 등)을 반복 곱해 제목·본문·캡션 크기를 정하는 방법으로, 임의로 고른 크기들보다 조화로운 타입 스케일을 만들고 디자인 토큰으로 체계화하기 쉽게 합니다. 음악의 음계처럼 크기 사이에 수학적 관계를 두어 여러 디자이너가 만든 화면의 위계가 일관되게 보이게 합니다. 계산된 값은 대개 CSS 변수나 디자인 토큰의 --font-size-1, --font-size-2 같은 이름으로 저장되어, 서체나 브레이크포인트가 바뀌어도 비율 관계는 그대로 유지한 채 기준값만 바꾸면 전체 스케일이 갱신된다. 팀 브라운이 소개한 방식처럼 기준값을 두 개(예: 본문 크기와 레이아웃 폭에서 나온 값) 두고 같은 비율을 적용하면 두 수열이 교차해 단계 사이 간격이 더 촘촘해져, 단일 기준값의 스케일보다 선택지가 늘어난다.
논문에서는 이렇게 쓰입니다
일정 비율을 반복 적용해 텍스트 크기 체계를 만든 편집디자인 실험 사례를 보여준다.
이 문장은 글자 크기를 마음대로 정하지 않고 일정한 비율을 반복 적용하면 화면 전체의 정보 위계가 더 잘 드러난다는 뜻입니다.
조금 더 깊게 보면
이 개념은 Robert Bringhurst의 『타이포그래피의 원리』와 Tim Brown의 2011년 웹 적용 글로 널리 퍼졌으며, 르 코르뷔지에의 모듈러와 이름만 유사합니다. 황금비 같은 특정 비율이 본질적으로 더 아름답다는 주장은 실증되지 않았고, 비율이 크면 단계 수가 적어 세밀한 위계를 표현하기 어렵고 작으면 단계 간 대비가 약해집니다. 계산 결과는 소수점이 나오므로 픽셀 반올림과 베이스라인 맞춤을 위한 조정이 필요하며, 모바일과 데스크톱에서 다른 비율을 쓰는 것이 일반적입니다.
주의할 점
모듈러스케일은 특정 비율(예: 1.618)을 기계적으로 적용하는 것이 아니라 콘텐츠 맥락에 맞게 조율해야 한다.
여러 단계를 계산기로 일괄 산출한 뒤에도 실제 화면에 배치해 보고 특정 구간의 대비가 어색하면 그 값만 수동으로 조정하는 사후 검증 단계를 거치는 것이 일반적이다.