성공적인 웹 UI 설계

성공적인 웹 UI 설계 HCI연구회 전은용 상호작용과 컨텐트 중심으로 다루어지던 웹을 사용자 중심의 정보관리와 사용자 인터페이스로 재조명해 봄으로써 웹 개발 프로세스 상에서나 개발 후 사용자가 사이트 내에서 효율적으로 정보를 검색하고 사용자의 욕구를 충족시킬 수 있도록 웹의 UI을 조망해 본다. 초창기의 웹은 간단한 문서, 그림, 약간의 상호작용으로 만들어졌다.

초기 HTML과 브라우저는 백그라운드 칼라나 복잡한 그래픽디자인은 상상할 수 없었기 때문이다. 그러나 1994년 넷스케이프 네비게이션의 소개와 함께 웹은 급속한 변화를 갖게 되었다. 이미지와 음성, 동영상 등의 멀티미디어와 그래픽 사용자 환경의 제공으로 학술망이었던 인터넷이 일반인들도 쉽게 접할 수 있고 사용할 수 있게 된 것이다.

인터넷은 네트워크의 네트워크를 형성하며 기존의 매체들을 웹으로 흡수하기 시작하였고, 지금의 정보화 사회의 기반인 동시, 사이버 세계를 열 수 있는 기초를 마련하는 미디어로서의 자리를 굳히게 되었다.

이제 웹은 단순한 홍보사이트나 브로슈어 개념의 홈페이지가 아닌 사이버커뮤니티와 전자상거래를 가능하게 하는 중요한 매체로서 인식되고 있다. 즉 정보제공자 중심에서 사용자 중심으로의 변화가 요구되고 있는 것이다.

 사용자의 사용성이 배제된 상태의 웹은 더 이상 생각할 수 없으며 매체로서의 구실을 다했다고 할 수 없기 때문이다.

1. 웹의 주변 환경변화와 사용자 인터페이스 온라인 출판으로 시작된 웹은, 현재는 전자상거래, 금융, 가상 공동체, 마케팅, 광고 등의 다양한 분야에서 실생활과 밀접하게 연관되어 발전하고 있다. 기업에서도 웹 사이트가 회사와 제품의 홍보 뿐 아니라 마케팅과 제품 판매 매출 및 서비스에 막대한 영향을 미치는 중요한 매체로 인식하고 앞을 다투어 전자상거래(e-commerce)에 관심과 노력을 기울이고 있다.

그러나 초기의 웹은 규모도 그리 크지 않았고, 단방향적이고 정적인 형태의 정보를 사용자에게 일방적으로 제공하는 수준이었다. 그러나 CD-ROM의 상호작용과 컨텐트에 익숙해진 사용자들이 시각적으로 훌륭한 사이트를 선호하게 되면서, 적은 상호작용을 제시하는 웹사이트를 방문하는 것을 꺼려하기 시작했다.

하지만 이같은 기대에 반해 기반시설이나 모뎀의 속도는 이런 문제들을 해결하기 어려운 시점이어서 웹 개발자들은 사용자의 요구와 실제 사용자 인터페이스의 구현상에 어려움을 겪는다. 그러나 점차 웹 사이트에 관한 기술이 발전하고, 사용자의 요구 또한 더욱 증가함에 따라서 사용자와 웹 사이트와의 양방향 커뮤니케이션을 가능하게 하기 위해 웹사이트도 동적으로 변화하게 되었다.

 CGI , 자바, 데이터베이스 처리 등 웹 관련 기술들이 추가되고 발전하게 되면서 웹 사이트는 더 이상 컨텐트만이 아닌 질 높은 서비스와 인터넷 상에서 다양한 가능성을 제시하게 되었고 이로 인해 UI는 더욱 중요하게 인식되고 있다.

이제 더 이상 기능적인 측면이 무시된 채 사용자의 요구를 뒤로하고, 구현에만 급급한 웹 사이트로는 사용자를 끌어들일 수 없게 되었다. 또 디자인적으로 룩앤필(look & feel)만 좋고, 동적인 요소로 사이트를 방문한 사용자들을 잡아 두는 것 역시 역부족이 되었다. 더 이상 의미없는 기술이나 그래픽을 남용하는 것 보다, 사이트마다 다양한 목적과 사용된 기술을 각각 다르게 하고, 무엇을 목적으로 어떻게 사용하도록 하는가를 더욱 중요시 다루어야 한다. 정의된 목적을 구현할 수 있도록 하는 것이 바로 웹에서의 UI이라 할 수 있을 것이다

2. 웹 기반 기술의 패러다임의 변화와 사용자 인터페이스 다이나믹 HTML,자바, CGI등 여러 기술들의 혼용과 넷스케이프, 익스플로러 등의 사용자마다 다른 브라우저 환경은 웹 구현을 더욱 어렵고 혼란스럽게 만든다. 이런 제약은 웹이 다른 프로그램이나 CD-ROM등의 UI보다 더 어려움을 겪게 되는 이유일 것이다. 이를 해결하기 위해 개발자들은 가장 낮은 버전의 브라우저에 맞추거나 테스트를 거치며 여러 버전으로 제작해서 사용자가 선택하게 하거나, 안내 메시지를 통해 사이트의 환경을 제한하는 방법을 사용하고 있다.

웹사이트의 트렌드 역시 웹 관련 기술이 새롭게 선보일 때마다 변화하였다. 프레임이 처음 등장했을 당시, 거의 모든 대다수의 굵직굵직한 사이트들은 프레임을 사용했고 이것은 트렌드로 인식될 만큼 많은 사이트의 네비게이션에서 사용되었다.

하지만 근래는 많은 사이트들이 프레임을 배제한 형태로 가고 있다. 심지어 사용성 평가 측면에서 프레임은 나쁜 점수를 받는 요소로 작용하기도 한다. 이유는 프레임이 관리상과 네비게이션 상에서의 주는 장점보다 프레임으로 이루어진 문서에서 프레임으로 구성된 문서로 이동할 경우 프린트의 문제점이나 북마크 기능의 문제점, 프레임이 화면을 너무 많이 차지 할 경우 되돌리기 시 오류 등 불편한 점들이 많았기 때문이다.

유명한 사이트들의 웹마스터들은 프레임의 시대는 끝났다고 말하지만 그렇다고 꼭 그것을 따라야 할 필요는 없다. 사이트에서 frames/no frames의 옵션을 찾는 사용자는 극히 소수이기 때문에 프레임이 주는 장단점 중 단점만 부각시켜 반드시 배제해야 할 요소로만 치부 할 수는 없기 때문이다.

요즘은 웹 상에서 전자 상거래가 거론되면서 현재의 많은 웹 관련 기술들은 이와 관련된 구현 부분에 대해 집중되고 있다. 초창기가 기술이 주도한 트렌드라면, 현재는 UI나 사회적 이슈 등 사용자의 트렌드가 반영된 기술구현으로 가고 있는 것이다.

3. 웹 개발 프로세스와 사용자 인터페이스 제대로 된 프로세스는 제대로 된 사이트를 만든다. 미쳐 계획도 되지 못한 사이트라면 사용자 인터페이스를 고려할 수 없을 것이다. 프로세스의 과정에서 UI를 위해 꼭 집고 넘어가야 할 부분들이 있다

① 목표를 정의해야 한다.

