프론트 개발자의 PM 경험기 (1) - IA , Flow Chart 작성법

osohyun0224·2023년 7월 31일

프론트의 PM 경험기

목록 보기

1/4

안녕하세요, 주인장입니다.

돌아오는 학기에 저는 4학년이 되고, 졸업을 위해 방학부터 새로운 프로젝트를 시작하게 되었습니다.
아마 제 학부생활에서 마지막 프로젝트가 될 것 같습니다 ㅎㅎ...
이번 프로젝트 멤버는 프론트 2, 백엔드 2, AI 1로 이루어진 5명입니다! 개발자만 있습니다 ㅋㅋ

프론트가 PM(문서 관련)와 디자인까지 모두 해내야하기 때문에 저는 프로젝트 개발을 들어가기 직전 IA, Workflow, 화면설계서, 기능명세서 등등을 작성하기 위해 하나하나 이해하면서 제 프로젝트에 관한 모든 문서를 작성해나아고자 합니다. 이번 시리즈를 요약하자면 프론트엔드 개발자의 PM으로 살아남기가 되겠네요 ㅋㅋ

첫 포스트의 내용은 프로젝트 전체를 한눈에 파악하는 IA 작성하는 방법, Flow chart 작성법에 대해 알아보겠습니다.

💡 본 시리즈 작성 계기

일단 Workflow, 기능명세서 작성해야한다는 거 알고 피그마를 열고 작성을 시작했는데 개발자라 그런지 페이지 단위로 생각을 하게 되더라고요,, 전반적으로 개발만 공부했어서 그런지 기획자의 workflows 와 같은 기본적인 문서 작성을 어떻게 해야할지도 모르고 막막했습니다. 저와 같은 PM의 P자도 모르는 개발자들을 위해 제가 공부한 내용을 벨로그로 잘 작성해보고자 이렇게 시리즈를 시작하게 되었습니다. 개발자가 다른 개발자들을 위해 쓰는거라서 간단하고 쉽게 설명될 예정입니다.

💡 IA란?

먼저, IA란 Information Architecture의 약자로 서비스 전체를 체계적으로 구조화한 문서라고 할 수 있습니다. 한 마디로 구조도를 그리는 것이기 때문에 웹 서비스를 구조적으로 파악하는 사고가 중요하다고 할 수 있습니다.

📍 IA를 어떻게 작성할까?

구현할 웹서비스의 메인 기능을 미리 IA 단계에서 생각해두는 것이 좋다. 미리 메인 기능에 대한 내용을 작성해두는 것이 바람직하다.

📍 구조화 처음 시작하기

구조화를 잘 해야한다고 했는데 어떻게 하는 것이 좋은가?
- 유사한 성질끼리 구조화를 하자: 비슷한 성질을 가진 정보끼리 묶고 그 다음에 상하 단계를 구분해야한다.

💡 IA 작성법

📍 (1) 기능들을 구체적으로!

기능 목록을 먼저 작성해야한다. 사용자가 바로바로 접근이 가능한 화면들과 Admin 을 위한 관리자 계정까지 고려해 개발한다.

📍 (2) 기능 구조화

MECE: "항목들이 상호 배타적이면서 모였을 때는 완전히 전체를 이루는 것"을 의미하며 이러한 사고가 목록화된 기능들을 유사한 성질끼리 구분할 때 유용하게 사용되는 기법
하이라키: 상하 위계 구조를 의미하며 각각의 정보들이 부모-자식 관계를 갖는 구조화된 형태를 의미함.

📍 (3) IA 작성

1) 1단계: 카테고리화
2) 2단계: 정보의 위계 정리
3) 3단계: 페이지 번호 설정 및 디스크립션 활용

📍 (4) 화면 번호 지정, 설명 작성

화면 번호를 작성하는 이유: 히스토리를 관리하기 위함으로 프로젝트가 진행되면서 서비스는 계속해서 변경되므로 페이지 번호가 고유해야 히스토리 관리가 가능하다.
설명을 작성하는 것은 해당 기능에서 고려해야할 정보를 작성해 개발자들이 놓치지 않도록 보조하는 역할

💡 Flow Chart란?

먼저 플로우 차트란 사용자가 사용하게 될 서비스 화면과 프로세스의 흐름을 도식화한 것이다.
IA가 전체 서비스의 구조를 볼 수 있는 것이고, 플로우 차트는 도식화를 통해 사용자의 행동 흐름을 직관적으로 파악할 수 있게 해준다. 사용자들의 행동 흐름을 예상하고 정의하면서 구체적인 프로세스를 공유하는 것이다. 보통 플로우 차트는 화면 설계서의 앞 부분에 정리해준다.