8포인트 그리드로 일관된 UI 간격 체계 만들기

8포인트 그리드는 주로 8의 배수를 사용해 안쪽 여백, 요소 사이 간격, 컴포넌트 크기를 일관되게 정하는 방식입니다. 8, 16, 24, 32, 48 같은 값부터 시작하고, 세밀한 조정이 필요한 곳에는 더 작은 값을 함께 사용합니다. 모든 테두리와 글자, 아이콘을 격자에 억지로 맞추는 것이 아니라 요소 사이의 관계를 예측할 수 있게 만드는 데 목적이 있습니다.

간격 체계가 “요소를 얼마나 떨어뜨릴 것인가”를 정한다면, 레이아웃 그리드는 열, 거터, 정렬 기준을 정합니다. 두 가지를 함께 사용할 수 있지만 역할은 다릅니다. 페이지의 열을 정확히 맞춰도 카드마다 안쪽 여백이 제각각이면 화면은 여전히 불규칙해 보입니다.

실제로 쓸 수 있는 간격 체계부터 정하기

화면에서 자주 필요한 간격을 먼저 살펴보세요. 일반적인 웹 앱이라면 4, 8, 12, 16, 24, 32, 48, 64를 시작 값으로 삼을 수 있습니다. 8을 기본 단위로 사용하되, 밀도가 높은 컨트롤 안에서는 4와 12로 세밀하게 조정합니다. 8의 배수를 모두 사용할 필요는 없습니다. 이미 일관되게 운영하는 체계가 있다면 값이 다르다는 이유만으로 바꿀 필요도 없습니다.

IBM Carbon의 간격 체계(영문)에는 2, 4, 8을 바탕으로 한 단위가 포함되어 있습니다. 컴포넌트 안의 세밀한 간격과 큰 레이아웃 간격도 구분합니다. 작은 단위를 허용하면서도 일관된 체계를 유지할 수 있다는 뜻입니다.

디자인 파일의 단위가 구현에서 무엇을 의미하는지도 개발자와 정하세요. 웹 디자인에서 간격 16은 보통 CSS 픽셀이나 상대 단위로 표현되며, 모든 디스플레이에서 물리적인 픽셀 16개를 뜻하지는 않습니다. 웹과 네이티브 앱을 함께 만드는 제품이라면 이 변환 기준을 분명히 해야 합니다.

예시 값	사용할 수 있는 위치	살펴볼 점
4	아이콘과 짧은 배지 문구처럼 밀접한 요소 사이	내용을 읽기 어렵거나 지나치게 답답해 보이지 않는지
8	제목과 설명, 레이블과 입력란 사이	두 요소가 같은 항목에 속한다는 점이 분명한지
16	한 컴포넌트 안의 관련 정보 그룹 사이	서로 구분되면서도 관계가 끊겨 보이지 않는지
24	카드 안쪽 여백이나 주요 행동 영역 앞	카드의 가장 좁은 너비에서도 내용이 들어갈 공간이 충분한지
32~64	큰 정보 그룹이나 페이지 섹션 사이	의미 있는 위계를 만드는지, 불필요한 빈 공간만 늘리는지

이 값의 역할은 예시를 위한 출발점입니다. 모든 화면에 적용하는 규칙은 아닙니다. 정보가 촘촘한 데이터 표와 마케팅 페이지에 필요한 밀도는 다릅니다. 일관되게 유지해야 하는 것은 간격을 고른 이유입니다.

간격으로 관련된 내용을 묶기

프로젝트 요약 카드에 제목, 설명, 상태, 작업 정보, ‘프로젝트 보기’ 버튼이 있다고 생각해 보세요. 모든 요소 사이를 16px씩 띄우면 규칙적인 세로 목록은 만들어지지만, 어떤 항목끼리 한 그룹인지 드러나지 않습니다.

제목과 설명은 8px 간격으로 묶고, 상태와 작업 정보는 별도의 관련 정보 그룹으로 구성해 보세요. 본문과 행동 영역은 24px 띄웁니다. 각 영역에 테두리를 추가하지 않아도 사용자는 소개, 부가 정보, 다음 행동을 구분할 수 있습니다.

간격은 레이아웃 상자를 기준으로 일관되게 측정하세요. 텍스트 레이어에는 글자 모양 바깥까지 이어지는 행 높이가 포함될 수 있습니다. 한 사람은 텍스트 상자에서, 다른 사람은 글자의 가장 아래쪽에서 측정하면 같은 간격을 만들려다가 서로 다른 값을 입력하게 됩니다. 컴포넌트의 레이아웃 구조를 공통 기준으로 삼고, 시각적인 보정은 의도적으로 적용하세요.

큰 간격은 보통 의미상으로도 더 큰 구분을 나타내야 합니다. 설명이 자신의 제목보다 다음 프로젝트 제목에 더 가까이 붙어 있다면, 모든 수치가 8의 배수여도 잘못된 관계를 전달합니다.

프로젝트 카드에 단계별 간격 적용하기

이 예시에서는 너비 360px의 카드를 만듭니다. 좌우 안쪽 여백을 각각 24px로 설정하면 내용에 쓸 수 있는 너비는 312px입니다. 카드 높이는 계산을 보기 좋게 맞추기 위해 고정하지 말고, 텍스트 양에 따라 늘어나게 합니다.

