새내기 PM의 네 걸음, 'IA와 기능정의서'
"어떻게 생긴 서비스가 될까?"
사용자 리서치에서 벤치마킹까지 거쳐오며 기초 재료를 모았고 이제는 스케치를 할 차례이다. 처음 기획 업무를 시작할 때 '왜 이렇게까지 작성해야 하는 문서가 많은 거지?'라는 생각을 종종 했다. 더군다나 담는 내용도 비슷해보였기에 더욱 그랬다. 지금 와서 보면 협업을 해야하기 때문이라 걸 깨닫는다. 뼈대 없이 단번에 완벽한 스토리보드를 짤 수 있는 사람은 없거니와 그 시간 동안 디자이너와 개발자가 세팅하는 단계도 필요하다. 여전히 손이 안 가는 업무지만 한탄이 끝났다면 이제 할 일을 하자.
1. IA, 와이어프레임
IA(Information Architecture)는 정보구조도로 웹/앱에서 서비스가 어떻게 구성되어 있는지를 표현한다. IA는 이전 콘텐츠에서 충분히 소개했기 때문에 도토리함을 예시로 어떻게 구체화 했는지 보여주고자 한다. 우선 도토리함은 일반 웹사이트처럼 메뉴마다Breakdown을 하여 필요한 기능을 제공하는 게 아니었고, 메인 페이지에서 한 번에 모든 분류, 공유 기능을 제공하는 특이한 구조였다. 그렇기에 IA 자체는 아래와 같이 매우 간단하게 표현하였다. 본인의 서비스는 본인이 제일 잘 이해하는 만큼 다른 분들의 템플릿을 그대로 가져오기 보다는 팀원들이 이해하게끔 풀어내는 것이 더 중요하다고 생각한다.
도토리함의 IA다음으로 팀원들에게 내가 구상하고 있는 웹사이트의 이미지를 보여주고자 피그마로 간단하게 와이어프레임을 그렸다. 벤치마킹한 사이트들을 참고하여 어떤 구성 요소들이 들어가고 어떻게 공간을 활용할 지를 대략적으로 보여주는 것에 초점을 맞추었다. UI/UX는 디자이너와 계속 논의하며 수정될 예정이었기에 초반에는 큰 힘을 넣지 않았다. 일례로 초기에는 개인 페이지와 공유 페이지가 '탭'으로 나뉘어 있지만, 이후에는 '구글 드라이브'처럼 공유 폴더와 개인 폴더가 구분되게 된다.
극초기의 Wireframe - 여담이지만 디자이너는 돌덩이에서 피사체를 발굴한 조각가 같다TIP) 와이어프레임이랑 IA를 병행하며 그려보자. 머릿속 페이지들을 와이어프레임으로 옮겨 담았다면 페이지들의 구조를 IA로 도식화한다.
2. Flow chart
앞에서 말했듯이 메인 페이지는 단순했기에 오히려 북마크가 어떻게 저장되고 알림을 받을 수 있는지를 개발자들에게 이해시키는 게 더 중요했다. Paper work를 많이 하고 싶진 않았기에 제일 중요한 '북마크 저장도'만 아래와 같이 flow chart로 보여주었다. 그리고 계속 개발자를 붙잡고 어떤 부분이 이해되지 않는지, 어떤 단계가 추가되어야 할 지 물어보며 수정에 수정을 거듭했다. 이해가 되지 않더라도 초반부터 지적하고 싶지 않아 그냥 넘어가는 분들도 간혹 있다. 배려에 감사하지만 절대 그냥 넘어가서는 안 되고 서로가 같은 개념으로 이해하고 있는지 꼭 확인해야 한다. 그렇지 않으면 나중에는 기획 방향을 억지로 바꿔야 할 수도 있다.
TIP) 불필요하다고 생각하는 서류 작업은 최소화하자 모든 기획 단계를 다 따를 필요는 없다
북마크 flow chart3. 기능정의서
기능정의서는 개발자에게 서비스의 '어떤' 기능을 '어떻게' 구현해달라고 요청하기 위해 작성하는 문서이다. 구성요소는 크게 기능 CODE, 중요도, 페이지 경로(Page path), 구현 대상, 기능 정의 5가지이다. 원래는 페이지 경로와 구현 대상, 기능 정의 정도만 작성했지만, 기능정의서를 바탕으로 개발자들이 공수를 산정하기 때문에 중요도를 추가했다.
중요도는 1차 런칭 때 무조건 개발이 완료되어야 하는 핵심 기능, 완성도를 위해 필요한 기능, 편의성을 위해 추가할 기능으로 분류하였다. 예시로 리마인드 알람은 핵심 기능이기에 중요도가 A지만, 리마인드 주기를 설정하는 건 중요도 B로 표시하였다. 페이지 경로는 해당 기능을 구현하기 위해 어떤 Depth까지 들어가야 하는지 표시하며, 이에 대한 기능을 상세히 알려주는 것이 기능 정의이다. 기능 CODE는 팀원들이 기능을 지칭할 때 혼란이 없게끔 페이지 경로를 기반으로 CODE 번호를 부여한다. 마지막으로 웹사이트의 경우 PC 뿐 아니라 모바일 환경도 같이 고려해야 하기에 해당 페이지를 PC 또는 모바일 환경에서 구현할 지 여부도 같이 결정한다.
도토리함의 기능정의서2년 전 새내기 기획자로서 작성한 IA와 기능정의서에 대한 콘텐츠를 보면 그때보다는 더 이해가 깊어졌다고 생각한다. 하지만 여전히 부족한 점을 잘 알고 있기 때문에 브런치를 올리기까지 정말 많이 망설여진다. 그럼에도 불구하고 이 콘텐츠가 필요한 분들과 미래의 나에게 도움이 되기를 바라며 우선 발행하고 본다.
