[메인 키워드]: 웹 디자인 여백 [보조 키워드]: 여백 활용법, 그리드 시스템, 레이아웃 정렬, 피그마 여백, UI 정돈 [검색 의도]: 요소들을 열심히 배치해도 화면이 지저분하고 읽기 불편해지는 원인을 파악하고, 여백 체계와 그리드 시스템을 적용해 깔끔한 레이아웃을 구축하는 가이드
열심히 글을 적고 이미지와 버튼을 배치해 화면을 완성했는데, 막상 전체적으로 훑어보면 묘하게 지저분하고 완성도가 떨어져 보일 때가 있다. 요소들의 색상이 이상한 것도 아니고 폰트가 틀린 것도 아닌데 어디서부터 손을 대야 할지 난감해진다.
이런 현상이 발생하는 가장 큰 원인은 '여백(White Space)의 불균형'과 '정렬 기준의 부재'다.
화면을 깔끔하게 만드는 비결은 시각적 요소를 더 추가하는 것이 아니라, 요소와 요소 사이의 '빈 공간'을 시스템으로 관리하는 것이다. 여백의 개념을 바르게 이해하고 그리드(Grid) 기준을 세우는 것만으로도 화면의 완성도는 눈에 띄게 상승한다.
1. 여백은 빈 공간이 아니라 디자인 요소다
디자인 초보자들이 가장 많이 하는 오해 중 하나는 '여백 = 비어 있어서 아까운 공간'으로 생각하는 것이다. 그래서 여백이 조금만 생기면 텍스트를 크게 키우거나 쓸데없는 아이콘, 배너를 채워 넣으려 한다.
하지만 전문 디자이너들에게 여백은 요소와 요소를 구분짓고 시선을 쉬어가게 만드는 가장 적극적인 디자인 도구다. 여백은 크게 두 가지로 나뉜다.
마이크로 여백 (Micro White Space): 글자 사이의 간격(자간), 줄 사이의 간격(행간), 버튼 내부의 텍스트와 테두리 사이의 간격 등 매우 촘촘한 요소 사이의 공간이다.
매크로 여백 (Macro White Space): 단락과 단락 사이, 카드와 카드 사이, 화면 좌우 여백 등 큼직한 구획을 나눠주는 공간이다.
화면이 산만해 보이는 이유는 대부분 마이크로 여백과 매크로 여백의 비율이 무너졌기 때문이다. 글자 행간은 답답할 정도로 좁은데 단락 사이 간격은 뜬금없이 넓거나, 반대로 요소들이 서로 너무 바짝 붙어 있어 경계가 모호해질 때 화면은 급격히 정돈되지 않은 느낌을 주게 된다.
2. 8포인트 그리드 시스템으로 간격의 규칙 만들기
그렇다면 여백은 어느 정도 크기로 주어야 적당할까? 매번 "이 정도면 보기 좋겠지" 하고 감으로 13px, 21px, 35px처럼 무작위 수치를 주다 보면 결국 정렬이 깨지게 된다.
이 문제를 해결하기 위해 실무 UI 디자인에서는 8pt(포인트) 그리드 시스템을 표준처럼 사용한다. 모든 여백과 요소의 크기를 8의 배수(8, 16, 24, 32, 48, 64px...)로 고정하여 규칙을 만드는 것이다.
아주 미세한 간격 (아이콘과 텍스트 사이): 8px
일반적인 요소 간 간격 (제목과 본문 사이): 16px
그룹 간의 구획 간격 (카드와 카드 사이): 24px 또는 32px
섹션과 섹션 사이의 큰 여백: 64px 이상
이렇게 간격의 규칙을 8의 배수로 일관되게 고정하면, 화면 내 모든 요소들이 유기적으로 연결되어 시각적 안점감을 준다. 고민하는 시간도 줄어들고 작업 속도도 2배 이상 빨라진다.
3. 화면의 뼈대를 잡아주는 컬럼 그리드(Column Grid)
여백의 수치를 정했다면, 이제 요소들이 들어앉을 정렬 기준선인 '컬럼 그리드'를 세워야 한다.
윈도우 탐색기나 모바일 앱의 화면이 정돈되어 보이는 이유는 눈에 보이지 않는 세로 안내선에 맞춰 모든 콘텐츠가 좌우 정렬되어 있기 때문이다.
웹 화면 디자인 시 가장 많이 쓰는 표준 형태는 12 컬럼 그리드다. 화면을 세로 12개의 기둥(Column)으로 나누고, 기둥과 기둥 사이의 간격(Gutter)을 일정하게 유지한다. 12라는 숫자는 2, 3, 4, 6으로 깔끔하게 나누어 떨어지기 때문에 2단 분할, 3단 분할, 4단 분할 등 다양한 카드 레이아웃을 구성할 때 유연하게 대응할 수 있다.
반면 반응형 모바일 화면에서는 스크린 폭이 좁기 때문에 보통 4 컬럼 그리드를 적용하고 좌우 여백(Margin)을 16px 또는 20px로 고정하여 터치 영역을 확보한다.
요소의 왼쪽 끝과 오른쪽 끝을 이 그리드 안내선에 딱 맞추는 습관만 들여도 "어딘가 모르게 삐뚤빼뚤하고 허술해 보이는" 문제를 완전히 뿌리뽑을 수 있다.
[핵심 요약]
여백은 빈 공간이 아니라 정보의 구획을 나누고 시선에 휴식을 주는 적극적인 디자인 도구다.
여백과 요소 크기를 8의 배수(8, 16, 24, 32px 등)로 고정하는 '8pt 그리드 시스템'을 적용하면 감에 의존하지 않고 일관된 간격을 유지할 수 있다.
웹에서는 12 컬럼, 모바일에서는 4 컬럼 그리드를 기준으로 좌우 정렬 기준선을 맞춰야 화면 전체가 정돈된 느낌을 준다.
[다음 편 예고]
다음 편에서는 수많은 색상 중에서 실패 없이 메인 컬러와 서브 컬러를 조합하는 '60-30-10 법칙'과 가독성을 확보하는 명도 대비 가이드를 다룹니다.
0 댓글