서비스의 전체 구조를 한 눈에 살펴볼 수 있는 방법!
광고홍보학을 전공한 제게, 공모전이나 과제를 위한 기획안을 작성할 때 ‘로직’을 구성하는 과정은 정말 중요한 일이었습니다. 건물의 기둥, 나무의 뿌리와 같은 역할을 한다고 배웠고 실제로 앞선 과정이 있고 없고의 차이가 크다는 것을 여러번 느꼈기 때문입니다. 특히 공모전의 경우 발표 기회가 모든 팀에게 주어지는 것이 아니었기에 뼈대를 만드는 과정에 많은 시간을 쏟았습니다.
그러다 창업을 하며, 처음으로 조금 다른 성격의 기획안을 만들게 되었는데요. 그게 바로 기획자의 주요 업무 중 하나인 화면 단위의 목적과 설명이 들어간 스토리보드였습니다. 우린 서비스를 이런 모습으로 만들거야. 라고 설명하기 위한 문서이자 디자인 및 개발 단계로 넘어가기 위한 중요한 가이드가 되는 문서였죠. 여전히 모르는 것이 더 많은 초보 기획자지만, 그 당시에는 화면 하나를 설명하기 위한 페이지조차 쉽게 만들지 못해 고생을 많이 했습니다.
이정도면 되겠지, 라는 생각으로 팀원들에게 문서를 공유하고 다음날 함께 보면서 받은 피드백 중 아직도 기억에 남는 것이 서비스를 한 눈에 파악할 수 있는 ‘무엇’이 없냐는 내용이었습니다. 전체 구조를 알 수 있도록 초기에 작성하는 사이트맵이나 플로우조차 담기지 않은 문서였기 때문입니다. 그 이후로 학생 신분으로 참여했던 공모전에서의 ‘로직’만큼 서비스를 위한 ‘구조화’에 많은 시간을 투자하게 되었습니다. 보통 저는 종이에 스케치를 한 후, 일러스트 또는 Draw라는 서비스를 활용해 작업을 진행했는데요!
올해 초부터는 지난 4월 소개드렸던 ‘Gloomaps‘를 활용하다 얼마전 더 좋은 서비스를 만나 리뷰를 진행하려고 합니다.
사이트맵과 같은 구조를 문서로 제작하는데 있어 가장 중요한 것은 제가 창업 초기 받았던 ‘피드백’과 같은 맥락이라고 할 수 있습니다. 바로 ‘한 눈’에 서비스에 대한 기본적인 내용을 파악할 수 있냐는 것. 사이트맵에 아이콘 등의 시각적 요소가 추가될 순 있지만 일반적으로는 텍스트와 라인을 활용해 제작을 하기 때문에 페이지의 특성이나 중요도 등을 파악하긴 쉽지 않습니다. 하지만 오늘 소개드릴 ‘FlowMapp‘를 활용한다면 시각적으로 더욱 명확한 사이트맵과 기타 서비스에 필요한 플로우 등을 제작할 수 있습니다.
이메일 주소를 통해 회원가입을 완료하면 서비스 내 개개인을 위한 대시보드로 바로 이동합니다. 이 곳에서 ‘새로운 프로젝트를 제작‘을 클릭해 서비스를 본격적으로 이용할 수 있죠.
프로젝트는 4가지 타입 중 하나를 선택할 수 있는데, 자유, 이커머스, 포털, 기업으로 나뉘어 있습니다.
타입을 선택하면 프로젝트 제목, 설명, 팀원초대 등 기본적인 내용을 입력하는 단계로 넘어갑니다. 저는 이커머스를 선택해봤는데, 이미 커머스에서 공통적으로 사용되는 내용들이 채워져 있는 상태였습니다.
페이지를 대표하는 이미지와 이름이 포함된 상태로 사이트맵을 확인할 수 있었는데, 이미지를 빼고 텍스트만 활용해 전체 구조를 볼 수 있는 옵션이 상단에 별도로 제공되고 있었습니다. 리스트 형태로 확인하는 것도 가능하고요. 공유, 내보내기, 프로젝트 정보, 작업 상태에 따라 구분해서 보기, 검색창 등 주요 기능은 모두 상단에 배치되어 있어 쉽게 접근이 가능했습니다.
특정 페이지로 마우스를 가져가면 두 가지 기능을 활용할 수 있는데요. 첫 번째는 해당 페이지에 대한 설명입력과 구조 정리, 라벨 설정, 댓글을 통한 커뮤니케이션, 파일 업로드 등이 가능한 사이드 메뉴의 활용입니다. 두 번째는 연관 페이지를 추가하거나 동일한 페이지를 복사하는 기능입니다.
언뜻보면 별도의 학습이 필요한 서비스인 것 같지만, 신규 유저를 위한 튜토리얼이 적재적소에 배치되어 있어 이해하기가 쉬었고 기능 자체도 어렵지 않게 구성되어 있어 금방 적응할 수 있었는데요! 제가 ‘Flowmapp’를 30분 정도 활용하면서 느낀 가장 큰 장점은 ‘사이트맵’의 성격을 가장 잘 살릴 수 있는 서비스라는 점이었습니다. 바로 이미지와 라벨의 활용 때문이었는데요. 라벨을 활용해 사이트맵에 포함된 페이지 중 아직 작업이 되지 않은 페이지만을 확인할 수 있으며, 전체 구조를 텍스트 위주가 아닌, 이미지 중심으로 확인할 수 있어 더 빠르게 확인이 가능했습니다. 프로젝트의 공유와 내보내기가 깔끔하게 잘 이루어진다는 점도 매력적이었고요.
타 SaaS와 동일하게 ‘Flowmapp’ 역시 무료로 사용이 가능합니다만, 사용의 폭이 상당히 제한적입니다. 무료 계정의 경우 1개의 프로젝트만 생성이 가능하며 파일 업로드 가능한 클라우드 용량이 100mb 밖에 제공되지 않습니다. 파일이야 타 클라우드의 링크를 활용하면 되지만 프로젝트 생성수는 유료 결제를 고민하게 만드는 내용이었습니다. 무료 외 유료계정은 세가지로 나뉘며 팀 9달러의 ‘Professional’ 계정의 경우 5개의 프로젝트를 관리할 수 있습니다.
‘시각적’으로 ‘명확한’ 사이트맵 제작을 도와주는 ‘Flowmapp’이 기대되는 또 하나의 이유는 ‘User Flow’ 기능을 준비중에 있다는 점이었습니다. 업데이트 예정이라고 하니, 사이트맵과 별개로 사용자 경험을 위한 다양한 플로우를 동일한 맥락에서 제작하고 관리할 수 있을 것 같습니다.
별도의 학습 과정은 없지만, 서비스에 대한 구조를 명확하게 작성하고 싶으시다면 ‘Flowmapp’을 활용하는 것도 좋은 선택이 될 것 같습니다. 일단 1개는 무료 계정으로도 충분히 사용 가능하니, 더 자세한 내용은 이 곳에서 확인해보세요 🙂