즉, 사용하게 될 사용자를 정의하고 그에 부합되는 목적을 정의해야한다. UI면에서나 효율적인 웹사이트 구축을 위해서는 무엇보다도 목적이 명확해야 한다. 사용자그룹을 정의할 경우는 좀더 확실한 목적을 정의할 수 있다.

그러나 초기단계에서는 사용자그룹을 축소해서는 안 된다. 어느 그룹을 위해 서비스를 할 것인지를 결정하고 그들의 목적에 맞게 정의되어야 한다. 또한 이렇게 정의 된 목적 및 사용성을 피드백을 통해 테스트 할 필요성이 있다.

이메일이나 웹을 통한 설문, 인터뷰, 경쟁사와의 비교분석, 포커스 그룹을 통해 실제 사용자들 그룹이나 예상되는 그룹을 모아 샘플사이트를 제시하고 그들의 반응을 통해 분석함으로써 좀더 구체적인 목표정의를 할 수 있을 것이다.

② 정보를 설계해야 한다. 이것은 하이퍼텍스트 이론의 원리를 바탕으로 웹 사이트의 구조에 대한 상세한 플로차트를 만드는 것으로 이해할 수 있을 것이다. 정보 구조는 사용자 중심적인 구조를 개발해야 하며, 사용자가 사이트 내에서 어떤 기능을 수행하는지 분석하고 이를 구조화해야 한다.

웹에서의 컨텐트 구조는 웹의 UI의 뼈대에 해당되는 작업이며, 1차원의 선형적인 영화의 컨텐트 구조와 달리 하이퍼텍스트 구조로 정보를 네비게이션 할 수 있는 구조이다. 계층구조가 3레벨을 넘어서면 사용자는 혼란에 빠지기 쉽고, 깊은 구조보다는 넓은 구조가 혼란에 빠질 가능성을 줄이기는 하지만 자칫 컨텐트의 빈곤함으로 연결되어 사용자에게 실망을 줄 수도 있다.

③ UI 디자인을 해야 한다. 사이트의 목적에 부합되도록 메시지와 스타일 외형 등을 결정해야 하며, UI 요소는 사이트의 기능개발 및 사용자가 명확하게 이해하도록 선행적으로 디자인되어야 한다.

④ 내용을 제작해야 한다. 정보의 내용을 파악하고 차별화된 웹 기술과 GUI 아이디어를 사용자의 브라우저에서 정확하게 표현될 수 있도록 계획해야 하고 여러 버전으로 제작해야 한다.

⑤ 스크립팅과 프로그래밍을 해야 한다. 적합한 툴과 기술사용으로 사용자가 쉽게 이용할 수 있도록 해야 한다. 간략히 프로그래밍 기술에 대한 특성을 보면 html은 로딩이 빠르고 쉽게 배우고 구현할 수 있고, 자바 스크립트 등을 이용해 동적 요소 등을 추가할 수 있지만 디스플레이나 텍스트 표현에 제한된 기능만을 제공하고 사용자 입력을 제어하는데 제한 요소가 많다. frame은 3.0 이상의 브라우저에서 지원되고 네비게이션이 효과적이다. 디스플레이 면을 분할하므로 레이아웃 제어와 유지보수 시 효과적이다. 또한 선택된 프레임만을 프린트함으로써 향상된 프린트 기능을 제공한다. 그러나 프린트, 북마크, 뒤로 가기 버튼 등에서 디자인 시 위험요소가 있고 지원되지 않는 브라우저의 별도 버전을 만들어야 한다. CSS는 4.0이상 버전에서 지원되고 도큐먼트에 대한 제어가 가능하며, 향상된 레이아웃 기능을 제공한다. 그러나 구현상의 어려움이 있고 오래된 버전의 브라우저는 기능을 지원하지 않고 브라우저마다 적용 방법이 달라 오류가 있다.

최근에는 DHTML의 등장으로 더욱 다이나믹하고 역동적인 사이트를 만들 수 있게 되었고 레이아웃 상에서도 레이어를 사용해 이미지를 겹쳐 놓을 수도 있게 되었다.

⑥ 개발된 웹 사이트의 안정성과 사용성 등을 테스트해야 한다.

⑦ 인터넷상에서 발행을 해야 한다.

⑧ 공표를 해야 한다.

4. 웹의 사용자 인터페이스 요소 웹에서의 사용자 인터페이스의 가장 기본적인 요소는 컨텐트의 체계화이다. 아무리 디자인이 훌륭한 사이트라도 정보, 컨텐트의 구조가 엉성하고 체계적이지 않다면 사용자들은 혼란을 겪게 될 것이다.

즉 사용자가 필요한 정보가 사이트에 있다고 할지라도 무용지물이 될 것이기 때문이다. 또 하나는 훌륭한 그래픽 유저 인터페이스이다. 정보의 양이나 속도 면에서 아직까지 텍스트 위주의 사이트를 선호하는 사람이 많지만, 환경적인 부분은 차차 해결 될 것이고 앞으로는 정보의 가공능력과 사용의 편리성이 중요하게 될 것이다.

이것은 사용자들에게 친근하게, 직관적으로 인터페이스를 제공할 수 있는 방법이기 때문이다. 마지막으로 어쩌면 사용자가 가장 표면적으로 느낄 수 있는 앞서 열거한 두 요소의 최종 표출이라고도 볼 수 있는 네비게이션이다.

웹사이트에서 가장 먼저 눈에 들어오고 그 사이트의 사용성이나 디자인, 정보 체계를 가늠하게 할 수 있는 요소이기 때문이다.

5. 웹 UI의 뼈대 - 인포메이션 아키텍처 웹사이트와 인트라넷의 규모는 점차 커지고 있다. 이로 인해 사용자들은 사이트 내에서 자신이 찾고자 하는 정보를 제대로 검색하는데, 더 많은 어려움을 겪고 있고 그들이 찾고자 하는 정보를 위해 많은 시간을 보낸다. 사용자들은 그 사이트만의 메뉴체계를 이해하고 여러 번의 오류와 학습 과정을 거치게 된다.

이런 사용상의 시간적 낭비를 최소화하기 위해 웹사이트 설계 시 정보를 분류하고, 체계화하는 방법을 다루는 이론적 체계가 인포메이션 아키텍처이다. 정보기술 분야에서 인터넷은 현재로선 가장 발전된 부분이고 앞으로도 더 새로운 발전이 지속될 분야지만 다양한 기술과 컨텐트를 웹이라는 매체로 통합시켜야 하는 문제로 인해 많은 어려움이 있긴 하지만, 이런 정보를 분류하고 체계화하고 서로 관련짓는 작업은 사람들이 그 정보를 이해하고 사용하는데 중요한 역할을 한다.

웹은 이전의 어느 매체보다도 더 많고, 더 다양한 컨텐트를 가지고 있지만 이로 인해 사용자는 더 많은 혼란을 겪게 될 수 있다. 정보의 체계가 제대로 되지 않고는 좋은 UI도 기대하기 힘들다. 웹이 상업화되면서 스폰서와 사용자의 요구 사이에서 균형을 유지하며 어떤 기능과 어떤 컨텐트를 어떻게 제공할 것인가를 결정하는 것들은 아주 중요한 요소가 되었기 때문이 이제 웹에서 UI는 선택이 아닌 필수가 된 것이다.

