웹디자인 간격과 크기 설정법 | 스페이싱·사이징 규칙 이해하기 – 웹디자인 강좌 2-5

색상과 폰트에는 문제가 없는데 화면이 묘하게 정돈되지 않아 보인다면 간격과 크기 규칙을 먼저 확인해볼 필요가 있습니다.

스페이싱은 요소 사이의 거리, 사이징은 버튼과 아이콘처럼 요소 자체의 크기 규칙을 의미합니다.

좋은 UI는 매번 다른 숫자를 사용하는 대신 자주 사용하는 값을 정해두고 반복해서 사용합니다. 대표적인 방법이 4, 8, 12, 16, 24, 40...처럼 일정한 기준을 만드는 4포인트 그리드입니다.

마진, 패딩, 갭의 차이

스페이싱을 이해할 때 가장 먼저 구분해야 하는 것이 마진, 패딩, 갭입니다.

구분	의미	예시
Margin	요소 바깥쪽 여백	카드와 카드 사이, 섹션 사이
Padding	요소 안쪽 여백	카드 테두리와 콘텐츠 사이
Gap	나열된 요소 사이의 간격	아이콘과 텍스트, 카드 목록

마진은 서로 다른 덩어리 사이의 거리이고, 패딩은 하나의 요소 안에서 콘텐츠가 숨 쉴 공간입니다.

갭은 Auto Layout처럼 여러 요소가 나열되어 있을 때 각각의 사이 간격을 의미합니다.

이 세 가지를 구분하면 화면의 간격을 훨씬 체계적으로 설계할 수 있습니다.

간격은 정보를 묶어주는 역할을 한다

스페이싱은 단순히 화면을 여유롭게 만드는 장식이 아닙니다.

사람은 가까이 있는 요소를 서로 관련된 하나의 그룹으로 인식하고, 멀리 떨어져 있으면 다른 정보라고 판단하는 경향이 있습니다.

이를 게슈탈트의 근접성 원리라고 합니다.

예를 들어 카드 안에서 아이콘과 해당 숫자는 가까이 배치하고, 제목이나 설명과는 조금 더 넓은 간격을 둘 수 있습니다.

모든 간격을 똑같이 사용하면 어떤 정보끼리 연결되어 있는지 구분하기 어려워집니다.

따라서 일반적으로:

같은 그룹 → 간격을 좁게
다른 그룹 → 간격을 넓게

사용한다고 이해하면 쉽습니다.

4포인트 그리드로 간격 규칙 만들기

스페이싱을 매번 감으로 결정하면 13px, 17px, 23px처럼 비슷하지만 서로 다른 값이 계속 늘어날 수 있습니다.

이를 방지하기 위해 많이 사용하는 방법 중 하나가 4포인트 그리드입니다.

기본 단위를 4로 두고 다음처럼 값을 구성합니다.

4 → 8 → 12 → 16 → 20 → 24 → 32 → 40...

중요한 것은 모든 값을 다 사용하는 것이 아닙니다.

프로젝트에서 자주 사용할 간격만 골라 선택지를 줄이는 것이 핵심입니다.

예를 들면:

• 4px → 아이콘과 텍스트처럼 아주 가까운 요소
• 8px → 작은 내부 간격
• 16px → 카드나 리스트의 기본 패딩
• 24px → 콘텐츠 그룹 사이
• 40px 이상 → 큰 블록이나 섹션 사이

처럼 역할을 정할 수 있습니다.

숫자 자체보다 같은 상황에서 같은 값을 반복해서 사용하는 것이 중요합니다.

사이징도 규칙을 만든다

스페이싱이 요소 사이의 거리라면 사이징은 요소 자체의 크기입니다.

예를 들어 아이콘을 화면마다 17px, 21px, 25px처럼 임의로 만들기보다 다음처럼 몇 가지 크기를 정해두는 편이 관리하기 쉽습니다.

16 → 20 → 24 → 32

버튼과 입력창도 마찬가지입니다.

같은 화면에서 버튼은 44px인데 Input은 51px, Dropdown은 47px처럼 높이가 제각각이면 서로 나란히 배치했을 때 정렬이 어색해집니다.

따라서 컴포넌트 역시 Small, Medium, Large처럼 몇 가지 크기 규칙을 정해두는 것이 좋습니다.

반응형에서는 간격도 함께 변한다

반응형 디자인에서 글자 크기와 컬럼만 바뀌는 것은 아닙니다.

화면이 좁아지면 마진과 패딩, 갭도 함께 조정해야 합니다.

데스크톱에서 넉넉했던 섹션 여백과 카드 패딩을 모바일에 그대로 사용하면 실제 콘텐츠가 들어갈 공간이 너무 좁아질 수 있습니다.

따라서 화면에 따라:

• 섹션 간격을 줄이고
• 좌우 패딩을 줄이고
• 카드 사이의 갭을 조절하는

방식으로 전체 밀도를 함께 변경합니다.

다만 모든 것을 작게 만드는 것은 아닙니다.

모바일에서는 오히려 커져야 하는 것도 있다

대표적인 예가 버튼의 터치 영역입니다.

데스크톱에서는 마우스로 작은 버튼도 쉽게 클릭할 수 있지만 모바일에서는 손가락으로 직접 눌러야 합니다.

강의에서는 모바일의 터치 영역을 약 44~48px 이상의 높이로 확보하는 것을 설명합니다.

따라서 데스크톱에서 32px 정도였던 작은 버튼이 모바일에서는 오히려 더 커져야 할 수도 있습니다.

반응형 디자인은 단순히 전체 화면을 축소하는 것이 아니라 사용 환경에 따라 적절한 크기로 다시 조정하는 작업입니다.

스페이싱 규칙을 디자인 토큰으로 연결하기

프로젝트가 커지면 16px이라는 숫자를 화면마다 직접 입력하는 것보다 그 값에 역할을 붙여 관리하는 것이 편합니다.

이때 활용하는 것이 디자인 토큰입니다.

예를 들어 기본 값을 다음처럼 만들 수 있습니다.

Spacing 1 = 4px
Spacing 2 = 8px
Spacing 3 = 12px
Spacing 4 = 16px

이러한 기본 값이 Primitive Token입니다.

그리고 실제 UI에서는:

• Padding M
• Gap S
• Margin L
• Radius M

처럼 용도에 맞는 Alias Token으로 연결할 수 있습니다.

이렇게 하면 디자이너와 개발자가 서로 다른 숫자를 감으로 입력하지 않고 같은 기준을 사용할 수 있습니다.

단위보다 중요한 것은 같은 규칙을 공유하는 것

디자인 토큰은 반드시 px만 사용해야 하는 것은 아닙니다.

프로젝트에 따라 rem을 사용할 수도 있고, 개발에서는 CSS 변수나 JSON 형태로 관리할 수도 있습니다.

중요한 것은 단위가 아니라 디자인과 개발이 하나의 기준을 공유하는 것입니다.

예를 들어 디자이너가 Padding M을 사용했다면 개발에서도 동일한 토큰을 불러와 구현할 수 있습니다.

이렇게 규칙을 만들어두면 새로운 화면이 추가되어도 매번 숫자를 다시 결정할 필요가 없습니다.