MVP, Hi-Fi 와이어프레임, 사용자 플로우까지
지난 글에서는 유저 리서치와 퍼소나, 설문조사, Lo-Fi 와이어프레임에 대한 이야기를 다루었다. 이번 회차에는 각 요소 정의 및 MVP 결정과 Hi-Fi 와이어 프레임, 사용자 플로우, 화면 설계(UI Guide)에 대한 과정을 나눠보려고 한다.
지난 호를 못 읽은 분들이라면 아래 링크를 참고하시길 바란다.
https://brunch.co.kr/@hailey-hyunjee/45
Index
1. 각 요소 정의하기
2. MVP 정하기
3. Hi-Fi 와이어프레임과 화면 설계
4. 사용자 플로우
1. 각 요소 정의하기
Lo-Fi 와이어프레임에서 아이템을 이미지화하였다면 Mi-Fi, Hi-Fi 와이어프레임을 그리기 전에 더 확실히 집고 넘어가야 하는 부분이 있었다. 바로 각 요소에 대한 정의 부분과 MVP를 결정하는 일이었다.
개별 과제나 학교 프로젝트를 할 때는 이 부분을 상대적으로 신경 쓰지 않아도 된다. 대부분 디자이너 혼자서 컨셉을 잡고 디자인을 하기 때문에 다른 팀원들에게 이해를 시킬 부분이 필요 없기 때문이다. 하지만 실제 출시가 목표인 프로젝트에서는 이야기가 좀 달라진다. 기획에서 진행된 이야기들을 디자이너와 개발자들에게 '정확하게'전달하는 것이 중요하다.
또한 기획 단계에서 진행된 모든 아이디어가 실행되기가 힘들다. 일반 회사라면 시간적인 문제와 금전적인 문제가 가장 크겠다. 사이드 프로젝트 역시 제한된 시간 안에 앱 출시를 목표로 했기 때문에 우리 아이디어의 본질은 최대한 유지하면서 부수적으로 들어간 아이디어들 혹은 당장 필요하지 않은 아이디어들은 1차 출시에서는 제외시키는 과정이 필요했다.
온라인 회의로 진행되는 특성상 기획팀 안에서도 같은 용어와 개념을 다르게 생각하는 경우가 종종 있었다. 우리 팀은 3명의 기획자가 참여하였는데 소수임에도 불구하고 이야기한 내용을 정리해 놓지 않으면 다음 회의 때는 다른 이야기가 오고 가는 경우가 간혹 생겼다. 꼼꼼한 회의록 작성과 용어에 대한 분명한 정의를 해주는 것, 팀원들이 같은 페이지에 있는지 수시로 확인하는 것이 정말 중요했다.
배운 점:
기획팀에서 같은 주제로 이야기를 하고 같은 용어에 대해 이야기를 하면서도 생각하는 게 다를 수 있다는 것을 알게 되었다. 가령 페이지 전환의 경우, 나는 페이지를 스와이핑 해서 화면을 전환한다고 생각하지만 팀원 1은 왼쪽 상단을 탭 하는 기능을 생각할 수도 있고, 팀원 2는 화면 아래에서 스크롤-업하는 기능을 생각할 수도 있다.
용어 하나하나에 대한 정의가 지나칠 만큼 구체적으로 이루어져야 하고 그날 진행한 회의록은 그날 바로 업데이트를 해서 기억이 재생산되는 것을 막는 것이 중요하다.
용어에 대한 정의는 정말 디테일하게 이루어졌다. 내가 모바일 환경에서 경험하는 모든 경험을 말로 풀어서 설명하는 과정이라고 생각하면 되겠다. 이를 위해서 사용자 플로우가 자연스럽게 진행이 되었다. 우리 팀은 3명이서 기획을 담당하고 있었기 때문에 파트를 하나씩 담당할 수 있었다. 크게 마이페이지, 모두의 페이지, 사진을 쉽게 올리는 플로우로 나눠졌고 필자는 대표 화면인 마이페이지에서 이루어지는 사용자 플로우와 와이어 프레임을 그렸다.
필자가 담당했던 마이페이지 기능 정의 일부. 모든 문서는 노션을 통해 공유되었다사용자 플로우를 작성하는 방식은 기획자마다 다른 것 같다. 평소 기획을 집중적으로 했던 팀원은 사용자 플로우, 와이어 프레임을 그리기 전에 용어 정의를 확실히 하는 것을 우선시하였다. 필자는 이번에는 기획팀에 합류하였지만 디자인팀에 더 가까운 편이라 이미지를 통해서 사용자 플로우를 그리고 용어를 정의하는 것이 훨씬 쉬웠다.
어떤 것을 먼저 하는지는 중요하지 않다. 이 단계에서 중요한 것은 용어에 대한 확실한 정의이다.
마이페이지의 사용자 플로우 일부배운 점:
개인적으로 서비스의 기획에 참여하는 것은 처음이다. 용어에 대한 정의가 지나칠 만큼 디테일하게 진행되는 것도 처음 알았다. 항상 디자이너의 관점에서 기능을 시각화하는 것을 좋아했는데 여러 사람이 협업을 할 때는 기능을 문서화시키는 것도 필요하다는 것을 알게 되었다.
2. MVP 정하기
실제 출시를 해야 하는 앱에서 중요한 또 다른 단계는 바로 MVP(Minimum viable product)를 선택하는 것이다. 3개월이라는 짧은 기간 안에 출시를 하기 위해선 우리가 그동안 논의되었던 모든 아이디어 중에서 가장 핵심 아이디어만 선택하고 당장 필요하지 않은 아이디어는 차후에 추가하는 식으로 가는 것을 의미한다.
가장 큰 예를 하나 들면 회원가입 절차이다. 처음에 회원가입 방식은 카카오톡, 구글, 페이스북, 네이버, 일반 이메일 가입을 선택하였지만 기획 회의를 통해서 일반 이메일 가입이 삭제되었고 구글과 카카오톡 로그인만 살렸다. 일반 이메일 가입을 추가할 경우 부수적으로 포함되어야 하는 플로우가 늘어나고 백엔드 개발에서도 시간이 더 소요되기 때문에 1차 출시에는 삭제하였다. (일부 사이드 프로젝트의 경우 서버 구축의 시간과 에너지를 단축하기 위해 회원가입 절차 없이 앱의 대표 기능으로 바로 시작하는 앱들도 있다.)
MVP 과정을 통해 1차 스펙에서 불필요한 부분이 과감히 삭제되었다
초기 목표 중 공유를 쉽게 해주는 기능도 전부 삭제되었다. 앱의 대전제는 '기록'과 '공유'였다. 기록하고 싶은 장소를 싶게 기록하고 싶게 공유하는 기능이었다. 기존 앱들의 경우 이미지를 하나씩 공유하는 기능은 제공한다. 하지만 여러 개를 한꺼번에 공유하는 기능은 제공하지 않는다. 원하는 장소와 정보를 공유할 때 하나씩 공유하는 것이 불편하다는 의견을 바탕으로 최대 5개까지 선택을 하면 이미지와 정보가 모두 선택되고 그 정보들이 PDF 파일로 변환되어서 공유되면 좋겠다는 기능이었다.
의견이 진행되면서 앱의 스펙을 지나치게 키울 수 없다는 것에 모두 동의를 했고 소셜 기능을 최소화한 기능을 장착한 앱을 디자인하기로 합의를 보았다. (공유 기능은 2차 스펙으로 보류된 상태이다.)
초반에 생각을 했던 소셜 기능이 축소되자 앱의 성격이 달라지기 시작했다. 인스타그램처럼 다른 사람들의 피드를 보는 기능을 대폭 줄이고 사용자 개개인의 소중한 기억을 재미있게 올릴 수 있는 서비스를 제공하는 오픈 다이어리로 성격이 바뀌었다.
앱 성격이 바뀌면서 대표 화면에도 변화가 생겼다. 일반적인 소셜 앱들은 모든 사용자의 피드가 대표 화면인 경우가 대부분이지만 우리 서비스는 나의 기록을 먼저 볼 수 있는 마이페이지가 대표 화면이 되는 게 맞았다.
배운 점:
* MVP에 따라서 초기 앱의 목표가 바뀔 수도 있고 대표 화면이 바뀔 수 있다는 것도 알게 되었다. 또한 최종 대표 화면은 디자인과 개발을 거쳐 변화가 생길 수 있는 부분이다. 프로젝트를 진행할 때 서비스의 목표가 흔들리지 않는다면 모든 진행 과정은 유연하게 대처하는 것이 필요하겠다.
* 3개월이라는 시간은 길다면 길다면 짧은 시간이다. 온라인으로 진행되기 때문에 많이 시간을 할애하는 시간적 제약이 있다. 최종 출시가 목표라면 초반 기획에서는 최대한 줄일 수 있는 것들은 줄이고 나중에 시간이 남을 때 추가를 하는 것이 더 바람직하다는 것을 알았다.
4. Hi-Fi 와이어프레임과 화면 설계
스케치를 통한 Lo-Fi 와이어프레임, 글에는 수록하지 않았지만 MVP 이전 단계에서 작성된 Mi-Fi 와이어 프레임으로 대강의 화면 설계 과정을 거쳤다. 각 요소의 정의와 MVP를 통해 1차 스펙을 결정한 후 Hi-Fi 와이어프레임을 완성하였다.
화면 설계 툴은 윔스칼을 사용하였다.(윔스칼에 대한 설명은 추후에 디자인 툴을 한 번에 설명할 때 하도록 하겠다.)
서비스의 구성은 크게 <마이 페이지>, <사진 올리기>, <모두의 페이지>로 나뉜다. 우리 서비스는 다른 사용자들의 기록을 보는 것보다 자신의 기록을 기록하는 것에 더 초점을 두었기 때문에 Home 화면은 <모두의 페이지>가 아닌 <마이 페이지>가 되었다. 전체적인 기능은 이미 출시된 앱들과 비슷하지만 기존의 앱과 차별성을 두기 위해 사진을 업로드하는 방식에서 새로운 재미를 추구하였고 기존의 앱에서는 보기 힘든 그리드를 적용해 디자인을 통한 차별성을 두려고 노력하였다. (최종 디자인은 다음 회차에 설명할 예정이다.)
4. 사용자 플로우
각 용어 정리와 MVP 선정, 와이어프레임 제작을 통해 만들어진 간단한 사용자 플로우는 아래와 같다.
사용자 플로우 중 일부 기능은 최종 스펙에서 제외되기도 한다다음 시간에는 디자인 컨셉 발전과정과 서비스 명이 생긴 후 디자인 컨셉이 바뀐 이야기를 나눠보려고 한다. 평범해 보이는 Hi-Fi 와이어프레임이 디자인이란 옷을 입었을 때 얼마나 아름다운 모습으로 바뀔 수 있는지를 소개하려고 한다. 또한 개발 단계에서 어떤 부분이 추가되고 삭제되었는지... 개발자와의 의사소통은 얼마나 순조로웠는지도 소개하도록 하겠다.
(긴 글 읽어주셔서 감사합니다!)