인포메이션 아키텍처란 사용자들이 사이트의 구조체계를 이해하고 네비게이션 시스템과 사이트 내에서 사용되어진 레이블을 이해하며 찾고자 하는 정보를 찾을 수 있도록 하는 스트럭처를 구성하는 작업이다. 뿐만 아니라 웹이 변화하고 성장하는 장기적인 계획도 포함된 정보설계를 의미한다.

정보 체계화가 배제된 웹 개발 프로세스로는 발전하는 웹의 정보를 조직화하는 데 한계에 부딪치게 되었고, 문제를 해결하지 못했으며 이런 사용상의 반복적 시행착오를 줄여 나가야 한다는 필요성이 요구되었다. 인포메이션 아키텍처가 잘 계획된 웹사이트는 방문하는 고객, 제작자, 운영자 모두에게 큰 이익을 준다.

사용자는 신속하게 그들이 원하는 정보를 찾을 수 있을 것이고, 이로 인해 시간과 비용을 절감 할 수 있다. 또한 제작자들 역시 이를 통해 개발하는 동안 드러날 수 있는 계획상의 문제점을 최소화할 수 있다. 인포메이션 아키텍처 고려 시 고객의 관점에서 다양한 고객의 다양한 요구를 어떤 방식으로 지원할 것인가를 해결하고, 제작자는 이로 인해 재설계하는 값비싼 대가를 줄일 수 있다. 인포메이션 아키텍처는 웹사이트의 조감도를 이해하고 전달하는 일이며 이것은 사이트가 만들어지기 전 설계단계에서 해결되어야 한다.

왜냐하면 이 부분을 간과한 채로 사이트 개발이 진행된다면 이 문제들은 결코 사라지지 않고 나중에는 더 큰 문제를 야기시킬 것이기 때문이다.

6. 인포메이션 아키텍처의 접근법 인포메이션 아키텍처의 접근법은 다음과 같이 분류할 수 있다.

① 계층구조, 하향식 접근법 이것은 정보를 조직화하고 간단하고 보편적이며 익숙한 방법을 제공한다. 계층구조 설계의 계층분류들은 상호 배타적이어야 한다. 이것은 정보를 바라보는 두 개의 서로 다른 방법이다. 또 정보의 계층도의 폭과 깊이의 균형이 필요하다.

계층이 너무 좁으면서 깊다면 사용자들은 정보를 찾기 위해 너무 많은 수를 클릭해야 하고 4~5단계 이상을 클릭해야 한다면 사용자들은 쉽게 포기하고 사이트를 떠날 것이기 때문이다. 반대로 너무 넓으면서 얕다면 사용자들은 메뉴에서 지나치게 많은 옵션을 보게 되고 그 반면 컨텐트에서는 상대적 빈곤함에 불쾌감을 느끼게 된다. 대체로 10개 이상의 메뉴를 가진 사이트는 사용자를 질리게 한다. 그러나 만약 성장할 것으로 기대되는 인트라넷은 좁고 깊은 것 보다 넓고 얕은 쪽으로 기우는 것이 대대적인 재구축 없이도 컨텐트를 추가하기 용이하다.

② 하이퍼텍스트 접근법 이는 정보간의 링크라는 두 개의 구성요소를 가진다. 그러나 유연성을 제공하는 반면 사용자가 혼동과 복잡함을 느낄 여지는 충분히 있다. 이는 사용자가 숲속으로 던져져 나무들 사이를 돌아다니며 지형을 알려고 노력하는 것과 다름없기 때문이다.

③ 관계형 데이터베이스 모델, 상향식 접근법 데이터베이스는 분산 컨텐트 관리, 보안 인증 그리고 다수의 사람들이 서로 다른 사람들을 방해하지 않고 컨텐트를 수정할 수 있게 해주는 제어시스템을 제공한다. 그러나 각각의 레코드들은 엄격한 규칙을 따라야 하며 이질적인 컨텐트를 체계적으로 구성하고자 할 때에는 제대로 동작하지 못한다. 이런 이유들로 해서 데이터베이스 모델은 전체 사이트에서 부분적인 사이트나 구조화되어 있고 동질적인 정보들의 집합에 더 적당하다.

④ 데이터베이스 설계 데이터베이스 접근법은 데이터 입력과 컨텐트 관리에 훨씬 높은 효율과 정확성을 제공한다. 이는 관리용 인터페이스를 만들 수 있고 템플리트를 사용해서 레코드간의 표준양식을 보증할 수도 있다. 이러한 구현방법과 관련된 결정들은 기술적인 성능들에 의해 영향을 받고 구조에는 영향을 별로 끼치지는 않는다.

7. 정보의 구조 정보의 구조는 다섯 가지로 분류될 수 있다.

① 선형구조이다. 멀티미디어 정보를 설계하는 방법 중 대표적이며 단순한 구조로 선형 구조를 꼽을 수 있다. 선형구조 방식이라 함은 연속된 일련이 정보를 순차적으로 볼 수 있게 구성하는 것을 말한다. 확정된 줄거리가 있는 이야기를 사용자에게 전달하고자 한다면 선형구조를 선택하는 것이 바람직하다.

선형구조 방식의 장점은 사용자가 이야기 전개나 프리젠테이션의 페이스를 조절할 수 있게 해 준다는 것이다. 반면 단점은 사용자가 다른 각도에서 내용물을 탐색할 수 없기 때문에 다른 인터페이스 구조도 제공되어야 한다.

② 계층구조이다. 웹에서 가장 전형적인 방법 중의 하나이다. 대체로 현 단계에서 다음 단계로 진행하기 위한 메뉴 화면과 상위 개념과 하위개념, 또 내용간이 순서, 논리 등의 측면에서 연계성이 있는 경우 이러한 구조를 활용한다. 그러나 계층구조에서는 사용자가 자주 길을 잃어버리는 경우가 발생하기 쉽다. 사용자의 편의를 고려하여 한 목적지로 통하는 여러 가지 경로를 제공할 경우 사용자의 혼란이 더욱 크기 때문에 세심한 주의가 필요하다.

③ 대화형 구조이다. 개별적인 정보나 사건간의 관계를 여러 가지 경우의 수로 조합하여 제공함으로써 사용자가 미리 정해진 여러 가지 경우를 탐험해 가는 식으로 구성된 것을 말한다.

④ 데이터베이스 구조이다. 데이터 베이스 구조는 대규모의 데이터 베이스를 갖고 있고 사용자의 필요에 따라 그 일부를 보여 주는 구조이다. 일부를 보여 주기 위한 방법으로 데이터 베이스를 찾기 위한 정보 검색을 필요로 한다.

⑤ 혼합구조이다. 여러 가지 정보구조가 공존하는 것을 말한다. 실제로 가장 많은 사이트들이 여러 가지의 정보 구조를 함께 사용하고 있으며, 그중 각 사이트의 특성에 맞게, 특정한 정보의 구조가 주조를 이루며 다른 정보 구조가 부분적으로 포함되는 경우를 말한다.

