8px 기반 그리드 시스템이란 무엇인가요?

모든 spacing 값을 8의 배수(8, 16, 24, 32, 48, 64px)로 설정하는 시스템입니다. 대부분의 화면 해상도에서 깔끔하게 렌더링되고, 개발자와 협업할 때 일관성을 유지하기 쉽습니다.

📐 UI 여백·밀도 설계 가이드 | 콘텐츠별 spacing 기준

오히려 여백이 충분할수록 정보가 더 읽기 쉽고 고급스러워 보입니다. 여백은 시각적 호흡을 주어 집중력을 높이는 역할을 합니다. 단, 대시보드처럼 많은 데이터를 한 화면에 표시해야 할 때는 컴팩트한 밀도가 필요합니다.

일반 본문 텍스트는 1.5~1.7이 가장 읽기 좋습니다. 제목처럼 큰 텍스트는 1.1~1.3, UI 버튼이나 레이블처럼 짧은 텍스트는 1.2~1.4가 적당합니다.

콘텐츠 유형 선택

토큰	px	rem	주요 용도
xs	4px	0.25rem	아이콘 내부, 뱃지 padding
sm	8px	0.5rem	인라인 요소 간격, 소형 버튼 padding
md	16px	1rem	카드 내부 padding, 폼 필드 간격
lg	24px	1.5rem	섹션 내 요소 간격, 카드 간격
xl	32px	2rem	섹션 구분, 카드 그리드 gap
2xl	48px	3rem	섹션 간격, 페이지 상단 여백
3xl	64px	4rem	페이지 섹션 구분, 히어로 영역

여백(whitespace)은 비어 있는 공간이 아니라 시각적 리듬을 만드는 디자인 요소입니다. 충분한 여백은 콘텐츠를 더 읽기 쉽게 만들고, 계층 구조를 명확히 전달하며, 고급스럽고 신뢰감 있는 브랜드 이미지를 형성합니다.

반면 대시보드나 데이터 테이블처럼 정보 밀도가 중요한 UI에서는 컴팩트한 여백이 필요합니다. 핵심은 콘텐츠의 목적과 사용 맥락에 맞는 밀도를 선택하는 것입니다.

모든 spacing 값을 8의 배수(4, 8, 16, 24, 32, 48, 64px)로 통일하면 디자인 일관성이 높아지고 개발자와의 커뮤니케이션이 쉬워집니다. Figma, Material Design, Tailwind CSS 모두 이 시스템을 기반으로 합니다.

여백이 많으면 정보가 적어 보이지 않나요?

오히려 여백이 충분할수록 읽기 쉽고 고급스러워 보입니다. 대시보드처럼 많은 데이터를 한 화면에 표시할 때만 컴팩트 밀도가 필요합니다.

적절한 line-height는 얼마인가요?

일반 본문은 1.5~1.7, 제목은 1.1~1.3, 버튼/레이블은 1.2~1.4가 적당합니다.

8px 기반 그리드 시스템이란?

모든 spacing을 8의 배수로 설정하는 시스템입니다. 화면에서 깔끔하게 렌더링되고 개발자와 협업 시 일관성을 유지하기 쉽습니다.