2026.10.25 - 글자 크기와 여백을 몇 개로 정했더니 편해졌다

이번 달에 만든 화면들을 한꺼번에 열어 놓고 보다가 좀 부끄러웠다. 같은 “작은 글씨”인데 화면마다 12px, 13px, 13.5px, 14px 이 섞여 있었다. 여백도 마찬가지로 10px, 12px, 15px, 18px 이 제멋대로였다. 하나씩 눈으로 맞춘 결과였다.

값이 많으면 생기는 일

값을 매번 새로 고르면 두 가지가 문제가 된다.

• 화면을 나란히 놓았을 때 미묘하게 어긋나 보인다. 정확히 뭐가 틀렸는지는 모르는데 어딘가 어설프다
• 디자이너도 개발자도 고르는 데 시간을 쓴다. 13px 과 14px 중 뭐가 낫냐는 얘기를 하느라 시간이 간다

선택지를 줄이면 이 두 가지가 같이 사라진다.

글자 크기는 6단계

정리한 타입 스케일은 이렇다.

이름	크기	줄 간격	쓰는 곳
caption	12px	16px	부가 설명, 라벨
body-sm	14px	20px	표, 목록
body	16px	24px	본문
title-sm	18px	28px	카드 제목
title	24px	32px	페이지 제목
display	32px	40px	강조 숫자, 히어로

줄 간격도 같이 묶어서 정했다. 크기만 정하면 줄 간격을 또 매번 고르게 되기 때문이다. 줄 간격이 전부 4의 배수라는 점도 뒤에서 의미가 있다.

여백은 4px 기준

여백은 4px 단위로만 쓰기로 했다. 4, 8, 12, 16, 24, 32, 48. 이 일곱 개가 전부다.

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
}

.card {
  padding: var(--space-4);
  gap: var(--space-3);
}

15px 이 필요한 것 같은 순간에는 12px 이나 16px 중에 고른다. 처음엔 답답했는데 며칠 지나니 오히려 속이 편했다. 고민할 후보가 둘뿐이니까.

4의 배수로 맞춰 두면 줄 간격, 아이콘 크기, 버튼 높이를 같은 기준으로 묶을 수 있고, 화면 배율이 달라져도 값이 어정쩡하게 떨어지는 일이 줄어든다.

적용해 보니

기존 화면 세 개에 적용해 보았다. 걸린 시간은 화면당 대략 한 시간이다. 대부분 “이 13px 은 12px 인가 14px 인가”를 정하는 시간이었다. 한 번 정하고 나니 그 이후엔 빨랐다.

예외도 생겼다. 로고 주변 여백처럼 시각적으로 따로 맞춰야 하는 곳은 스케일을 벗어난다. 그런 건 변수 대신 주석을 달고 직접 값을 썼다. 규칙은 규칙이고, 예외는 예외라고 명시해 두면 된다.

정리

• 글자 크기는 6단계, 줄 간격까지 한 세트로
• 여백은 4px 배수 일곱 개
• 스케일에 없는 값이 필요하면 먼저 둘 중 가까운 값으로 해결해 본다
• 정말 예외라면 이유를 주석으로 남긴다

화면을 새로 만들 때 첫 질문이 “몇 px 으로 할까”에서 “어느 단계로 할까”로 바뀌었다. 별것 아닌 차이인데 작업 속도가 꽤 달라졌다.