본문 바로가기
생활일기/tip tech

웹 사이트 네비게이션의 기본 원칙

by 신일석 2000. 9. 14.

Charlie Morris의 웹 사이트 네비게이션의 기본 원칙

웹 사이트 설계에 있어서 네비게이션은 가장 중요한 부분 중 하나이다. 웹 사이트가 아무리 멋지고 유용하더라도 편리하고 효율적인 네비게이션 체계를 갖추고 있지 않으면 이용자를 혼란스럽게 하여 몰아내는 결과를 초래할 수도 있다.


 


단순하면서도 논리적이고 이해하기 쉬운 네비게이션 체계를 쓰면 페이지 접속 횟수와 재방문 횟수를 늘리고, 방문객들이 고객으로 바뀌는 비율인 "변환율" 또한 향상시킬 수 있다. 네비게이션 체계는 웹 사이트 설계의 중요한 일면으로서 근본적으로 직접적인 영향을 끼친다.


 


좋은 네비게이션이란 상식의 문제이지만 이 상식이란 사이버 공간에서 대개 부족한 개념이다. 물론 사이트 타입에 따라 조금씩 바뀌기도 하지만 대부분의 사이트에 적용할 수 있거나 아니면 적어도 거의 모든 비즈니스 사이트에 적용할 수 있는 특정 기본 원칙들이 있다.


 


대부분의 책들이 목차와 인덱스를 갖는 것처럼, 잘 설계된 웹 사이트들은 비슷한 네비게이션 구조를 갖는 경향이 있다. 하지만 몇 가지 웹 네비게이션 이슈들에 대해 많은 주장들이 엇갈리고 있고 모든 사이트들이 각기 다르기 때문에, 별난 방법이 제공된다면 일단 한번 사용해 보아도 좋다. 단지 네비게이션 체계를 잘 고려하여 논리적으로 만들기만 하면 된다.


 


이 글에서는, 사람들에게 제품이나 서비스에 대해 알려 실제로 제품이나 서비스를 온라인 상에서 판매하는 것을 목적으로 삼은 사이트를 대상으로 한다. 그러므로 예술적 속성을 가진 사이트에서는 일반적인 배치 규칙을 적용할 수 없을 수도 있다. 예를 들어 온라인 사진 전시는 방문객들이 사진들을 순차적으로 볼 수 있게 하거나 사이트가 신비한 분위기를 풍기도록 할 수도 있고, 이용자들이 어디로 가야할 지 생각할 필요도 없다. 하지만 대부분의 사이트들에서는 기본 규칙들이 분명하다.


 


1. 이 사이트에서 무엇을 이용할 수 있는지 이용자에게 정확하게 밝힌다.


2. 원하는 부분에 빨리 도달할 수 있게 한다.


3. 추가 정보를 쉽게 요구할 수 있게 한다.


 


 


좋은 네비게이션은 이용자가 보는 바로 첫번째 페이지와 함께 시작되는데, 이것은 홈페이지 그 자체이거나 눈길을 끄는 스플래쉬(Splash) 페이지, 또는 유틸리티 페이지(더 좋은 용어가 필요할 것 같지만 일단 이렇게 부름)가 될 수 있다.


 


어떤 웹 디자이너들은 웹 페이지가 모든 이용자에게 같은 모양으로 보이지 않는다는 사실에 집착하여, 이 문제를 해결하기 위해서 여러 웹 사이트들을 설계하고 각 설계가 특정 웹 서퍼들의 집합에 대하여 잘 보이게 한다. 이 방법은 다른 사이트들의 선택이 사용자에게 명확하다면 시도해볼 만한 좋은 방법이다.


 


