이 앱은 어떻게 설계한 걸까?
내가 취준생 때 해봤으면 좋았을 ‘역기획’
UX 방법론만이 우리가 키워야 할 능력일까?
보통 학생 또는 취준생들이 생각하는 기획자라는 포지션은 여러 UX 방법론을 통해 문제를 찾고 인사이트를 도출하는 이미지가 강한 것 같습니다.
물론 제안 단계에서 흔히 생각하는 UX 컨설팅을 하긴 하지만, 구축 단계로 넘어가면 설계서 작성 업무를 메인으로 하게 됩니다.
그러다 보니 방법론을 잘 사용하는 것만큼 기획자에게는 화면 설계를 탄탄하게 하고 그걸 개발자나 디자이너가 제대로 이해하게끔 잘 정리해놓는 것이 중요합니다.
어찌 보면 설계서를 잘 치는 게 기획자의 에센셜이라고 할 수 있겠습니다.
저는 입사 전에 대외활동과 인턴을 하면서 설계서를 접할 기회가 몇 번 있었어서 설계서 작성 업무를 받았을 때, 어떻게 해야 할지 몰라서 뇌 정지가 올 정도는 아닐 거라 생각했지만... 쉴 새 없이 튀어나오는 새로운 케이스와 기능에 정신을 차릴 수 없어 사수님께 거의 30분마다 도움을 청하고 실수도 많이 저지른 것 같습니다...ㅎㅎㅎ
이미 완성된 앱의 UI을 보며 설계하는 '역기획'을 해보자
그렇게 도움을 받고 실수를 하며 실무를 배워가던 어느 날, 이사님께서 화면 설계 역량 증진에 좋은 방법을 추천해주셨습니다.
이미 출시된 앱 중에 하나를 골라 앱의 대표적인 기능과 플로우를 다 뜯어보고 화면을 따라 그리며 설계서를 만드는 '역기획'이었습니다.
딱 저에게 필요한 방법인 것 같아서 이를 약 한 달 정도를 업무 시간외에 따로 진행해봤고, 다 하고 나니 꽤 효과가 있었던 것 같아, 오늘은 제가 했던 과정을 되짚으며 역기획 방법과 팁을 써보겠습니다.
본격적으로 시작하기 전에...
이미 대외활동 혹은 회사에서 설계서를 경험해보신 분은 배우신 설계서 작성 방식대로 연습해보시면 되지만, 혹시나 설계서 자체를 처음 접하신다면 아래 링크를 참고하여 연습해보시기 바랍니다.
설계서를 그릴 툴은 피그마, XD, PPT... 뭐든 상관없지만 분량이 30P를 넘어갈 것 같다면 PPT로 작업하실 것을 추천드립니다.
[설계서 참고 링크]
https://brunch.co.kr/@supernova9/195
https://brunch.co.kr/@mojuns/10
1. 무얼 배우고 얻고자 하는지 명확히 하기
먼저, 우리는 역기획을 왜 진행하는지, 그 목표를 확실히 해야 합니다.
그래야 시간과 노력을 들여서 한 일이 단순한 화면 카피로 끝나지 않을 수 있기 때문입니다.
우선 아래에 역기획 진행 후 성장시킬 수 있는 부분에 대해 대략적으로 나열해봤습니다.
역기획 진행 시 얻을 수 있는 것
설계서 작성 업무가 익숙해진다.
여러 화면을 그리다 보니 화면 패턴에 익숙해져 목업 혹은 와이어프레임 그리는 속도가 빨라진다.
향후 동종 업계의 유사 서비스들을 설계할 때 비교적 수월하게 진행할 수 있다.
해당 앱의 문제점 혹은 설계적으로 아쉬운 부분들을 찾을 수 있고, 이를 통해 개선점을 찾고 이를 기반으로 인사이트를 도출할 수 있다.
그리고 저는 제 스스로 오더류 서비스가 궁금하기도 했고 무엇보다 결제 시스템 쪽 설계 경험이 부족하다고 생각하여, 해당 기능에 관한 공부도 할 겸 '스타벅스 모바일 앱의 사이렌 오더'를 선정하여 역기획을 진행했습니다.
2. 선정한 서비스를 사용해보면서 서비스 구조 분석
역기획 하고 싶은 서비스를 선정하였으면, 이제 그 서비스의 모든 기능을 최대한 경험해보면서 서비스 작동 원리와 구조를 파악하고 분석해야 합니다.
제가 사이렌 오더를 이용하면서 파악하고자 했던 것은 다음과 같습니다.
사이렌 오더에서 제공하는 기능들은 무엇이 있는가?
사이렌 오더 메인 화면의 추천 메뉴들은 어떤 기준으로 노출되는가?
사이렌 오더에서 주문 가능한 상품의 범위와 그것들을 주문하는 방법은 총 몇 가지인가?
사이렌 오더 완료까지의 시나리오와 주문 완료 후 음료가 나오기까지를 사용자에게 어떻게 안내하는가?
3. 설계서의 틀을 만들고, IA를 짜며 설계 분량 가늠하기
서비스를 사용해보면서 구조 분석이 어느 정도 끝났다면, 이제 설계서를 만들어볼 차례입니다.
표지 → 문서 History 페이지 → IA → 화면 설계 페이지 순으로 만드는데, 여기서 일단 먼저 신경 써야 하는 것은 'IA 작성'입니다.
IA는 메뉴를 분류/그룹화하여 Depth 구조로 정보 구조를 설계하는 것인데, 이번에는 이미 만들어진 서비스를 역기획하는 것이니, 본인이 설계해야 하는 페이지가 어느 정도인가를 파악하기 위해 작성합니다.
4. 캡처한 화면을 와이어프레임 형태로 카피하기
설계할 화면들을 죄다 캡처하여 옆에 놓고 이제 카피를 해야 합니다.
그전에 챕터(카테고리)와 스크린 패스(설계하는 화면이 나오기까지의 경로)를 적어주시고, 모바일 서비스라면 웹인지 앱인지 표시해줍니다.
노동요를 들으면서 IA에 잡아놓은 화면들을 마구마구 만들어 주면 되는데, 여기서 팁을 하나 드리자면 화면 그리고 디스크립션을 한 장 한 장 쓰는 것보다는 일단 그려야 하는 화면들 먼저 슉슉 그리는 것이 정신 건강에 좋습니다.
자, 이제 네모와 회색 가득한 화면 생산을 합시다!
5. 디스크립션 쓰기
화면을 다 그리셨으면 이제 디스크립션을 써줘야 합니다.
디스크립션 쓰는 법은 회사마다 조금씩 다른데, 만약 회사에 몸담고 계신 경우에는 회사의 양식에 따라 진행해주시고 만약 그렇지 않다면 대략 다음과 같이 작성해주시면 됩니다.
1) 화면에 정의하고자 하는 영역에 넘버링 배지를 달아주시고 디스크립션 영역에 공통적으로는 타이틀을 적고, 해당 영역에 대한 정의를 간결하게 작성합니다.
2) 해당 영역이 어떤 요소로 구성되어 있는지 나열하여 줍니다.
3) 액티브한 영역이라면 어떤 제스처를 사용하는지, 그리고 그 제스처를 사용했을 때 어떤 변화가 생기는지 적어줍니다. 만약 페이지가 이동하는 경우에는 팝업) 또는 링크)와 같이 전환 방법 + 괄호')'를 써주고 그 뒤에 페이지 이름 작성합니다.
4) 텍스트 인풋 혹은 버튼과 같이 다양한 상태 값을 가진 요소인 경우, 디폴트 상태와 선택되었을 때에 대한 정의를 각각 해주고, 오류 케이스와 같이 조건에 따라 다양한 케이스가 발생한다면 이에 대한 정의도 추가해줍니다.
6. (필요한 경우) 플로우 차트, 화면 시나리오 및 케이스 정리하기
플로우 차트 / 시나리오
서비스 이용 프로세스가 복잡하거나 중간중간 분기되는 케이스가 많은 경우엔 플로우 차트를 그려주면 서비스 및 기능의 프로세스가 구조를 보기 쉽고 정확하게 전달할 수 있습니다.
플로우 차트를 그려보면서 프로세스 상의 예외 케이스나 이슈 등을 파악하여 효율적인 사용성을 지녔는지도 체크할 수 있습니다.
그리고 다양한 경로를 지닌 홈과 같은 화면에서 어떤 영역/버튼 등을 통해 설명하고자 하는 Task를 수행할 수 있는지 설명이 필요하다면, 위의 예시 이미지와 같이 화면 시나리오를 통해 시각적으로 설명이 가능합니다.
케이스 정의
카드 타입, 리스트 타입 등 같은 UI여도 용도 및 조건 값에 따라 노출되는 정보와 용례가 다릅니다.
이를 모아서 한 곳에 모아 정리해주면 누락되거나 놓치는 부분 없이 설계서를 작성할 수 있습니다.
7. 설계서 작성 완료 후 정리하기
대략 6단계의 과정을 거쳐 110P 분량의 사이렌 오더 설계서를 완성했습니다.
저는 사이렌 오더 설계서를 작성하면서 배우고자 했던 것을 어느 정도 습득할 수 있었고, 사이렌 오더에서 개선이 필요한 부분도 찾을 수 있습니다.
역기획을 진행하며 배운 것
어떻게 하면 제한된 시간 내에 설계서를 효율적으로 작성할지 조금은 알게 된 것 같습니다.
스마트 오더 서비스에 대해 어느 정도 파악하게 되었습니다.
간편 결제 및 PG사 모듈 연동과 플로우, 정책 등을 경험할 수 있었습니다.
역기획을 진행하며 찾아낸 사이렌 오더의 PainPoint
[PainPoint 1] 영역이 부족하지 않은데도 전반적으로 텍스트 및 배지 등의 정보 요소가 작아 시인성이 부족함
[PainPoint 2] 상품 상세페이지에서 퍼스널 옵션별로 별도 페이지를 가지고 있어, 취소/변경이 불편함
[PainPoint 3] 퍼스널 옵션이 추가한 경우, 어떤 옵션을 선택해 해당 가격이 나온 건지 바로 인지하기 어려움 (최종 결제 화면에서만 확인 가능)
[PainPoint 4] 장바구니가 일반 장바구니(음료, 푸드, 상품)/홀케이크 장바구니로 나뉘어 있는데, 전체 메뉴의 홀케이크 탭을 제외한 모든 페이지에서 일반 장바구니만 볼 수 있어 홀케이크 장바구니 접근이 어려움
[PainPoint 5] 장바구니에 이미 담긴 음료의 수량 추가를 바로 할 수 없음
[PainPoint 6] 결제 화면에서 주문 추가나, 편집을 제공하지 않아, 해당 화면 이탈 후 이를 장바구니에서 진행해야 함 (그리고 바로 PainPoint 4번의 문제를 겪게 됨)
이 외에도 더 많은 개선이 필요한 점들이 있었는데, 이렇게 찾은 것들을 가지고 리디자인 프로젝트로 이어지면 좋을 것 같다는 생각이 들었습니다.
저는 아직 그 단계까지 진행하진 않았지만 조만간 다시 시간을 할애하여 진행해볼 예정입니다.
여러분들께서도 역기획을 진행해보시다가 "이런 건 좀 불편하네..?" 싶은 점들이 생기면 설계서 작성 후에 리디자인까지 한번 해보시기 바랍니다.
마무리하며...
아무래도 이미 완성된 앱을 보면서 작업을 해야 하니, 정책이나 개발 환경 등을 알기 어렵기에 역기획으로 작성된 설계서가 완벽하기는 어렵습니다.
지금도 스타벅스 사이렌 오더를 사용하면서 "앗..! 이런 화면이 있었어? 이거 설계하는 거 놓쳤었네.." 하는 부분도 종종 나타나고 제가 분석한 내용과 다르게 작동하는 부분이 찾아내곤 합니다.
하지만 미숙하더라도 계속 시도하면서 성장해나가는 것이 중요하므로, 완벽한 설계서를 만들어야 한다는 생각을 하기보단 "이 결과물이 나오게 하려면 내가 어떻게 설계해야 할까?"에 대해 고민하며 다른 이가 만든 앱을 분석하고 설계서까지 경험해본다라는 마인드로 접근하면 좋을 것 같습니다.
마지막으로 아직까지도 저는 처음 접하는 분야의 서비스를 설계할 때마다 늘 막막하고 고민의 시간을 많이 가지고 있는 것 같습니다.
그래서 설계서 그리는 게 손에 붙고 고민의 시간을 줄이기 위해, 올해도 시간을 내서 다른 서비스들을 꾸준히 역기획해보고자 합니다.
오늘은 여기까지 입니다.
감사합니다.
