6 정보 설계 웹 기획 : 성공적인 웹사이트의 첫 번째 조건

학습목표 콘텐츠를 체계화하는 방법을 알아본다 웹 사이트의 기본 구조를 이해한다 각 콘텐츠 성격에 맞는 구조 설계의 장단점을 이해한다 레이블링 시스템의 중요성을 이해한다 카드소팅 방법을 알아본다 카드소팅 방법을 통해 콘텐츠를 분류하고 레이블링 설계를 실습한다

목 차 정보 설계의 정의 콘텐츠 체계화 정보 설계의 요소

01 정보 설계의 정의 정보 설계의 정의 정보 설계의 목적 사용자가 원하는 정보를 쉽고 빠르게 찾을 수 있도록 하는 것 사용자가 웹 사이트 방문 시 사용자의 정보 탐색에 가장 많은 영향을 미치는 것이 정보 설계임 웹 사이트의 조감도를 이해하고 전달하는 일 사이트가 만들어지기 전의 설계 단계에서 해결해야 함 정보 설계가 잘 이루어진 웹 사이트는 시간과 비용을 절감할 수 있음 제작자 역시 개발하는 동안 드러날 수 있는 계획상의 문제점을 최소화할 수 있음

01 정보 설계의 정의 실습 과제 원하는 정보를 쉽게 찾을 수 있는 사이트와 그렇지 못한 사이트의 사례를 찾아본 후 두 사이트의 차이점에는 어떠한 것이 있는지 논의해보자

02 콘텐츠 체계화 정보의 순서와 정렬 명확한 콘텐츠 체계 명확한 콘텐츠 체계는 정보가 서로 배타적이기 때문에 겹치지 않게 나눌 수 있음 사용하기 편리하고 설계 및 유지가 쉬우나 찾고자 하는 것의 정확한 이름을 알고 있어야 한다는 단점을 가짐 콘텐츠의 체계화를 명확히 하는 방법 알파벳순 또는 가나다순 - 백과사전이나 일반사전 등에서 사용하는 콘텐츠 체계 - 이미 알고 있는 항목에 대한 빠른 검색과 간단한 디렉터리 브라우징을 지원 [그림 6-1] 가나다순으로 정리된 다음(Daum)의 디렉터리 구분

02 콘텐츠 체계화 정보의 순서와 정렬 명확한 콘텐츠 체계 알파벳순 또는 가나다순 [그림 6-2] 야후(Yahoo)의 용어사전 분류 [그림 6-3] 음악 사이트 멜론(Melon)의 색인 검색

02 콘텐츠 체계화 정보의 순서와 정렬 명확한 콘텐츠 체계 연대순 또는 날짜순 - 보도 자료의 경우 연대순 체계에 적합 - 상호 보완적으로 조합되어야 함 [그림 6-4] 시간순으로 정리되어 있는 전자 신문의 보도 자료

02 콘텐츠 체계화 정보의 순서와 정렬 명확한 콘텐츠 체계 지리적 위치에 따른 분류 - 정치적, 사회적, 경제적 문제들은 장소와 관계되어 있는 경우가 많으며, 지도에서 마우스를 이용하여 콘텐츠에 손쉽게 접근 가능 [그림 6-6] 지역별로 구분해놓은 날씨 콘텐츠 [그림 6-5] SK 엔크린 사이트의 전국 주유소/충전소 위치

02 콘텐츠 체계화 정보의 순서와 정렬 모호한 콘텐츠 체계 정보를 정확하게 정의하기 힘든 목록 분류에 적용 인간의 주관성뿐만 아니라 언어와 구조 자체의 모호함으로 인해 정보를 분류하는 데 어려움을 겪으며 설계뿐 아니라 유지 역시 어려움 때로는 명확한 콘텐츠보다 중요하고 사용자가 편리한 면도 있음 주제별 체계 - 정보를 주제나 화제에 따라 구성 [그림 6-7] 주제별 체계로 분류된 야후(yahoo)의 디렉터리