1. 소개 그룹을 만듭니다. 제목은 ‘웹사이트 개편’, 설명은 ‘제품 페이지를 개선하고 개발 전달을 준비합니다.’로 입력합니다. 두 요소 사이 간격은 8px로 설정합니다.
2. 부가 정보 그룹을 만듭니다. ‘진행 중’과 ‘디자인 팀 · 작업 12개’를 넣습니다. 같은 프로젝트의 정보이므로 서로 다른 프로젝트 사이보다 가깝게 배치합니다.
3. 두 정보 그룹을 묶습니다. 소개와 부가 정보 사이에 16px 간격을 둡니다. 같은 프로젝트에 속하지만 역할이 다른 두 영역임을 보여 줍니다.
4. 행동 영역을 배치합니다. 본문과 ‘프로젝트 보기’ 버튼을 24px 띄웁니다. 버튼은 내용 영역의 가장자리에 맞춥니다.
5. 카드 전체에 안쪽 여백을 적용합니다. 사방을 24px로 설정합니다. 빈 사각형 대신 실제 제목과 버튼을 넣은 상태에서 위아래 여백도 확인합니다.

이렇게 하면 밀접한 요소 사이는 8px, 관련 정보 그룹 사이는 16px, 카드 테두리 안쪽과 행동 영역 앞은 24px라는 위계가 생깁니다. 같은 값이어도 담당하는 역할은 다릅니다. ‘8포인트 그리드 사용’이라고만 적는 것보다 각 값의 역할을 함께 설명해야 컴포넌트를 재사용하기 쉽습니다.

이제 제목을 ‘해외 제품 출시를 위한 웹사이트 개편’으로 바꾸고 줄바꿈되게 해 보세요. 설명과 나머지 내용은 정해 둔 간격을 유지하며 아래로 이동해야 합니다. 버튼이 텍스트와 겹친다면 간격 체계보다 크기 조정 방식이나 고정 높이에 문제가 있을 수 있습니다.

Pixso의 Auto Layout으로 간격 유지하기

Pixso의 UI 디자인 작업 공간에서 소개, 부가 정보, 카드 전체에 중첩된 Auto Layout 그룹을 적용합니다. 그룹별 요소 사이 간격과 카드의 안쪽 여백은 따로 설정하세요. 그러면 텍스트가 길어져도 각 레이어의 위치를 일일이 옮기지 않고 배치를 조정할 수 있습니다.

컴포넌트 옆에는 허용하는 값, 각 값의 역할, 사용 예시를 정리해 둡니다. 카드가 완성되면 컴포넌트로 재사용해 다른 화면도 같은 구조에서 시작하게 하세요. 더 촘촘한 카드가 필요한 화면은 밀도가 다른 버전으로 설계합니다. 인스턴스마다 무관한 값을 하나씩 덧붙이는 방식은 피하는 편이 좋습니다.

디자인 옆에 토큰 이름이나 숫자를 적었다고 해서 제품 코드에 자동으로 연결되는 것은 아닙니다. 이름과 구현 방식은 개발 팀과 함께 정하세요. 토큰을 코드로 연결하는 작업을 아직 하지 않았더라도 ‘카드 안쪽 여백 = 24, 본문과 행동 영역 사이 = 24’처럼 기록하면 의도한 관계를 전달할 수 있습니다.

필요한 예외는 적게, 이유는 분명하게

8포인트 방식이 모든 치수에 적용되는 규칙은 아닙니다. 1px 테두리, 시각적으로 보정한 아이콘, 기존 타이포그래피 체계에는 다른 값이 필요할 수 있습니다. 숫자를 맞추려고 테두리를 8px로 늘리거나 아이콘을 찌그러뜨리지 마세요.

조작 영역의 크기도 제품의 접근성 요구사항과 플랫폼 지침에 맞춰 정해야 합니다. 8의 배수라는 이유만으로 버튼이 충분히 크거나 읽기 쉽고 조작하기 편해지는 것은 아닙니다. 누를 수 있는 영역과 그 주변의 간격은 별도로 확인하세요.

세밀한 차이가 필요하다면 4px나 12px를 사용합니다. 정보가 촘촘한 목록에서 작은 아이콘과 레이블 사이를 8px 띄우면 너무 가깝고 16px 띄우면 너무 멀 수 있습니다. 이때 12px라는 관계를 정해 두는 편이 여러 사람이 각각 11px, 13px, 14px로 조정하는 것보다 관리하기 쉽습니다.

같은 예외가 반복된다면 간격 체계에 포함할지, 컴포넌트 구조부터 바꿔야 할지 판단하세요. 우연히 생긴 간격마다 새 토큰을 만들면 불규칙한 값에 정식 이름만 붙이게 됩니다.

좁은 화면에서도 모든 값을 줄이지 않기

화면이 좁아지면 먼저 카드가 사용할 수 있는 너비를 활용하고 텍스트의 줄바꿈을 허용합니다. 좌우 24px 여백 때문에 내용 영역이 지나치게 좁아진다면 16px로 줄인 버전과 비교하세요. 제목과 설명 사이의 8px, 행동 영역 앞의 24px는 의미가 여전히 분명하다면 그대로 유지할 수 있습니다.

모바일 비율을 정해 모든 간격에 일괄적으로 곱하지 마세요. 정해 둔 체계가 애매한 소수 값으로 바뀌고, 충분한 조작 공간이 필요한 컨트롤까지 작아질 수 있습니다. 좁은 배치에서 실제로 영향을 받는 관계만 바꾸는 편이 좋습니다.

프로젝트 카드에는 짧은 제목과 긴 제목, 한 줄과 여러 줄 설명, 예상되는 가장 긴 버튼 문구를 넣어 비교합니다. 정보 그룹이 명확하고 텍스트 높이를 고정하지 않아도 유지되는 구성을 선택하세요. 개발 전달에는 고정하는 값, 밀도에 따라 바뀌는 값, 내용이 늘어나도 되는 영역을 함께 기록합니다.