UI 여백과 밀도 설계의 원칙
여백(whitespace)은 비어 있는 공간이 아니라 시각적 리듬을 만드는 디자인 요소입니다. 충분한 여백은 콘텐츠를 더 읽기 쉽게 만들고, 계층 구조를 명확히 전달하며, 고급스럽고 신뢰감 있는 브랜드 이미지를 형성합니다.
반면 대시보드나 데이터 테이블처럼 정보 밀도가 중요한 UI에서는 컴팩트한 여백이 필요합니다. 핵심은 콘텐츠의 목적과 사용 맥락에 맞는 밀도를 선택하는 것입니다.
8px 기반 그리드 시스템 활용
모든 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의 배수로 설정하는 시스템입니다. 화면에서 깔끔하게 렌더링되고 개발자와 협업 시 일관성을 유지하기 쉽습니다.