웹디자인의 실재(2)

 

4.  사이트구조/네비게이션 

 

 

사람들은 정보를 이용할때 덩어리 단위의 정보들을 선호한다. 주제별로 적절히 나뉘어져 있고 중요도에 따라 구성되어 있으면 정보를 좀 더 효과적으로 볼 수 있기 때문이다. 이렇게 정보의 설계가 잘 되어 있는 시스템은 일관성과 질서를 가져오게 되며 사용자들의 다음 행동 예측을 가능하게도 한다. 다시 말하면 일관된 레이아웃의 웹 사이트에서는 사용자가 그 사이트의 구조를 쉽게 학습하게 되어 쉽게 정보를 찾아 갈 수 있을 뿐 아니라 사용자들의 네비게이션하는 패턴이 일관되기 때문에 다음 행동 예측이 가능하다는 이야기이다. 이러한 사용자의 행동 예측은 성향 분석으로까지 이어질 수 있으며 분석된 성향에 만족할 수 있는 레이아웃을 설계 할 수 있게 해준다. 일관성있는 구조를 설계함에 있어서 다음과 같은 사항들을 유념해두자. 　 일관성계획 사이트내에서의 칼라, 버튼, 그래픽등 디자인요소를 비롯하여 일관성 있는 네비게이션 시스템은 사용자들의 예측을 유도할 수 있으며 원하는 정보로의 접근을 도와준다. 또한 일관성있는 사이트는 정보의 신뢰감도 줄 수 있다. 　 사용자의 현재 위치 사용자들은 현재 위치를 알고 싶어한다. 사이트구조상 어느 단계에 머물러 있는지 파악 할 수 있도록 해준다면 사용자는 어디로 가야하는지를 결정할 수 있게 된다. <title><header>태그를 이용하여 페이지의 타이틀을 정해주거나 일관성있는 네비게이션 시스템에서 현재 위치를 표시해주는 방법등이 있다.   적절한 레이블 레이블링(labeling)은 정보를 효율적으로 전달하기 위한 표현의 한 형식이다. 또한 사이트 구조 체계, 네비게이션 시스템들을 명확히 표현해주는 방법이기도 하다. 적절한 레이블을 이용하면 연상작용을 유도하여 보다 빠르고 편리하게 정보를 찾을 수 있게 도와준다. 레이블 정보들의 단위, 집합을 표현하는 수단이다. 특정 메뉴, 기능등을 표현하는 말이나 기능으로서 Search, Help등이 하나의 레이블링된 형태라 볼 수 있다. 일관성 있는 레이블은 암시의 효과를 주어 다음 상황을 예측 가능하게 하고 네비게이션시 도움을 준다. 브라우저의 기능, 메뉴, 링크, 키워드를 통한 서치기능들은 네비게이션을 도와준다. 웹은 하이퍼링크로 이루어져있다. 각 링크되어 있는 부분을 클릭해야 각 메뉴간의 이동이 가능한데 링크되는 부분과 아닌것과의 차별화를 두어 메뉴 이동에 혼란스럽지 않게 해주면 좋다. 　 　 메타포어 메타포어를 일관성있게 통합하는 작업이 필요하다. 메타포어는 실생활에 있어서 사람들이 생각하고 행동하고 있는 것을 사용자 인터페이스를 통해 은유하는 것을 말한다. 예를 들어 컴퓨터의 파일관리를 실생활에 있어서의 서류를 관리하는 종이 폴더를 사용하는 것처럼 하는 것 또는 파일들을 삭제할 때 실생활에서 휴지통의 계념을 도입한 것을 은유(메타포)라고 하는것이다. 이러한 메타포어를 적절히 잘 이용하면 사용자들의 실생활에서의 사고체계를 웹 사이트에 적용시켜 좀 더 편안하고 직관적으로 사이트의 요소들을 대할 수 있게 된다. 이러한 메타포어는 사이트의 특성, 성격, 컨셉을 표현하는 중요한 수단이다.   네비게이션 시스템 웹 사이트는 하이퍼 링크로 이루어져 있기 때문에 자칫하면 자신이 있는 위치를 몰라서 길을 잃고 헤메이기가 쉽다. 또한 컨텐츠가 많고 복잡한 웹 사이트일수록 네비게이션 시스템의 신중한 설계는 꼭 필요하다. 웹 사이트 제작시 이를 유념하여 해당 사이트의 성격에 맞는 적절한 네비게이션 시스템을 설계하여 사용자들이 길을 잃지 않도록 해야하겠다. 네비게이션 시스템의 종류에는 계층적인 구조, 글로벌한 네비게이션 구조, 로컬형 구조등이 있는데 사이트 성격과 컨셉에 맞는 설계를 하면 된다. 설계시 유념할 사항은 정보의 중요도에 따라 단위를 체계적으로 구성하여 순서를 정한다. 그러고 나서 중요한 부분을 강조하고 그 중요도에 따라 순차적으로 시선을 유도 할 수 있어야 한다. 또한 페이지 내에서는 일관성있고 예측가능한 이동 버튼등으로 사이트의 구조를 한눈에 파악 할 수 있도록 한다.   5. 웹디자인 사이트 제작 컨셉   그동안 웹 디자인의 현재 모습과 웹 디자인에 필요한 요소들을 간단히 살펴 보았다. 이젠 웹 디자인을 하기 위한 본격적인 런닝에 들어갑니다~ 웹 사이트 구축시에는 초기 기획단계에서 사이트 오픈 바로 전 단계까지 디자인의 영역은 모두 포함되어 있다. 서비스할 사이트의 성격에 따라 칼라, 네비게이션, 인터페이스등의 디자인 컨셉등을 정의 해야하고 또한 잘 정리된 컨텐츠를 보기 좋게 다듬어 주는 것도 디자이너가 해야 할 일이다. 웹 사이트를 제작하는 과정을 디자인 관점에서 정리해보면 다음과 같은 절차를 따르게 된다. (물론 제작 과정이나 기타 여러가지 상황에 따라 제작 과정은 추가 될 수도 뒤바뀔 수도 있다) 　 사이트 컨셉 자~ 웹 사이트를 제작하여 본다. 우선 제작할 사이트의 성격, 타깃 유저등 웹 사이트에 대한 정의를 내려 사이트의 컨셉을 정한다. 사이트의 컨셉을 정의 내리는 시기에 디자이너가 직접적인 참여가 드물긴 하지만 함께 진행하는 것을 권장하며 이미 컨셉이 정해진 후라면 디자이너가 충분히 이해하고 넘어가야 할 사항들이다. 　 어떠한 성격을 가진 웹 사이트인지 정의내린다. 웹 사이트의 성격이 어떠한가? 동호회, 대화방 중심의 커뮤니티 사이트인가? 도서, 음반, 전자제품들을 살 수 있는 전자상거래 사이트인가? 뉴스 서비스를 하는 미디어 사이트인가? 등등…… 웹 사이트의 1차적인 성격을 파악하여 사이트의 제작 목표를 정의한다. 그러고 나서 좀 더 세부적인 성격을 정의 내려야하는데 가령 단순히 뉴스를 서비스하는 사이트가 아니라 - 매일 아침에 업데이트되는 일간지성격을 띈 스포츠(골프)전문 정보 사이트라고 정의를 내릴 수 있다. 　 　 사이트 성격에 따른 타깃 유저들을 분류한다. 10대를 겨냥한 커뮤니티인가? 전문가집단의 커뮤니티인가? 전문가집단이라면 어떠한 분야를 위한 커뮤니티인가? 일반 사용자가 물건을 직접 구매하는 형태의 전자상거래인가? 혹시 여성 사용자들(특정)을 대상으로 하는 전자상거래는 아닌가? 기업과 기업간의 거래가 이루어 지는 전자 상거래인가? 스포츠 뉴스를 주로 다루는 뉴스 사이트인가? 연예, 오락등 엔터테인먼트 기사를 주로 다루는 미디어 사이트인가? 등등…… 　 전자상거래의 경우 고급 화장품과 의류등이 주요 품목이고 2~30대 일하는 도시여성을 타깃으로 하는 사이트라고 세부적으로 사용자들을 분석할 수 있어야하고 또한 해당 유저들의 성향분석이 이루어져야 한다. 분석된 결과치에 따라 디자인과 레이아웃의 방향을 설정할 수 가 있다. 다시말하면 사용자들의 연력층, 최대 관심사, 성향과 행동 예측을 하여 적절한 시기에 알맞은 기능을 제공 할 수 있도록 디자인 컨셉을 세우게 된다. 넘 교과서적인 이야기인가? 위의 사항들을 분석하기 위하여는 많은 자료가 필요하다. 충분한 자료수집과 분석후에 사이트의 방향을 설정하여 사이트의 컨셉을 잡는 것이 중요하다. 　<BR< font> 디자인 및 레이아웃 컨셉 위에서도 언급한것처럼 분석된 자료를 바탕으로 디자인 및 레이아웃 컨셉을 계획한다. 모뎀의 느린 회선 속도의 사용자가 주 타깃인 웹 사이트의 경우라면 로딩속도를 가장 고려한 디자인이 필요하다. 로딩속도를 고려하기 위한 방법으로는 앞의 웹 디자인시 고려할 사항들코너에서 자세히 설명되어 있다. 　 적용가능한 기술적인 요소의 선택 전자상거래 사이트의 경우는 그래픽, html외에 기술적인 여러 요소들이 필요하다. 대부분 웹 사이트 초기 기획시 이부분이 정의 되어진다. 이러한 것 외에도 플래시, 자바스크립트, dhtml등 브라우저에서 지원되는 다양한 기술적인 요소들도 사이트 성격에 맞게 적절히 사용할 수 있도록 기획해야한다. 오락성이 짙은 사이트에서는 동적인 화면구성을 위해 플래시, 자바스크립트등 다양한 기술적인 요소들을 배치할 수 있다.