여백 비율을 실측으로 재는 방법
시안을 보고 여백이 넉넉한지 빽빽한지 말로 다투기보다 숫자로 재는 편이 빠릅니다. 디자인 툴이나 개발자 도구에서 컨테이너 크기와 콘텐츠 전체를 감싸는 바운딩 박스 크기, 그리고 콘텐츠가 왼쪽·위에서 얼마나 떨어져 있는지만 읽어 넣으면 됩니다. 결과로 여백이 전체 면적에서 차지하는 비율, 콘텐츠 비율, 네 변의 여백 px과 변별 비율이 나옵니다. 같은 화면의 전후 시안을 각각 재서 비교하는 용도로 쓰기 좋습니다.
계산은 면적 비교입니다. 컨테이너 면적은 가로 × 세로, 콘텐츠 면적은 콘텐츠 가로 × 세로이고 여백 면적은 그 차이입니다. 비율은 여백 면적 ÷ 컨테이너 면적이며 소수 1자리로 표시하고 판정도 같은 자리에서 합니다. 네 변의 여백은 왼쪽 = 시작 위치, 오른쪽 = 컨테이너 가로 − 시작 위치 − 콘텐츠 가로 식으로 구합니다. 2026년 10월 기준 단순 기하 계산이며 별도의 기관 기준을 쓰지 않습니다.
이 도구는 재기만 합니다. padding·gap·line-height를 콘텐츠 종류별로 얼마로 하라는 권장값은 제시하지 않습니다. 그 권장값은 별도의 여백·밀도 설계 가이드가 담당하고, 여백이 몇 퍼센트여야 좋다는 공인 기준은 존재하지 않습니다. 또한 글자 사이의 미세 여백, 겹친 블록, 스크롤로 이어지는 영역은 계산에 넣지 않습니다.
자주 묻는 질문
공인된 기준은 없습니다. 이 도구는 지금 시안의 값을 재 줄 뿐이고, 목표치는 같은 서비스의 다른 화면이나 경쟁 화면을 함께 재서 직접 정하는 편이 낫습니다.
블록 전체를 감싸는 바운딩 박스의 가로·세로를 넣으면 됩니다. 블록 사이의 빈 공간은 콘텐츠 면적에 포함되므로 블록별 여백까지 쪼개 재지는 않습니다.
면적 비율은 가로·세로를 곱한 값끼리 비교하기 때문입니다. 변 여백이 가로로만 넓으면 면적 비율은 그만큼 크게 오르지 않습니다.