또한 사이트를 두 개의 버전으로 만들어놓는 방법도 있다. 예를 들어 Netscape를 위한 것과 Explorer를 위한 것 또는 다른 새로운 브라우저를 위한 버전과 Luddites를 위한 버전을 함께 설계할 수 있다. Java 스크립트를 이용하여 특정 이용자가 어떤 브라우저를 사용하는지 확인하고 적당한 버전을 보여주면 되는데, 제대로 동작하기만 한다면 아주 좋은 방법이라고 할 수 있다.


 


하지만 어떤 디자이너들은 이용자에게 선택권을 준다. 예를 들어, 프레임을 포함한 버전과 포함하지 않은 버전 또는 대역폭이 높은 버전과 텍스트로만 구성된 버전으로 디자인하는 것이다. 선택 방법과 사이트 설계가 제대로 통합되기만 하면 이 방법도 그리 나쁘지는 않다.


 


적당한 용어를 찾기가 어려운 "유틸리티 페이지"는 주 URL에 접속한 이용자들에게 사이트의 다른 버전들을 선택할 수 있도록 볼품없는 평이한 텍스트 페이지를 보여주는 것을 말한다. 때때로 그러한 페이지들은 특정 브라우저를 다른 브라우저보다 추천하기도 한다. 어떤 디자이너들은 극단적으로 이용자가 특정 브라우저 버전을 갖고 있는지 확인하게 하거나, 사용자의 윈도우를 전체 크기로 만들거나 사이트에 접속하기 전에 스크린 해상도를 조정하라고 하기도 하는데, 가급적 그렇게까지는 하지 말았으면 한다.


 


이용자가 보는 첫번째 페이지는 여러분의 대문이며, 매력적으로 보여야 한다. 만약 사이트의 다른 버전들을 선택하게 한다면 그러한 선택들은 홈페이지에서 결정하도록 하는 게 좋다. 아무리 시간과 돈을 많이 들여 사이트 전체를 꾸몄어도 이용자와 첫 대면을 하는 페이지를 평이한 텍스트로 만든 보잘것없는 흰색 페이지를 내놓으며 이용자가 클릭하길 바라는 건 어리석은 짓이다. 그와 같이 아마추어 수준으로 보이는 홈페이지는 일부 이용자들이 돌아서는 것을 감수해야 할 것이다.


 


그래서 "스플래쉬" 또는 "엔트리" 페이지가 필요한데, 그것이 화려한 입장을 제공하는 기회로 충분한 가치가 있다고 생각하는 디자이너들도 있다. 많은 디자이너들이 그렇게 중요한 첫인상을 아주 화려한 그래픽으로 장식하기를 바란다. 그것을 홈페이지에 두는 것은 실용적이지 않기 때문에 화려한 페이지를 따로 두어 이용자를 실제 홈페이지로 유도한다.


 


잘 디자인된 스플래쉬 페이지는 META REFRESH 태그를 사용하여 몇 초 후에 자동으로 홈페이지를 로드하며, 클릭할 수 있는 개체를 갖고 있어서 방문객이 지정된 몇 초가 지나기 전에 클릭하면 홈페이지로 인도한다.


 


그러나 스플래쉬 페이지로 결정하기 전에 먼저 이 점을 숙고해 보아야 한다. 그래픽 디자인, 애니메이션, 또는 그래픽 작품들을 보여주는 사업이라면 스플래쉬 페이지를 쓰는 것이 좋겠지만, 대부분의 비즈니스 사이트들에서는 필요가 없다. 스플래쉬를 쓰면 시간이 지연된다고 화내는 이용자도 있을 것이다. 대부분의 사람들은 즐기기 위해서가 아니라 정보를 얻기 위해 비즈니스 사이트를 방문한다는 것을 언제나 염두에 두어야 한다.


 


 


이제 드디어 홈페이지를 살펴보자. 잘 디자인된 홈페이지는 다음과 같은 특징들을 갖는다.


 


1.     사이트에서 이용할 수 있는 것의 개요가 있고, 홈페이지로부터 사이트의 각 섹션에 바로 또는 2~3번만 클릭하면 도착할 수 있다.


