IA(Information Architecture)란?
IA는 정보 구조를 설계 및 관리하는 문서입니다. 쉬운말로는 서비스의 인덱스(목차)역할을 합ㄴ디ㅏ. 정보구조설계 및 정의 라고 하면 여러가지 구성 형식에 맞춰서 정보 시스템의 구조를 정리할 수 있겠지만, 일반적으로 사이트맵 형식을 IA설계라고 합니다.
하지만 사이트맵과 다릅니다. 예를 들어 쇼핑몰에서 중요한 메뉴는 “주문하기”, “결제하기” 입니다. 하지만, 사이트맵에서 없지요. 이는 제품상세페이지의 후속 메뉴로 정보설계에서 필요한 메뉴이지 사이트맵의 네비게이션을 위한 메뉴가 아니기 때문입니다.
모바일과 APP이 대세이기 전, 웹사이트의는 복잡한 구조의 사이트 틀을 짜고 콘텐츠를 구성하는 일 외에, WBS의 기준이 되는 IA를 기준으로 개발의 일정관리도 통합해야 해야 하기에 매우 중요한 역할을 했습니다. 하지만 요즘의 모바일, APP 서비스 에서는 하나의 기능 또는 페이지가 심플한 역할을 하기도 하고 다수의 페이지와 합쳐져 표시되어야 하는 역할을 하게 되면서 개발할 페이지의 목록이 강해지고 있습니다. (대부분이 엘럿과 후속 고객 플로우를 페이지화 하고 있습니다.)
저의 경우, 회원가입 중 SMS인증을 할경우 기존의 IA는 하나의 본인확인 페이지로서 역할을 했었습니다. 현재 APP에서는 본인확인시 네이티브 앱 기준으로 이름입력, 전화번호입력, 인증요청버튼, 인증번호입력, 인증번호입력실패의 기능 페이지가 모두 존재 하도록 설계를 합니다. 물론 1페이지에서 엘럿으로 충분히 처리 할 수 있게 할 수도 있지만, 그때그때 프로젝트의 유형과 성격에 따라 UX관점을 포함하기 때문입니다.
IA의 구성시 고려해야할 3가지
User 관점 에서 고려해야 할 사항
- 사용자가 기존에 어떠한 경험을 가지고 있는가
- 우리 서비스에 왜 방문하고 어떤것을 얻으려고 하는가?
- 사용자가 이용중에 행동하는 패턴은 어떤것이 있는가?
항상 리뉴얼 프로젝트를 할때 고객의 방문율 저하, 이탈율의 증가는 당연하게 생기는 원칙이었습니다. 이는 방문자의 머리에 학습된 기존 메뉴구조에 대한 틀을 방해한 결과를 초래했기 때문입니다. 즉 고객의 방문목적과 패턴을 알아야 하는 이유가 되기도 합니다.
신규프로젝트도 동일합니다. 경쟁사 벤치마킹을 통해 방문자의 머리에 학습된 메뉴구성이 어떤지를 살펴봐야하고 불편요소, 추가해야할 요소를 서비스에 넣어야 합니다.
즉 우리 서비스에 방문한 목적과 패턴을 기존서비스 또는 벤치마킹을 통해 분석하고 구성 배치에 있어 최대한 사용자의 학습된 구조의 틀에서 벗어나지 않도록 고려해서 설계 해야 합니다. 그렇다고 동일할 필요는 없습니다. 고객의 학습속에는 “늘 이게 불편해” 하는 부분이 있기에, 서비스에서는 개선하고 편하게 하는 부분이 더 많을수 밖에 없습니다.
Contents에서 고려야해 할 사항
- 컨텐츠의 중요도는 공급자중심인가? or 사용자중심인가?
- 사용자가 인지하고 있는 네이밍인가?
정보구조설계에서 컨텐츠의 중요도는 서비스의 목적에 따라 크게 다릅니다.
사용자중심의 서비스는 플랫폼, 커뮤니티가 대표적 서비스 입니다. 매칭을 원하는 유저(이용자, 수요자)의 원할한 매칭, 거래가 이루어 질 수 있도록 시스템적으로 지원을 해 주는 서비스들이지요. 이때 비즈니스적으로 가치와 매출을 올릴수 있는 방법은 사용자가 쉽게 접근하고 쉽게 컨텐츠를 생산하고 생산된 컨텐츠가 쉽고 빠르게 검색 또는 노출이 되도록 해야 합니다.
공급자중심의 서비스는 독서, 뮤직,웹툰 등의 서비스가 됩니다. 이 경우 직접 “결제하세요”, “정기구독하세요”라는 노출구조보다는 키가 되는 컨텐츠를 제공하거나 일부를 오픈 공개하여 사용자 경험을 제공 후 자연스러운 흐름으로 결제가 된다면 더 나은 가치와 매출을 이룰 수 있을것 입니다.
추가적으로 사용자 입장에서 불분명하고 물음표가 생기는 네이밍보다 사용자에게 익숙하고 편한 네이밍을 사용해야 합니다.
Scenario 에서 고려해야 할 사항
유저의 방문, 가입, 로그인, 컨텐츠 조회 및 생성, 서비스 조회 및 이용 등에 대한 시나리오를 고려하여 플로우에 맞추어 정보구조를 설계 합니다.
이 부분은 개발자에게 가장 중요한 부분으로 PM의 입장에서는 일정과 진척도 관리에 필요한 WBS의 주요 기준점도 됩니다.
IA의 종류
웹사이트, APP에 따라 I.A의 기본구조가 달라집니다. 모바일도 기본적으로 웹사이트의 구조를 가지고 있으나 여기에 Jump 또는 흐름의 연결이 필요합니다. 제 경우는 기초구조를 진행 후, 이 기초구조를 기준으로 IA를 설계해 나갑니다.
IA 기초구조는 키포인트 서비스를 중심으로 MVP를 상상하며 설계를 합니다. 이것은 핵심을 놓치지 않고 서비스에 집중할 수 있는 역할을 해 줍니다. 이후 기초구조에 서비스에 꼭 당연하게 필요한 로그인, 마이페이지 일반사항 등을 IA에 추가하여 완성합니다.
위의 기초 구조를 기준으로 전체 구조를 설계 하고 여기에서 서비스에 필요한 기획을 위한 기능을 추가하고 세분화 하여 IA를 완성해 갑니다. 기획자마다, 그리고 프로젝트마다 IA를 작성하는 방법은 조금씩 다릅니다.
1) 프로젝트에서 어떤 기능을 구현할지 파악하기
먼저 프로젝트에서 구현할 기능들을 나열합니다. 구인구직을 IA를 예로 들면, 회원가입, 로그인, 채용정보, 채용지원, 이력서, 기업정보조회, 등.. 서비스에 필요한 메뉴들이 있습니다.
2) 기능을 트리구조로 나타내기
기능들을 나열한 후, 관련된 것끼리 묶습니다. 예시를 보면, 회원가입과 로그인이 "로그인"이라는 큰 카테고리로 함께 묶이겠네요. 그리고 회원가입은 다시 일반회원가입과 소셜회원가입이 있겠지요.
그리고 해당 노드에서 필요한 기능을 추가하고 그룹핑 해주어 필요시 하위노드를 추가 해 줍니다.
이때 최대 4Depth정도가 적정하다고 저는 기준을 잡았습니다. 4Depth이상일 경우 다시 그룹핑을 해서 상위노드로 옮겨주어야 겠지요.
자 이와같이 IA가 간단하게 만들어 졌습니다.
IA도 트리구조처럼 작성하시면 됩니다. 표의 가장 왼쪽이 상위노드이고 하위 depth로 갈수록 상위 depth의 자식노드가 됩니다. 부모노드에는 기능 전체를 포괄할 수 있는 상위 카테고리를 적고, 하위노드로 갈수록 구체화된 기능을 적습니다. 해당 과정을 통해 1에서 나열한 기능들을 트리구조로 묶어봅니다.
그룹화 하는 최종 단계로 3Depth~4Depth 까지의 구성을 합니다. (그 이상 깊이 들어가는 것은 비효율적 입니다.)
3) 마지막 depth에는 기능 구현에 필요한 데이터 적기
트리구조로 묶는 작업이 끝났다면, 가장 하위 depth에는 해당기능(화면)에서 필요한 데이터를 적어줍니다. 앞서 설명한 로그인 예시에서 필요한 데이터를 트리형식으로 적어보았습니다.
4) 마지막 depth에는 기능 구현에 필요한 데이터 적기
추가적으로 처리해야하는 기능들은 Description으로 추가를 해 줘야 합니다.
5) IA 엑셀 정리
여러가지 패턴의 IA가 있지만 엑셀이 지금까지 써온 패턴중에서는 제일 사용성이 좋았습니다.
엑셀로 옮겨 정리를 하면서 페이지ID가 부여되고 해당 기능이나 페이지의 업데이트여부, 어드민관리대상, 페이지유형을 추가 하면 완료 됩니다.
페이지의 형태가 업데이트/관리가 필요한지를 체크 해 줍니다. 이에 따라 Admin 개발이 필요한지도 체크 해 줍니다. 그리고 페이지타입(유형)을 정적 페이지인지 동적 페이지인지 기재 해 줍니다.
프로젝트를 진행하면서 이와같이 정리를 하게 되는데 이때 항목이나 구성은 상황에 따라 추가/삭제 해 주시면 됩니다.
이러한 IA기준으로 커뮤니티 게시판 경우 읽기/쓰기/수정/삭제 권한과 방법 항목을 추가하여 정리 할 수도 있고 단순히 Description에 넣어줄수도 있습니다. ,
6) 모바일을 위한 패턴
구인구직 앱을 간단하게 트리구조로 맵을 만들어 보고 말씀 드리겠습니다.
모바일에서는 다음과 같이 서비스의 흐름 및 네비게이션 바(없으면 생략)를 포함하여 구조를 작성하는것이 개발팀에서 보기에 이해가 빠릅니다.
처음부터 볼까요?
우선 APP을 처음 시작할때 보여지는 스플래쉬 화면에서 튜토리얼을 거쳐 로그인/회원가입 페이지로 진행이 됩니다.
여기서 로그인 또는 회원가입을 거치면 프로모션 팝업이 나타나며 홈 화면이 View처리 됩니다.
화살표(->)를 통해 흐름을 나타내는 것을 알 수 있습니다. 일반 대시는 유저의 선택입니다.
홈 화면으로 넘어가면 네비게이션 바가 보입니다.
여기서 네비게이션 바는 사용자가 원하는 정보를 빠르고 정확하게 검색하고, 정보와 정보 사이의 이동을 원활 하게 돕기 위해 제공하는 것으로 검색기능, 사용자위치정보, 리스트메뉴, 탭메뉴, 토글 메뉴, 사이트맵 등의 체계를 말합니다.
다시 I.A.로 넘어가볼까요?
파랑색 박스로 표시된 영역은 네이게이션 바의 구성 요소를 설명합니다. 그 박스 밑에 적힌 영역은 그 화면에서 필요한 기능 또는 메뉴들을 표시 합니다.
이에 따라 홈 메인 화면 안에는 자주 사용되는 기능 또는 메뉴인 알림, 이력서관리, 맞춤채용정보, 지원내역 등의 내용이 표시해 보았습니다.
이러한 초안을 기준으로 누구나 쉽게 이해 가능할 수 있도록 재 구성 하여 앱 상세 구조도를 통해 각 구성요소에 대한 자세한 설명을 포함 해 보겠습니다.
단순히 앱 메뉴와 흐름을 설명하는 것과 비교해 더욱 자세한 내용을 포함하고 있는 것이 바로 앱 상세 메뉴 구조도입니다.
보다 상세한 내용과 서비스의 전체적인 흐름을 설명할 수 있습니다.
I.A.를 통해 우리 서비스의 전체적인 구조를 파악할 수 있습니다.
이를 통해 우리 서비스가 어떤 구조를 가지고 있으며 각각의 뷰가 담는 정보들을 바탕으로 와이어프레임 이라는 청사진을 작성하게 됩니다.
이러한 내용을 디자이너가 이해할 수 있는 구조도가 없다면 정해진 틀에서 일부 배치만 수정하겠지만, 구조도를 기반으로 작성을 한다면 보다 사용자 친화적인 서비스 설계에 용이하며 새로운 틀의 서비스를 만들 수 있습니다.
개발자 역시 I.A를 통해 서비스의 전체적인 틀을 잡으며 안에 구성된 정보들을 바탕으로 개발에 착수합니다.
결국 기획자는 정확한 I.A.를 기반으로 디자이너 및 개발자와 소통해야 하며 원할한 개발 환경 조성을 할 수 있습니다.
'앱.웹 기획 > 03. IA 정보구조 설계' 카테고리의 다른 글
| 플로우차트 (0) | 2023.12.11 |
|---|---|
| 어드민 IA 설계 (0) | 2023.12.10 |