웹 사이트 설계기법은 구조적, 기능적, 가시적 은유기법으로 나뉘어 지는데 세부 내용은 다음과 같다.
첫째, 구조적 은유기법이 있는데, 이것은 한 시스템의 구조를 새로운 시스템 구조를 이해하여 전환하는 것을 빠르게 한다. 사람들이 알고 있는 구조적 체 계를 최대한 고려해야하며, 이해하고 활용해야 한다.
둘째, 기능적 은유기법은 새로운 환경과 이전의 전통적인 방법과 연결시켜 주 는 역할을 한다. 이것은 일반적인 도서관과 웹에서의 도서관사이트에서의 기 능적인 사항들을 은유적으로 활용하는 것을 생각하면 이해가 빠르다.
셋째, 가시적 은유기법은 그래픽적인 요소들의 이해를 돕는다. 예로 전화번호 부의 아이콘 칼라를 옐로우로 하는 것이나 전자상거래의 쇼핑카트 아이콘 등 을 보며 사용자는 쉽게 칼라나 형태상의 은유로 인해 정보를 갖게 된다. 이런 요소는 일상적인 것에서 오는 것이 많기 때문에 고객이나 작업을 같이하는 동 료와 함께 브레인스토밍 아이디어를 통해 얻어낼 수 있다.
은유기법을 탐구하고 적용하는 것은 매우 유용한 것이나 개념적인 설계과정 동안 아이디어에 유동성을 불어넣기 위해 필요한 것이지 반드시 구현에 대한 의무를 가질 필요는 없는 것이다. 그리고 그래픽 디자인의 경우도 인터넷, 인 트라넷 등 환경과 사이트의 목적(회사홍보, 정보전달)에 따라서도 많이 달라 진다.
이런 작업들은 개념적인 구조를 제공하는 것을 바탕으로 하고, 커뮤니케이션 을 위해서 꼭 필요한 요소만을 포함시키며 일관성을 유지한 디자인을 함으로 써 혼란을 일으킬 요소를 최소화시켜 정보의 의미를 명확히 하여 디자인해야 한다. 그리고 사용자와의 의사소통이 가능하도록 적합한 디자인으로 사용자에 게 다가가야 한다.
● 그룹핑
동일한 밀도의 정보라 하더라도 적절한 그룹핑을 사용하여 사용자의 효율을 높일 수 있다. 그룹핑의 방법은 공간에 의한 그룹핑, 즉 화면상에 관련된 것끼 리 근접하게 그룹으로 만들고 그룹과 그룹 간의 간격을 두는 방법이 있을 것 이다. 이는 공간에 의한 대상물의 분리는 사람이 대상물의 관계를 이해하는 데 대단히 강력하게 작용한다. 색채나 외곽선에 의한 그룹핑은 그래픽적 요소 로 좀더 명백하게 하는데 도움을 줄 수 있다. 강조의 방법들은 깜빡임이나 애 니메이션, 선택된 부분을 나타내는 반전, 밑줄을 통한 링크의 알림, 칼라 등이 있으나 너무 난잡하게 활용하는 것은 피해야 한다. 웹 페이지 상에서 애니메 이션을 보여 줄 수 있게 되면서 하나의 페이지에 지나치게 많은 애니메이션을 담은 경우를 흔히 볼 수 있다. 이는 방문자의 수가 많은 사이트일수록 심한 경향을 보이는데 이유는 광고가 많기 때문이다. 사용자의 관심을 끌기 위해 애니메이션으로 처리되지만 이들이 동시에 애니메이션 될 경우는 바람직하지 못하다.
● 위치와 순서
위치와 순서는 사용자가 정보를 찾는 중요한 요소이기 때문에 주의 깊게 배 치되어야 한다. 사용 순서는 화면의 구성요소가 특정 순서대로 사용되길 원한 다면 화면의 왼쪽 위에서부터 오른쪽 아래의 순서대로 배열되는 것이 바람직 하다. 관습적인 순서는 정보의 표현에는 많은 경우에 관습적으로 받아들여지 는 순서가 있다. 또 중요성과 사용빈도에 따라야 하는데, 이는 제작의 초기 단 계에서 철저한 정보 분석으로 예측 가능하다.
● 연관성
구성요소간의 연관성을 표현하는 기법은 조직성의 원칙을 구현하기 위한 것 이다. 데이터간의 연관을 보여 주는 방법은 정렬이나 들여쓰기 등이 있는데 이것들은 사용자에게 정보의 계층과 연관에 관한 특별한 의미를 전달해 준다.
예를 들면 리스트의 경우 철자 순으로 배열한다거나, 가로 보다 세로로 나타 내는 것이 바람직하다고 할 수 있다. 들여쓰기는 조직성을 강화시킬 수 있는 요소이며 라벨 붙이기는 위치 정보 등에 유용하다.
● 상징적인 그래픽
상징적인 그래픽은 천마디의 말보다 효과적이며 사용자는 친숙하게 정보에 접근할 수 있다. 그러나 어떤 정보를 문자로 표현하는 것이 더 효과적인지, 상 징적인 그래픽으로 표현하는 것이 더 효과적일지는 고민해야 할 문제다.
<그림 9> 다양한 아이콘 모습
자료 : http://asdal.co.kr/icon.htm
그래픽적인 요소로 표현 될 경우는 픽토그램의 디자인의 방법이 광범위하게 사용될 수 있다. 픽토그램은 국제적인 행사에서 사용하기 위한 목적으로 제작 된 그림문자로서 언어를 초월해서 직감으로 이해할 수 있도록 한 그래픽 심벌 로써 내용의 형태를 상징적으로 시각화함으로써 사전에 교육을 받지 않고도 모든 사람이 즉각적으로 이해할 수 있도록 체계적으로 제작된 시각언어이기 때문이다. 그리고 실생활의 이미지를 보여 주는 경우 문자정보에 의한 표현을 뛰어넘는 이점이 있다. 왜냐하면 상징적인 그래픽은 그 대상물에 실재하는 속 성과 기능을 총체적으로 표현하고 있어 사용자의 이해를 도울 수 있기 때문이 다. 문자로 표현하는 것이 더 적합함에도 불구하고 사용자의 관심을 끌기 위 해 그래픽적 요소가 사용되는 경우는 지루한 문자만으로 이루어진 화면보다 적절한 그래픽이 함께 있는 제품이 화면이 한결 흥미로우며 사용자의 관심을 끌 수 있기 때문이다.
● 네비게이션의 위치
네비게이션의 위치는 좌, 우, 상, 하 다양하다. 그러나 일반적으로 네비게이션 은 왼쪽에 있는 경우가 많다. 왼쪽 네비게이션(Left-Oriented)은 일반적인 웹 페이지의 경우이며 오른쪽에는 컨텐츠가 있다. 오른쪽 네비게이션 (Right-Oriented)은 일반적이지 못하기에 사용자에게 혼동을 줄 우려도 있다.
사람의 시선이 왼쪽 상단부터 가기 때문에 이는 어느 정도 바람직한 위치이지 만 그렇다고 다른 부분을 완전히 배제해서는 새로운 UI가 나올 수 없다. 간혹 오른쪽에 오는 경우도 있는데 이는 마우스의 위치가 스크롤 등으로 인해 대부 분 오른쪽에 있는 시간이 더 많기 때문에 설득력이 있다. 상단(Top-Oriented) 역시 왼쪽에 위치한 네비게이션 바와 같이 일반적이지만 공간 활용 면에서나 사용자의 시선이 네비게이션 바에 더욱 무게가 가게 되고 일정공간을 상단에 배정해야 되기 때문에 어려운 점이 있다. 왼쪽 하단 (Bottom-Oriented)은 프 레임이 사용 안 된 경우 사용자는 거의 언제나 스크롤(scroll)을 해서 네비게 이션 바를 찾아야 한다. 그래서 대부분 사용자는 처음에는 메뉴를 보지 못하 게 된다. 네비게이션 마지막 레벨에서 활용되는 경우나 보조적 수단으로 사용 되는 경우가 많다. 왜냐하면 보통 컨텐츠의 양이 많을 경우 사용자가 내용을 보기 위해 스크롤을 해야만 네비게이션 바를 볼 수 있기 때문이다. 그러나 네 비게이션 바를 사이드에 위치시키는 것 보다 페이지의 맨 위 또는 아래에 위 치시키는 것이 유리할 수 있다. 이러한 상/하 위치 결정은 컨텐트의 길이에 따라 선택 가능하다. 맨 위에 위치시켰을 경우, 네비게이션 시스템으로의 신속 한 접근과 그 사이트에 대한 빠른 컨텐츠 제공에 유리하여 페이지의 시작 부 분을 빨리 읽고 사이트의 다른 부분으로 이동할 수 있게 해준다. 페이지 하단 에의 위치는 일단 페이지가 충분히 읽혀진 후에 네비게이션의 역할을 하게 해 준다. 그래픽 기반의 네비게이션 바는 이미지 맵, 아이콘 등의 그래픽기능을 이용하여 제공된다. 그러나 이것은 사이트를 보다 보기 좋게 만들 수 있지만 텍스트 기반보다 로딩시간이 오래 걸린다. 하지만 같은 그래픽 네비게이션 바 는 사이트에서 재사용을 할 경우 캐쉬 메모리(cache memory)에서 로딩 (loading)되므로 처음보다 로딩(loading) 시간이 적게 걸린다. 단 이것은 사이 트가 계속해서 성장하고 발전할 때 불편을 준다는 점이 있다. 텍스트 기반의 네비게이션 바는 옵션을 추가하거나 삭제가 용이하지만 그래픽 네비게이션 바 는 시간과 비용이 많이 든다. 그러나 대부분의 홈페이지는 위에서 언급한 여 러 Navigation approach를 혼용해서 사용하고 있다.54)
(54) 전은용, “성공적인 웹 설계 한국 연구회”, 「UI, HCI」, 1999, p.5. http//
www.hci.or.kr/publish/ps199911/ch4/ps199911_ch4.html
이는 다양한 사용자의 욕구(Navigation path)를 알기는 어렵지만 사용자가 자 유롭게 사이트를 돌아다닐 수 있도록 탄력적인 네비게이션(Navigation)을 제 공해야 하고, UI를 설계하는 데 있어서 사용자를 지나치게 통제하려 해서는 안 되기 때문이다. 특정 Navigation을 유도하려는 UI는 오히려 사용자를 혼동 스럽게 만들 수 있다. 그러나 사용자가 현재 어디에 있는지 알려 주는 것은 중요한 요소이다.
제 Ⅲ 장 연구 설계
제 1 절 HCI형 웹 디자인 비교 내용
1.1 비교 대상과 선정방법
비교 대상은 본 논문의 제목 "웹 사이트에서 HCI형 웹 디자인의 분석과 활용 에 관한 연구"과 같이 비교대상 사이트 구분은 선정사이트, 임의 사이트, 추천 사이트로 구분하였으며 전문가(웹디자이너)그룹, 일반인(웹디자이너를 제외한 이용자)그룹으로 나누었다.
<표 9> 설문평가 대상 웹 사이트
설문평가 대상 웹 사이트는 <표 9>처럼 총 3종류 9개로 한정하였으며 선정 과정과 기준은 다음과 같다.
선정사이트는 "웹사이트 평가를 통한 e비즈니스 성공전략, 한경사, 2001"에 서 선정된 우리나라 100대 사이트 중 1-3위를 각각 선정하였다.
분 류 해당 웹 사이트 명
선정 사이트
http://www.mart24.co.kr
http://www.lotte.shopping.co.kr
http://www.csclub.com
임의 사이트
http://www.nansos.com
http://www.yahoo.co.kr
http://www.chosun.com
추천 사이트
http://www.princess4u.co.kr
http://www.pepsicola.co.kr
http://www.momu.co.kr
임의 사이트는 논문 연구자가 2년여 동안 인터넷 사업(한란판매)을 하면서 자주 방문했던 일반적이고 대중적인 사이트로 전자상거래, 검색, 커뮤니티 부 분에서 각각 하나씩을 선정하였다.
추천사이트는 전문가(웹디자이너) 그룹이 추천한 사이트로 감성, 인지, 디자 인을 고려한 사이트를 선정하여 추천을 받았고 일부는 웹비상을 수상한 사이 트도 포함되었으며 설문대상자들은 그 사실에 대하여 모르고 있다.
이와 같이 구분하여 선정한 사이트를 대상으로 감성, 인지를 고려한 웹 디자 인 부분에 대하여 감성, 인지, 디자인 3가지 항목 중에서 서로 상호연관 관계 가 있는 요소들을 선별하였다.
<그림 10> 비교 대상 선정 방법과 결과
비교대상 선정 방법은 항목별 요소의 선별은 다음과 같다.
감성요소에서는 조진표(2000년)의 “웹 페이지 디자인의 감성평가 방법 개발”
에서 감성요소 13개 항목 가운데 연구하고자하는 요소 두 가지로 매력성(예 쁜, 멋진, 매력적인), 고급감(고급스러운, 수려한, 미려한) 요소를 선정하였다.
인지요소에서는 “앨런 뉴웰 저, 차경호 역, 「통합인지이론」”에서 인지요소 12개 가운데 연구하고자하는 형태(화면(아이콘, 그래픽)사물인식이 쉬운), 언 어(문법적 구조, 낱말이해, 쉬운 문장) 요소를 선정하였다.
감성요소특성
인지요소특성
디자인요소특성
항목선별
HCI형 웹 디자인 요소
디자인요소 14개 부분에서 전은용의 “성공적인 웹 UI설계”에서 유행(최근의 웹사이트 유행 형태)을 선정하였고 최금영 외, “웹사이트 디자인 평가모형 개 발 및 적용에 관한 연구”에서 은유성(색채, 음향, 네비게이션(위치, 순서, 상징 적 표현))을 선정하였다.
선정결과는 매력성, 고급감, 형태, 언어, 유행, 은유성, 6가지 요소로 이것을 가지고 대상별로 웹 사이트에서 감성, 인지를 포함한 HCI형 웹 디자인을 상 호 비교 분석하였으며 이를 바탕으로 그룹 분석 결과와 함께 어떻게 활용 할 수 있는지에 관하여 연구를 진행 하였다.
<표 10> 비교 대상 선정 결과
<표 10>과 같이 매력성, 고급감, 형태, 언어, 유행, 은유성 6가지를 선정한 이 유는 다음<그림 11>과 같다. <그림 11>에서와 같이 웹 사이트 이용자가 웹 사이트를 첫 대면에서 느끼는 물리적 인지 요소(형태, 언어)와 사용 준비 단 계 화면에서 느끼는 심리적 요소인 감성(매력성, 고급감)과 이를 모두 지난 후 이용자가 이용 중에 화면 디자인(유행, 은유성)에서 느끼는 느낌을 상호 연관지어 선정하게 되었다.
감성요소 인지요소 디자인요소
구분
조화감 매력감 색감 주목성 단순성 간편성 고급감 명암감 균형감 품위감 정교성 신뢰성 역동감
문제해결 지각 주의 기억 학습 기술 의식 형태 언어 동기 정서 추리
실용성 기능성 심미성 경제성 생산성 사상 민족성
유행 기후, 풍토
몰입성 신선도 은유성 일관성 명쾌성 결과 매력성, 고급감, 형태, 언어, 유행, 은유성,