2.     매력적이고 회사에 대한 올바른 이미지를 전달하면서도 합리적으로 짧은 시간 내에 홈페이지를 로드할 수 있다. 재치있는 그래픽과 빠른 페이지 로딩 사이 균형이 잡혀 있다.


3.     회사 또는 제품의 브랜드 이미지가 뚜렷해서 이용자가 현재 자신이 무슨 사이트를 보고 있는지 즉시 알 수 있다.


4.     사이트 전체가 특정 요소들을 공유하여 모든 페이지들이 조화를 이루므로 이용자가은 그 페이지들이 서로 관련없는 페이지들의 단순한 묶음이 아니라 같은 사이트에 속한다는 느낌을 가질 수 있다.


5.     홈페이지는 일반적으로 회사에 대한 간략한 설명에 있어서까지 적은 양의 내용을 포함하지만, 그것의 주요 목적은 실제 내용을 포함하는 다른 페이지들에 대한 링크들의 리스트를 제공하는 것이다. 홈페이지는 책이나 잡지에서 내용의 목차와 많이 비슷하다.




대부분의 비즈니스 홈페이지들은 다음과 같은 사항을 링크해 놓는다.


 



  • 회사 소개

  • 제품 및 서비스들

  • 연락처


온라인으로 제품들을 판매하는 사이트라면 "여기에서 주문하세요"라는 링크를 추가로 만들어 놓아야 한다. 주문 페이지까지의 클릭 수가 적을수록 더 많은 주문들을 얻을 수 있다는 것은 실제 통계적으로도 확인된 사실이다.

주문 페이지를 홈페이지로부터 1클릭에 갈 수 있도록 하고, 다른 모든 페이지들에서도 그렇게 하는 것이 좋다. 실제로 "주문하는 방법" 또는 다른 비슷한 링크를 두는 것이 좋으며, 이용자에게 그들이 신용카드 번호를 입력하기 전까지는 이제까지 한 어떤 주문도 실제로는 처리되지 않는다는 것을 명확히 해야 한다. 어떤 유명한 (그리고 잘 디자인된) 사이트는 다음과 같은 비압력 버튼을 제공한다.

"
쇼핑백에 넣기(항상 추후에 삭제할 수 있습니다.)"
물론 대부분의 사이트들은 그들의 홈페이지에 앞에서 언급한 네가지 네비게이션 아이템들 이상을 포함할 것이다. 홈페이지에 무엇을 포함시킬 것인지는 사이트의 목적에 따라 다를 수밖에 없다. 중요사항과 이용자가 보고 싶어하는 것들이 여러 단계들 아래에 파묻혀 있어선 안 된다. 바로 홈페이지에 위치해야 한다.

또한 네비게이션 타이틀로 재치있지만 모호한 단어를 사용하고자 하는 유혹에 넘어가서는 안 된다. 물론 위에서와 같은 아주 평범한 예문에까지 집착할 필요는 없다.


 



  • 우리의 소개

  • 우리가 하는 일

  • 우리를 찾을 수 있는 곳


이와 같은 문장들 또한 전혀 문제가 없다. 이 문제에 대해서는 이 정도로 넘어가도록 하겠다. 그러나 그 전에 거듭 강조하자면, 비즈니스 사이트의 목적은 정보를 제공하는 것이지 단어 게임을 즐기는 것이 아니다. 컴퓨터를 판매하는 회사에 속하는 (다소 잘 디자인되지 못한) 다른 어떤 사이트는 소(cow)를 주제로 사용하였다. 한 때 그들의 홈페이지에는 선택메뉴가 다음의 두가지 밖에 없었다.


 



  • 소 나라

  • 소 코너


