웹페이지 레이아웃하기 1 - 구성요소의 배치

웹페이지에서의 레이아웃 하기의 의미는 크게는 다음의 두 가지로 요약할 수 있다.
첫째는 페이지 내의 정보를 구성하고 있는 요소를 배열하고 그룹핑하여 웹 페이지를 접한 사용자의 시각적 동선을 정하는 것,
둘째는 심미적으로 적절한 비율로 화면을 분할하여 구성하는 것이다.

따라서 웹 페이지의 레이아웃을 한다는 것은 어떻게 정보 요소를 그룹핑하고 배치 할 것인가 그리고 어떻게 해야 적절한 비율로 화면 분할을 할 것인가에 대한 답을 찾는 행위라고 말 할 수 있을 것이다.

이 글에서는 웹 페이지에서 구성요소를 배치하기 위한 과학적 기준에 관한 연구결과들을 살펴보고자 한다.


인지과학분야 연구결과에 따른 시각요소의 배치

웹 디자인에 있어 정보 그룹핑과 시각적 동선을 정하는 것은 결국 사용자의 정보 습득을 원활하게 하고 이를 전달하고자 하는 목적을 극대화하기 위한 방법이라 할 수 있다. 따라서 웹 페이지의 레이아웃은 아름답기도 해야겠지만 사용자들에게 전달하고자 하는 정보의 메시지를 쉽고 빠르게 전달할 수 있을 때 비로소 성공적인 레이아웃이라고 정의 할 수 있을 것이다.

정보에는 그 중요성에 있어 순서가 있고 시각적으로 이러한 순서가 자연히 감지 될 수 있어야 한다. 사용자가 화면을 바라볼 때 가장 먼저 바라보는 곳에 가장 중요하고 대표적인 메시지가 있어야 함은 물론이고 다음 정보로의 시선의 이동이 자연스럽게 이루어져야 한다는 것이다.
레이아웃 디자인을 할 때는 제한된 공간 안에서 다양한 디자인 요소가 서로 어떻게 조절되며 어떤 시각적 관계를 유지해야 하는가에 대한 근본 원리의 이해가 필요하다.

「멀티미디어 교과서」(이만재, 이상선, 「멀티미디어 교과서」, 안그라픽스, 1999, p. 209.)에 따르면 가로쓰기의 한글 표기에 익숙한 대부분의 사용자들은 다음과 같은 태도를 보인다고 한다.

- ‘화면을 좌측 상단에서 우측 하단의 순서로 훑어본다.
- 화면에 보다 크게 처리된 내용이 더 중요한 정보라고 가정한다.
- 화면의 상단에 위치한 것이 하단의 것보다 더 중요한 것이라고 생각한다.
- 보다 심화된 정보를 찾을 때 화면의 하단을 본다.

웹사이트의 시각요소는 크게 타이포그래피, 일러스트 및 이미지, 아이콘과 배너, 내비게이션으로 대표되는 정보식별표시로 구분할 수 있다. (박진아, 「웹디자인에 있어서 시각커뮤니케이션을 위한 효과적인 레이아웃에 관한 연구 - 국내 대학홈페이지를 중심으로」, 한성대학교 석사학위논문, 2000. p 41.)
타이포그래피는 가장 기본적인 정보 전달 기호이고 메시지를 전달하는 가장 중요한 매체로서 타이틀, 서브 타이틀, 본문으로 구분할 수 있으며 일러스트 및 이미지는 주목성이 큰 그래픽요소로서 사용자의 관심을 끄는데 중요한 역할을 한다. 정보 식별표시는 세부적인 정보를 표시하는 아이콘, 배너광고와 내비게이션을 의미한다.

박진아의 연구 결과에서는 각 속성별 기여도에 대한 우선순위가 '타이틀 - 아이콘 - 이미지 - 광고 - 본문 - 네비게이션 - 서브타이틀'의 순으로 나타났다.
이는 레이아웃에 있어서 주목률의 결과이기도 하다. 각 항목별 최적의 조합 레이아웃 구성은 아래 표와 같다.

시뮬레이션에 의한 레이아웃 요소과 배치의 최적의 조합  

또한 정가경은 「웹에서의 인지 디자인에 관한 연구」 (정가경, 「웹에서의 인지디자인에 관한 연구-웹페이지 레이아웃을 중심으로」, 명지대 산업대학원 석사학위논문, 1999.)에서 쉽게 인지되는 레이아웃의 조건으로 다음의 다섯가지 규칙을 제시하였다.

첫째, 충분한 여백이 있어야 한다. 모니터 화면의 특수성은 인간의 쉬운 인지를 위해 많은 여백을 필요로 한다.(중략)

둘째, 내용 영역은 흰색 바탕화면을 사용하고 일반적인 텍스트는 검정색을 사용한다. 흰색 바탕의 사용은 눈의 피로를 덜하게 하며 많은 정보를 빠르게 읽어내야 하는 시점에서는 흰색배경을 사용하고 색이나 무늬가 있는 바탕화면은 사용하지 않는 것이 좋다.

셋째, 화면 위쪽이나 왼쪽에 목차 영역으로 프레임을 나눈다. 목차 영역의 프래임은 내용 영역의 흰색 바탕화면과 구별되는 색상을 사용한다.(중략) * 여기서 ‘프래임을 나눈다’고 했을 때의 프래임은<frame> Tag를 의미하는 것이 아닌, 시각적으로 화면을 분할하는 역할을 하는 것을 의미한다.

넷째, 많은 배너 광고를 수용해야 할 경우 통일되게 한쪽으로 배치한다. (중략)

다섯째, 웹 페이지의 내용을 계통군으로 묶어 배열한다.(중략)’

웹페이지를 디자인함에 있어서도 화면의 각 요소들은 위의 기준들을 고려하여 배치하도록 해야 할 것이다.

첨부파일 참조

wsguide_1.pdf

이주희, 사용성 향상을 위한 웹 디자인 스타일 가이드(Web Design Style Guide) 연구, 동덕여자대학교 디자인대학원, 2001.

출처 : 이주희, 사용성 향상을 위한 웹 디자인 스타일 가이드(Web Design Style Guide) 연구, 동덕여자대학교 디자인대학원, 2001.

따끈 : 위 글은 저작자의 동의를 얻어 고쳐 쓴 것임을 알립니다.

쓸만한 웹 만들기