8. 인포메이션 아키텍처의 학문적 기반 인포메이션 아키텍처는 한 분야에 대한 지식만으로는 불가능하다. 그래픽디자인, 문헌정보학, 저널리즘, 시스템공학, 마케팅, 전산학 등 다양한 학문적 지식이 필요하고, 이들은 각기 나름대로의 강점과 약점을 가지고 있기 때문에 앞서 열거한 모든 분야의 전문가들이 각각의 분야에 따라 강점을 살리고, 갖고 있는 편견을 균형적인 시각과 서로의 분야간 협력 및 커뮤니케이션을 통해 극복해 나가야 한다.

이것이 쉽지만은 않은 이유는 정보설계가 매우 추상적인 무형의 것이기 때문이다. 이러한 협력과 커뮤니케이션이 아직은 부조화를 이루는 이유는 웹의 초창기 시절을 돌아보면 이해될 수있다. 웹은 초창기 시절 한 사람에 의해 설계되었고, 만들어지고 관리되었다.

이들이 웹마스터였으며, 모든 일들을 스스로 배워 나가며 처리해야 했다. 이들은 여러 분야에서 쏟아져 나왔으며 자신도 모르는 사이에 정보설계 전문가였으며 그래픽 디자이너이자 편집자였고 프로그래머였다. 그러나 점차 웹사이트는 프린트를 대신하는 것 이상의 매체로 발전하게 되었고, 더 많은 요구에 부응해야만 했으며 결과적으로 더 많은 웹마스터를 필요로 하게 되었다.

이렇게 되자 복잡하게 발전한 웹을 위해 필요한 모든 분야를 개인으로서는 더 이상 전문가가 될 수 없게 된 것이다. 이제는 상호 보완적인 여러 분야의 전문기술을 갖춘 개인들로 구성된 팀으로 함께 작업을 해야 한다.

이 팀은 각 분야의 전문가들로서 그 분야의 전문기술이 있어야 하며 동시에 모든 이들이 인포메이션 아키텍처 마인드를 가져야 한다. 그들은 각기 자신의 분야가 갖고있는 강점과 약점 그리고 작업 과정 중에 생길 수 있는 문제점들과 해결방안을 갖고있고, 웹은 하나의 전문분야만으로 문제를 해결 할 수 없기 때문에 작업과정에서 자신의 분야와 다른 분야의 이해를 통해 이를 해결해야 한다.

이제 더 이상 자신의 전문분야 안에서 작업하는 것이 아니라 정보설계에 대한 합의점을 가지고 서로의 분야에 대한 이해를 높이고 상호 보완적인 커뮤니케이션을 해 나가야 한다.

이런 협력의 정도가 얼마나 성공적으로 이루어지느냐가 웹사이트 구축이 성공적이냐 아니냐를 결정하게 하는 것이다. 그리고 인포메이션 아키텍처를 통해 사용자의 목적을 조망하고, 팀의 다른 멤버들의 다양한 접근법에 대해서도 이해해야 한다.

8-1. 인포메이션 아키텍처의 난점 모호성 정보 체계화의 난점은 우선 모호성을 들 수 있다. 정보를 분류하고 체계화하는 작업은 언어를 기반으로 정립되는데 언어는 의미를 전달하는 수단임과 동시에 두 가지 이상의 의미로 인해 정보전달의 모호성을 갖게 한다.

즉, 혼동의 위험을 안고 있으며 분류의 의견일치도 쉬운 일이 아니다. 분류시스템은 언어 기반 위에서 정립되기 때문에 단어의 둘 이상의 의미로 이해되는 모호성이 있고, 레이블로 사용할 특정 단어는 사용자들이 제작자가 의도하는 바를 혼동하게 하는 위험성을 내포하고 있기 때문이다. 이질성 웹에 담겨지는 컨텐트의 형태도 서로 이질적이다.

이런 이질성은 웹사이트의 다양한 객체들로 이루어진 문서들과 그 구성 요소에 대한 다양한 전형적인 접근 방법을 필요로 한다. 텍스트 정보는 비디오, 오디오, 인터랙티브 응용프로그램들과 웹 상의 공간을 공유한다. 이러한 웹사이트의 이질적인 본성은 일관성있는 구조 체계화가 결코 쉽지 않다.

서로 다른 다양한 수준의 문서 객체들을 나란히 분류하는 것은 이치에도 맞지 않기 때문이다. 다양한 사용자 방문하는 사람 역시 천차만별이기 때문에 정보를 이해하는 시각과 방법이 모두 다르며 레이블 시스템과 구조체계는 그것들을 만든 사람의 관점과 시각에 많은 영향을 받고 있기 때문에 유용한 구조 체계를 설계하기 위해서는 컨텐트에 대한 명칭과 구조에 대한 개발자 스스로의 인지적 모델에서 벗어날 필요가 있다.

즉, 객관화와 고객의 시각이 필요한 것이다. 이것은 모든 사용자들이 정보를 이해하는 시각과 방법이 모두 다르기 때문에 더욱 복잡해진다. 이런 이유로 완벽한 구조를 만드는 것은 불가능하지만 시각의 중요성을 인식하고, 주 대상 관객들을 이해하려고 노력함으로써 대중을 위한 정보를 더욱 잘 조직화 할 수 있을 것이다.

9. 웹 컨텐트의 시각화 - GUI 홈페이지를 방문하는 사용자들은 버튼을 클릭하거나 화면상에서 선택할 때 그 결과 일어나는 피드백을 기대하게 된다. 흔히 접하게 되는 마우스의 롤 오버 시 이미지변화나 상호작용 적인(interactive) 커뮤니케이션 (communication)들이 그것이다. 이런 상호작용들이 GUI 아이디어들이다.

GUI는 풀어서 Graphic User Interface 라고 표기하며 이것은 정보기획과 그래픽디자인의 사이라고 할 수 있을 것이다. 즉, 정보를 웹이라는 매체에 적합하게 디자인하는 것이다. 웹에서의 GUI 요소 중 중요한 비중을 차지하는 것은 다양한 형태의 메뉴체계, 네비게이션이다. 네비게이션 요소는 사용자를 원하는 정보로 연결시켜 주고 웹 상의 GUI의 핵심이라고 할 수 있을 것이다.

이것은 사용자가 스스로의 위치를 알 수 있고, 자신이 찾고자 하는 정보의 위치를 알 수 있도록 정보를 주기 때문이다. 때문에 네비게이션 요소나 네비게이션의 위치는 GUI 측면에서 신중히 다루어야 한다. 모양이나 나타내는 방식에 따라 분류해 보면 메뉴바에서 특정 메뉴를 눌렀을 때 선택할 수 있는 하위 메뉴가 아래로 펼쳐지는 것이 풀다운(pull-down)메뉴이며 많이 사용되는 방식이다.

풀다운 메뉴는 다양한 옵션을 제공하는 한 줄의 메뉴로서 사용자에게 확장성을 제공한다. 사용자는 메뉴 내에 한가지 옵션을 선택하고 GO 나 Submit 버튼을 눌러 목적하는 사이트로 이동이 가능하다. 자바나 자바스크립트를 이용하여 팝업메뉴로서의 기능확장이 가능하다. 풀다운 메뉴는 노출된 옵션 외에 다른 옵션들을 임시적으로 가림으로써 사용자가 확인하는 작업을 거치게 할 수 밖에 없다.

