여백

정의

패딩(padding)은 요소의 테두리 안쪽 여백으로, 콘텐츠와 경계 사이에 숨 쉴 공간을 만듭니다. 마진(margin)은 테두리 바깥쪽 여백으로, 이웃한 요소와의 거리를 정합니다. 둘 다 '빈 공간'이지만 안과 바깥이라는 방향이 정반대라, 이 구분 하나만 확실히 잡아도 레이아웃 고민의 절반은 정리됩니다. 여백은 화면에서 가장 자주 만지게 되는 값이면서, 동시에 입문자가 가장 많이 헷갈려 하는 지점이기도 합니다. 그래서 처음에는 '안쪽이면 패딩, 바깥쪽이면 마진'이라는 문장을 소리 내어 외워 두는 편이 훨씬 빠릅니다.

왜 중요한가

여백은 단순히 '비어 있는 곳'이 아니라 정보를 읽기 쉽게 만드는 가장 강력한 도구입니다. 요소 사이가 충분히 벌어지면 눈이 각 덩어리를 또렷하게 구분하고, 반대로 좁으면 서로 관련 있는 것처럼 하나로 묶여 보입니다. 즉 여백의 크기 차이만으로도 '무엇이 한 무리인가' 하는 그룹핑과 화면의 위계가 자연스럽게 만들어집니다. 잘 조율된 여백은 색이나 선을 더하지 않고도 화면을 정돈하고, 사용자가 어디를 먼저 봐야 할지 소리 없이 안내합니다. 반대로 여백이 들쭉날쭉하면 아무리 예쁜 색과 폰트를 써도 화면 전체가 어수선하고 값싸 보입니다. 그래서 숙련된 디자이너일수록 색을 고르기 전에 여백부터 정리하는 습관을 가지고 있습니다.

흔한 실수

• 패딩과 마진을 혼동해 엉뚱한 쪽에 값을 주는 경우입니다. 카드 안쪽이 답답하면 마진이 아니라 패딩을 키워야 하고, 카드끼리 서로 붙어 있으면 패딩이 아니라 마진이나 부모의 gap을 늘려야 합니다. 방향을 반대로 잡으면 값을 아무리 키워도 원하는 결과가 나오지 않습니다.
• 여백을 그때그때 아무 숫자로나 정하는 것입니다. 12px, 15px, 18px처럼 규칙 없는 값이 화면마다 쌓이면 미묘하게 어긋나 보이고, 나중에 어디를 얼마나 고쳐야 할지 몰라 유지보수도 급격히 어려워집니다.
• 관련 있는 요소와 없는 요소를 똑같은 간격으로 벌리는 것입니다. 모든 간격이 동일하면 그룹의 경계가 사라져, 정보의 구조가 한눈에 들어오지 않고 사용자가 스스로 묶음을 추측해야 합니다.

실무 팁

• 여백은 4 또는 8의 배수처럼 미리 정해진 스케일 안에서만 고르세요. 선택지를 몇 개로 줄이면 매번의 결정이 빨라지고, 화면 전체의 리듬이 일관되게 유지됩니다. 이 규칙은 뒤에서 다루는 간격 스케일 개념과 곧바로 이어집니다.
• 안쪽 숨통은 패딩으로, 요소 사이 거리는 마진 또는 부모의 gap으로 준다는 원칙을 팀 안에서 고정해 두세요. 역할을 명확히 나눠 두면 값이 서로 충돌하거나 이중으로 겹쳐 계산이 꼬이는 실수를 크게 줄일 수 있습니다.
• 한 무리 안의 간격은 좁게, 무리와 무리 사이는 넓게 두세요. 이 대비가 뚜렷할수록 사용자는 별도의 설명 없이도 어떤 요소들이 한 덩어리인지 즉시 알아챕니다.

관련 개념