서비스 IA

서비스 기획자라면 꼭 알아야 하는 서비스 IA 활용 방법!

서비스 기획자는 논리력이 중요한 직무인데요. 그래서 오늘은 각 화면의 정보를 상세하게 정의하고 관리하기 위한 목적으로 서비스 기획자들이 사용하고 있는 서비스 IA와 플로우 차트에 대해 소개하고 어떻게 활용하는지 설명드릴게요!

제로베이스 PM 취업 스쿨

Written by. 김나연
現 IT 기업 PM

00 | 서비스 기획자에게 가장 필요한 역량은?

출처 = pixabay

“서비스 기획자에게 가장 필요한 역량은 무엇일까요?”

서비스 기획자로 일하게 되면, 다양한 문서를 통해서 개발자와 디자이너와 협업하게 되어요. 서비스 기획자가 되고 싶은 취준생들에게 가장 많이 듣는 질문 중 하나도 이러한 문서와 관련된 것이 있죠. 또, 어떤 역량을 가지고 있어야 유리하냐는 질문도 많이 듣곤 해요.

우선 역량부터 답을 하자면, 사실 창의력보다는 논리력이 훨씬 중요한 직무라고 생각해요. 창의적이기만 한 기획은 구현이 어렵고, 설득도 어렵기 때문이에요. 물론 아이디어를 내는 과정에서 다양한 방향을 고민할 수 있을 정도의 창의력은 필요하겠지만, 그보다는 왜 해야 하는 지나 어떻게 해야 하는지 전개할 수 있는 논리력이 무척 중요하답니다.

그래서, 서비스 기획자는 서비스 IA나 메뉴 트리, 플로우 차트, 화면 설계서, 기능 명세서 등 다양한 문서를 활용해서 스펙을 정의하고 플로우를 설계해요. 그중, 각 화면의 정보를 상세하게 정의하고 관리하기 위한 목적으로 서비스 기획자들이 사용하고 있는 서비스 IA와 플로우 차트에 대해 소개하고 어떻게 활용하는지 설명드릴게요!

01 | 서비스 IA와 플로우 차트의 공통점과 차이점

사진 출처 = PM 취업 스쿨 차상호님 포트폴리오 예시 속 트리 형식의 IA
* 차상호님 포트폴리오 바로가기

우선 서비스 IA(Information Architecture)란, 정보 구조도라고 불리며 이름과 유사하게 서비스 기획과 관련된 다양한 정보를 여러 목적으로 기능, 정책에 따라 이해하기 쉽게 정의된 문서입니다. 서비스를 기획하는 것에 대해 설계 구조를 전반적으로 정리하는 문서라고도 이해하면 좋아요. 상세한 기획을 하기 전 서비스의 구성 요소를 전반적으로 기록하고, 이를 기반으로 논의를 하기 위해서도 활용할 수 있어요.

플로우 차트는 화면 흐름도라고도 불리며, 화면 및 기능 단위로 사용 동선을 도식화하는 문서에요. 그렇기 때문에 플로우차트를 보면 사용자가 어떤 프로세스대로 서비스를 이용할 것인지에 대해서 파악할 수 있어요. 서비스의 퍼널이나 진입 단계 등에 대해 파악할 때 용이하게 사용할 수 있는 문서라고도 할 수 있어요.

💡 서비스 IA와 플로우 차트의 공통점

- 서비스의 전체 구조를 파악하기 위해 활용합니다.
- 프로젝트 전체 규모를 이해시키고 개발자와 디자이너와 협업하기 위해 활용합니다.

두 문서 모두 서비스의 상세 기획을 하기 전, 전체 구조를 파악할 때 용이해요. 서비스 상세 기획을 할 때는 각각의 세세한 화면별 기능이나 연결되는 데이터 관리, 그리고 대략적인 와이어 프레임을 포함해야 하지만 서비스 IA와 플로우 차트는 가장 앞단의 표면적인 기능을 정의할 때 활용할 수 있어요.

물론, 서비스 IA가 플로우 차트보다는 좀 더 상세한 기능을 정리할 수 있지만, 기능 명세서나 화면 설계서에 비해서는 비교적 덜 자세하지만 전체를 한눈에 볼 수 있도록 활용할 수 있어요. 이렇게 만들어진 문서는 개발자와 디자이너와 스펙을 논의할 때 사용해요. 개발이 가능한지, 얼마나 걸리는지, 진행 사항을 파악하기 위한 목적으로 사용된다는 점이 공통점이에요.

💡 서비스 IA와 플로우 차트의 공통점

