디자인 시안을 보다 보면 가끔 이런 생각이 들어요. “분명 다 알맞게 배치했는데, 왜 이렇게 산만하지?”
여백과 정렬을 신경 써서 잡았는데도, 왜 어떤 부분은 자꾸 따로 노는 것처럼 보일까요?
가까우면 함께, 멀어지면 따로
타이틀과 본문 사이 간격, 본문과 버튼 사이 간격, 섹션과 섹션 사이 간격. 이 세 가지 간격이 전부 24px로 똑같다면 어떻게 보일까요?
원래는 가깝고 멀어야 할 곳까지 다 똑같이 가까워지면서, 섹션 전체가 그냥 한 덩어리로 보일거예요. 간격이 똑같으니까 어디부터 어디까지가 한 묶음인지 눈으로 구분이 안 되는 거죠.
사람은 가까이 있는 것들을 하나의 그룹으로 인식해요.
디자인에서는 이걸 근접성의 원리라고 부르는데, 말은 거창하지만 원리는 단순해요. 간격이 가까우면 “이건 한 묶음이야”, 간격이 멀면 “이건 다른 묶음이야” 라고 우리 눈이 자동으로 판단한다는 거예요.
그래서 간격은 단순히 ‘얼마나 띄울까’의 문제가 아니라, 이 요소들이 서로 어떤 관계인지를 보여주는 장치예요. 타이틀과 본문은 가깝게, 본문과 버튼은 조금 더, 섹션과 섹션 사이는 가장 멀게.
간격 차이가 정보의 위계를 말해주는 거죠.
이전 글에서 여백이 시선의 흐름을 만든다고 했었는데, 간격은 그 흐름 안에서 ‘어디까지 같이 읽어야 하는지’를 알려주는 역할이에요. 정렬이 방향을 잡아준다면, 간격은 묶음을 잡아주는 셈이고요.
좁고 넓음이 만드는 구조
실무에서 자주 하는 실수 중 하나가, 모든 간격을 비슷하게 두는 거예요. 어차피 다 여백이니까 큰 차이 없이 12px, 16px, 20px 이런 식으로 적당히 섞어서 쓰는 거죠.
문제는 이렇게 하면 보는 사람이 어디가 한 묶음인지 헷갈려한다는 거예요. 간격 차이가 거의 없으니까, 큰 그룹을 나누는 경계선인지 그냥 그룹 안 요소들인지 눈으로 구분이 안 되는 거죠.
예를 들어 이런 식이에요. 시각적 계층구조라는 게 결국 이 차이에서 나와요.
요소 안에서의 간격 (사진과 텍스트 사이, 라벨과 인풋 사이)은 가장 좁게.
요소들 사이의 간격 (카드 안에서 타이틀, 본문, 버튼 사이)은 그보다 넓게.
그룹과 그룹 사이의 간격(섹션과 섹션, 카드와 카드 사이)은 가장 넓게.
이렇게 단계가 분명하게 나뉘어 있으면, 사용자는 설명을 듣지 않아도 화면을 보는 순간 구조를 파악해요. “아, 이 세 개는 한 카드구나”, “이 위아래는 다른 섹션이구나” 하고요. 간격의 단계가 곧 정보 구조의 힌트가 되는 거예요.
반대로 모든 간격이 비슷하면, 사용자는 그 힌트 없이 화면을 봐야 해요. 어디까지가 한 묶음인지 매번 내용을 읽어가면서 판단해야 하니까, 당연히 더 피곤하고 더 느리게 읽히죠.
8px를 자주 쓰는 이유
그러면 간격은 몇 px로 잡아야 할까요?
감으로 16px, 18px, 22px 이렇게 정하다 보면 결국 또 기준 없이 들쭉날쭉해져요.
그래서 많이 쓰는 방법이 8px 그리드예요. 모든 간격과 크기를 8의 배수(8, 16, 24, 32, 40…)로만 정하는 규칙이에요.
왜 8이냐면, 대부분의 화면 해상도와 잘 나누어지고, 디바이스마다 배율이 달라져도 깨지지 않고 정수로 떨어지는 경우가 많아서예요.
그리고 무엇보다 디자이너와 개발자 사이에 “이건 16px이야, 24px이야”라고 말할 수 있는 공통 언어가 생긴다는 게 커요. 매번 “이거 살짝만 더 띄워주세요” 같은 모호한 피드백을 주고받지 않아도 되는 거죠.
최근에는 4px 그리드를 쓰는 곳도 많아요.
모바일 화면이 작아지고 컴포넌트가 더 촘촘해지면서, 8 단위로는 너무 크게 느껴지는 디테일들이 생겼어요. 아이콘과 라벨 사이처럼 아주 좁은 간격은 4 단위로 세밀하게 잡고, 섹션 같은 큰 단위는 여전히 8의 배수로 가는 식으로 두 그리드를 같이 쓰는 경우가 많아요.
그래도 중요한 건 8이냐 4냐가 아니라, 간격을 매번 새로 정하지 않고 정해진 단위 안에서 고른다는 점이에요. 그래야 화면 전체를 봤을 때 간격들이 서로 비례 관계를 이루고, 그 비례가 일관성으로 느껴지겠죠?
간격이 말해주는 것
처음 질문으로 돌아가볼게요. 요소 하나하나는 괜찮은데 전체는 산만하게 느껴지는 화면. 대부분 이런 화면은 간격에 규칙이 없어요.
어떤 곳은 12px, 어떤 곳은 17px, 어떤 곳은 30px. 숫자 자체는 크게 다르지 않은데, 그 미묘한 차이들이 쌓이면 화면 전체가 정돈되지 않은 느낌을 줘요.
간격을 제대로 잡는다는 건 결국 요소들 사이의 관계를 정리하는 일이에요. 어떤 것들이 친하고, 어떤 것들이 거리를 둬야 하는지. 그 관계가 명확할 때 사용자는 별다른 설명 없이도 화면을 자연스럽게 읽어내려가요.
화면이 산만해 보일때는 요소들 사이의 관계가 명확하지 않아서일 수도 있어요. 다음에 디자인이 어딘가 어색하게 느껴진다면, 무엇을 더 넣을지보다 무엇을 얼마나 떨어뜨릴지 살펴보면 좋을 것 같아요.
여백이 흐름을, 정렬이 방향을, 간격이 관계를 만든다면, 이 세 가지가 같이 맞아야 비로소 화면이 ‘깔끔하고 정돈됐다’는 느낌을 주는 거예요.
written by 디자이너 이솔
