여백이 중요한 이유

웹 디자인에서 '여백'이란 서로 각기 다른 디자인 요소들의 사이의 공간을 지칭합니다. 다시말해 글, 문단, 이미지, 링크, 푸터 사이의 영역이 여백이라 할 수 있습니다. 하지만 여백은 필연적인 '흰 공간'이 아닌, 필수적인 하나의 '빈 공간' 입니다.

여백을 사용하면 웹 사이트의 다른 섹션들과 페이지들을 둘러보는데 도움이 될 뿐만아니라, 서로 다른 디자인 요소들을 비주얼적으로 구분할 때 효과적으로 나타낼 수 있습니다. 또한 어수선하지 않고 깨끗하고 깔끔하게 디자인 할 수 있습니다. 지금부터 웹 디자인과 관련된 여백의(음의 공간 - negative space라고도 불리우는) 여러 측면들을 살펴보도록 하겠습니다.

포커스

웹을 디자인 할때, 여백은 글과 그래픽을 정리하고, 대비를 만들고, 사용자의 시선을 하나의 주제에서 다른 주제로 이끌어내는데 사용됩니다. 이런 점은 웹 사이트를 둘러볼 때의 범위를 늘려줍니다.

여백의 종류

웹 디자인을 하는데에 있어서 두 가지의 여백의 종류가 있습니다. 하나는 '능동적 여백 (active white space)'으로 더 나은 구조와 레이아웃을 위해 디자이너에 의해 의도적으로 비워진 공간을 말합니다. 다른 하나는 '수동적 여백 (passive white space)'으로 웹 사이트의 레이아웃을 디자인 하는 과정에서의 결과물로서, 컨텐츠 내부의 빈 영역이나 페이지 주변의 빈 공간을 말합니다.

 

행간 (Line spacing)

웹 사이트 영역에서 행간의 간격이 충분히 주어진다면 둘러보기가 한결 쉬어질 뿐만 아니라 가독성 또한 높아집니다. 만약 행간의 간격이 너무 좁다면 읽는데에 불편하고, 너무 넓다면 단절 되어버려 사용자에게 혼란을 주게 됩니다.

행간을 레딩(Leading)이라 부르기도 하는데, 주로 글자 포인트 사이즈(pts)의 120-150%로 설정됩니다. 즉, 폰트가 10pts라면 레딩은 12-15pt가 최적이라고 보면 됩니다. 여기서 레딩의 수치가 작아지면 가독성이 떨어지고, 레딩의 수치가 높아지면 사용자의 시선은 분산되고 일관성을 잃게 됩니다.

마진 (Margins)

마진은 웹 디자인 템플렛 상에서 특정 요소 주변의 공간을 말하며, CSS에서 margin을 가지고 조절할 수 있습니다. 레이아웃에 전반적으로 깔려있는 마진을 지속적으로 잘 관리해주면, 웹사이트가 더욱 정돈되고 프로페셔널하게 보일 수 있습니다. 마진을 계획하고 관리할 때는 가로와 세로의 구분을 잘 생각해야 합니다.

마진을 너무 크게 놓으면 단절된 느낌을 주게 되고 스크린 상의 공간을 너무 많이 낭비할 수 있으니, 웹 디자인을 할 때 픽셀이 스크린에 잘 맞는지를 고려해야 합니다.

웹 디자인을 할 때 텍스트가 이미지, 사이드바, 네비게이션, 헤더에 무리하게 붙어있지 않도록 해야하는데, 이 때 마진을 적절히 사용하여 공간에 숨을 넣어주는 것이 좋습니다. 웹 사이트는 일반적으로 해상도 800x600 픽셀 안에서 맞춰야하며, 1024x768까지 확장될 수 있습니다.

 

헤딩 (Headings)

헤딩은 관리하려는 부분 안에 있는 컨텐츠를 나눌 때 굉장히 중요합니다. 헤딩에는 컨텐츠에서 각기 다른 섹션들을 조명해주는 H1, H2, H3 등등의 다양한 헤딩들이 존재합니다. 헤딩의 위, 아래로 여백을 사용하여 서로 관련있는 컨텐츠의 부분들을 적절하게 나눌 수 있습니다.

레이아웃 균형 맞추기

여백은 레이아웃의 균형을 잡는데 사용되고, 충분한 여백으로 사용자의 불편을 최소화 할 수 있습니다. 웹 템플릿은 열린 공간과 컨텐츠의 균형이 잘 맞춰져야 합니다. 여백이 너무 크면 사용자는 페이지가 끝난 것으로 생각할 수 있기 때문입니다.

디자인에서 여백의 중요성이 점차 높아지고 있습니다. 지금은 여백이 단지 배경이라기보다는 디자인의 한 필수적인 요소로 사용됩니다. 많은 디자이너들이 여백을 이용해 컨텐츠를 강조하고, 웹페이지의 가독성을 높이며, 레이아웃의 균형도 맞추고 있습니다.

Refresh Studio

해외 최신 웹/UX 디자인 글과 동향을 소개해 드립니다.