그러나 상당히 웹 사이트가 직관적이고 정확한 계층적 구조정책을 가지고 있다면 아주 유용한 기능을 할 수 있다. 그리고 어떤 특정 위치에서 마우스의 단추를 누르면 그 영역에서 선택할 수 있는 내용들이 나타나는 방식을 팝업(pop-up)메뉴라고 한다. 또 자주 사용하는 메뉴를 떼어 내어 현재 작업하는 장소부근으로 옮겨 놓을 수 있게 하는 것이 테어오프 (tear-off)메뉴이다.

이런 메뉴를 디자인할 때는 메뉴의 형식을 선택하는 것은 물론이고 명령어를 논리적으로 적합한 계층으로 분류하는 것이 중요하다. 원격으로 제어하는 네비게이션 메뉴는 테이블이나 인덱스, 사이트맵과 같은 원격 네비게이션 요소들은 웹사이트의 기본적 계층구조에 외부적이며 사이트의 컨텐트에 제 3자적인 관점을 제공하는 데 유용하다. 메인 브라우저 창의 외부로 새로 디스플레이거나 분리된 윈도우 또는 자바를 이용한 제어 등의 원격 네비게이션 요소들은 점차적으로 많이 사용되고 있다.

원격 내비게이션 시스템 요소는 네비게이션의 보조적인 방법을 제공하여 웹사이트 컨텐트로의 접근을 강화시켰다. 하지만, 잘못 설계된 조직구조나 네비게이션 시스템을 대체하거나 보완하는 정도로 사용되어서는 안된다.

사이트 맵은 단순한 문자의 그래픽 적인 심볼 이상의 방법으로 인포메이션 아키텍처를 표현한다. 사이트 맵을 적용할 것을 고려하였다면 물리적 대상과 심볼에 의한 기호화를 동시에 고려하여야 한다. 투어 가이드는 웹사이트 내 주요 컨텐트를 처음 접하는 사용자에게 안내를 위한 멋진 툴이다.

예를 들어 유료 온라인 매거진과 같은 사이트에서의 제한적 접근을 위해 잠재적 고객에게 그들의 지불대가로 무엇을 원하는지 보여 주기 위해서 필요하므로 매우 중요하다. 투어 가이드는 선형적인 네비게이션 특성을 가진다. 하지만 하이퍼텍스트 네비게이션 바는 부가적인 유연성을 제공하는 데 사용될 수 있다. 투어가이드는 새로운 사용자들을 위한 소개나 웹사이트를 위한 마케팅 기회를 목적으로 하여야 한다. 많은 사람들이 이 투어 가이드를 이용하지 않고 있으며 한번 이상 이용하는 사람들은 드물기 때문에 투어가이드를 메인페이지보다는 게이트웨이 페이지로부터 링크를 하는 것을 고려해야 한다.

GUI는 사용자들로 하여금 흥미를 유발시키고, 정보를 효율적으로 인식하고 활용할 수 있도록 유도하는 장치이지만 사용자들은 일반적인 브라우저의 UI에 익숙해져 있으므로 그 부분을 고려하는 것이 중요하다. 예로 브라우저 상에서의 파란색 텍스트로 방문을 요구하는 링크를 알리는 표시, 보라색으로 변한 텍스트로 이미 방문한 링크를 알리는 것 등이다. 또 링크가 있는 영역에서는 커서가 손 모양으로 바뀌어 사용자들에게 정보를 제공한다. 즉 링크 칼라와 방문 칼라로 사용자들에게 간단한 인포메이션을 줄 수 있고 이는 이미 익숙해진 사용자들의 인식체계를 염두 한 것이다.

그러나 링크나 방문 칼라를 자칫 잘못 활용하면 사용자로 하여금 혼동을 줄 우려가 있다. 웹은 하이퍼텍스트를 기반으로 시작되었기 때문에 가장 기본적인 기능은 링크이고 브라우저 역시 링크에 관해서는 사용자에게 세심한 피드백을 제공하고 있고 익스플로러나 넷스케이프에서 기본적으로 제공하는 툴 박스들도 롤 오버로 사용자의 동작에 대한 피드백을 해주는 기능 역시 사용자들이 이미 익숙해진 윈도우나 다른 프로그램 등에서의 메타포들을 어느 정도 가지고 온 것이다. 왜냐하면 무조건 새롭고 흥미를 유발하는 것만이 좋은 GUI가 아니기 때문이다. 가장 기능에 충실하고, 정확한 정보 전달의 필요성이 미적 요소만큼 중요하다. GUI 디자인은 웹사이트가 점점 소프트웨어화 되어가고 기능이 중시되고 있는 지금 그 중요도가 높아지고 있는데 이는 메뉴나 아이콘을 어떻게 만들 것인가가 사용성을 좌지우지 하기 때문이다.

주로 사용되는 것이 아이콘이라 할 수 있는데 이는 실제 세계의 메타포를 빌려 와서 그 기능을 표현하는 경우가 많다. 아이콘 하나를 표현할 때도 그 기능은 물론 함축적인 의미 등 단순한 아이콘에도 많은 의미가 내포되어 있다. 아이콘을 제작할 때는 그 크기의 결정, 그 의미가 제대로 표현되는지를 알아보기 위한 사용성 테스트를 하는 것이 좋다.

메타포(Metaphor)는 아이콘 디자인과 마찬가지로 실세계를 매핑(mapping)하여 사용자는 직관적으로 사이트를 이해할 수 있어서 사용 용이성을 높이는 것이다. 그러나 그래픽을 지나치게 채용할 수 밖에 없다. 이것은 속도와의 문제를 일으킨다. 그리고 사용된 메타포를 사용자가 이해하지 못할 경우 문제가 된다. 그럼에도 이를 채용하는 이유는 첫째로 궁금증 유발로 인한 강조의 역할이다. 인식할 수 있는 혼란은 어느 정도 좋은 면도 있기 때문이다.

그리고 둘째는 사용자들에게 재미를 주기 때문이다. 이런 은유기법은 복잡한 아이디어를 설명, 흥미유발, 설득하는데 사용할 수 있다. 메타포는 문학에서는 시적인 상상력의 기법이나 수사학적인 측면으로 이해된다. GUI에 메타포를 활용하는 것은 사람들의 일상적인 사고체계나 언어체계를 활용하여 컴퓨터 시스템의 개념과 특징을 사용자에게 직관적으로 전달하기 위해서이다. 이것은 메타포가 가진 개념, 특징, 논리, 시스템까지 적용한다는 의미이다.

10. 웹사이트 설계에 적용되는 은유기법

첫째, 구조적 은유기법이 있는데, 이것은 한 시스템의 구조를 새로운 시스템 구조의 이해로의 전환을 빠르게 한다.

사람들이 알고 있는 구조적 체계를 최대한 고려해야하며, 이해해고 활용해야 한다.

둘째, 기능적 은유기법은 새로운 환경과 이전의 전통적인 방법과 연결시켜주는 역할을 한다. 이것은 일반적인 도서관과 웹에서의 도서관사이트에서의 기능적인 사항들을 은유적으로 활용하는 것을 생각하면 이해가 빠를 것이다.

셋째, 가시적 은유기법은 그래픽적인 요소들의 이해를 돕는다. 예로 전화번호부의 아이콘 칼라를 옐로우로 하는 것이나 전자상거래의 쇼핑카트 아이콘 등을 보며 사용자는 쉽게 칼라나 형태상의 은유로 인해 정보를 갖게 된다. 이런 요소는 일상적인 것에서 오는 것이 많기 때문에 고객이나 작업을 같이하는 동료와 함께 브레인스토밍 아이디어를 통해 얻어낼 수 있다.

