앱개발의 시작 유저플로우, 이렇게 그려보세요

여행을 떠나기 전에 지도가 필요하듯, 앱을 개발하기 전에는 유저플로우가 필요합니다. 우리말로 ‘사용자 흐름’이라고도 할 수 있는 유저플로우(user flow)는 말 그대로 사용자가 앱을 이용하는 경로를 표현한 그림입니다. 개발자가 아니라면 유저플로우라는 개념이 낯설게 느껴질 수도 있지만, 사실 유저플로우는 앱개발 전에 반드시 고려해야 하는 첫걸음에 해당합니다.

앱개발에 관심이 있으신 분들을 위해, 이 글에서는 유저플로우의 개념을 소개하고 앱개발에 유저플로우가 필요한 이유를 살펴보겠습니다. 흔히 혼동되는 개념인 ‘사용자 여정’과 유저플로우가 어떻게 다른지, 그리고 앱을 개발할 때 유저플로우를 어떻게 활용해야 하는지 잘 모르고 계셨다면 이 글을 통해 알아가시기 바랍니다.

*본 포스팅은 Medium에 게재된 기고 글을 번역 및 재구성한 내용입니다.

💡 유저플로우란?  

유저플로우는 앱개발을 위한 지도라 할 수 있습니다. 사용자가 앱에 접속하는 지점에서 시작해 다양한 기능을 활용해 앱 상의 화면을 전환하고, 앱을 통해 이루고자 한 목표를 달성하는 순간까지를 나타낸 그림입니다. 아래의 예시와 같이 단계별로 구성할 수 있고, 도표나 그림으로 표현할 수도 있습니다.

💡 유저플로우 vs 사용자 여정

유저플로우(user flow)와 사용자 여정(user journey)는 거의 비슷한 용어처럼 사용됩니다. 앱 상에서 사용자가 이동하는 경로를 표현한다는 점에서는 동일하지만, 사실 두 단어에는 약간의 뉘앙스 차이가 있습니다.

사용자 여정은 사용자가 앱을 이용하는 과정에서 느끼는 감정과 생각에 집중한다는 점에서 UX적 특성이 강하다고 할 수 있습니다. 반면 유저플로우는 그보다 자세하게 앱 상의 화면을 묘사하고 기능에 집중한다는 UI적 특징이 있습니다.

앱을 개발할 때 유저플로우와 사용자 여정은 고객의 관점에서 전반적인 앱 사용 경험과 세부적인 디테일을 살펴볼 수 있는 중요한 도구이므로, 그 차이를 이해하고 상황에 맞게 사용해야 합니다.

💡 유저플로우가 중요한 이유

그렇다면 이 글에서 살펴보는 유저플로우가 앱개발에 중요한 이유는 무엇일까요? 개발에 착수하기에 앞서 유저플로우를 설계하면 앱 사용 경험에 대한 큰 그림과 상세한 그림을 동시에 그릴 수 있습니다. 개발 작업의 청사진을 그림으로써 개발 프로세스를 더 쉽게 하고, 그 결과물인 앱을 더 간결하고 명확하게 만들어낼 수 있죠.

1. 개발 시간 절약

이미 만들어진 앱의 코드를 고치는 것보다는 개발 전의 아이디어를 수정하는 것이 더 쉽고 빠릅니다. 실제로 유저플로우를 그려보면 미리 생각했던 앱 사용 흐름이 그리 매끄럽지 않을 수 있습니다. UI/UX 디자인을 완전히 수정하는 대신, 초기 단계에서 미리 아이디어를 다듬고 발전시켜 실제 개발 시간을 절약해 보세요.

2. 직관적 디자인 생성

명확하게 정의된 유저플로우가 있으면 UI 팀이 작업에 착수하기 쉬워집니다. 유저플로우에 잘 부합하는 직관적인 인터페이스를 바로 디자인할 수 있죠. 유저플로우를 그리는 과정에서 인터페이스 디자인에 대해 어느 정도의 합의가 이루어지기 때문에, 사용자가 이해하기 쉽고 보기에도 좋은 인터페이스를 빠르게 만들어나갈 수 있습니다.

3. 명확한 개발 프로세스

