인터넷 뉴스 사이트 레이아웃 구조를 어떻게 설정해야 하는가?

인터넷 뉴스 사이트를 디자인한다고 할 때, 가장 먼저 고민해야 하는 것이 전체적인 레이아웃 구조를 어떻게 가져가야 하는 것인가이다. 레이아웃 구조를 어떻게 설정하냐에 따라 전체적인 디자인이나 컨텐츠 구성 방식이 달라지기 때문이다. 이때, 동시에 고려해야 하는 것이 Business Goal과 User Goal이다. 두 가지 목적 중 어떤 한 가지 목적에만 치우친다면 반쪽 짜리 사이트가 될 것이며, 결국 사용자들에게 외면을 받을 것이다.

 

또한, 우리는 동시에 레이아웃 구조의 특성에 대해서 잘 알고 있어야 한다. 여기서 언급할 레이아웃 구조를 크게 두 가지 관점에서 보았다. 하나는 단 구성을 중심으로 한 레이아웃 구조이며, 또 다른 하나는 내비게이션과 컨텐츠를 중심으로 한 레이아웃 구조이다. 두 가지 관점은 서로 배타적인 것이 아니라, 병행해서 고려할 수 있는 것이다.

 

 

1. 단 구성을 중심으로 한 레이아웃 구조

 

1) 2단 구성

구조가 단순하기 때문에, 내비게이션을 쉽게 하고 정보의 가독성을 높일 수 있다는 장점이 있다. 하지만, 적은 단 구성으로 많은 양의 정보를 담을 수 없다는 단점이 있다. 특히, 배너 광고와 부가 서비스 메뉴 등이 놓여질 공간이 적절하지 않기 때문에 세심한 주의를 기울여야 한다.

 

2) 3단 구성

많은 뉴스 사이트들이 사용하는 구성방식으로서 2단 구성보다는 많은 양의 정보를 담을 수 있으며, 배너 광고 등이 놓여질 공간을 확보할 수 있다는 장점이 있다. 그러다 조밀한 텍스트이 나열을 초래하기 쉽기 때문에 가독성 측면에서는 그다지 좋다고 할 수 없다.

 

3) 4단 구성

다양한 정보를 서비스하는 포털 뉴스 사이트에서 자주 볼 수 있는 구성이다. 그만큼 4단 구성은 매우 많은 양의 링크 정보 등을 그룹핑하는데 효율적인 구성이 될 수 있다. 하지만 이용자의 시선을 줄 수 있는 가능성이 높아지는 것이 문제가 된다. 2단과 3단 구성에 비해 상대적으로 더 많은 배너 광고를 삽입할 수 있다. 가장 큰 문제는 가독성인데, 3단 구성과 비교하여 사용자들은 매우 빡빡한 텍스트들을 접하게 되어,자신이 원하는 정보를 찾는 것이 더욱 힘들어진다.

 

 

2. 내비게이션과 컨텐츠를 중심으로 한 레이아웃 구조

 

1) 뒤집힌 7자형 (Inverted 7 Layout)

가장 일반적으로 많이 사용되는 것으로서, 이용자가 정보 탐색을 위해 화면을 주시하는 순서에 따라 구성된 가장 효율적인 레이아웃이라고 할 수 있다. 화면 상단에 수평적인 패널이 놓여있고 왼편에 내비게이션을 위한 패널이 놓이며 오른쪽의 패널은 개방되어져 있는 레이아웃이다. 전달해야 하는 정보량이 많은 사이트의 경우에 이 레이아웃에 사용하며 왼편에 내비게이션 패널을 둠으로써 보다 체계적인 내비게이션을 제공할 수 있는 인터페이스를 구성하게 된다.

 

2) L자형 (L-Shaped Layout)

이 레이아웃 또한 인터넷 인터페이스를 위한 레이아웃으로 많이 사용되는 것으로, 왼편에 내비게이션을 위한 요소들을 수직적으로 배열하고 하단에 광고나 추가적인 내비게이션 도구를 제공하는 레이아우엇이다.

 