은유기법을 탐구하고 적용하는 것은 매우 유용한 것이나 개념적인 설계과정 동안 아이디어에 유동성을 불어넣기 위해 필요한 것이지 반드시 구현에 대한 의무를 가질 필요는 없는 것이다. 그리고 그래픽 디자인의 경우도 인터넷, 인트라넷 등 환경과 사이트의 목적(회사홍보, 정보전달)에 따라서도 많이 달라진다. 이런 작업들은 개념적인 구조를 제공하는 것을 바탕으로 하고, 커뮤니케이션을 위해서 꼭 필요한 요소만을 포함시키며 일관성을 유지한 디자인을 함으로써 혼란을 일으킬 요소를 최소화시켜 정보의 의미를 명확히 하여 디자인해야 한다.

그리고 사용자와의 의사소통이 가능하도록 적합한 디자인으로 사용자에게 다가가야 한다.

11. 그래픽적 해결방법

11-1. 그룹핑 동일한 밀도의 정보라 하더라도 적절한 그룹핑을 사용하여 사용자의 효율을 높일 수 있다. 그룹핑의 방법은 공간에 의한 그룹핑, 즉 화면상에 관련된 것끼리 근접하게 그룹으로 만들고 그룹과 그룹 간의 간격을 두는 방법이 있을 것이다. 이는 공간에 의한 대상물의 분리는 사람이 대상물의 관계를 이해하는 데 대단히 강력하게 작용한다. 색채나 외곽선에 의한 그룹핑은 그래픽적 요소로 좀더 명백하게 하는데 도움을 줄 수 있다.

강조의 방법들은 깜빡임이나 애니메이션, 선택된 부분을 나타내는 반전, 밑줄을 통한 링크의 알림, 칼라 등이 있으나 너무 난잡하게 활용하는 것은 피해야 한다. 웹 페이지 상에서 애니메이션을 보여 줄 수 있게 되면서 하나의 페이지에 지나치게 많은 애니메이션을 담은 경우를 흔히 볼 수 있다.

이는 방문자의 수가 많은 사이트일수록 심한 경향을 보이는데 이유는 광고가 많기 때문이다. 사용자의 관심을 끌기 위해 애니메이션으로 처리되지만 이들이 동시에 애니메이션 될 경우는 바람직하지 못하다.

11-2. 위치와 순서 위치와 순서는 사용자가 정보를 찾는 중요한 요소이기 때문에 주의 깊게 배치되어야 한다. 사용순서는 화면의 구성요소가 특정 순서대로 사용되길 원한다면 화면의 왼쪽 위에서부터 오른쪽 아래의 순서대로 배열되는 것이 바람직하다. 관습적인 순서는 정보의 표현에는 많은 경우에 관습적으로 받아들여지는 순서가 있다. 또 중요성과 사용빈도에 따라야 하는데, 이는 제작의 초기 단계에서 철저한 정보분석으로 예측 가능하다.

11-3. 연관성 구성요소간의 연관성을 표현하는 기법은 조직성의 원칙을 구현하기 위한 것이다. 데이터간의 연관을 보여 주는 방법은 정렬이나 들여쓰기 등이 있는데 이것들은 사용자에게 정보의 계층과 연관에 관한 특별한 의미를 전달해 준다.

예를 들면 리스트의 경우 철자 순으로 배열한다거나, 가로 보다 세로로 나타내는 것이 바람직하다고 할 수 있다. 들여쓰기는 조직성을 강화시킬 수 있는 요소이며 라벨 붙이기는 위치 정보 등에 유용하다.

11-4. 상징적인 그래픽 상징적인 그래픽은 천마디의 말보다 효과적이며 사용자는 친숙하게 정보에 접근할 수 있다. 그러나 어떤 정보를 문자로 표현하는 것이 더 효과적인지, 상징적인 그래픽으로 표현하는 것이 더 효과적일지는 고민해야할 문제다. 그래픽적인 요소로 표현 될 경우는 픽토그램의 디자인의 방법이 광범위하게 사용될 수 있다.

픽토그램은 국제적인 행사에서 사용하기 위한 목적으로 제작된 그림문자로서 언어를 초월해서 직감으로 이해할 수 있도록 한 그래픽 심벌로써 내용의 형태를 상징적으로 시각화함으로써 사전에 교육을 받지 않고도 모든 사람이 즉각적으로 이해할 수 있도록 체계적으로 제작된 시각언어이기 때문이다. 그리고 실생활의 이미지를 보여 주는 경우 문자정보에 의한 표현을 뛰어넘는 이점이 있다. 왜냐하면 상징적인 그래픽은 그 대상물에 실재하는 속성과 기능을 총체적으로 표현하고 있어 사용자의 이해를 도울 수 있기 때문이다. 문자로 표현하는 것이 더 적합함에도 불구하고 사용자의 관심을 끌기 위해 그래픽적 요소가 사용되는 경우는 지루한 문자만으로 이루어진 화면보다 적절한 그래픽이 함께 있는 제품이 화면이 한결 흥미로우며 사용자의 관심을 끌 수 있기 때문이다.

그러나 이런 경우는 문자와 병기하거나 상징적인 그래픽 위에 마우스가 갔을 때 ALT 태그를 사용하여 문자 정보를 보여 주는 등의 효과를 활용하여 사용자가 상징을 해석할 때 겪게 되는 곤란을 해결해 주어야 한다.

12. GUI 작업시 난점 웹에서 GUI 작업시 제한이 되는 요소로 우선, 로딩 속도를 들 수 있는데 아무리 사용성을 고려하고 정보설계를 제대로 계획한 사이트라고 할지라도 로딩되는 시간이 너무 길어 방문자가 뒤로 가기 버튼이나 다른 URL로 이동을 한다면 아무 의미가 없기 때문이다. 또한 사용자의 각기 다른 환경 역시 GUI의 난제이다.

각각의 디스플레이 환경과 브라우저 환경 플러그인 상태 등은 예상치 않는 결과를 사용자에게 보여 주기 때문인데, 이런 경우 안내문으로 환경을 안내할 수 있지만 그보다는 각각의 환경에 맞게 여러 가지 버전으로 작업을 하는 것이 바람직하며 시스템 능력의 범위, 스크린사이즈, 칼라지원 등을 세심히 고려해야 한다.

디자인에 있어서 정답은 없다. 디자인의 정확성(correctness)은 사이트의 시각적인 면을 고려한다면 더욱 어렵다. 시각화하는 디자인은 사이트디자인 단계의 주요한 부분이다. 이는 프로그래밍 디자인처럼 엄격하고 표준화된 방법론이 없는 것이 더욱 어려움을 가중시킨다. 사이트의 기술적 측면과 비주얼 측면의 프로토타입이 개발되어야 하고 또 둘은 상호 보완적이어야 한다. 그리고 어떻게 하면 사이트를 다시 방문하도록 구축(delivered)할 것인가에 대해서 고려해야 한다. 이러한 모든 단계가 끝나면 구현을 하는데, 구현이 쉽게 이루어진다면 그만큼 사용자에게는 좋은 사이트가 될 것이다.

13. 웹에서의 네비게이션