유저플로우는 앱개발 프로세스 전반에도 도움을 줍니다. 개발자와 디자이너를 포함한 여러 사람이 협력해야 하는 앱개발 프로젝트에서는 서로 간의 이해도나 목표가 일치하지 않는 경우가 종종 생기는데, 유저플로우를 공유하고 있으면 그런 문제가 줄어들기 때문입니다. 개발 구성원들은 유저플로우를 효과적으로 구현하기 위해 각자의 역할을 다하게 됩니다.

4. 잠재적 어려움 예측

앱개발 전에 유저플로우를 그려보면 개발 과정에서 예상되는 어려움을 미리 파악할 수 있습니다. 생각했던 사용자 경로가 너무 복잡할 수도 있고, 서로 충돌하는 부분이 존재할 수도 있습니다. 이럴 때 유저플로우를 수정하거나 새로 그리면서 그런 어려움을 해결하거나, 개발 과정에서 중점을 둘 부분을 확인하게 됩니다.

💡 좋은 유저플로우 만드는 법

앱개발을 결정했고 예상 유저플로우를 그려보기로 했다면, 주의해야 할 사항이 있습니다. 유저플로우는 여러 개의 화살표가 이리저리 뻗어 나가기만 하는 그림이 아닙니다. 정확한 출발점과 목표를 두고, 그 사이를 가장 효율적인 과정으로 연결하는 도식이죠.

유저플로우를 그릴 때는 앱 사용자에게 예상하는 단 하나의 목표를 골라 보세요. 앱을 켠 다음 사용자가 할 것 같은 선택지를 나열해 보고, 각 선택지에 따른 경로를 연결하는 겁니다. 이때 한 지점에서 너무 많은 화살표가 나온다면 기능을 너무 복잡하게 설계한 건 아닌지 돌아봐야 합니다. 최대한 간결하고 명확하게 설계하는 게 유저플로우의 핵심이라는 걸 기억하세요.

전문 지식이 많지 않더라도 유저플로우를 그리는 데는 문제가 없습니다. 그냥 종이 한 장에 상자와 화살표를 그려서 표현해도 괜찮습니다. 그보다는 앱을 통해 해결하고 싶은 문제와 타겟 고객에 집중하세요. 그렇게 단순화한 유저플로우를 완성한 다음 전문가의 도움을 받아 일러스트레이터나 피그마 같은 프로그램으로 옮겨 그래픽으로 표현하는 것도 좋은 방법입니다. 어느 쪽이든, 중요한 건 사용자 경로를 직관적으로 그려보는 게 개발 프로세스에 도움이 된다는 점입니다.

💡 유저플로우를 와이어프레임으로 연결하는 법

앱을 통해 사용자의 어떤 목표를 어떻게 달성해줄 것인지 유저플로우로 그려봤다면, 와이어프레임을 활용해 한 발짝 더 나아갈 수 있습니다. 보통 앱개발 과정에서 와이어프레임을 그리기 전에 유저플로우를 구성하는데요, 이 두 개념은 아주 밀접하게 관련되어 있답니다.

와이어프레임은 앱 화면이 어떻게 보일지, 그리고 그 화면이 사용자를 어디로 유도할지 보여주는 설계 그림입니다. 흔히 목업이라고 하는 화면 형태를 비교적 간결하게 보여주죠. 사용자의 선택 과정을 나타낸 지도에 해당하는 유저플로우를 설계하고 그에 해당하는 앱 화면을 와이어프레임으로 그렸다면, 이 둘을 결합해 ‘와이어플로우(wireflow)’를 구성할 수 있습니다. 아래 그림과 같은 와이어플로우는 사용자의 선택과 앱 사용 여정을 보다 자세한 그림으로 표현해 이후 이어질 개발 프로세스를 명확하게 만들어줍니다.

지금까지 앱개발에 유용한 유저플로우의 개념과 중요성, 그리고 유저플로우를 만들어 와이어프레임으로 연결하는 방법까지 알아보았습니다. 앱을 개발하기 전에 꼭 그려야 하는 청사진이나 다름없는 유저플로우를 이해하고 앱개발 전에 적극 활용하시기 바랍니다.

직접 그린 유저플로우를 전문가에게 점검받고 싶거나, 와이어프레임과 와이어플로우 단계를 넘어 실제 앱개발 프로세스를 진행하고 싶다면 크몽 엔터프라이즈의 전문가들에게 도움을 받아 보세요. 전담 매니저가 직접 추천해주는 개발 전문가들과 함께 생각만 하던 아이디어를 앱으로 탄생시킬 수 있습니다.