13px, 19px이 브랜드를 망친다 — 8px 토큰 하나로 여백 통일하기

제품을 하나 더 만들 때마다 여백을 새로 정했어요. 플랜씨는 카드 패딩 20px, 플랜비는 18px, 플랜엘은 어쩌다 13px. 각각 놓고 보면 멀쩡한데, 세 화면을 나란히 캡처해 보니 같은 브랜드가 아니었어요.

숫자가 아니라 리듬이 문제예요

사람은 20px과 18px의 차이를 자로 재지 못해요. 대신 "어딘가 어색하다"로 느껴요. 여백이 4, 8, 12, 16, 24처럼 일정한 배수로 반복되면 눈이 규칙을 학습하고, 13이나 19가 끼어드는 순간 그 규칙이 깨져요.

브랜딩 관점에서 이게 왜 중요하냐면, 1인 브랜드가 신뢰를 얻는 경로가 반복밖에 없기 때문이에요. 광고비도 영업팀도 없으니 "이 사람이 만든 건 대충 안 만들었네"가 쌓여야 해요. 그 신호를 로고나 슬로건이 아니라 여백이 먼저 전달해요.

실제로 해 본 정리 순서

직접 세 제품을 훑어보니 사용 중인 간격 값이 20개 가까이 나왔어요. 정리는 이렇게 했어요.

1단계, 전수 조사. 코드에서 padding, margin, gap을 전부 뽑아 값별로 세어 봤어요. 상위 6개가 전체 사용의 대부분이었고, 나머지는 한두 번 쓰고 잊힌 숫자였어요.

2단계, 가장 가까운 8의 배수로 스냅. 13px은 12px로, 19px은 20px로, 18px은 16px로. 적용해 봤더니 화면이 눈에 띄게 바뀐 곳은 거의 없었어요. 원래 의미 없던 차이였으니까요.

3단계, 이름 붙이기. 여기가 핵심이에요. --space-1: 4px처럼 숫자만 남기면 다시 아무 데나 쓰게 돼요. 대신 쓰임을 이름에 넣었어요.

:root {
  --space-tight: 8px;    /* 라벨과 입력창 사이 */
  --space-inner: 16px;   /* 카드 내부 패딩 */
  --space-group: 24px;   /* 문단, 섹션 묶음 사이 */
  --space-section: 48px; /* 화면 블록 구분 */
}

4개면 충분했어요. 8단계짜리 스케일도 만들어 봤는데, 선택지가 많아지니 결국 감으로 고르게 되더라고요.

지켜야 할 규칙 하나

안쪽 간격이 바깥쪽보다 항상 좁아야 해요. 라벨과 입력창 사이가 8px이면 입력창 그룹끼리는 24px. 이게 뒤집히면 무엇이 한 덩어리인지 눈이 못 읽어요. 여백이 제각각인 화면이 어색한 진짜 이유가 대부분 여기예요.

콘텐츠에도 같은 토큰을 써요

의외의 수확이 여기였어요. 블로그 카드, 상세페이지, SNS 이미지까지 같은 8px 리듬으로 맞추니 채널이 달라도 브랜드가 이어져 보였어요. 제품 화면과 마케팅 소재가 따로 노는 게 1인 브랜드의 흔한 약점인데, 토큰 하나 공유하는 걸로 상당 부분 해결됐어요.

정리하는 데 걸린 시간은 제품당 30분 정도. 로고를 다시 그리거나 카피를 갈아엎는 것보다 훨씬 싸게 브랜드 밀도가 올라가는 작업이에요.

혹시 여백 규칙이 궁금해서 실제 화면이 보고 싶다면, 로그인 없이 바로 쓸 수 있는 플랜씨(plan-c) 금융계산기에서 확인해 보세요. 대출이자·연봉 실수령 계산기 화면이 전부 위 토큰 4개로만 만들어져 있어요.

오늘 바로 할 수 있는 것

지금 만들고 있는 화면에서 간격 값 하나만 세어 보세요. 8의 배수가 아닌 숫자가 나왔다면, 그 숫자를 왜 골랐는지 설명할 수 있나요? 설명이 안 되면 바꿔도 아무도 모르고, 브랜드만 조용히 정돈돼요.