19편 -사이트 구조(IA) 만들기
IT 기획 설계의 준비
웹이나 앱을 설계하기 위해 필요한 화면들을 모두 나열하고, 화면들을 구조화해야 합니다. 구조화 한다고 하여 그리 어려운 것이 아닙니다. 비슷한 성격의 메뉴끼리 그룹하는 것이죠. 이런한 작업을 IT 기업에서 IA(Information Architecture)라고 합니다.
사이트 구조 설계 - 공통점을 갖은 화면이나, 연결된 화면 그룹으로 묶기
목적성 기능을 화면 단위로 설계하면 필요한 화면들이 정리되고, 한 가지의 목적성 기능을 수행하기 위해 연결할 화면이 정리됩니다.
게시판 기능에는 작성, 목록, 상세 화면이 각 메뉴로 구성되는 것이 아닌 하나의 기능으로 연결된 것처럼 말이죠.
이제는 정리된 화면과 기능들을 어떤 기준으로 분류를 할 것인가를 고민해야 합니다.
예를 들면 대표 인사말, 찾아오시는 길, 회사 연혁 화면의 공통점은 모두 기업에 대한 내용입니다. 흔하게는 ‘회사소개’라는 메뉴를 만들어 상위 개념으로 묶을 수 있습니다.
한 가지 더 예를 들어 볼까요?
공지사항, 일간소식, 자주묻는 질문, 질문/답변 등의 기능들은 모두 게시판 형태를 띠고 있습니다. 단순하게 생각해 보다면 ‘게시판’이라는 메뉴명으로 모두를 묶을 수도 있지만, 생각을 달리하여 '○○○안내'(공지사항, 일간소식), 고객센터(자주묻는 질문, 질문/답변)과 같이 두 그룹으로 나누어 설계할 수 있습니다. 그리고 꼭 그룹으로 묶지 않아도 됩니다. 화면이나 메뉴 하나가 사이트의 핵심 내용이 담겨 있거나, 이용자들이 꼭 보아야 하는 내용이 있다면 단독 화면으로 메뉴를 만들 수 있습니다.
비용을 산출해 보기 위해 기능 정의서 작성이 선행되었다면, 그룹화 작업은 쉽게 진행할 수 있습니다. 그리고 기능 정의서에서 작성한 뎁스를 반드시 따라야 하는 것은 아닙니다. 사이트의 전체 기능이 한눈에 잘 들어오는지, 사이트의 서비스 특징이 강조되는지를 염두에 두고 그룹화 합니다. 그룹화가 끝나면 사이트 구조를 한눈에 볼 수 있는 대략적인 윤곽이 드러납니다.
사이트 구조를 문서로 만들기
사이트 구조를 만들기 위한 기본 작업이 완료되었다면, 이제는 문서로 정리를 하며 재검토하는 작업이 남았습니다. 사이트 구조 문서가 만들어지면, 의뢰인, 웹 디자이너, 웹 퍼블리셔 웹 개발자에게 전달해 사이트의 전체적인 모습이 어떻게 생겼는지, 대략적인 작업량은 얼마나 되는지 예상할 수 있게 합니다. 사이트 구조 문서에 설계된 화면들은 기획자에게는 화면 정의서로 설계될 화면들, 디자인너에게는 디자인 할 화면들, 퍼블리셔에게는 퍼블리싱을 해야 할 화면들, 개발자들에게는 개발해야 할 화면을 뜻하기 때문입니다.
사이트 구조 문서의 양식은 다양하지만, 기본적으로 정리 방법은 상하 관계를 고려하여 화면의 경로를 뎁스로 표현하여 구분하면 됩니다.
연결이 되어야 하는 화면과 기능, 공통점을 갖는 화면, 내용이 중요하여 상위 메뉴로 존재해야 하는 화면 등의 기준으로 그룹화를 진행하면 사이트 구조의 윤곽이 보입니다.사이트 맵 만들기
사이트 구조 문서는 사이트를 구현하기 위해 작업자들이 보는 문서라면, 사이트 맵은 이용자가 원하는 메뉴를 한 번에 찾을 수 있도록 제작된 이용자 지도입니다. 형태는 사이트 구조 설계의 약식 구조라고 생각하면 됩니다.
따라서 사이트 구조 문서를 기반으로 사이트 맵을 만들게 되는데요. 이용자가 원 클릭으로 접근 가능한 메뉴 또는 특정 프로세스를 기준으로 작성됩니다. 세분화하여 더욱 깊이 있는 화면까지 연결해 줄 수도 있지만, 많은 내용을 담으면 사이트 맵의 복잡도가 높아져 이용자에게 오히려 불편을 줍니다. 예를 들어 공지사항의 게시글을 사이트 맵에 모두 노출 시킬 수 있습니다. 하지만 많은 글에 가려 다른 메뉴들을 찾기 힘들 것입니다. ‘맵’ 이라는 기능을 할 수 없는 것이죠. 따라서 사이트 맵에서는 이용자가 원하는 정보를 찾을 수 있는 실마리만 제공한다고 생각하면 됩니다.
① 완성된 사이트 구조에서 리스트, 상세, 글쓰기 화면 등 세부 화면을 제외하고 메뉴만 남기세요.
② 원 클릭으로 접근이 불가한 화면이나, 특정 절차를 거처야 접근이 가능한 화면을 제외하세요.
- 결제 화면은 결제할 상품이 필요하므로 결제 화면에 다이렉트 접근을 할 수 없고, 가입 완료 화면은 동의 및 회원 정보 작성이 선행되어야 하므로 접근할 수 없습니다.
➂ 남은 메뉴들을 표나 트리 구조로 표현합니다.
사이트 맵의 메뉴를 클릭 시 연결될 화면은 대부분 해당 메뉴의 하위 첫 번째 화면이지만, 메뉴의 특성에 첫 번째 화면이 아닌 두 번째 또는 세 번째 등 같은 그룹내의 다른 하위 메뉴로 연결도 가능합니다. 고객센터를 클릭하면 바로 하위 메뉴인 공지 사항이 아닌, 자주묻는 질문으로 연결하는 것처럼 말이죠.
▶ 네이버(www.naver.com) > 상단읜 더보기(...) 버튼 > 서비스 전체보기를 클릭해 보세요.
네이버의 모든 메뉴가 정리된 화면을 볼 수 있습니다.
너무 세부적으로 메뉴를 구성한다고 해서 좋은 것은 아닙니다. 이용자가 직과적으로 '아 내가 원하는 메뉴가 여기 어디쯤 있겠구나?' 하면서 유추가 되어야 합니다. 그러기 위해서는 7개의 메뉴 내에서 메뉴의 깊이(Depth)를 3단계 이내로 유지하고, 유사한 성격의 메뉴로 분류 체계를 구축하세요.