13-1. 네비게이션의 위치 네비게이션의 위치는 좌, 우, 상, 하 다양하다. 그러나 일반적으로 네비게이션은 왼쪽에 있는 경우가 많다. 왼쪽 네비게이션(Left-Oriented)은 일반적인 웹 페이지의 경우이며 오른쪽에는 컨텐트가 있다. 오른쪽 네비게이션 (right-oriented)은 일반적이지 못하기에 사용자에게 혼동을 줄 우려도 있다. 사람의 시선이 왼쪽 상단부터라는 가기 때문에 이는 어느 정도 바람직한 위치이지만 그렇다고 다른 부분을 완전히 배제해서는 새로운 UI가 나올 수 없다.

간혹 오른쪽에 오는 경우도 있는데 이는 마우스의 위치가 스크롤 등으로 인해 대부분 오른쪽에 있는 시간이 더 많기 때문에 설득력이 있다. 상단(Top-Oriented) 역시 왼쪽에 위치한 네비게이션 바와 같이 일반적이지만 공간 활용 면에서나 사용자의 시선이 네비게이션 바에 더욱 무게가 가게되고 일정공간을 상단에 배정해야 되기 때문에 어려운 점이 있다. 왼쪽 하단 (Bottom-Oriented)은 프레임이 사용 안된 경우 사용자는 거의 언제나 스크롤(scroll)을 해서 네비게이션 바를 찾아야 한다.

그래서 대부분 사용자는 처음에는 메뉴를 보지 못하게 된다. 네비게이션 마지막 레벨에서 활용되는 경우나 보조적 수단으로 사용되는 경우가 많다. 왜냐하면 보통 컨텐트의 양이 많을 경우 사용자가 내용을 보기 위해 스크롤을 해야만 네비게이션 바를 볼 수 있기 때문이다. 그러나 네비게이션 바를 사이드에 위치시키는 것 보다 페이지의 맨 위 또는 아래에 위치시키는 것이 유리할 수 있다.

이러한 상/하 위치 결정은 컨텐트의 길이에 따라 선택 가능하다. 맨 위에 위치시켰을 경우, 네비게이션 시스템으로의 신속한 접근과 그 사이트에 대한 빠른 컨텍스트 제공에 유리하여 페이지의 시작 부분을 빨리 읽고 사이트의 다른 부분으로 이동할 수 있게 해준다. 페이지 하단에의 위치는 일단 페이지가 충분히 읽혀진 후에 네비게이션의 역할을 하게 해준다. 그래픽 기반의 네비게이션 바는 이미지 맵, 아이콘 등의 그래픽기능을 이용하여 제공된다.

그러나 이것은 사이트를 보다 보기 좋게 만들 수 있지만 텍스트 기반보다 로딩시간이 오래 걸린다. 하지만 같은 그래픽 네비게이션 바는 사이트에서 재사용을 할 경우 캐쉬 메모리 (cache memory)에서 로딩(loading)되므로 처음보다 로딩(loading) 시간이 적게 걸린다. 단 이것은 사이트가 계속해서 성장하고 발전할 때 불편을 준다는 점이 있다. 텍스트 기반의 네비게이션 바는 옵션을 추가하거나 삭제가 용이하지만 그래픽 네비게이션 바는 시간과 비용이 많이 든다.

그러나 대부분의 홈페이지는 위에서 언급한 여러 navigation approach를 혼용해서 사용하고 있다. 이는 다양한 사용자의 욕구(navigation path)를 알기는 어렵지만 사용자가 자유롭게 사이트를 돌아다닐 수 있도록 탄력적인 네비게이션(navigation)을 제공해야 하고, UI를 설계하는 데 있어서 사용자를 지나치게 통제하려 해서는 안되기 때문이다. 특정 navigation을 유도하려는 UI는 오히려 사용자를 혼동스럽게 만들수 있다. 그러나 사용자가 현재 어디에 있는지 알려 주는 것은 중요한 요소이다.

13-2. 네비게이션체계 계층적 체계를 제대로 적용한 웹 사이트는 사용자들이 방향을 잃지 않고 원하는 정보를 훨씬 쉽게 찾을 수 있게 하며 인터페이스로 네비게이션 시스템을 사용함으로써 이동에 관한 유연성을 높이는 방안이 된다. 네비게이션 시스템은 다양한 구성 요소(element)를 가지는데 자체 컨텐트를 포함하는 네비게이션 바(bar)와 팝업 메뉴, 컨텐트를 포함하지 않고 원격적으로 접근(remote access)을 가능하게 하는 내용목록(table of contents)과 사이트 맵 등이 바로 그것이다. 네비게이션 바는 가장 간단한 유형으로 한 페이지에 모아진 하이퍼텍스트 링크들의 집합이다.

부가적으로 네비게이션 바는 그래픽을 적용한 아이콘형일 수 있으며, 내용목록(Table of contents) 내에 그래픽 이미지로 또는 이미지 맵으로 기능할 수 있다. 텍스트기반의 네비게이션 시스템은 메뉴의 잦은 변경과 웹 사이트의 성장성, 코스트를 고려할 때 적용할 만하며 대부분의 경우 글로벌 네비게이션 시스템에는 그래픽을 적용하며 로컬네비게이션시스템에 텍스트 메뉴를 제공하는 등의 보완을 생각해 볼 수 있다.

그래픽 네비게이션 바에 문자라벨이나 아이콘을 포함하여 컨텍스트와 컨텐트를 운반하는 방법보다 문자라벨은 만들기가 쉬울 뿐만 아니라 각 컨텐트를 극명하게 제시할 수 있는 방법이다. 아이콘은 반면에 만들기가 어려울 뿐만 아니라 이미지를 통한 컨텐트의 암시에 어려울 수가 있지만 반복 사용자들은 이러한 아이콘에 매우 친숙해져 있으므로 텍스트 라벨을 확인하려 시간을 지체하지 않으므로 그들을 위한 신속한 메뉴선택을 제공할 수 있다.

네비게이션 시스템의 설계 시 시스템의 환경, 즉 웹 브라우저 자체가 제공하는 네비게이션 특성을 고려하는 것이 중요하다. 웹 브라우저 자체로서 제공하는 네비게이션 특성들 - 웹사이트 내에서 다른 페이지에의 직접적 접근을 가능케 하는 Open URL, 최근에 방문한 페이지를 보여 주는 History, 사용자가 나중에 쉽게 방문 할 수 있도록 도와주는 Bookmark, 마치 지나온 길에 뿌려 놓은 ‘빵 부스러기’같은 역할을 하는 Back button(or forward) ,그리고 방문/미 방문의 정보를 제공하는 하이퍼텍스트 링크의 다른 색깔 등은 웹 브라우저 내의 자체 네비게이션 특성으로서 사용자들은 웹사이트를 통한 행로를 인식한다. UI 설계 시 웹브라우저 내의 이러한 네비게이션 기능을 무시하거나 방해해선 곤란하다. 만약 방문/미 방문의 정보를 나타내 줄 수 있는 link colors를 디자이너 임의대로 심미적인 색깔로 바꾼다면 사용자에게 혼란을 줄 수 있기 때문이다. 웹브라우저의 네비게이션 특성을 간과하지 않고 심미성과 사용 편의성의 양립을 위한 노력이 필요하며 사용자들은 이러한 웹브라우저에 너무나 익숙해져 있다는 점을 상기해야 한다. 복잡한 웹사이트일수록 설계에 있어 전체의 사이트 내에서 사용자가 현재의 위치를 혼동하지 않고 방향성을 유지할 수 있게 하는 것이 중요하다.

