[노주환의 유저인터페이스] 해상도와 적당한 너비

원본소스 : http://korea.internet.com/channel/content.asp?kid=3&cid=207&nid=29925

저자: 노주환 |  날짜:2004년 06월 21일

 

웹 디자인에 있어 가로 폭(width, 너비)은 제한적이다. 즉 두 개의 스크롤이 생기는 것을 방지하기 위해 가로 폭은 해상도에 최적화될 수 있는 사이즈로 제한되어 왔다.

불과 몇 년 사이에 사용자의 해상도는 매우 다양해져서, 지금의 웹 디자인은 800, 1024, 1280, 1600 픽셀(가로 폭 기준)의 해상도를 모두 만족시켜야 한다. 이것은 매우 어려운 문제이다.

미국이나 영국은 모뎀 사용자와 지각수용자(laggards)로 분류되는 전통지향적 사용자(새로운 제품을 가장 늦게 받아들이는 소비자, 이들은 아직도 15인치 모니터를 사용하는 경우가 많다)를 고려하여, 지금도 아래 그림의 델(www.dell.com)처럼 800*600 해상도의 디자인을 쉽게 볼 수 있다.

그런데 이러한 디자인은 1024*768 해상도까지는 무난하지만, 그 이상의 해상도에서는 과도한 여백으로 인해 디자인 의도를 제대로 전달할 수 없게 된다. 아래 그림을 보면 알 수 있듯이, 해상도 1280*1024로 브라우징한 디자인은 여백이 너무 크다. 만약 더 높은 해상도로 브라우징한다면, 여백은 더 커질 것이다.

해상도 1280*1024에서 브라우징한 델 컴퓨터 사이트

여백은 디자인의 한 요소로써 중요한 역할을 수행하지만, 과도할 경우에는 오히려 오브젝트를 방해하여 커뮤니케이션의 왜곡을 불러일으킬 수 있다. 따라서 여백은 전략적으로 활용하여 의미있는 공간으로 만드는 것이 중요하다.

지금처럼 다양한 해상도의 사용환경을 고려한다면, 레이아웃을 가운데 정렬로 두는 것이 더 바람직하다. 이것은 여백을 대칭적(symmetric)으로 배치함으로써 여백을 분산시키는 효과가 있다. 물론 관습적으로 형성되어 온 시각적 우선순위(visual priority, 좌상단이나 중앙 상단이 시각적 우선 순위가 높다고 알려져 왔다)로 인해 시선 유도에 있어 다소의 혼란은 있을 수 있다(필자는 혼란의 정도가 미미한 수준으로 생각한다). ‘AOL(www.aol.com)’처럼 레이아웃을 가운데 정렬하고 여백을 의미있게 처리한다면 해상도 차이를 어느 정도 극복할 수 있을 것으로 본다.

해상도 1280*1024에서 브라우징한 AOL 사이트

높은 해상도의 사용자가 많아졌다는 사실은 디자인할 수 있는 가로 폭이 더 넓어졌다는 것을 의미한다. 네비게이션도 더 넓게, 콘텐츠 영역도 더 넓게 디자인할 수 있게 되었다. 그렇다면 적당한 가로 폭(너비)의 기준은 무엇일까?

한 영역에 어느 정도의 콘텐츠를 담아야 적당할 것인가? 이에 대해 해상도, 상대적인 비율, 디자인 의도 등을 거론할 수 있지만, 무엇보다도 그 기준은 사용자에 두는 것이 옳다. ‘HCI를 통한 웹사이트 사용자 경험의 향상 방법(김진수, 야후코리아)’에서 “사용자 입장에서는 안구를 적게 움직이면서 정확하게 대상을 지각하는 것이 가장 경제적이라 할 수 있다”라고 밝히고 있다.

즉, 시선의 움직임이 적게 일어날 수 있도록 디자인하는 것이 바람직한데, 그 영역의 크기를 시각적 각도로 환산하면 약 5도 정도에 해당한다(참고로 시각으로 1도는 대체로 성인이 팔을 뻗어서 엄지 손가락을 폈을 때 그 엄지 손가락의 폭 정도에 해당한다).

네비게이션을 예로 들어보자. ‘SYBASE(www.sybase.com)’은 초기 화면만 고정 픽셀을 사용하고 있고, 나머지 페이지는 화면 전체(상대적 크기)를 사용하고 있다. 이런 방식은 ‘반즈앤노블즈(www.bn.com)’에서도 채택하고 있는데, 초기 화면은 주로 분기(branching) 역할을 하므로 전체적인 내용을 조망할 수 있어야 한다. 그래서 고정 픽셀을 사용하는 것으로 보인다.
아래 그림의 네비게이션 너비는 좁은 편은 아니어서, 한 눈에 파악하기는 쉬운 편은 아니다. 그래도 1~2회의 안구 움직임으로 네비게이션을 파악할 수 있다.

www.sybase.com의 초기 화면

그런데 화면 전체를 사용한 서브 페이지의 경우, 네비게이션 너비가 너무 넓어 네비게이션의 내용을 제대로 파악하려면 3회 이상의 안구 움직임이 필요하다.

www.sybase.com의 서브 페이지

높은 해상도의 사용자가 많아졌다는 사실은 가로 폭의 가용 범위가 넓어졌다는 것을 의미하기도 한다. 디자인 할 수 있는 공간이 넓어졌다고, 요소들의 사이즈가 덩달아 커질 필요는 없다. 최근 리뉴얼된 사이트 중에는 높은 해상도에 맞춘다고 네비게이션을 더 넓게 디자인한 경우가 많다.

해상도가 높아졌다고 사용자의 시각(visual angle)도 넓어졌다고 착각해선 곤란하다. 만약 네비게이션이 눈에 잘 들어오지 않는다고 생각된다면, 우선 네비게이션의 너비부터 점검해 보자.