화면흐름도와 IA의 차이는 무엇인가요?
IA는 메뉴를 분류/그룹화하여 Depth 구조로 설계한 것이고, 화면흐름도는 화면, 기능 단위로 사용 동선을 설계하는 것입니다.
두 문서를 사용하는 목적은 같으나, 약간의 차이는 있습니다. IA는 대기업에서 진행하는 프로젝트에 들어갈 때 사용하면 좋고, 화면흐름도는 스타트업 규모에서 작성하기 용이합니다. 아래 장단점을 읽어보고 자신의 팀에게 맞는 문서는 무엇일지 생각해 보시길 바랍니다.
화면흐름도
장점 : 도식화되어 이해가 월등히 높다. 구현자가 아닌 경영자도 쉽게 파악할 수 있다. 화살표 하나로 화면 이동을 쉽게 표현할 수 있다.
단점 : 프로젝트 일정, 파트별 진행 여부를 파악하기 위해, 프로젝트 일정표 문서를 별도로 만들어야 한다.
IA
장점 : 프로젝트 일정, 파트별 진행 여부를 동시에 관리할 수 있다.
단점 : 트리구조이기 때문에 1개의 메뉴 밑에 존속되게 표현되어 설명이 제한적이다. (예: A화면에서 ‘결제’로 이동 / B화면에서도 ‘결제’로 이동이 가능하다고 했을 때, 이를 표현할 수 없다.)
화면흐름도 (Screen Flow chart)
화면흐름도는 화면/기능 단위로 사용 동선 흐름대로 도식화하는 문서입니다. 화살표를 따라가면 사용자가 어떤 프로세스로 이용하는지 볼 수 있습니다.
예를 들어, 예약 기능에 진입했을 때 화면(네모) 8개를 거쳐야 예약 완료된다면 프로세스가 길어 이탈률이 발생할 수도 있다는 추측도 가능합니다.
화면흐름도 문서 샘플
화면흐름도 프로그램 — draw.io
제가 애용하는 프로그램을 소개합니다. 구글에서 제공하는 온라인 다이어그램 툴 draw.io 입니다. 흐름도에 필요한 도형, 화살표 등이 있어 사용하기에 아주 좋습니다.
IA(Information Architecture)
IA는 정보 구조 설계하는 문서로 웹의 사이트맵, 메뉴구조도로 이해하시면 됩니다. IA 문서로 각 파트 별로 진행상황을 공유할 수 있어, 프로젝트 일정을 동시에 관리할 수 있습니다.
공식적으로 사용하는 양식은 없지만, 필수로 기재 해야 하는 항목은 대개 유사합니다.
IA 문서 샘플
IA 문서 다운로드 — 공개된 자료
Q) 그렇다면 진행자님은 두 문서 모두 작성하나요?
개인적으로는 IA는 작성하지 않고 화면흐름도를 작성합니다. 사실 제가 주도하는 프로젝트에서는 IA를 사용한 적이 한번도 없습니다. 물론 두 문서 모두 작성해도 좋습니다.
IA는 프로젝트 일정표의 역할을 동시에 관리할 수 있지만, 어쨌든 본 문서를 작성하는 1차 목적은 전체 구조를 파악을 위한 것이므로, 한 번에 이해할 수 있는 화면흐름도를 선호합니다. 특히 구현자(기획, 디자인, 개발자)가 아닌 경영진이나 클라이언트에게 전체 구조를 설명하기에 아주 좋습니다. 그래서 저는 IA 대신에, 프로젝트 일정표를 따로 만듭니다.
그리고 IA의 단점으로는 여러 루트로 들어갈 수 있는 기능에 대해 표현할 길이 없다고 했는데, 화면흐름도에서는 화살표 하나로 표현할 수 있습니다. IA를 작성하다 보면 ‘이 메뉴는 여기서도 들어가고, 저기에서도 들어갈 수 있는데 어디에 적어야 하지?’ 라는 작은 고민이 귀찮게 합니다.
