비율 하나로, 위계를 잡습니다.

입사 첫 해에 제가 만든 화면을 두고 선배가 물었습니다. “이 제목은 28px이고 저건 26px인데, 왜 다른 거야?” 저는 “그냥 그게 예뻐 보여서요”라고 답했습니다. 선배가 말했죠. “그럼 다음 페이지 만들 때 그 ‘예쁨’을 어떻게 또 맞출 건데?” 그날 이후로 저는 글자 크기를 감으로 찍지 않습니다. 비율 하나를 정하고, 모든 크기를 그 비율에서 끌어옵니다.

그래서, 비율을 직접 움직여보세요

설명보다 빠릅니다. 아래 슬라이더를 좌우로 움직이면 제목·소제목·강조·본문 크기가 같은 비율로 동시에 다시 계산됩니다. 비율을 키울수록 제목과 본문의 차이가 어떻게 벌어지는지 보세요.

비율이 작으면 차분하고, 크면 강렬합니다

슬라이더를 1.2 근처에 두면 제목과 본문이 가깝게 붙어 ‘읽는 화면’이 됩니다. 약관·소개·블로그처럼 글이 많은 페이지에 좋습니다. 반대로 1.4~1.5로 키우면 제목이 본문을 압도해 ‘보는 화면’이 됩니다. 랜딩 히어로처럼 한 문장으로 시선을 잡아야 하는 자리에 씁니다. 같은 글이라도 비율 하나로 분위기가 통째로 바뀝니다.

제가 본문형 페이지에 기본으로 쓰는 스케일을 숫자로 펼치면 이렇습니다 — 기준 16px에 1.25를 계속 곱한 단계들이에요.

이 다섯 값만 토큰으로 고정하고 사이값(22·23·24px)은 쓰지 않습니다. 각 단계엔 clamp()를 걸어 폭에 맞춰 키웁니다.

제 진짜 일은 ‘크기를 안 찍는 것’입니다

위 슬라이더는 사실 ‘쇼’입니다. 일을 하면서 가장 신경 쓰는 건 따로 있습니다. 바로 크기를 변수(토큰)로 고정하는 것. 22px·23px·24px처럼 비슷한데 미묘하게 다른 크기가 쌓이면, 페이지마다 위계가 어긋나고 사이트가 ‘어딘가 불편한데 왜인지 모르겠는’ 느낌을 줍니다. 그래서 저는 스케일에서 나온 값만 쓰고, 그 사이값은 쓰지 않습니다.

한 규칙이라 ‘한 번에’ 바뀝니다

크기를 비율로 묶어두면 클라이언트가 “전체적으로 좀 더 임팩트 있게요”라고 했을 때, 제가 손볼 곳은 한 군데입니다. 비율 변수 하나를 1.25에서 1.333으로 바꾸면 제목·소제목·강조가 동시에 커집니다. 본문도 흔들리지 않습니다. 화려한 기교보다 이 ‘한 군데로 전부 제어된다’는 구조가 실무에서 시간을 가장 많이 아낍니다.

타이포에 대해, 나만 아는 실무 이야기

1. 위계는 ‘크기 차이’가 아니라 ‘일관된 차이’입니다

제목이 크다고 위계가 잡히는 게 아닙니다. 모든 페이지에서 제목·소제목·본문의 ‘차이가 같아야’ 사용자의 눈이 구조를 학습합니다. 모듈러 스케일은 그 차이를 비율로 못 박기 때문에, 어느 페이지를 열어도 같은 리듬으로 읽힙니다.

2. 반응형은 ‘단계’가 아니라 ‘구간’으로 다룹니다

화면 폭마다 미디어 쿼리로 크기를 끊어 바꾸면 특정 폭에서 글자가 ‘툭’ 튑니다. 저는 각 단계에 clamp(최소, 선호, 최대)를 걸어 모바일에서 데스크톱까지 글자가 연속적으로 커지게 합니다. 위계는 유지되고, 튀는 구간이 사라집니다.

3. 한글은 같은 px에서도 더 크고 빽빽합니다

비율 규칙은 그대로 쓰되, 한글 본문은 16~17px에 줄간격을 1.6~1.75로 넉넉히 줍니다. 영문 기준으로 짠 줄간격을 그대로 쓰면 한글은 답답합니다. 거기에 word-break:keep-all로 어절 단위 줄바꿈을 더하면, 단어가 어색하게 잘리지 않습니다.

4. 줄 길이도 스케일의 일부입니다

본문 한 줄이 너무 길면 다음 줄로 눈이 못 돌아옵니다. 저는 본문 폭을 한글 기준 35~45자(약 40ch)로 잡습니다. 글자 크기만 맞추고 줄 길이를 방치하면 가독성의 절반을 버리는 셈입니다.

다른 담당자와의 연결

스케일은 혼자 동작하지 않습니다. 글자 자체의 기본기, 그 글자가 놓이는 격자, 그리고 색이 함께 위계를 완성합니다. 같은 태도로 일하는 동료들의 노트입니다.

타이포 기본기 — 글꼴·자간·줄간격 같은 글자 자체의 기본은 타이포 담당자의 기본 노트에서 다룹니다. 스케일이 ‘크기 규칙’이라면, 그 글자가 어떻게 보이느냐는 여기서 정해집니다.

레이아웃 그리드 — 스케일로 정한 글자가 어디에 놓이는지는 격자가 결정합니다. 레이아웃 담당자의 그리드 노트에서 그리드와 여백이 어떻게 위계를 받쳐주는지 보세요.

컬러 팔레트 — 같은 크기라도 색의 대비로 위계가 한 번 더 갈립니다. 컬러 담당자의 팔레트 노트에서 색이 어떻게 강조를 만드는지 확인하세요.

비율 하나를 이렇게 보는 사람이, 사이트 전체를 만듭니다

글자 크기는 사용자가 무의식적으로 가장 먼저 읽는 ‘구조’입니다. 그 숫자를 감이 아니라 규칙으로 다루는 사람이라면, 그리드도 색도 카피도 같은 태도로 다룹니다. Findable에서는 이런 디테일이 기본값입니다. 당신의 사이트, 어떤 스케일로 잡아드릴까요?