02 콘텐츠 체계화 정보의 순서와 정렬 모호한 콘텐츠 체계 주제별 체계 [그림 6-9] 주제별 체계로 분류된 네이버의 카페 디렉터리 정보의 순서와 정렬 모호한 콘텐츠 체계 주제별 체계 [그림 6-8] 주제별 체계로 분류된 싸이월드(Cyworld)의 카페 디렉터리 [그림 6-10] 음악 사이트인 멜론(Melon)의 색인 검색

02 콘텐츠 체계화 정보의 순서와 정렬 모호한 콘텐츠 체계 주제별 체계 [그림 6-11] 음악 사이트인 멜론(Melon)의 스타일 검색 [그림 6-11] 음악 사이트인 멜론(Melon)의 감성 검색

02 콘텐츠 체계화 정보의 순서와 정렬 모호한 콘텐츠 체계 작업 지향형 체계 - 콘텐츠와 응용 도구를 프로세스와 기능, 그리고 업무의 집합으로 묶어서 편성 - 인트라넷이나 엑스트라넷은 콘텐츠뿐만 아니라 강력한 응용 프로그램을 통합하는 경향이 있어 작업 지향적 체계에 적합함 [그림 6-13] 마이크로소프트 워드(Microsoft Word)의 작업 지향적 메뉴 [그림 6-14] 어도비 포토샵(Adobe Photoshop)의 작업 지향적 메뉴

02 콘텐츠 체계화 정보의 순서와 정렬 모호한 콘텐츠 체계 사용자 구분형 체계 - 사용자가 두 그룹 이상일 경우에 적합 - 웹 사이트 내 미니사이트로 나뉘어져 사용자에게 선택권을 제공 [그림 6-16] HP 홈페이지의 사용자 구분으로 인한 메뉴 그룹의 재분류 [그림 6-15] 경희대학교 메인 페이지의 사용자 구분형 메뉴 체계

02 콘텐츠 체계화 정보의 순서와 정렬 모호한 콘텐츠 체계 은유형 체계 - 은유 기법을 일부가 아닌 전체 웹 사이트에 적용 시 주의해야 함 - 적용을 하기 위해서는 사용자에게 매우 친근한 것이 되어야 함 [그림 6-17] 휴지통 [그림 6-19] 데스크톱의 폴더 [그림 6-20] 디즈니 웹 사이트 [그림 6-18] 휴지통 메뉴

02 콘텐츠 체계화 정보의 순서와 정렬 모호한 콘텐츠 체계 혼합 콘텐츠 체계 - 여러 개의 콘텐츠 체계(작업 지향, 은유 기법, 사용자별, 주제별 등)를 혼합하여 사용하는 방법 [그림 6-21] 서울시청 웹 사이트

02 콘텐츠 체계화 정보의 순서와 정렬 모호한 콘텐츠 체계 중요성과 사용 빈도에 따른 콘텐츠 체계 - 중요한 구성 요소를 화면에서 가장 잘 보이게 배치하고 항상 나타날 부분에 두어 구성 [그림 6-22] 국민은행 마이 메뉴

02 콘텐츠 체계화 콘텐츠 분류 방법 경쟁사 벤치마킹 카드소팅(Card Sorting) 동일한 정보에 대해 경쟁 사이트가 분류한 방식을 벤치마킹함 카드소팅(Card Sorting) 사용자가 직접 카드에 적힌 콘텐츠를 분류하게 하여 사용자에게 의미 있는 정보 분류 패턴을 찾게 하는 방법으로 가장 많이 사용됨 [사례 6-1] 카드소팅 분류 방법 [그림 6-23] 실제 카드소팅 단계 ① [그림 6-24] 실제 카드소팅 단계 ②

02 콘텐츠 체계화 실습 과제 기존 웹 사이트 중 하나를 골라 그 사이트의 콘텐츠를 포스트잇(Post- it)에 적어 카드소팅을 실시해본다 웹 사이트에 있는 모든 콘텐츠를 인덱스 카드로 작성한다 웹 사이트에 필요한 내용을 하나씩 기재한다 특수 명사가 아니라 일반 명사를 사용한다 매우 구체적인 수준으로 요약한다 내용을 종류에 따라 분류한다 추가하거나 빼내야 할 카드를 정리하고 내용을 확정한다 옆 사람과 결과를 서로 비교해보며 다른 점이 무엇인지 확인해본다. 다른점이 있다면 그 이유가 무엇인지 토론해보자