- 서비스 IA는 메뉴를 분류 및 그룹화하여 Depth 구조로 설계한 것입니다.
- 플로우 차트는 화면, 기능 단위로 사용자의 동선을 설계한 것입니다.

두 문서의 가장 큰 차이점은, 서비스 IA의 경우에는 Depth를 파악할 때 용이하다는 점과 플로우 차트는 전체적인 서비스의 동선과 흐름을 파악할 때 용이하다는 점이에요. 그렇기에 서비스 IA는 웹 및 앱 구축 시 필요한 화면과 정보 구조의 단계를 명확히 알고 싶을 때 사용하면 좋고, 플로우 차트는 앱이 복잡도가 높고 연결고리가 많은 경우에 사용하면 좋아요.

02 | 서비스 IA 활용하는 방법

💡 서비스 IA는 이럴 때 사용하면 좋아요!

- 서비스의 화면이 많고, 복잡도가 높아서 전체적인 구조를 보고자 할 때
- 세세한 화면을 그리기 전 전체 그림을 파악해서 중요한 화면을 선택할 때
- 전체적인 구조를 이해시키고 설득시켜야 할 때

서비스 IA는 서비스 전체의 화면을 설계하거나 전반적인 버전을 업데이트할 때, 혹은 큰 틀의 화면을 기획할 때 사용하면 좋아요. 그렇기 때문에 화면이 많거나, 복잡도가 높거나, 전체적인 그림을 파악해야 할 때 활용하는 경우가 많습니다. 보통 서비스 IA를 통해 개발자나 디자이너가 그들의 역할이나 그려야 하는 화면, 개발해야 하는 것들을 파악할 수 있기 때문에 전반적인 진척도를 관리할 때에도 용이해요.

사진 출처 = PM 취업 스쿨 차상호님 포트폴리오 예시 속 문서 형식의 IA
* 차상호님 포트폴리오 바로가기

서비스 IA에 꼭 포함되어야 하는 요소는 정해져있지 않지만, 일반적으로는 다음 내용을 포함해서 설계하면 좋아요.

✅ 분류
✅ 서비스의 Depth (Depth 1, 2, 3 등)
✅ 서비스 화면 번호 (1.1, 1.1.1 등)
✅ 화면 ID (Login, Main 등)
✅ 페이지 정의 및 요구사항
✅ 세부 사항
✅ 진행 단계

💡 서비스 IA의 장점과 단점

장점: 전체 서비스의 구조뿐만 아니라 각 개발 일정이나 중요도, 진행 정도를 한 번에 파악할 수 있습니다.
단점: 구조가 많이 복잡해지거나 플로우가 다양하게 연결되는 경우 설명을 중복되거나 제한적으로 할 수밖에 없습니다.

서비스 IA는 실제 서비스에서 정보 구조가 어떻게 이어지는구나를 알기 위해 활용해요. 화면 단위로 각 세부 기능들이 어떻게 전달되는지, 그러기 위해서는 어떤 정보들이나 요구사항이 필요한지에 대해서도 확인할 수 있죠. 그렇기 때문에 개발 일정이나 중요도, 진행 정도까지 기록할 수 있게 되어있어요.

메뉴 트리와 같은 형태로도 만들 수 있지만, 일반적으로 서비스 IA는 엑셀로 제작해서 함께 공유할 수 있도록 만들어서 활용해요. 구글 스프레드시트와 같은 문서를 활용하면, 모두가 함께 볼 수 있는 버전으로 논의할 수도 있죠.

하지만, 서비스 IA의 경우에는 화면과 화면, 그리고 버튼과 버튼 간의 연결고리가 복잡할 때는 쓰기에 어려워요. 전체적인 메뉴 구조가 흘러가는 것이 아니라, 단계적으로 내려오는 형태로 정의될 때에 가장 특화되어 있기 때문이죠. 예를 들어, 화면 1과 기능 1, 2, 3이 연결되어 있고 화면 2와 기능 2, 3이 연결되어 있고 화면 3과 기능 1이 연결되어 있는 경우에는 화면 1, 2, 3에 각각 기능 1, 2, 3 연결 정보를 기재해야 해요. 하지만, 너무 많은 중복이 있으면 이러한 부분을 한 번에 머릿속에 그리기는 어려울 수 있죠.

03 | 플로우 차트 활용하는 방법

사진 출처 = PM 취업 스쿨 한은지님 포트폴리오 예시 속 플로우차트
* 한은지님 포트폴리오 바로가기

💡 플로우 차트는 이럴 때 활용하면 좋아요!

