서비스 기획에서 정보구조(Information Architecture, IA)란 무엇인가?

 

 

 

 

이전에도 한번 정보구조도 관련 글을 작성했지만 한번 더 정리하자는 의미로 다시 작성한다.

 

(이전 글) IA (Information Architecture) 정보구조도에 대하여

IA (Information Architecture) 정보구조도 에 대하여

 

 

---

 

정보구조(Information Architecture, IA) 란

서비스 기획의 [설계] 단계에서의 산출물 중 하나.
전체 서비스에 분포된 정보들의 위치와 구조를 파악할 수 있는 문서를 말한다. (일종의 아파트 도면이라고 생각)
화면 영역(Screen)을 표기한 것으로 IA를 통해 프로젝트 규모를 파악할 수 있다.

 

정보구조를 작성 포맷은 정해져있지 않다. 

중요한 것은 서비스가 제공하는 정보(콘텐츠)를 사용자의 사용성, 서비스의 흐름, 정보(콘텐츠)의 중요도에 따라 배치하고, 알맞게 표현하는 것이다.

 

 

정보구조를 작성하면 좋은 점

1. 전체 서비스의 규모를 파악할 수 있다.

또한 AS-IS/TO-BE를 통해 전체 서비스 중 변경되는 부분을 파악하기도 좋다.

 

2.  화면 간 연결성을 표현하여 사용자의 서비스 이용 흐름(User Flow)을 파악할 수 있고 발생할 수 있는 문제점을 예측할 수 있다.

 

3. 결국은 개발 과정에 편의성을 높이기 위한 문서이므로 개발자, 디자이너와 소통을 더 원활히 할 수 있다.

 

 

정보구조도는 어떻게 작성하는가?

정보구조도를 검색하면 IA, 메뉴트리, 메뉴구조도, 화면흐름도 이런 이름들로 몇 가지 형식이 돌아다니지만 결국 포맷이 비슷하긴 해서 여간 헷갈리는 게 아니다. 본인도 처음 기획 공부를 하며 정보구조도에 대해 찾아보는데 대충은 알겠는데 막상 작성하려 하면 막막한 상태였다. 하지만 결국 웹/앱 기획에 사용되는 것이므로 어렵게 생각할 필요는 없다는 것을 알았다. 결국 웹 화면 아니면 앱 화면 구조를 잡기위함임을 기억하자.

 

 

1. 엑셀형 구조도

이미지는 텀블벅 사이트의 회원 파트를 엑셀 형식으로 정보구조도를 나타낸 예시이다.

 

'구분' 어떤 파트의 정보인지를 표현

'Depth' 정보의 깊이. 어떤 탭 안에 어떤 내용이 포함되는지를 표현

'접근권한' 누가 접근할 수 있/없고 어디서 접근이 가능한지

'디바이스' PC, APP 

'화면ID' 개발자, 디자이너와 소통 시 화면 아이디를 통해 빠르고 정확하게 소통이 가능하다.

(예 - 회원에 내가만든프로젝트에서 배송지 설정 말인데요~ / BUG_HJ_024번 에서~)

'page' 화면을 할당하여 구성하는지를 표현. 하나의 내용을 여러 페이지로 분할하여 만드는 경우도 있으므로 필요한 페이지 수를 확인한다.

'type' 직접 화면을 그리는지, 외부 링크로 연결하는지, 모달(LP, Layered Popup)인지 등을 표현

'Description' 화면에 대한 설명을 적는다. 너무 짧지도 너무 길지도 않게 적는다.

(예 - 로그인/로그아웃 가능 (x) 위 이미지 속 BUG_HJ_005 처럼 구구절절도 (x) )

 

이런 엑셀형 구조도 작성을 해보니 좋다고 느낀점과 부족다 느낀점을 몇 개 적자면

 ✧ 각 계층 간 상하 관계를 가늠할 수 있다.

 ✧ 실제 커뮤니케이션 과정에서 확실히 구구절절 설명하는 범위가 줄어들었다.

 ✧ 와이어프레임을 보지 않아도 화면 개수를 파악할 수 있었다.

 

 ✦ 페이지 간 연결성을 표현하기 어렵다.

 ✦ Depth가 깊어질 경우에 대한 작성이 어렵다.

 ✦ 서비스가 클 수록 작성 내용이 과하게 방대해진다.

 

 

 

2. 메뉴트리형 구조도

출처 : (우측) 앱 메뉴 구조도 출처 : 세균무기 

이미지는 가상의 사이트를 구성하며 작성한 메뉴트리형 정보구조도와  타 게시글에서 들고 온 예시이다.

각 메뉴와 그 하위 메뉴가 무엇이 있는지 파악할 수 있다.

모바일 에서는 엑셀형식보다 확실히 구조 파악이 쉽다. 별도의 정보는 와이어프레임을 이용하여 Description을 작성하면 된다.