03 정보 설계 요소 정보 설계의 분류 정보 구조 네비게이션 시스템 (Navigation System) 전체적인 구조와 세부적인 정보 설계를 포괄 정보를 습득하여 지식으로 만들 때는 사회적, 문화적, 정치적 환경에 영향을 받은 개개인의 정보 분류 체계에 맞춰 정보를 분류하고 조작하는 과정을 거침 네비게이션 시스템 (Navigation System) 웹 사이트 내의 사용자 이동에 관한 설계 실질적이며 구체적인 사용자의 정보 탐색 방법에 관한 것 사용자의 사고 패턴에 따라 설계해야 하며, 사용자의 인지적 노력을 최소화할 수 있어야 함 레이블링 시스템 (Labeling System) 내용 구성 요소에 대한 명칭을 어떻게 붙이는가에 대한 것 레이블(Label)O : 정보를 분류하여 설계할 때 분류된 항목을 지칭하는 명칭

03 정보 설계 요소 정보 구조 정보 구조의 정의 사이트 구조 사이트 내의 콘텐츠를 어떻게 조직화할 것인가에 대한 방법 [그림 6-25] 계열 구조 (Sequential Structure )

03 정보 설계 요소 정보 구조 사이트 구조 [그림 6-26] 계층 구조 (Hierarchical Structure )

03 정보 설계 요소 정보 구조 사이트 구조 [그림 6-27] 그리드 구조 (Grid Structure ) [그림 6-28] 네트워크 구조 (Network Structure )

03 정보 설계 요소 정보 구조 계열 구조 일련의 정보를 순차적으로 보여주는 방식 장점 : 정보가 단계적으로 제시되기 때문에 웹에서 흔해 발생하는 ‘길 잃어버리는 현상’이 적고, 사용자가 중요한 정보를 놓치지 않고 볼 수 있음 단점 : 웹 사이트를 방문한 사용자는 개발자가 정해진 순서대로 항해할 수 밖에 없기 때문에 자칫 지루하게 생각할 수 있으며 상호 작용성도 충분히 살릴 수 없음 적용 : 상품의 사용법, 결재 절차, 단순한 교육 페이지 등에서 많이 사용됨 [그림 6-29] 일련의 정보를 순차적으로 제공하는 계열 구조

03 정보 설계 요소 정보 구조 계열 구조 [사례 6-2] 계열 구조의 사이트 [그림 6-30] CJ mall의 온라인 카탈로그 [그림 6-31] SGX-X400 온라인 매뉴얼

03 정보 설계 요소 정보 구조 계열 구조 [사례 6-2] 계열 구조의 사이트 [그림 6-32] 인터파크의 결재 화면 ① [그림 6-33] 인터파크의 결재 화면 ② [그림 6-32] 인터파크의 결재 화면 ①

03 정보 설계 요소 정보 구조 계열 구조 [사례 6-2] 계열 구조의 사이트 [그림 6-35] 이노다임 메인 페이지 [그림 6-34] 재미나라의 교육용 콘텐츠 [그림 6-35] 이노다임 메인 페이지

03 정보 설계 요소 정보 구조 계열 구조의 변형 계열 구조의 단점인 낮은 상호 작용성을 어느 정도 극복 가능 [그림 6-37] 계열 구조의 변형 ② [그림 6-36] 계열 구조의 변형 ①

03 정보 설계 요소 정보 구조 계층 구조 최상위 홈페이지에서 각 하위 페이지는 특정 주제 아래 계층을 가지고 있으며, 각 페이지는 논리적인 연결 관계를 가짐 장점 : 계층적 연결로 인해 효율적으로 정보 탐색 가능, 전체 구조에 대한 이해를 높일 수 있음 단점 : 페이지 간에 정보의 분류가 잘못 이루어져 있을 경우 웹 사이트를 방문한 사용자가 정보를 찾는 과정에서 어려움을 겪을 수 있으며, 사용자가 길을 잃는 현상이 자주 발생 적용 : 웹 사이트의 전체적인 구조로 가장 효과적 [그림 6-38] 계층 구조