- 사용자가 어떤 프로세스대로 서비스를 이용하는지에 대해 파악하고 싶을 때
- 흐름을 전반적으로 파악하고 복잡한 구조를 이해하고자 할 때

플로우 차트는 서비스 흐름도로, 사용자가 서비스를 어떤 순서로 사용하는지 쉽게 파악하기 위해 사용하는 문서에요. 다이어그램이라고도 불리는 경우가 있으나, 좀 더 명확하게 그 사용처를 설명하기 위해서 플로우 차트라는 이름을 많이 사용하고 있죠. 전반적인 UX를 파악하기에도 용이하고, 화면의 이동이 잦은 경우에 사용하기에도 유용해요.

마찬가지로, 플로우 차트도 무조건 사용해야 하는 형태나 구조가 있는 것은 아니지만 화면 설계서와 플로우차트의 기능이 일치해야 하기 때문에 다음과 같은 정보를 포함하고 있으면 좋아요. 정보가 일치하지 않으면 처음에 개발자와 디자이너와 논의했던 것과는 다른 기능이 개발될 수 있으므로, 공통된 명칭을 사용하는 것이 좋습니다.

✅ 화면 ID
✅ 영문 화면명
✅ 국문 화면명

플로우 차트의 경우에는 쉽게 사용할 수 있는 툴이 몇 가지 있어요. 아래의 툴을 활용하면 좀 더 쉽게 플로우차트를 그릴 수 있어요.

✅ Draw.io
✅ Visio
✅ axure

💡 플로우 차트의 장점과 단점

장점: 도식화되어 있기 때문에 이해하기 쉽고, 화면의 전체적인 흐름도를 유저 관점에서 파악하기 쉽습니다.
단점: 프로젝트 일정과 관련된 기록을 할 수 없어서 히스토리 문서를 따로 만들어야 합니다.

04 | 왕초보도 서비스 IA를 설계할 수 있게 만드는 곳?

플로우 차트는 도형으로 구성되어 있기 때문에 (물론 시퀀스 다이어그램과 같은 경우에는 선과 화살표로만 구성된 경우가 있기는 합니다) 전체적인 서비스 흐름도와 유저의 플로우를 파악하기에 매우 용이합니다. 특정 기능이나 화면 이후 어떤 식으로 연결이 되어야 하는지나, 복잡한 화면의 경우에도 어떤 식으로 다른 화면에 연결될 수 있는지도 이해하기 쉽죠.

다만, 도형으로 만들어져 있는 만큼 히스토리를 기록하거나 복잡한 프로젝트 일정, 진행 정도를 기록하는 것은 어렵습니다. 그렇기 때문에 히스토리 문서나 진행 사항을 체크할 수 있는 문서는 따로 만들어야 한다는 불편함이 있죠. 그럼에도, 전체적인 서비스 설계 구조를 파악하고 이해하기 위해서는 적절한 문서입니다.

물론 두 가지 문서 모두 사용할 수 있는 방법은 다양할 수 있어요. 서비스 IA에 연결되는 화면에 대한 비고란을 넣어서 하나의 기능 혹은 화면이 여러 기능 혹은 화면에 연결될 수 있음을 설명할 수도 있고, 피그마 등으로 플로우 차트를 만들고 같은 화면에 버전 관리를 넣어서 연동해서 활용할 수도 있죠.

서비스 기획자라면 이러한 문서들을 다양한 방법으로 사용한다는 점, 그리고 전반적인 서비스를 기획하고 설계하기 위해서 서비스 IA나 플로우 차트 등을 활용할 수 있다는 점을 알고 있으면 좋을 것 같아요. 사이드 프로젝트를 할 때 산출물을 정리할 때도, 내가 기획하고 만든 서비스가 어떤 기능을 포함하고 있는지 보다 더 쉽게 기록할 수 있다는 장점도 기억하면 좋아요!

하지만 혼자서 서비스 IA나 플로우 차트 활용 방법을 배우기는 쉽지 않죠. 특히 이제 막 PM 직무에 입문한 비전공자, 초보라면 더욱 그렇고요!

제로베이스 PM 취업 스쿨에서는 직접 실무 프로젝트를 진행하며 서비스 IA를 설계해 볼 수 있답니다.
왕초보도, 비전공자도 모두 가능해요!

서비스 기획자라면 활용할 수 있어야 하는 서비스 IA 및 플로우 차트!
서비스 기획자 역량을 갖추고, 취업까지 하고 싶다면 지금 바로 제로베이스 PM 취업 스쿨과 함께하세요!

추천 컨텐츠