다만 확실히 하나의 페이지로 전달할 수 있는 정보가 적으므로 좀 더 디테일 하게 작성하는 것이 좋을 것 같다.

 

 

 

3. 상세메뉴형 구조도

https://www.castingn.com/ 배달의 민족 일부 발췌

각 메뉴별 세부 내용을 포함한 정보구조도이다. 

가장 큰 메뉴와 상세메뉴까지 확인할 수 있다. 각 화면마다 별도의 설명을 작성하기 좋고 깊은 Depth로 내려가면 별도의 칸을 마련해 작성하는 것도 가능하다. 

아직 이런 식으로 작성해 본 적은 없는데 다음 기획에서는 화면에 넣지 않아도 해보는 게 좋을 듯 하다.

각 화면 간 연결성을 표현해도 괜찮을 것 같다. 다만 너무 지저분해지지 않도록 주의하자. 하고 싶은 내용은 핵심만 적자.

 

 

+) 모바일 형식의 메뉴트리형, 상세메뉴형 구조도는 흡사 사이트맵을 가져오면 되는 것 같지만 약간의 차이가 있음을 인지하자. 사이트맵은 어디까지나 사용자가 쉽게 정보의 위치를 찾을 수 있도록 제공하는 기능이고 정보구조도는 개발자, 디자이너와 소통하기 위한 산출물이다. 당연히 앞 단 (Front Side) 뿐만 아니라 백 단 (Back Side)에 대한 정보구조도 포함되어야 한다.(물론 아직 신입인 본인은 앞 단 IA 짜는 것도 머리아프지만 점점 뒷 단도 생각할 수 있게 되는 중임)

 

 

 

잊지말자.
정보구조를 작성하는 이유는 결국 '커뮤니케이션을 위함'이다.
정보를 공유할 사람이 보기 쉽고, 이해하기 쉬운 것이 최고다.

 

 

 

 

정보구조도 설계 시 고려할 사항

설계의 목적은 사용자가 원하는 곳에 원하는 콘텐츠/기능이 있도록 하는 것이다.

각 화면의 콘텐츠 및 디자인 레이아웃과 화면 간 흐름, 사용자가 페이지에서 페이지로 정보를 이동하는 방식을 고려해야한다.

이를 위해서 User(사용자), Contents(콘텐츠), Scenario(시나리오)로 나누어 생각해 볼 수 있다.

 

◇ User(사용자)

• 사용자가 갖고 있는 기존 경험을 고려한다.
  • 사용자는 기존에 다른 곳을 이용하던 경험을 갖고 있다. 그 경험에서 벗어나는 것은 사용자에게 서비스 이용에 대한 불편함을 주고 서비스를 어떻게 이용하는 것인지 모르겠다는 경우가 발생할 수 있다. 그러므로 IA를 설계할 때 사용자가 늘 이용해오던 서비스의 흐름에서 크게 벗어나지 않아야 한다.
• 우리 서비스에서 사용자가 얻고자 하는 것은 무엇인가
  • 사용자의 서비스 이용목적에 따라 서비스들의 배치가 달라질 수 있다. 독서 기록을 하는 서비스에 글쓰기 버튼이 깊은 depth 안에 있다면 사용자는 귀찮아서 서비스를 이용하지 않게 될 것이다.
• 서비스 이용 중 사용자가 보이는 패턴
  • 여행 서비스라면 계절별로 사용자가 이용하고자 하는 서비스가 어느정도 정해져 있을 것이다. 그렇다면 이를 좀 더 상위에 노출하거나 사용자가 쉽게 발견할 수 있도록 배치나 구조를 변경하는 등의 조치로 해당 서비스에 좀 더 쉽게 접근할 수 있게 하는 것도 방법이다.

◇ Contents(콘텐츠)

• 콘텐츠의 중요도가 누구 중심인가?
  • 사용자가 콘텐츠를 찾는 원인은 몇가지가 있다. 이를 충족시킬 수 있는 구조를 유지해야 사용자의 서비스 경험이 올라간다.
    • 알려진 항목 찾기 : 사용자는 웹사이트에 방문하여 바람직하고 알려진 항목을 검색
    • 탐색적 추구 : 사용자는 영감을 얻기 위해 웹사이트를 방문. 그들은 바람직한 것을 찾고 있지만 정확히 무엇인지는 모릅니다.
    • 철저한 연구 : 사용자는 광범위한 연구 과정에 있습니다. 그들은 가능한 한 많은 정보를 찾고 싶어합니다.
    • 재탐색: 사용자가 원하는 항목이 다시 필요하여 다시 찾으려고 합니다.
• 사용자가 인지하고 있는 네이밍인가?
  • 사용자의 경험을 토대로 익숙한 네이밍을 사용해야 사용자의 이용에 불편함이 없다.

◇ Scenario(시나리오)

• 어떻게 전달되어야 하는가?

 

 

 

 

 

 

 

---

 

<참고>

웹, 모바일을 위한 I.A(Information Architecture, 정보구조도)-Jlight