03 정보 설계 요소 정보 구조 계층 구조 [사례 6-3] 계층 구조의 사이트 [그림 6-39] 1단계 깊이(depth) 메뉴가 노출된 네비게이션 [그림 6-40] 1단계, 2단계 깊이 메뉴가 노출된 네비게이션 ① [그림 6-41] 1단계, 2단계 깊이 메뉴가 노출된 네비게이션 ②

03 정보 설계 요소 정보 구조 그리드 구조 수평과 수직 형태로 링크되어 있는 구조 수직 구조와 수평 구조에는 동일한 속성의 정보를 제공해야 하며 두 가지 계열 구조의 합임 장점 : 사용자가 수직 구조, 수평 구조의 틀을 이해하면 효율적으로 항해나 정보 검색 가능 단점 : 사용 경험이 적은 사용자에게는 낯설게 느껴질 수 있으므로 언급이 필요함 적용 : DB 사이트, 교육 사이트 등 정형화된 많은 정보가 요구되는 웹 사이트에 적합 [그림 6-42] 두 계열 구조의 합인 그리드 구조

03 정보 설계 요소 정보 구조 네트워크 구조 웹 페이지를 순서나 특정 구조 없이 수많은 페이지로 나열해놓은 구조 장점 : 개발자의 의도와 상관없이 사용자 스스로 웹을 탐색하고 다양한 경험을 쌓을 수 있기 때문에 상호 작용성이 뛰어남 단점 : 사용자가 전반적인 구조를 이해하기 힘들며 길을 잃어버리는 현상이 자주 발생 적용 : 엔터테인먼트 사이트, 체험 사이트, 교육 사이트에 적합 [그림 6-43] 네트워크 구조

03 정보 설계 요소 정보 구조 널리 이용하는 사이트 구조 계층 구조 모델을 이용한 웹 사이트는 쉽고 빠르게 이해 가능 정보를 잘 조직화할 수 있고 간단하면서도 보편적임 웹 사이트 전체 구조 중 가장 많이 사용되며, 계열 구조나 그리드 구조 등이 부분적으로 사용됨 계층 구조 설계 시 폭과 깊이의 균형이 중요함 폭 : 계층의 각 단계에서 선택한 옵션의 수 깊이 : 계층 단계의 수 계층 구조 설계 시 폭을 다룰 때는 사람이 기억할 수 있는 용량의 한계를 고려해야 함 모호한 콘텐츠는 7+-2의 규칙을 따를 필요가 있음

03 정보 설계 요소 정보 구조 널리 이용하는 사이트 구조 탑 다운 방식 (Top-Down) 위에서부터 필요한 내용을 결정해 하부 구조를 만들어감 필요한 내용은 비즈니스와 사용자의 요구에서 파생 웹 사이트의 전반적인 목표와 전략을 수립, 이를 충족시킬 수 있는 요소를 붙여나감 [그림 6-44] 탑 다운 방식

03 정보 설계 요소 정보 구조 널리 이용하는 사이트 구조 바텀 업 방식 (Bottom-Up) 역으로 개별 콘텐츠 요소의 관계를 파악하고 분류하여 상부 구조를 만들어 나감 레이블링 작업 : 분류한 그룹에 이름 붙이는 작업 [그림 6-45] 바텀 업 방식 [그림 6-46] 레이블링 작업

