[Typers 팀프로젝트] 유저플로우 작성하기

프로젝트를 진행하면서 가장 먼저 신경 쓴 부분 중 하나는 바로 유저 플로우(User Flow)였습니다.
처음엔 조금 생소하게 느껴질 수도 있지만, 간단히 말하면 사용자가 우리 서비스를 어떻게 이용하게 될지를 시각적으로 정리한

흐름도예요.

예를 들어
"홈페이지 → 문장 선택 → 타자 연습 → 결과 확인"
이런 식으로 사용자가 사이트에서 어떤 경로로 이동하게 될지를 미리 파악할 수 있는 중요한 작업 중 하나라고 생각했습니다.

그래서 어느 정도 사이트의 틀을 잡은 후,
사용자가 어떤 경로로 사이트를 이용하게 될지 하나하나 흐름을 정리해보았습니다. 

 

 

 

유저플로우 과정 

유저 플로우를 만들 때, 처음 시작점은 '홈 화면'으로 잡았습니다.
그 이유는 가장 먼저 사용자가 마주하는 페이지이기도 하고, 홈 화면을 기준으로 흐름을 뻗어나가는 방식이 전체 구조를 이해하는 데 가장 효과적이라고 판단했기 때문입니다.

또한 유저 플로우 하나에 사이트 전체 흐름을 전부 넣는 방식은 가독성이 떨어지고 오히려 복잡하게 느껴질 수 있다고 생각했습니다.
그래서 저는 홈 화면에서 갈 수 있는 페이지들만 우선 정리한 뒤,
그 각각의 화면에 대해 다시 하위 유저 플로우를 만드는 방식을 선택했습니다.

이 흐름을 더 명확하게 보여주기 위해, 박스의 색상을 기준으로 페이지를 구분했습니다.

 

 

빨간색 박스는 하위 페이지가 있는 화면을 의미합니다.
즉, 사용자가 이 페이지에서 또 다른 화면으로 이동할 수 있다는 뜻이에요

 

파란색 박스는 더 이상 하위 페이지가 없는 화면입니다.
사용자가 도달한 최종 지점이거나, 다시 돌아가는 선택지만 있는 경우라고 생각하시면 됩니다!

 

 

---

메인 페이지 

---

 

 

---

자리연습 페이지 

---

 

 

 

---

창작마당&커스텀 페이지

---

 

 

 

---

로그인/회원가입

---

 

 

느낀점

유저 플로우를 작성하는 과정에서도 머릿속 로직이 꼬이고 헷갈리는 순간이 많았습니다.
하지만 그만큼 이 작업이 얼마나 중요한지 체감할 수 있었고,
만약 이런 정리 없이 바로 개발에 들어갔다면 더 큰 혼란이 왔을 거라는 걸 느끼는 시간이었습니다.