사이드 프로젝트로 앱 기획하기 #2
초기 기획 탄탄하게 뼈대 만들기
지난 연재에서는 아이템 구체화하는 것, 핵심 기능 도출하는 것에 관련된 이야기를 다루었다. 탄탄한 기획이 되기까지 초석을 다룬 내용을 공유하며 나 또한 다시 배운 느낌이 들었다. 이번 연재에서는 이전에 정의했던 것을 기조로 하여 좀 더 구체적이고 세밀한 structure를 구성하는 것에 대해 공유하고자 한다.
서비스의 메인 타겟이 되는 사용자를 어떻게 정의해야 하며, 핵심 기능들이 잘 사용되려면 어떻게 IA를 짜는 것이 좋을까? 이번 연재에서 다룰 주제는 다음과 같다.
1. 퍼소나 정의하기
2. 유저 플로우 차트(User Flow Chart) 그리기
3. Hi-Fi 와이어프레임과 프로토타입 만들기
그럼 지금부터 두 번째 회고를 시작하겠다.
퍼소나 정의하기
퍼소나는 핵심 가설이 정말 유의미한지에 대해 확정하기 위해 사용하는 방법론 중 하나이다. 다양한 사용자 유형들을 대표하는 가상의 인물을 내세워 어떤 제품이나 혹은 서비스를 개발하기 위하여 시장과 환경 그리고 사용자들을 이해하기 위해 사용된다. 퍼소나가 명확하면 가설에 힘이 생기게 되고 목표가 불명확했다면 더 뾰족한 목표를 세우는 데에 있어서 큰 기여를 한다. 나의 경우, 실제 회사에서 가설은 세우지만 여러 가지의 내부 이유로 퍼소나를 제작하지는 않는다. 하지만 서비스 상위 기획에서부터 촘촘하게 생각해볼 수 있기 때문에 사이드 프로젝트에서는 꼭 제작해보는 편이다.
환경 보호 챌린지 서비스로 기능을 구체화한 것 까지는 문제없었으나 환경 보호라는 주제 때문에 타겟층이 좁은 것 같다는 생각도 들었고 정말 우리의 가설이 맞는 방향인지에 대해 확신이 없었다. 확신을 갖기 위한 방법론들 중 어떤 것을 빠르게 적용해 볼 수 있을지 찾아보던 중 퍼소나를 작성하는 것이 적합하다고 생각했다. 여건 상 퍼소나는 개인적으로 작성했었는데, 주변에 환경 보호에 관심 있어하는 지인들에게 페르소나 작성을 위한 아주 간단한 인터뷰를 진행했다. 인터뷰에서 도출한 결과를 바탕으로 정의한 퍼소나는 다음과 같다.
오늘도 맑음 퍼소나 일부Main 퍼소나
환경 문제에 대해 심각성을 인지하고 있고 일상에서 행동으로 실천한다. 주변에 환경 보호 실천을 함께 하는 지인들도 여럿 있다. 하지만 이런 개인의 행동들이 환경 문제라는 거대한 이슈에 어떤 파급력을 주는지 구체적이고 시각적으로 보이지 않으니 동기부여가 미약한 부분이 있을 것이다. 따라서 많은 사람들이 같은 문제에 같은 관심을 보이고 있고 함께 행동함을 보여주어 모티베이션을 올리고자 했다.
Sub 퍼소나
환경 문제에 대해 심각성을 인지하고 있으나 환경 보호를 위한 구체적인 실천 방안을 알지 못해 어떤 행동을 해야 하는지 알고 싶어 한다. 실제 행동한 적은 없기 때문에 습관 형성이 되어 있지 않아 쉬운 실천부터 하기 원할 수 있을 것이다. 따라서 번거롭고 귀찮은 행위더라도 이를 통해 얻을 수 있는 이득을 준다던가 습관 형성을 시킨다면 중도 이탈률이 낮을 것이고 각 사용자의 환경지식을 레벨로 구분하여 쉽게 실천할 수 있는 것부터 제공하는 것이 좋다고 생각했다.
유저 플로우 차트 그리기
유저 플로우(User Flow)는 말 그대로 사용자 흐름이다. 사용자가 어떠한 작업을 수행하기 위해 서비스 내에서 탐색하고 움직이는 경로를 말한다. 현재 몸 담고 있는 회사에서는 원활한 커뮤니케이션을 위해 와이어 프레임과 함께 작업하고 있으며, 유저 플로우의 구성요소로는 Goal(목표), Task(작업), Action(행동), Logic(판단), UI가 있다.
설계 과정은 간단하다. 사용자의 목표(Goal)를 설정하고 사용자의 행동에 초점을 맞춰 흐름을 설계하면 된다. 다만 목표가 다양하다는 것, 중간에 다른 경로로 이탈할 수 있다는 것 등의 서로 다른 작업(Task) 수행할 수 있다는 점을 고려해야 한다.
User Goal
사용자 목표 설정, 유저 여정 단계
Task flow : Action Level
사용자가 각 단계에서 무엇을 할 것인지 설명하는 단계로, 작업을 완료하거나 요구사항을 충족하기 위해 각 단계에서 무엇을 해야 하는지를 작성한다고 생각하면 쉽다.
Wire flow : Component Level
와이어프레임과 플로우의 조합으로, 화면 구성 자체보다는 사용자의 흐름에 집중하면 작성하면 좋다.
User flow : Interaction Level
이 단계에서 꼭 명심해야 하는 것은 사용자와 개발자 모두를 이해시켜야 한다는 것이다. 또한 사용자가 작업을 수행할 때 다양한 시나리오가 있을 수 있다는 것을 명심하고 작성해야 한다.
아래는 기재한 구성요소에 맞춰 작업한 우리 서비스의 유저 플로우다.
오늘도 맑음 Flow Chart - ver.1MVP로 도출한 Main Features 2가지와 마이페이지(설정)를 중심으로 앱 실행부터 로그아웃, 탈퇴까지의 여정을 그리고 있다. 실천 완료 여부나 챌린지 성공 여부 등 각각의 시나리오에 따라 사용자의 루트가 달라지고 있다는 점을 확인할 수 있다.
What I learned
명확한 퍼소나는 서비스의 목표를 뾰족하게 해주는 장점뿐만 아니라 프로젝트가 진행됨에 따라 처음에 정의한 타겟을 잊거나 서로 다르게 이해하는 경우가 생길 때 다른 길로 새지 않도록 리마인드 할 수 있다는 점에서 좋은 것 같다. 같은 기능에 대해 이야기하더라도 생각하는 구조나 형태는 각자 다르기 마련이라, 구체적인 flow를 사용 흐름에 따라 제작하고 공유함으로써 흩어져 있던 생각들이 하나로 모아지고 같은 화면을 보고 이야기하고 있다는 느낌을 받았다. 처음부터 완벽한 기획을 하면 좋겠지만 구현 시에 막히는 부분이 무조건 생기기 마련이라 정보 구조도를 고려하며 flow를 제작해보는 것이 서비스를 넓게 보는 데에 많은 도움이 된 것 같다.
Hi-Fi 와이어프레임과
프로토타입 만들기
디자인 작업에 들어가기 전에 먼저 선행되어야 할 것은 무엇일까? 바로 기초 골격인 와이어프레임이 필요하다. 이름 그대로 서비스의 기초 골격이 되는 작업이기에 사용자 경험의 핵심이 될 수 있고 이전에 정의한 플로우와 가설이 실제 구현 가능한 지 먼저 예상해 볼 수 있기 때문이다. 뿐만 아니라, 구체적이고 보기 쉬운 와이어프레임은 프로세스 플로우나 구성 등을 이해하기 쉬워 그 자체만으로도 개발 뼈대 구현이 가능하며, 협업 부서와 소통할 때에 저마다 생각하는 그림이 다른 사람들의 생각을 하나의 꼭지로 모아 오해를 줄여주는 중요한 역할을 한다. 그렇다면 와이어프레임은 어떤 정보를 담고 있어야 할까? 작업하기 전에 생각해보면 좋은 기본적인 내용은 다음과 같다.
화면에 대한 정보
화면에서 어떤 정보를 보여주고 싶은지, 어떠한 기능을 담고 있는지 자세한 내용이 기재되어 있어야 한다.
화면과 화면 사이의 연결
A 화면에서 B 화면으로는 어떻게 이동해야 하는지, 어떤 CTA(Call To Action) 버튼을 눌렀을 때 무엇을 불러오는지 등 머릿속에 있었던 서비스의 흐름이나 시나리오가 명확하게 기재되어야 한다.
네비게이션의 적합한 역할
구성한 네비게이션에 오류는 없는지 확인하며 작성해야 한다.
이러한 정보를 제대로 담고 있는지를 유념하며 작성해야 하고 화면만으로 디테일한 설명이 어렵다면 이동 플로우를 나타내는 화살표나 자세한 디스크립션을 함께 작성해야 한다. 중요한 것은 디자인을 하면 안 된다는 것이다. 만드는데 시간이 많이 소요되기도 하고 보기 좋게 만들기 위해 작성하는 문서가 아니기 때문이다.
아래는 위에 기재한 내용들을 체크하며 작성한 우리 서비스의 와이어프레임이다. 현업에서도 상황에 따라서 직접 작성하며 디자인을 하기 때문에 설계하는 데에 있어 어려운 점은 없었지만 모든 에러 케이스들을 미리 찾아내는 것은 쉽지 않았다.
오늘도 맑음 와이어프레임 일부Hi-Fi 와이어프레임으로 작업하기 전, 러프한 스케치로 작업한 시나리오를 바탕으로 화면 설계의 과정을 디테일하게 작성하였다. 예를 들어, 챌린지 리스트 구성 시 내가 고려하며 작성한 부분은 아래와 같이 UX적인 부분뿐만 아니라 실제 데이터를 사용하는 것까지 디테일하게 작성하였다.
해당 리스트에 어떠한 정보 값이 어떠한 구성으로 출력되는가
챌린지 진행 전, 진행 중, 성공과 실패 등의 상태는 어떻게 구성되는가
사용자가 해당 리스트를 눌렀을 때 사용자의 상태에 따라 어떤 정보를 보여줄 것인가
사용자의 액션에 따른 피드백은 어떻게 줄 것인가
DB에 쌓인 환경 보호 관련 리스트들은 언제 출력되며 어디서 사용할 것인가
프로토타입 만들기
진행한 와이어프레임을 바탕으로, 실제 디자인 작업에 앞서 동선에 불편한 점은 없는지, 사용자의 흐름에 오류가 없는지 확인해보기 위해 간단한 프로토타입을 제작해보았다. 실제 프로토타입까지 작업하며 검증하는 경우는 많이 겪어보지 못해서 이번에 꼭 경험해보고 싶었는데 실제 경험할 기회가 생겨서 즐겁게 작업했다. 프로토타입을 통해 발견한 문제점을 수정하고 개선하여 디자인 작업에 앞서 미리 시행착오를 줄일 수 있었고 서비스를 탐색하는데 너무 복잡한 플로우인가에 대해 다시 한번 생각해 볼 수 있었다.
What I learned
실제 연차 높은 PO의 피드백을 받을 수 있는 기회가 있어서 와이어프레임 작성에 큰 도움이 된 것 같다. 어떤 액션 뒤에는 당연히 이런 액션이 이어질 것이고 이 화면이 호출될 것이다 혹은 이 시스템 팝업이 호출되겠지 하는 "당연하다고 생각하는 것들"이 보는 사람에 따라 당연하지 않을 수 있다는 것을 알게 되었다. 예를 들어 내가 생각했던 당연한 것들은 로그인 화면에 진입하면 1) 키보드가 바로 호출될 것이라 생각했던 것, 2) 키보드 외의 공간을 tap 하면 키보드가 사라지는 것이 있었는데 실제 이런 부분들까지도 작성을 해두는 것이 좋다는 것을 배웠고 이번 와이어프레임 작업을 해보면서 시야가 확장되는 경험을 한 것 같다.
이전 글 보러가기
https://brunch.co.kr/@kimcookie/6
참고 자료
https://uxdesign.cc/when-to-use-user-flows-guide-8b26ca9aa36a