03 정보 설계 요소 네비게이션 시스템 네비게이션 디자인(Navigation Design)의 개념 항해를 의미하며 웹 사이트에서 사용자의 이동과 관련된 개념 사이버 공간에서 사용자의 이동 편의성을 증대시킬 수 있는 방법으로 설계하는 것을 의미 웹 사이트에서의 이동 경로나 방법, 그것을 돕는 구조와 인터페이스, 디자인 등을 포괄하는 표현 일반적인 네비게이션 문제 하이퍼미디어 시스템에서 발생하는 문제 방향 상실감 경로를 탐색하다가 현재의 위치뿐만 아니라 앞으로 어디로 가야 할지 몰라 혼란에 빠지는 것처럼 위치와 방향 감각을 잃어버리는 현상 인지적 과부하 정보 탐색 작업 자체가 인지적으로 사용 가능한 작업량을 넘어서면서 원래의 목표나 과업조차 기억하기 어려운 현상

03 정보 설계 요소 네비게이션 시스템 글로벌 네비게이션 시스템 사이트 전반에 걸친 네비게이션 시스템은 전체 사이트에서 사용자가 좀더 빠르게 정보에 접근할 수 있게 함으로써 정보의 계층 구조를 보조함 이를 통해 사이트 전체의 콘텐츠 구성을 예측할 수 있음 네비게이션 시스템과 그래픽 디자인은 유연성과 콘텍스트(context)를 동시에 제공할 수 있도록 적절히 통합해야 함 콘텍스트 : 웹 사용자가 웹 사이트에 들어와서 네비게이션을 할 때 읽는 내용을 의미 [그림 6-47] 글로벌 네비게이션 시스템

03 정보 설계 요소 네비게이션 시스템 로컬 네비게이션 시스템 특정 서브 페이지에서만 사용되는 네비게이션 더 복잡한 웹 사이트 구성을 위해 글로벌 네비게이션의 보완을 위해 사용 글로벌 네비게이션의 대체보다는 보완하는 쪽으로 디자인해야 함 [그림 6-48] 로컬 네비게이션 시스템

03 정보 설계 요소 네비게이션 시스템 원격 제어 네비게이션 요소 테이블, 인덱스, 사이트 맵 등 콘텐츠에서 따로 떼어내어 제공하기 때문에 제 3자의 관점을 제공하는데 유용 네비게이션의 보조적인 방법을 제공하여 웹 사이트 콘텐츠로 접근성을 강화 내용 목록 웹 사이트 내에서 폭넓은 관점을 제공하며, 콘텐츠의 랜덤한 접근을 가능하게 함 하이퍼텍스트 링크를 사용하여 사용자는 웹 사이트 내의 다른 페이지에 직접적으로 접근 가능 웹 사이트의 크기를 고려하여 적용 여부 결정 사이트 맵 그래픽을 많이 사용하여 사이트의 구조를 표현한 형태가 많음 사용자는 명확하고 함축적인 방법으로 표현된 중요 링크만을 필요로 함 정보의 위치를 한눈에 파악할 수 있게 해주고, 정보의 위치 확인을 위한 노력을 덜어줌

03 정보 설계 요소 네비게이션 시스템 원격 제어 네비게이션 요소 [사례 6-4] 그래픽을 사용하여 표현된 사이트 맵 [사례 6-4] 그래픽을 사용하여 표현된 사이트 맵 [그림 6-49] 그래픽을 사용한 사이트 맵

03 정보 설계 요소 네비게이션 시스템 원격 제어 네비게이션 요소 보조 네비게이션 링크 글로벌 네비게이션과 로컬 네비게이션을 쓰지 않고 사용자를 움직이게 해야 할 경우 사용 모든 페이지에서 일상적으로 필요한 링크를 모아 제공 너무 많아지거나 기본 네비게이션과 차별화되지 않으면 오히려 사용자를 혼란스럽게 함 링크 메뉴와 별도로 콘텐츠 페이지 내에서 제공 네비게이션 요소인지 아닌지, 시각적인 구분을 해주는 것이 중요함 [사례 6-5] 링크를 시각화한 메뉴 [그림 6-50] 콘텐츠 페이지 내에서 제공된 링크

