Web Guide여백화이트스페이스디자인 밀도
여백(화이트스페이스)이 만드는 신뢰감
빈 공간은 낭비가 아니라 가장 적극적인 디자인 요소입니다.
'여기 비었는데 뭐라도 넣자'는 요청이 사이트를 답답하게 만듭니다.
01여백이 하는 일
여백은 요소를 구분하고, 중요한 것을 돋보이게 하고, 읽는 속도를 조절합니다. 아무것도 없는 것이 아니라 역할이 있습니다.
고급 브랜드 사이트일수록 여백이 넉넉한 데는 이유가 있습니다. 여백 자체가 여유와 자신감을 전달합니다.
1
구분
여백이 있으면 별도의 선 없이도 영역이 나뉩니다.
2
강조
주변이 비어 있으면 그 요소가 돋보입니다.
3
가독성
글과 글 사이 여백이 읽기 속도를 만듭니다.
4
위계
여백의 크기로 무엇이 한 묶음인지 알려줍니다.
5
인상
여유 있는 여백은 신뢰와 품질의 인상을 줍니다.
02'비었으니 채우자'가 만드는 문제
빈 공간이 아까워 배너나 문구를 추가하면, 화면에 요소가 늘어나 중요한 것이 묻힙니다. 결국 아무것도 눈에 띄지 않게 됩니다.
채우기 전에 '이것이 방문자에게 필요한가'를 물어보세요. 대부분은 필요하지 않습니다.
꽉 채운 화면
정보량은 많아 보임 · 어디를 봐야 할지 모름 · 중요한 것이 묻힘 · 피로감 · 이탈 증가
여백이 있는 화면
정보량은 적어 보이지만 실제로 더 많이 읽힘 · 중요한 것이 눈에 띔 · 편안함 · 신뢰감
03여백에도 규칙이 있다
여백을 아무렇게나 주면 오히려 어수선해집니다. 일정한 간격 체계를 정해 두고 그것만 쓰는 것이 원칙입니다.
8이나 4의 배수처럼 기준 단위를 정하고, 그 배수만 사용하면 자연스럽게 정돈됩니다.
기준 단위
8px 또는 4px. 모든 여백을 이 배수로 씁니다.
요소 내부
가장 좁은 여백. 버튼 안쪽, 카드 안쪽.
요소 사이
중간 여백. 카드와 카드 사이.
섹션 사이
가장 넓은 여백. 주제가 바뀌는 지점.
일관성
같은 위계의 요소는 같은 여백을 씁니다.
04가까운 것은 한 묶음, 먼 것은 다른 묶음
사람은 가까이 있는 것을 하나의 그룹으로 인식합니다. 제목과 본문 사이가 본문과 다음 제목 사이보다 가까워야 제목이 본문에 속한 것으로 읽힙니다.
이 간격이 반대로 되어 있으면 정보가 잘못 묶여 읽힙니다. 흔하지만 놓치기 쉬운 문제입니다.
제목과 본문 가깝게. 한 묶음임을 보여줍니다.
문단과 다음 제목 멀게. 다른 주제로 넘어감을 보여줍니다.
라벨과 입력칸 가깝게. 어느 칸의 라벨인지 명확하게.
확인 방법 눈을 가늘게 뜨고 보면 어떻게 묶여 보이는지 알 수 있습니다.
CHECK POINT
□ 빈 공간을 억지로 채우려 하지 않는가
□ 여백에 일정한 기준 단위가 적용되어 있는가
□ 같은 위계의 요소가 같은 여백을 쓰는가
□ 제목과 본문이 다음 제목보다 가까운가
□ 섹션 사이 여백이 요소 사이보다 넓은가
□ 모바일에서 여백이 지나치게 줄어들지 않았는가
#여백#화이트스페이스#디자인 밀도#간격 체계#가독성#위계#시안 검토#홈페이지 디자인#웹비스타#홈페이지 제작