여백이 디자인의 8할: 1인 메이커가 바로 쓰는 간격(spacing) 시스템 만들기

1. 여백은 남는 공간이 아니라 구조다

화면이 빽빽해 보일 때 글꼴이나 색부터 바꾸기 쉽습니다. 하지만 실제 원인은 요소 사이의 간격이 제각각인 경우가 많습니다. 버튼 안쪽은 12px, 카드 안쪽은 17px, 섹션 사이는 43px처럼 기준 없이 조정하면 각각의 요소는 괜찮아 보여도 전체 화면은 산만해집니다.

조코헌트에 출시된 프로덕트는 206개이고, 출시한 메이커는 163명입니다. 서로 다른 제품을 빠르게 비교해야 하는 환경에서는 화려한 장식보다 정보의 덩어리와 덩어리 사이가 잘 구분되는지가 중요합니다. 여백은 디자인의 빈칸이 아니라 사용자가 무엇을 한 묶음으로 읽을지 알려주는 구조 신호입니다.

2. 먼저 4px 또는 8px 간격 단위를 정하기

4px 기반과 8px 기반의 선택

작은 화면과 세밀한 컨트롤이 많은 제품이라면 4px 기반이 유연합니다. 4, 8, 12, 16, 24, 32처럼 촘촘한 단계를 만들 수 있기 때문입니다. 반대로 콘텐츠 중심의 대시보드나 랜딩페이지처럼 큰 덩어리가 중요하다면 8px 기반이 관리하기 쉽습니다. 8, 16, 24, 32, 48처럼 눈에 잘 들어오는 간격을 유지할 수 있습니다.

둘 중 무엇을 고르든 핵심은 숫자 자체보다 예외를 줄이는 것입니다. 이미 작업 중인 화면에서 가장 자주 쓰는 간격을 세어 보고, 그 값이 4의 배수인지 8의 배수인지 확인해 보세요. 기존 코드와 디자인 파일이 있다면 완전히 갈아엎기보다 자주 반복되는 값부터 토큰으로 묶는 편이 현실적입니다.

간격 토큰을 역할별로 나누기

숫자만 나열한 토큰보다 역할을 붙인 토큰이 오래갑니다.

• space-xs: 아이콘과 텍스트처럼 가까운 요소
• space-sm: 폼 필드 내부, 짧은 목록 항목
• space-md: 카드 내부의 기본 간격
• space-lg: 카드와 카드, 콘텐츠 블록 사이
• space-xl: 섹션을 구분하는 큰 간격

이름은 프로젝트 상황에 맞게 바꿔도 됩니다. 중요한 점은 컴포넌트마다 새 숫자를 만들지 않고, 같은 관계에는 같은 토큰을 재사용하는 것입니다. 제목 크기와 줄 간격까지 함께 정리하려면 폰트 2개로 끝내는 타이포그래피를 참고해도 좋습니다.

3. 컴포넌트 안팎의 여백을 따로 설계하기

간격은 크게 ‘컴포넌트 내부’와 ‘컴포넌트 외부’로 나눠 생각하면 실수가 줄어듭니다.

내부 여백: 내용을 편하게 읽게 하기

카드나 버튼의 내부 여백은 콘텐츠와 테두리 사이의 안전거리입니다. 텍스트가 두 줄로 늘어나도 답답하지 않은지, 아이콘이 추가되어도 좌우 균형이 맞는지 확인하세요. 버튼은 텍스트 길이에 따라 폭이 달라질 수 있으므로 고정 폭보다 좌우 패딩 규칙을 먼저 정하는 편이 안전합니다.

외부 여백: 관계를 보여주기

외부 여백은 요소끼리 얼마나 가까운 관계인지 표현합니다. 같은 그룹 안의 항목은 좁게, 다른 그룹 사이에는 넓게 배치하세요. 예를 들어 라벨과 입력창 사이보다 입력창과 다음 섹션 사이가 더 넓어야 합니다. 모든 간격을 같은 값으로 맞추면 정돈된 것이 아니라 계층이 사라진 화면이 됩니다.

4. 빽빽한 화면을 10분 안에 진단하는 순서

① 선을 지우고 덩어리만 보기

배경색, 테두리, 아이콘을 잠시 무시하고 콘텐츠 블록만 바라보세요. 제목·설명·버튼이 서로 붙어 있거나, 반대로 같은 카드 안에서 지나치게 벌어진 곳을 표시합니다. 이 단계에서는 값을 바꾸지 말고 문제 위치만 찾습니다.

② 가장 작은 간격부터 정리하기

아이콘과 텍스트, 라벨과 입력창처럼 가까운 관계부터 통일합니다. 그다음 카드 내부 패딩, 카드 사이 간격, 섹션 사이 간격 순서로 범위를 넓혀 가세요. 작은 관계가 먼저 안정되면 큰 간격을 조정할 때 기준이 생깁니다.

③ 모바일에서 줄바꿈을 확인하기

데스크톱에서 여유 있어 보이는 간격도 모바일에서는 콘텐츠를 아래로 밀어낼 수 있습니다. 제목이 두 줄이 되었을 때 버튼과 충돌하지 않는지, 카드가 길어져도 다음 카드와의 구분이 유지되는지 확인하세요. 반응형 값은 별도 규칙으로 만들되, 기본 간격 체계에서 크게 벗어나지 않게 관리하는 것이 좋습니다.

조코헌트에서 출시 첫 24시간 안에 업보트나 댓글 같은 반응을 하나라도 받은 프로덕트는 69%입니다. 첫 방문자가 빠르게 핵심을 파악해야 하는 페이지라면, 여백을 줄여 정보를 더 넣기보다 시선이 멈출 지점을 분명하게 만드는 것이 유리합니다. 랜딩페이지의 섹션 간 호흡은 전환되는 랜딩페이지 구조와 함께 점검해 보세요.

5. 마지막 체크리스트와 예외 처리

다음 질문에 모두 답할 수 있으면 기본 spacing 시스템은 작동하고 있는 것입니다.

• 자주 쓰는 간격이 정해진 단위의 배수인가?
• 컴포넌트 내부 패딩과 외부 간격을 구분했는가?
• 같은 역할의 요소가 화면마다 같은 간격을 쓰는가?
• 모바일 줄바꿈 뒤에도 그룹 관계가 보이는가?
• 간격을 줄여야 한다면 어떤 규칙을 예외로 삼았는가?

예외가 생기는 것 자체는 문제 아닙니다. 작은 뱃지, 긴 문장이 들어가는 알림, 밀도가 높은 데이터 표처럼 목적이 다른 영역은 별도 규칙이 필요할 수 있습니다. 다만 예외를 임시 숫자로 흩어 놓지 말고 이름과 사용 이유를 기록하세요. 색상과 중립색을 함께 정리하고 싶다면 디자인 비전공 개발자를 위한 색상 선택 5단계처럼 기준을 문서화하는 방식이 도움이 됩니다.

여백 시스템의 목표는 모든 화면을 똑같이 만드는 것이 아닙니다. 같은 관계에는 같은 간격을 적용하고, 다른 관계에는 차이를 주어 사용자가 제품의 구조를 자연스럽게 읽게 만드는 것입니다. 오늘은 한 화면에서 반복되는 간격 세 가지만 골라 토큰으로 바꾸는 것부터 시작해 보세요.