유저플로우(User Flow) vs 테스크플로우(Task Flow)

유저플로우의 경우 여러개의 분기나 경로가 존재하지만 테스크 플로우는 단일 경로 입니다. 테스크 플로우는 유저플로우의 일부 일 수 있습니다. 또한 유저 플로우는 명확한 시작과 종료점이 존재하고 행동에 초점을 맞추지만, 테스크 플로우는 시작과 종료점을 생략할 수 있고 단계에 초점을 두게 됩니다.

유저플로우 그리는 방법

1. User Goal 설정

유저 플로우의 제목을 설정하는 단계입니다. 유저가 서비스 내에서 이루고자 하는 목표를 한 문장으로 정리합니다. 단순하고 명확할 수록 좋습니다. 유저플로우 예시로 뉴스 앱에서 ‘오늘의 주요 뉴스를 읽는다’로 설정할 수 있고, 음악 스트리밍 서비스에서 ‘새로운 플레이리스트를 만든다’로 설정할 수 있습니다.

2. Task Flow

이제 유저가 목표를 달성하기 위해 실행해야하는 각 단계를 그려봅니다. 유저의 목표 설정에서 예로 들었던 음악 스트리밍 서비스에서 ‘새로운 플레이리스트를 만든다’로 이어가 볼까요? 음악 스트리밍 서비스에서 새로운 플레이리스트를 만들기 위한 단계는 아래와 같습니다.

앱에 로그인한다.
플레이리스트 섹션으로 이동한다.
‘새 플레이리스트 만들기’버튼을 클릭한다.
플레이리스트 이름을 입력하고 ‘저장’ 버튼을 누른다.
원하는 노래를 검색하여 플레이리스트에 추가한다.

각 단계는 사용자 목표 달성을 위해 필수적인 과정이며 이 플로우 테스크는 사용자가 새로운 플레이리스트를 쉽게 만들 수 있도록 안내합니다.

3. Userflow

위에서 제작했던 테스크 플로우는 유저 플로우의 일부가 될 수 있습니다. 유저 플로우는 제품 개발의 모든 단계를 표기하는 다이어그램입니다. 계속해서 ‘음악 스트리밍 서비스’로 예를 든다면 아래와 같이 정리할 수 있습니다.

앱 실행 및 로그인
홈 화면 탐색
플레이리스트 관리
플레이리스트 생성
노래 추가
플레이리스트 저장 및 완료

4번의 플레이리스트 생성은 앞서 설계했던 Task Flow를 포함하게 됩니다.

유저플로우 툴

가장 원시적인 방법으로 종이와 펜을 이용하는 방법이 있습니다. 디지털 시대인 만큼 플로우를 쉽게 그릴 수 있도록 도와주는 온라인 툴이 많이 개발되고 있습니다. 몇 가지 추천할만한 유저 플로우 툴을 소개합니다.

1. 피그잼

제가 사용했던 툴 중 가장 좋다고 생각하는 툴 입니다. 피그마에서 만든 툴로 팀 프로젝트로 공유하여 사용할 경우 유료지만 혼자 사용할 경우 무료로 이용이 가능합니다. 피그마 앱을 설치해서 사용할 수도 있고, 웹사이트에 접속하여 사용할 수도 있습니다. 도형과 연결선의 생성이 매우 편리한 툴이며 도식의 디자인도 좋습니다.

https://www.figma.com/figjam

2. 미로

피그잼 출시 전 즐겨쓰던 툴 입니다. 원래는 온라인 화이트보드로 유명한 툴인데 플로우 기능도 피그잼과 비슷합니다. 결론적으로 저는 피그마 사용자라 두 개의 툴을 쓰는것보다 피그마 툴 안에서 피그잼을 쓰는것이 더 편리하여 지금은 피그잼만 사용중입니다.

https://miro.com/ko

3. draw.io

한번쯤 들어보았을 유명한 툴 입니다. 개발자분들이 주로 사용하시는 것 같습니다. 다이어그램을 그리는데 특화되어 있고, 구글 드라이브에서 생성/연동이 가능한 점이 장점입니다. 이 툴도 사용해 보았는데 저와는 맞지 않아 사용하고 있지 않습니다만 개인 의견임을 참고해 주시기 바랍니다.

https://www.drawio.com

결론

UI/UX 디자인에서 유저 플로우와 테스크 플로우의 차이점을 이해하고, 적절한 툴을 사용하여 효율적인 플로우 다이어그램을 작성하는 것은 매우 중요합니다. 유저 플로우는 사용자의 전체 여정을 시각화하여 큰 그림을 제공하며, 테스크 플로우는 특정 작업을 완료하는 단계를 자세히 설명합니다. 이 둘을 구분하고 적절히 활용하면 사용자 경험을 최적화하고 제품 개발 과정을 원활하게 진행할 수 있습니다. 피그잼, 미로, draw.io와 같은 툴을 통해 손쉽게 플로우를 작성해보세요.

정의

사용자흐름(User Flow)

작업흐름(Task Flow)

유사점과 차이점