모든 페이지에 조직의 명칭을 포함시켜 사용자가 사이트의 각 레벨로 이동하면서 자신이 아직 그 웹사이트에 있다는 것을 명확히 해 줄 필요성과 어떤 사이트를 현재 방문하고 있는 지를 명확히 해줄 수 있다. 네비게이션시스템은 정보의 계층적 구조를 명확하고 일관되게 보여 줄 수 있어야 하며 그 수직적 구조 안에서의 위치를 가리켜 줄 수 있는 것이어야 한다.

웹의 하이퍼텍스트 기능은 상당한 네비게이션의 자유를 보장하면서 수평적 이동이 가능하며 한 임의 레벨로부터 동일 다른 레벨로의 계층적 이동을 가능케 해준다. 이러한 이동의 유연성을 다른 ‘난잡해질 위험성’과 균형을 맞추는 것이 네비게이션 시스템 설계의 주요한 팁이다.

대규모 복잡한 웹사이트 내에서의 계층, 수평적 네비게이션 도움의 제공은 매우 제한적일 수 있다. 반면에 너무 많은 도움을 제공하여 명확한 계층적 구조가 사장되거나 사용자들을 압도할 소지가 있다.

13-3. 네비게이션 시스템 복잡한 웹사이트에서는 여러 종류의 네비게이션 시스템을 이용한다. 성공적인 사이트의 구축을 위해서 시스템의 유형의 이해와 유연성 및 컨텍스트의 제공을 위한 적절한 조율이 필수적이다.

계층 구조로 설계된 정보는 그 자체로 기본적인 네비게이션을 제공하지만 메인 페이지로부터 실질적 콘텐츠가 저장된 목적 페이지까지 이동에 있어서 각 페이지의 메인 옵션이 직접적인 계층구조로의 접근만 허용한다는 점에서 한계성을 가지고 있다. 이러한 한계성을 가지고 있기 때문에 다른 부가적 네비게이션 시스템의 적용이 필요하다. 글로벌 네비게이션 시스템은 글로벌, 즉 사이트 전반에 걸친 네비게이션시스템은 전체 사이트에 보다 광범위한 계층, 수평적 이동성을 부여함으로서 정보의 계층구조를 보조한다.

메인 페이지에서 각 바는 불필요 할 지 모르나 다음 레벨의 페이지에서 그 바는 홈페이지로의 링크나 피드백을 위한 링크로 쓰인다. 예로 메인 페이지 하단에 아이콘을 이용한 ‘Home, E-Mail’ 메뉴의 네비게이션 바 등이다. 보다 복잡한 글로벌 네비게이션 시스템은 세 번째 레벨이나 그 하위의 페이지들에서의 부문별 특성(area-specific)을 가진 링크를 제공할 수 있다.

로컬 네비게이션 시스템 은 더 복잡한 웹사이트의 구성을 위해 글로벌 네비게이션을 보충할 수 있는 시스템으로 필요할 수 있다. 서브사이트는 어떤 큰 사이트 내에서 웹페이지들이 동일한 스타일과 공유된 네비게이션 메커니즘을 적용한다. 서브사이트 전체에 걸쳐서 글로벌 네비게이션 시스템을 확장시키는 것은 일관적인 측면에서도 매우 중요하다. 로컬 네비게이션 시스템은 글로벌 네비게이션 시스템을 대체하기보다는 보완하는 쪽으로 디자인되어야 한다.

한 종류만 쓰여진다면 제어가능하나 한 페이지에 동시에 사용되어 진다면 너무 많은 옵션의 제공으로 인하여 사용자들을 압도하는, 오히려 혼란스럽게 할 수도 있다는 사실을 고려해야 한다. 콘텐츠를 포함하는 네비게이션 요소로 한 네비게이션 요소들은 그 웹사이트의 콘텐츠를 포함하는 페이지로 통합된 요소들이 글로벌, 로컬 네비게이션 시스템에 있어서, 가장 공통적이며 중요한 역할을 한다. 사용자들이 사이트나 서브사이트로 이동하면서 반복적으로 보고 사용하는 것들은 바로 이러한 콘텐츠를 포함하는 페이지에 통합되어진 네비게이션 요소들이다. 기능상으로나 심미적으로나 훌륭하게 작동하는 네비게이션 시스템을 설계하는 것은 양립성의 고려에 있어 매우 어려운 작업이다.

고려해 볼 수 있는 여러 가지 해법과 팝업메뉴나 다이나믹 사이트맵 어쩌면 진정으로 원하는 것을 찾는 것을 혼란스럽게 할 수 있을 정도로 뛰어난 기능을 제공하는 팝업 메뉴나 다이나믹 사이트 맵과 같은 고난이도의 기술들을 해법으로 고려해 왔다. 그러나 그보다 사용자들에게 진정으로 필요한 것은 컨텍스트의 제공, 유연성의 향상, 원하는 정보를 찾기 위해 도와주는 것들이다.

네비게이션요소는 단 한가지 조합만이 존재하는 것은 아니다. 적절한 요소들의 조합을 통하여 웹사이트의 특정한 목적, 사용대상자, 컨텐트의 특성을 고려하여 네비게이션 시스템의 최적화된 설계가 요구된다. 그러나 네비게이션 시스템의 설계 시 봉착하게 될 여러 어려운 과정은 계층적 체계화로부터 시작하는데 이것은 기본적인 네비게이션 시스템으로서 체계화된 계층구조는 다른 모든 결정에 영향을 미친다.

웹사이트의 최상위 레벨에서의 범위를 선택하는 것은 글로벌 네비게이션 시스템을 선택할 것이며 그러한 체계화를 기본으로 하여 그 웹사이트에서 다른 여러 페이지로부터 접근이 가능한 여러 키 페이지들을 선택할 수 있을 것이다. 네비게이션 시스템의 설계 후 가능하다면 ‘사용편의성’의 평가가 필요하다.

사용자의 반응으로부터 얻는 것들로부터 진정으로 적절히 작동하는 품위있는 네비게이션 시스템을 설계하고 개선할 수 있기 때문이다. 14. 글을 마치며 웹에서의 사용자 인터페이스는 정보와 기술, 디자인의 종합적인 산물이지만 이 중심에는 정보, 즉 컨텐츠가 있다. 정보의 구조가 어떠한가를 파악하고 이를 효과적으로 표현하는데 노력을 쏟아야 한다.

정보의 양을 조절하고, 정보간의 연계성을 표현하기 위해 그룹핑 하고 사용자가 쉽게 해석할 수 있도록 주목성과 위치와 순서를 조절하며 상징적인 메타포를 활용해야 하는 것이다. 사용자 인터페이스를 고려한 사이트를 디자인한다는 것은 외적인 미만을 겨루는 것이 아니다. 웹이라는 매체의 특성과 한계, 그리고 가능성을 이해하고 컨텐츠와 기능성, 사용성 등을 고려해 정보제공의 짜임새를 디자인하는 것이며, 웹을 통한 가능성을 디자인하는 것이다.

[출처] 디자인 잘하는 기획