03 정보 설계 요소 레이블링 시스템 (Labeling System) 레이블링 시스템의 정의 레이블링의 목적 정보를 분류하여 설계할 때 분류된 항목을 지칭하는 명칭 포함되는 내용을 열거하지 않아도 그 내용을 예상할 수 있도록 하는 명칭 표현의 한 형식으로서, 웹 사이트에서 큰 정보 단위를 표현하기 위해 사용 레이블링의 목적 정보를 효율적으로 전달 사용자에게 웹 사이트의 구조 체계와 네비게이션 시스템을 명료하게 보여주는 가장 분명한 방법으로 사용 [그림 6-51] 직관적이지 못한 정보 전달

03 정보 설계 요소 레이블링 시스템 (Labeling System) 레이블링의 목적 [사례 6-6] 직관적이지 못한 레이블링 [그림 6-52] 직관적이지 못한 레이블링

03 정보 설계 요소 레이블링 시스템 (Labeling System) 레이블링 시스템의 유형 네비게이션 시스템 속의 레이블 다른 형태의 레이블링 시스템보다 일관적으로 적용하는 것이 필요 페이지에 관계없이 변하지 않는 것이 좋음 동일한 정보를 표시하는 데 두 개 이상의 변종, 즉 같은 정보를 표시하는 레이블이 독특하게 변형되어 사용될 수 있으나 적어도 단일 사이트 내에서는 일관되게 사용하는 것이 원칙임 링크 레이블 단위 정보의 본문 또는 텍스트 내에서 텍스트로 된 링크로 사용하는 레이블 콘텐츠 페이지 내에 나타나므로 다른 텍스트와 다른 성격을 가지고 있다는 시각적 구분이 필요함 아이콘 레이블 텍스트로 이루어진 레이블보다 더 많은 정보 전달이 가능하나 많은 제약을 받음 사이트에 일관적이고 차별화된 그래픽 아이덴티티를 부여할 수 있음

03 정보 설계 요소 레이블링 시스템 (Labeling System) 레이블링 시스템의 유형 그 외 레이블링의 종류 메뉴 레이블 : 웹 사이트 메뉴의 이름 메타데이터의 레이블 : 정보에 대한 메타데이터 페이지 타이틀 : 특정 페이지를 표현하는 이름 윈도우 타이틀 : 웹 브라우저의 윈도우 타이틀에 나타나는 말 버튼의 레이블 : 버튼에 대한 레이블 서비스 레이블 : 서비스 명칭

03 정보 설계 요소 레이블링 시스템 (Labeling System) 효과적인 레이블링 시스템 만들기 현재 사용 중인 표현법이나 레이블명을 검토 다른 웹 사이트를 참고 가능한 레이블을 구체적으로 기술할 수 있도록 만들고, 다른 것과 차별화하도록 노력 어떤 내용을 포함하고 있는지 정확하게 파악하여 그 하위내용을 잘 표현할 수 있는 레이블링을 정해야 함 레이블링 시스템의 전체적인 크기와 표현에 일관성이 있어야 함

03 정보 설계 요소 실습 과제 다음의 3가지 구조를 보고 좋은 구조인지, 좋지 않은 구조인지 말해보고 그 이유는 무엇인지 설명해보자 [그림 6-53] 구조 ①

03 정보 설계 요소 실습 과제 다음의 3가지 구조를 보고 좋은 구조인지, 좋지 않은 구조인지 말해보고 그 이유는 무엇인지 설명해보자 [그림 6-54] 구조 ②

03 정보 설계 요소 실습 과제 다음의 3가지 구조를 보고 좋은 구조인지, 좋지 않은 구조인지 말해보고 그 이유는 무엇인지 설명해보자 [그림 6-55] 구조 ③

03 정보 설계 요소 실습 과제 버텀 업 방식과 탑 다운 방식을 사용하여 계층 구조를 설계해보자 구조가 정해졌다면 각 그룹에 이름을 붙여보자 정해진 포맷에 구조 설계를 완성하자 (Form_메뉴구성도.xls) 각각의 레이블명을 다시 검토해보자 (직관적인 레이블) 각 팀별로 그룹핑한 이유를 설명하고, 왜 그 그룹핑을 대표하는 레이블인지에 대해 각자의 견해를 밝히고 토론해보자

Thank You 웹 기획 : 성공적인 웹사이트의 첫 번째 조건