도대체 둘이 어떻게 다른지, 어떻게 저렇게 해 놓고 클릭하길 바라는지 알 수 없다. 이용자들이 호감을 갖도록 하고, 그들이 링크를 클릭했을 때 얻을 수 있는 것을 명시해 놓아야 한다. 또한 사이트에 다운로드 가능한 파일들, 오디오 또는 비디오 링크들, 또는 대역폭을 많이 차지하는 다른 것들이 있다면 각 링크 옆에 파일 크기를 보여주어 이용자들이 그것을 클릭했을 때의 상태를 짐작할 수 있게 해야 한다.


 

대부분의 사이트들은 계층적 배열을 사용한다. 다른 말로 하면 이용자들은 세부적으로 점점 더 큰 레벨로 들어갈 수 있다. 계층을 홈페이지가 꼭대기에 위치하고 가장 세부적인 부분을 밑변으로 하는 삼각형으로 생각했을 때, 적당하게 정삼각형에 가까워야 계층이 의미를 갖는다.

만일 홈페이지가 두개의 페이지들로만 연결되어 있고, 각 링크가 다시 두개의 페이지를 연결하는 식의 구성이 반복된다면 중간단계가 너무 많아진다. 소규모 웹 사이트는 일반적으로 두단계로 구성되고, 중간 규모의 사이트들은 홈페이지와 실제 내용을 갖는 하위 레벨 사이에 중간 단계의 허브 페이지들을 갖는 것이 보통이다. 물론 어떤 섹션들이 다른 것들보다 더 단계가 많을 수도 있다.

각 페이지는 어느 정도의 길이가 적당한가?
이것은 부분적으로는 주장하기 나름이며 각 사이트마다 크게 다르다. 긴 내용을 하나의 페이지에 놓으면 이용자가 그것을 모두 보기 위해서는 여러 스크린을 스크롤 다운해야 하기 때문에 그것을 쪼개어 여러 페이지들에 나누어 놓아야 한다고 믿는 사람들이 있는가 하면, 긴 페이지를 스크롤 다운하는 것이 다른 페이지에 대한 링크를 클릭한 후에 로드되기를 기다리는 것보다는 덜 귀찮다고 주장하는 사람들도 있다.

프로그래밍과 네트워크에 관련된 정보를 제공하며 이에 맞춰 디자인된 사이트들은 거의 항상 긴 페이지 모델을 따르는 반면 고객 지향 사이트들은 많은 경우 페이지 수는 많지만 길이는 짧은 디자인을 선택한다.

어떤 온라인 잡지들 또는 "컨텐트(텍스트) 기반" 사이트들은 금전적 이유 때문에 이와 같이 디자인하기도 한다. 전송되는 페이지 접속 횟수와 광고 수입이 비례하기 때문이다. 이용자의 관심을 유지하는 기사를 5 페이지로 나누면 한 페이지 대신 다섯 페이지 접속을 기록할 수 있다.

그렇게 해서 검색 엔진에서 찾기도 더 쉽고, 기사 유지도 더 수월해진다. 하지만 작가는 자신의 내용이 너무 많은 페이지들로 나누어지는 건 달가와하지 않을 수도 있다. 디자인이 받쳐주기만 하면 한 페이지가 몇 마일이 되도록 스크롤 다운을 해도 전혀 문제가 안 된다.

긴 페이지의 맨 위에는 페이지의 각 섹션에 대한 하이퍼링크들과 목차가 있어야 한다. 적당한 지점에 NAME 하이퍼링크 태그들을 삽입하고 다른 섹션들을 링크하기 위해 "#"을 사용하면 된다. 예를 들면 다음과 같다.

A HREF = "long_page.html#section1"
A HREF = "long_page.html#section2"

또한 "페이지 처음" 링크를 이곳 저곳에 포함시킬 수도 있다.

'생활일기 > tip tech' 카테고리의 다른 글

팝업관련 모든 것 [펌]  (0) 2006.03.03
tar 사용법  (0) 2006.03.01
네비게이션 접근 법 10가지 법칙  (0) 2000.10.31