3) 양쪽으로 단을 이룬 레이아웃 (Double-Task Layout)

이 레이아웃은 스크린의 좌측과 우측 모두에 수직적인 단을 배치하고 화면 중앙에 텍스트 등의 내용을 배치하는 것이다. 메뉴가 많은 경우나 광고가 많은 경우에 경제적인 방법으로 사용딜 수 있는 레이아웃이지만, 화면이 너무 조밀해 보이는 단점도 있다.

 

4) 개방형 (Open Layout)

이 레이아웃은 가장 깔끔하고 사용하기 쉬운 레이아웃으로 내비게이션 요소들이 화면의 상단에만 나타나는 것으로 내비게이션 버튼이 적은 사이트에 이상적인 레이아웃이다.

 

 

크게 두 가지로 구분한 것을 적절하게 병행해서 사용하고 있는 것이 현재 네이버의 뉴스 서비스이다. 네이버 뉴스 서비스는 3단 구성으로 뒤집힌 7자형(Inverted 7) 레이아웃 구조를 사용하고 있다. 그리고 현재 대부분의 뉴스 사이트에서 가장 많이 선택하고 있는 구조이다.

 

 

전체적인 레이아웃 구조를 선택했다면, 그 다음 고민을 해야 하는 것이 좌우측 그리고 중앙 영역의 넓이(Width)를 어떻게 가져가야 하는 것이다. 이 때 여러 가지 요인들을 중심으로 생각할 수 있지만, 이 때 가장 우선적으로 고려해야 하는 것이 뉴스 서비스의 핵심이 라고 할 수 있는 뉴스 기사 컨텐츠가 보이는 중앙 영역이다. 가장 우선적으로 뉴스 기사를 잘 읽힐 수 있도록 해야 결국 그 서비스가

성공할 수 있기 때문이다.

 

언어심리학에서는 필요 이상이 긴 줄은 가독성을 떨어뜨리고 지루함을 주며, 너무 짧은 글줄은 빈번한 눈의 정지를 요하기 때문에 독서 속도를 감소시킨다고 한다. 컴퓨터 화면의 적당한 자간과 행간은 문장을 읽어 내려가는 데에 있어서 줄의 혼돈을 일으키지 않게 한다. 즉, 다음 줄을 정확하게 찾으려는 행간 도약 운동 (Saccadic eyemovement)을 할 때, 응시 시간(Gaze duration)에 큰 영향을 미치고 행간의 간격이 150% 이하가 되면 가독성이 떨어지게 된다.

 

Cybil Burt는 독자들이 대개 글자가 아니라 전체 형태를 통해 문맥을 이해하며, 한순간 볼 수 있는 범위는 가로 세로 1인치, 즉 12 포인트 활자 6자폭이라고 주장하고 있다. 또한 기능적 신문 디자인을 주장한 Edmund Arnold는 가독성이 가장 높은 글줄의 길이를 5.3cm로 잡고 있으며, 최소 길이를 3.7cm, 최대 길이를 8.6cm로 잡고 있다.

 

이것을 인터넷 뉴스에 적용하면 Width를 150~349 pixel로 볼 수 있으며, 최적의 글줄 길이가 215 pixel로 볼 수 있을 것이다. 하지만, 실제 오프라인과 온라인의 특성을 감안하고, 온라인 뉴스 서비스에서는 사용자가 원할 경우 폰트 사이즈를 자유롭게 변경할 수 있기 때문에 이 기준을 그대로 사용하기에는 무리가 있다.

 

하지만, 분명한 것은 레이아웃이나 Wireframe을 설계할 때 반드시 뉴스 기사를 먼저 고려하여 Width를 설정해야 한다는 것이다. 가독성을 최대한 높이면서 사용자들이 편하게 기사를 읽고 다른 기사를 탐색할 수 있는 Width를 설정해야 하는 것이다.

 

이러한 것들을 고려해서 레이아웃 구조나 Wireframe을 만든다면, 사용자의 경험을 극대화시킬 수 있을 것이다.