[기획] 7.정보설계 - 정보설계의 정의 3/5

02. 사이트구조

다음은 웹사이트 기본 구조이다.

 

계열구조 Sequential Structure

 

 

계층구조 Hierarchical Structure

[출처: https://www.businessnewsdaily.com/15798-types-of-organizational-structures.html]

 

 

그리드 구조 grid structure

[출처: https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Grids]

 

 

 

네트워크 구조 Net-Like Structure

[출처: https://www.researchgate.net/figure/The-schematic-diagram-of-the-neural-network-like-structure_fig4_356364770]

 

 

계열구조

일련의 정보를 순차적으로 보여주는 방식이며, 신문, 잡지 등 대부분의 기존 미디어가 가진 구조다.
① 장점: 정보가 단계적으로 제시되기 때문에 웹에서 흔히 발생하는 '길 잃어버리는 현상' 이 적고 사용 자가 중요한 정보를 놓치지 않고 볼 수 있다.
② 단점: 사이트를 방문한 유저는 개발자가 정해준 순서대로 항해할 수밖에 없기 때문에 자칫 지루하게 생각할 수 있으며 상호 작용성도 충분히 살릴 수 없다.
③ 적용: 상품의 사용법, 결재 절차, 단순한 교육 페이지 등에서 많이 사용된다.

 

[사례1] : 계열구조의 사이트

온라인 카탈로그
쇼핑몰의 온라인 카탈로그로서 기존 미디어 에서 많이 볼 수 있는 구조다. 이전 이후로 갈 수 있는 네비게이션 도구가 제공된다.

 

제품 매뉴얼
단계적으로 제품의 사용법을 알려주는 페이 지로서, 순서가 있는 정보를 제공한다. 이전 페이지와 이후 페이지로의 이동이 가능하다

 

결제 절차
비게이션이 가능하다.
결재 과정 중 주문서를 작성하는 페이지로서, 다음 페이지로 가기 위하여 구매하거나 이전 페이지로 갈 수 있는 네

 

교육 콘텐츠
대부분의 교육용 멀티미디어 콘텐츠는 문제를 해결한 후 다음 페이지로 갈 수 있는 네비게이션이 가능하며 문제를 해결해야만 다음 페이지로 넘어 갈 수 있는 전형적인 계열 구조 형식이다. 이전 페이지로 가려면 다시하기 버튼을 눌러 이동할 수 있다.

 

스토리가 있는 페이지
이전 페이지와 다음 페이지로의 이동 가능한 네비게이션 기능을 제공하며 스토리의 전개(순서가 있는 이야기)가 있 다. 이전 페이지와 다음 페이지로 갈 수 있는 링크가 제공된다.

 

 

● 계열구조의 변형
계열구조의 단점인 낮은 상호 작용성을 어느 정도 극복할 수 있다.

 

계층구조
최상위의 홈페이지에서 각 하위 페이지는 특정 주제 아래 계층을 가지고 있으며 각 페이지는 논리적인 연결관계를 가지고 있다.
① 장점: 계층적 연결로 인해 효율적인 정보 탐색이 용이하며, 전체 구조에 대한 이해를 높일 수 있다.
② 단점: 페이지간에 정보의 분류가 잘못 이루어져 있을 경우 사이트를 방문한 유저가 정보를 찾는 과정 에 있어서 어려움을 겪을 수 있고, 유저가 길을 잃는 현상이 자주 일어난다.
③ 적용: 웹 사이트의 전체적인 구조에 가장 효과적인 구조다.

 

그리드 구조
수평과 수직 형태로 링크되어 있는 구조를 말한다. 이때 수직구조와 수평구조에는 동일한 속성의 정보 를 제공해야 한다. 쉽게 얘기해 두 가지 계열 구조의 합이라고 생각하면 된다.
① 장점: 유저가 수직구조, 수평구조의 틀을 이해하면 효율적으로 항해나 정보 검색을 할 수 있다.
② 단점: 사용 경험이 적은 유저에게는 낯설게 느껴질 수 있기에 그에 대한 언급이 필요하다.
③ 적용: DB 사이트, 교육 사이트 등 정형화된 많은 정보가 요구되는 사이트에 적합하다.

•너비(victr): 계층의 폭을 말한다. 계층의 폭이 넓으면 한 가지 주제에 대해 다양한 정보전달이 가능하다. • 깊이(cepit): 계층 내의 깊이를 말한다. 깊이의 증가는 길 잃는 현상을 야기하는 주 원인이 된다.

 

네트워크 구조
웹 페이지를 순서나 특정 구조 없이 수많은 페이지로 나열해놓은 구조를 말한다.
① 장점: 개발자의 의도와 상관없이 사용자 스스로 웹을 탐색하며, 다양한 경험을 할 수 있기에 상호 작 용성이 뛰어나다.
② 단점: 사용자가 전반적인 구조를 이해하기 힘들다. 길 잃어버리는 현상(Lost n Space)이 자주 발생한다.
③ 적용: 엔터테인먼트 사이트, 체험 사이트, 교육 사이트에 적합하다.

 

웹 사이트를 이용하는 사용자들은 계층구조 모델을 이용하는 웹 사이트를 쉽고 빠르게 이해할 수 있다.
사용자들은 계층적 구조에서 편안함을 느낀다. 계층구조는 정보를 조직화하고 간단하면서 보편적이며 익숙한 방법을 제공하기 때문이다. 그렇기 때문에 웹 사이트의 전체적인 구조에 계층구조를 가장 많이 사용하며 계열구조나 그리드 구조 등을 부분적으로 사용하고 있다.
계층구조 설계에서 유의해야 할 점은 정보의 계층에서 폭과 깊이의 균형이다. 폭은 계층의 각 단계에서 선택한 옵션들의 수며, 깊이는 계층 단계수다. 계층이 너무 좁으면서 깊다면 사용자들은 정보를 찾기 위해 너무 많은 수를 클릭해야 한다. 반대로 너무 넓으면서 얕다면 사용자들은 메뉴에서 지나치게 많은 옵션을 보게 되고 콘텐츠의 부족에 불쾌감을 느낄 것이다.
계층구조 설계 시 폭을 다룰 때에는 사람이 기억할 수 있는 용량의 한계를 고려해야 한다. 모호한 콘텐 츠에서는 7±2의 규칙을 따를 필요가 있다.
10개 이상의 메뉴를 가진 사이트는 사용자의 심리적 부담감을 가지게 한다. 깊이를 다룰 때는 더욱 보 수적이다. 4단계 ~ 5단계 이상을 클릭해야 한다면 사용자들은 쉽게 포기하고 사이트를 떠날 것이다.