10장. 사용자 흐름 그려보기

지난 장에서 우리는 무엇을 만들지 정리했습니다. 회원가입, 로그인, 글 작성, 목록, 상세, 수정, 삭제, 검색. 필요한 기능과 화면이 어느 정도 보이기 시작했지요. 그런데 여기서 바로 개발로 뛰어들면, 또 다른 문제를 만날 수 있습니다.

화면은 있는데 순서가 없습니다.

예를 들어 회원가입 화면도 있고, 글 목록 화면도 있고, 글 작성 화면도 있다고 해봅시다. 그렇다면 사용자는 어디로 처음 들어올까요? 가입하지 않은 사람도 글 목록을 볼 수 있을까요? 글을 읽다가 바로 글을 쓸 수 있을까요? 글을 쓰려 할 때 로그인이 안 되어 있으면 어디로 보내야 할까요?

이런 질문에 답하는 것이 바로 사용자 흐름입니다. 사용자 흐름이 보이면 서비스가 훨씬 입체적으로 보입니다. 기능은 점처럼 흩어져 있던 것이고, 흐름은 그 점들을 선으로 연결하는 일입니다.

쉽게 말해, 사용자 흐름은 "사용자가 이 서비스를 실제로 어떻게 지나가는가"를 그린 지도입니다. 그리고 이 지도가 있어야 화면도, 버튼도, 이동 경로도 자연스럽게 정리됩니다.

사용자 흐름은 사용자의 발자국이다

사용자 흐름이라는 말을 처음 들으면 뭔가 어려운 설계 문서처럼 느껴질 수 있습니다. 하지만 생각보다 단순합니다. 사용자가 서비스 안에서 어떤 순서로 행동하는지 적어보는 것입니다.

예를 들어 이런 식입니다.

• 처음 방문한다

• 회원가입을 한다

• 로그인한다

• 글 목록을 본다

• 글 하나를 눌러 상세를 읽는다

• 글 작성 버튼을 누른다

• 제목과 본문을 입력한다

• 저장한다

• 다시 목록으로 돌아와 새 글이 보이는지 확인한다

이것만 봐도 서비스의 큰 뼈대가 보입니다. 홈 화면이 필요하겠구나, 회원가입과 로그인 화면이 있어야겠구나, 글 목록에서 상세로 이동해야겠구나, 저장 뒤에는 어디로 갈지 정해야겠구나 하는 것들이 자연스럽게 따라옵니다.

그래서 사용자 흐름은 단지 기획 문서가 아니라, 서비스의 실제 사용 장면을 미리 걷어보는 연습입니다.

왜 기능보다 흐름이 먼저 보여야 할까

초보자는 보통 기능을 중심으로 생각합니다. "로그인 넣기", "검색 넣기", "글쓰기 넣기"처럼 말이지요. 물론 기능은 중요합니다. 하지만 사용자는 기능 이름을 보고 서비스를 쓰지 않습니다. 사용자는 어떤 일을 하려다가, 어떤 화면에 들어가고, 어떤 버튼을 누르며 서비스를 경험합니다.

예를 들어 "글 작성 기능"이라는 말만 놓고 보면 충분해 보입니다. 하지만 흐름으로 바꾸는 순간 질문이 늘어납니다.

사용자는 글 작성 화면에 어떻게 들어가나요? 로그인하지 않아도 들어갈 수 있나요? 작성 도중 뒤로 가면 내용은 사라지나요? 저장이 끝나면 목록으로 이동하나요, 아니면 상세 화면으로 가나요?

이런 질문은 불편하게 느껴질 수 있지만, 사실 아주 반가운 질문입니다. 지금 미리 생각해두면 나중에 덜 막히기 때문입니다.

기능은 부품이고, 흐름은 사용 경험입니다. 부품만 모아서는 서비스가 되지 않습니다. 부품이 어떤 순서로 연결되는지 알아야 비로소 한 사람의 경험이 됩니다.

사용자 흐름은 복잡한 도표보다 먼저 문장으로 써도 된다

많은 사람이 사용자 흐름을 그린다고 하면 화살표가 잔뜩 있는 다이어그램부터 떠올립니다. 물론 그런 그림도 좋습니다. 하지만 첫 서비스에서는 꼭 그렇게 시작할 필요가 없습니다.

오히려 처음에는 문장으로 흐름을 쓰는 것이 더 쉽습니다.

예를 들어 이렇게 적으면 됩니다.

"처음 방문한 사용자는 홈 화면에서 서비스 설명을 본다. 글을 저장하려면 회원가입 또는 로그인이 필요하다. 로그인한 사용자는 글 목록으로 이동한다. 목록에서 기존 글을 읽거나 새 글을 작성할 수 있다. 글을 저장하면 목록으로 돌아가고, 방금 쓴 글이 보인다."

이렇게 한 문단으로 적는 것만으로도 이미 훌륭한 사용자 흐름 초안입니다. 그림은 나중에 그려도 됩니다. 중요한 것은 예쁘게 그리는 일이 아니라, 사용자의 움직임을 놓치지 않는 일입니다.

이 책의 실습 서비스에서 가장 중요한 대표 흐름

이번 실습 서비스는 작은 풀스택 웹 서비스입니다. 사용자는 가입하고, 로그인하고, 자신의 글을 읽고, 쓰고, 수정하고, 삭제할 수 있습니다. 그렇다면 가장 먼저 잡아야 할 대표 흐름도 비교적 분명합니다.

이 장에서는 그중에서도 핵심이 되는 세 가지 흐름을 중심으로 생각해보겠습니다.

• 처음 방문해 회원가입하고 로그인하는 흐름

• 로그인 후 글 목록과 상세를 읽는 흐름

• 새 글을 작성하고 저장하는 흐름

이 세 흐름만 또렷해져도 서비스의 중심축은 거의 완성됩니다. 검색, 수정, 삭제는 그다음에 자연스럽게 붙일 수 있습니다.

흐름 1: 처음 방문한 사용자가 회원가입하고 로그인하기

이제 실제 장면을 하나씩 떠올려봅시다. 사용자는 처음으로 우리 서비스에 들어옵니다. 아직 계정이 없습니다. 무엇을 할 수 있고, 어디로 가야 할까요?

가장 자연스러운 흐름은 이렇습니다.

사용자는 홈 화면에 도착합니다. 여기서 서비스가 무엇을 하는지 짧게 이해합니다. 그리고 "시작하기"나 "회원가입" 버튼을 누릅니다. 회원가입 화면으로 이동한 뒤 이메일과 비밀번호를 입력합니다. 가입이 완료되면 로그인 화면으로 가거나, 자동 로그인된 상태로 서비스 안으로 들어갈 수 있습니다. 로그인에 성공하면 글 목록 화면으로 이동합니다.

이 짧은 흐름 안에서도 필요한 것이 꽤 많습니다. 홈 화면에는 서비스 설명과 시작 버튼이 있어야 합니다. 회원가입 화면에는 입력 폼과 가입 버튼이 있어야 합니다. 가입 성공 후 어디로 보낼지도 정해야 합니다. 로그인 화면도 필요하고, 로그인 성공 뒤 기본으로 도착할 화면도 정해야 합니다.

여기서 중요한 것은 "가입이 끝나면 사용자가 어디에 서 있는가"입니다. 초보자는 종종 가입 기능만 구현하고, 그다음 사용자가 어디로 가야 하는지는 나중에 생각합니다. 하지만 실제 사용자는 가입이 끝난 뒤 바로 다음 행동을 하고 싶어 합니다. 그래서 가입 이후의 이동까지 흐름 안에 넣어야 합니다.

흐름 2: 로그인한 사용자가 글 목록을 보고 상세를 읽기

이제 사용자는 로그인까지 끝냈습니다. 그렇다면 서비스 안에서 가장 먼저 만나게 될 핵심 장면은 무엇일까요? 보통은 글 목록입니다.

글 목록 화면은 서비스의 거실 같은 곳입니다. 사용자는 여기서 지금까지 작성한 글을 한눈에 보고, 원하는 글을 고를 수 있어야 합니다. 목록이 잘 보이면 서비스가 살아 있는 느낌이 납니다.

자연스러운 흐름은 이렇습니다.

로그인한 사용자는 글 목록 화면에 들어옵니다. 목록에서 제목을 훑어봅니다. 궁금한 글 하나를 클릭합니다. 그러면 글 상세 화면으로 이동합니다. 상세 화면에서는 제목과 본문을 읽을 수 있습니다. 그리고 필요하면 다시 목록으로 돌아갑니다.

이 흐름을 적어보면 또 여러 결정이 따라옵니다. 목록에서는 무엇을 보여줄까요? 제목만 보여줄지, 작성일도 보여줄지 정해야 합니다. 상세 화면에서는 어떤 버튼을 둘까요? 수정과 삭제 버튼을 둘 수 있겠지요. 다시 목록으로 돌아가는 길도 있어야 합니다.

흐름은 이런 식으로 화면의 역할을 분명하게 만듭니다. 목록은 여러 글 중 하나를 고르는 곳이고, 상세는 하나의 글을 제대로 읽는 곳입니다. 이 역할이 선명해지면 화면 구성이 쉬워집니다.

흐름 3: 사용자가 새 글을 작성하고 저장하기

이 서비스의 가장 중요한 가치 중 하나는 사용자가 자신의 생각을 남길 수 있다는 점입니다. 그래서 글 작성 흐름은 아주 중요합니다. 글 쓰기가 막히면 서비스의 핵심도 멈춥니다.

기본 흐름은 이렇게 잡을 수 있습니다.

사용자는 글 목록 화면에서 "새 글 작성" 버튼을 누릅니다. 글 작성 화면으로 이동합니다. 제목과 본문을 입력합니다. 저장 버튼을 누릅니다. 저장이 성공하면 글 목록 화면이나 방금 작성한 글의 상세 화면으로 이동합니다. 그리고 사용자는 방금 작성한 글이 실제로 저장되었는지 확인합니다.

여기서도 꽤 많은 실무적인 판단이 숨어 있습니다. 제목은 필수일까요? 본문만 있어도 저장할까요? 저장이 실패하면 어떤 메시지를 보여줄까요? 저장 성공 후 목록으로 보낼지, 상세로 보낼지 결정해야 합니다.

처음 만드는 서비스라면 흐름을 단순하게 가져가는 편이 좋습니다. 예를 들어 제목과 본문을 입력하고 저장하면 목록으로 돌아가게 하는 방식은 이해하기 쉽고 구현도 단순합니다. 반면 저장 후 상세로 이동하게 하면 조금 더 서비스다운 느낌은 나지만, 상세 화면 준비가 먼저 되어 있어야 합니다.

중요한 것은 멋있어 보이는 선택보다, 초보자가 끝까지 구현할 수 있는 선택을 하는 것입니다.

세 흐름을 하나로 이어보면 서비스 전체가 보인다

지금까지의 내용을 하나의 흐름으로 이어보면 이 서비스의 첫 사용 경험이 보입니다.

처음 방문한 사용자는 홈 화면에 들어온다. 회원가입을 한다. 로그인한다. 글 목록 화면으로 이동한다. 목록에서 글을 읽는다. 다시 목록으로 돌아온다. 새 글 작성 버튼을 누른다. 제목과 본문을 입력한다. 저장한다. 목록에서 방금 쓴 글을 확인한다.

이 한 줄짜리 이야기만 있어도 서비스의 중심 동선이 훨씬 선명해집니다. 어디에 버튼이 있어야 하는지, 어떤 화면이 먼저 준비되어야 하는지, 어떤 기능이 아직 비어 있는지 보이기 시작합니다.

결국 사용자 흐름은 "어떤 기능이 필요한가"를 다시 알려주는 도구이기도 합니다. 막연하게 기능을 나열할 때보다, 사용자의 이동 경로 속에서 기능을 바라볼 때 훨씬 현실적인 우선순위가 나옵니다.

흐름을 그리면 필요한 화면이 더 명확해진다

지난 장에서는 필요한 화면을 정리했습니다. 이번 장에서는 그 화면들이 실제로 어떻게 이어지는지 봤습니다. 이 둘은 비슷해 보이지만 역할이 다릅니다.

화면 목록은 부품 목록입니다. 반면 사용자 흐름은 조립 설명서에 가깝습니다.

예를 들어 사용자 흐름을 그리고 나면 이런 사실이 더 분명해집니다.

• 홈 화면에서는 서비스 소개와 시작 버튼이 중요하다.

• 회원가입 화면 다음에는 로그인 또는 자동 로그인 처리가 필요하다.

• 로그인 성공 후 기본 도착지는 글 목록 화면이 자연스럽다.

• 글 목록에서는 상세 보기와 새 글 작성으로 이동할 수 있어야 한다.

• 글 작성이 끝난 뒤 돌아갈 위치를 미리 정해야 한다.

이처럼 흐름은 같은 화면도 더 구체적으로 보이게 만듭니다. "글 목록 화면이 필요하다"에서 끝나는 것이 아니라, "글 목록 화면은 로그인 직후의 첫 화면이며, 상세와 작성의 출발점이다"라는 식으로 역할이 선명해집니다.

흐름을 그리면 필요한 기능도 더 정확해진다

사용자 흐름의 또 다른 장점은 기능의 빈칸을 발견하게 해준다는 점입니다.

예를 들어 "글 작성" 기능만 생각하면 저장 버튼만 떠올릴 수 있습니다. 하지만 흐름으로 생각하면 저장 성공 메시지, 저장 실패 처리, 저장 후 이동 경로 같은 요소도 필요하다는 사실을 알게 됩니다.

"글 읽기"도 마찬가지입니다. 목록에서 상세로 이동하는 기능, 상세에서 다시 목록으로 돌아오는 기능, 로그인하지 않은 사용자를 막거나 안내하는 기능이 함께 따라옵니다.

즉, 흐름은 기능을 더 잘게 쪼개 보여줍니다. 이것은 초보자에게 매우 좋은 일입니다. 큰 덩어리로 막연하게 보이던 일이, 실제로 구현 가능한 작은 단위로 바뀌기 때문입니다.

로그인 전과 로그인 후를 나눠 생각하자

사용자 흐름에서 특히 중요한 구분이 하나 있습니다. 바로 로그인 전과 로그인 후입니다.

이 책의 실습 서비스는 개인 기록 서비스에 가깝기 때문에, 로그인 여부가 경험을 크게 바꿉니다. 로그인 전에는 가입과 로그인으로 유도해야 하고, 로그인 후에는 내 글 목록과 작성 기능을 보여줘야 합니다.

이 구분을 흐름에 넣지 않으면 서비스가 금방 어색해집니다. 예를 들어 로그인하지 않은 사용자가 "글 작성" 버튼을 눌렀을 때 아무 일도 일어나지 않거나 에러가 나면 당황스럽겠지요. 반대로 로그인한 사용자인데도 계속 홈 화면만 보인다면 답답할 것입니다.

그래서 흐름을 그릴 때는 적어도 이 정도는 구분해두는 편이 좋습니다.

• 로그인 전 사용자가 보는 화면

• 로그인 후 사용자가 보는 화면

• 로그인하지 않은 채 보호된 기능에 들어가려 할 때의 이동

이렇게만 생각해도 서비스가 훨씬 자연스러워집니다.

예외 흐름도 조금은 생각해야 한다

사용자 흐름은 보통 가장 이상적인 경로부터 그립니다. 가입이 잘 되고, 로그인이 잘 되고, 저장도 잘 되는 길 말입니다. 그런데 실제 서비스에서는 늘 그렇게만 흘러가지는 않습니다.

예를 들어 이런 장면이 있습니다.

• 회원가입 시 이미 사용 중인 이메일이라면?

• 로그인 비밀번호를 틀렸다면?

• 글이 하나도 없다면 목록 화면에는 무엇을 보여줄까?

• 저장 버튼을 눌렀는데 실패했다면?

이런 예외 흐름까지 처음부터 완벽하게 정리할 필요는 없습니다. 다만 핵심 흐름을 그린 뒤, 최소한 자주 만날 만한 예외는 함께 적어두는 편이 좋습니다.

특히 초보자가 첫 서비스에서 꼭 챙기면 좋은 예외는 세 가지입니다. 로그인 실패, 빈 목록, 저장 실패입니다. 이 세 가지만 생각해도 사용자 경험이 훨씬 단단해집니다.

예를 들어 글 목록이 비어 있다면 "아직 작성한 글이 없습니다. 첫 글을 써보세요." 같은 안내와 함께 작성 버튼을 보여줄 수 있습니다. 이런 한 줄은 서비스가 훨씬 친절하게 느껴지게 만듭니다.

사용자 흐름은 AI에게 일을 시킬 때도 매우 강력하다

이 책의 중요한 주제 중 하나는 AI와 협업하는 방법입니다. 이때 사용자 흐름은 아주 강력한 설명 도구가 됩니다.

단순히 "회원가입 기능 만들어줘"라고 말하는 것보다, 흐름을 포함해서 말하면 훨씬 좋은 결과를 얻기 쉽습니다.

예를 들면 이런 식입니다.

"처음 방문한 사용자는 홈 화면에서 회원가입 버튼을 누를 수 있어야 해. 회원가입이 끝나면 로그인 화면으로 이동하고, 로그인 성공 시 글 목록 페이지로 보내줘. 목록에서는 글 제목 목록과 새 글 작성 버튼이 보여야 해. 새 글 작성 후 저장하면 다시 목록으로 돌아오게 해줘."

이 요청은 단순히 기능을 말하는 것이 아니라, 사용자의 이동 경로까지 설명합니다. 그러면 AI도 화면 연결, 버튼 위치, 라우팅 같은 것을 더 일관되게 제안할 수 있습니다.

즉, 사용자 흐름은 사람끼리 공유할 때만 좋은 것이 아니라, AI에게 맥락을 전달할 때도 훌륭한 기준이 됩니다.

초보자가 사용자 흐름에서 자주 하는 실수

사용자 흐름을 처음 그릴 때 흔히 나오는 실수가 있습니다. 미리 알고 있으면 훨씬 덜 헤맵니다.

첫 번째는 화면 순서만 적고, 왜 이동하는지는 빠뜨리는 것입니다. 사용자는 이유 없이 움직이지 않습니다. 버튼을 눌렀기 때문에 이동하고, 어떤 목적이 있어서 다음 화면으로 갑니다. 흐름에는 그 목적이 보여야 합니다.

두 번째는 너무 많은 경우를 한 번에 넣는 것입니다. 처음부터 가입, 로그인, 검색, 수정, 삭제, 프로필, 설정, 알림, 관리자 기능까지 한 그림에 다 넣으면 머리가 금방 복잡해집니다. 처음에는 가장 중요한 대표 흐름 하나만 먼저 잡는 편이 좋습니다.

세 번째는 성공 흐름만 있고 실패 흐름이 전혀 없는 것입니다. 완벽한 설계가 필요하다는 뜻은 아니지만, 적어도 로그인 실패와 빈 화면 정도는 생각해두는 것이 좋습니다.

네 번째는 흐름을 그렸는데도 화면이나 기능으로 연결하지 않는 것입니다. 사용자 흐름은 그림으로 끝나면 아쉽습니다. 이 흐름에서 어떤 화면이 필요한지, 어떤 버튼이 필요한지, 어떤 상태를 처리해야 하는지까지 이어져야 진짜 도움이 됩니다.

우리 서비스의 사용자 흐름 초안 예시

이제 이 장의 내용을 바탕으로, 실제로 쓸 수 있는 간단한 사용자 흐름 초안을 문장으로 정리해보겠습니다.

기본 흐름

처음 방문한 사용자는 홈 화면에 들어와 서비스 소개를 본다. 회원가입 버튼을 눌러 회원가입 화면으로 이동한다. 이메일과 비밀번호를 입력해 가입을 완료한다. 로그인 화면에서 로그인한다. 로그인에 성공하면 글 목록 화면으로 이동한다. 목록에서 기존 글을 읽거나 새 글 작성 버튼을 누를 수 있다. 사용자가 특정 글을 누르면 상세 화면으로 이동해 내용을 읽는다. 사용자가 새 글 작성 버튼을 누르면 글 작성 화면으로 이동한다. 제목과 본문을 입력한 뒤 저장하면 글 목록 화면으로 돌아간다. 목록에서 방금 작성한 글을 확인할 수 있다.

예외 흐름

회원가입에 실패하면 오류 메시지를 보여주고 다시 입력하게 한다. 로그인에 실패하면 로그인 화면에서 실패 이유를 알려준다. 글 목록에 글이 하나도 없으면 빈 상태 안내 문구와 함께 새 글 작성 버튼을 보여준다. 글 저장에 실패하면 작성 화면에 머무른 채 다시 시도할 수 있게 한다.

이 정도만 정리해도 개발 순서가 꽤 또렷해집니다. 먼저 홈, 회원가입, 로그인, 목록, 상세, 작성 화면을 만들면 되겠구나. 그다음 로그인 성공 이동, 작성 후 이동, 빈 상태 처리, 실패 메시지를 붙이면 되겠구나 하는 식으로 작업이 쪼개집니다.

지금 단계에서 꼭 결정하면 좋은 것

사용자 흐름을 그릴 때, 완벽한 답을 다 찾을 필요는 없습니다. 다만 아래 몇 가지는 미리 정해두면 나중에 덜 흔들립니다.

• 첫 방문자의 시작 화면은 어디인가

• 회원가입 후 사용자를 어디로 보낼 것인가

• 로그인 성공 후 기본 도착 화면은 어디인가

• 글 저장 후 사용자를 어디로 이동시킬 것인가

• 로그인하지 않은 사용자가 보호된 기능을 누르면 어떻게 할 것인가

• 목록이 비어 있을 때 어떤 안내를 보여줄 것인가

이 질문들은 작아 보여도 서비스 사용감에 큰 영향을 줍니다. 그리고 대부분은 정답이 하나인 문제가 아니라, 지금 우리의 서비스 규모에 맞는 선택을 하면 되는 문제입니다.

첫 서비스라면 복잡함보다 일관성을 우선하는 편이 좋습니다. 예를 들어 로그인 성공 후 항상 글 목록으로 보낸다, 작성 성공 후에도 글 목록으로 보낸다처럼 단순한 규칙을 정하면 사용자도 덜 헷갈리고 구현도 쉬워집니다.

사용자 흐름은 결국 서비스를 한 편의 짧은 이야기로 만드는 일이다

좋은 사용자 흐름은 멋진 도표보다 먼저, 자연스러운 이야기처럼 읽힙니다.

"처음 온 사람이 서비스가 무엇인지 이해하고, 어렵지 않게 가입하고, 로그인한 뒤, 글을 읽고, 직접 하나 써보고, 저장된 결과를 확인한다."

이 이야기가 매끄럽다면 서비스도 대체로 매끄럽습니다. 반대로 이야기가 자꾸 끊기면, 실제 사용 경험도 어딘가에서 끊길 가능성이 큽니다.

그래서 사용자 흐름을 그린다는 것은 단순히 기획 문서를 하나 더 만드는 일이 아닙니다. 사용자의 입장으로 서비스를 미리 걸어보는 일입니다. 개발을 시작하기 전에 한 번 걸어본 길은, 실제 구현할 때 훨씬 덜 낯섭니다.

이 장에서 꼭 기억할 것

사용자 흐름은 사용자가 서비스 안에서 어떤 순서로 움직이는지 정리한 것입니다. 기능과 화면을 따로따로 보는 대신, 실제 사용 장면 속에서 연결해보게 해줍니다.

특히 이번 실습 서비스에서는 처음 방문 → 회원가입 → 로그인 → 글 목록 확인 → 글 상세 읽기 → 새 글 작성 → 저장 후 확인이라는 기본 흐름이 중심이 됩니다. 이 흐름이 보이면 어떤 화면이 먼저 필요하고, 어떤 버튼과 이동이 필요한지 자연스럽게 따라옵니다.

그리고 사용자 흐름은 사람에게 설명할 때뿐 아니라 AI에게 일을 맡길 때도 매우 유용합니다. 기능 이름만 던지는 것보다, 사용자가 어떻게 움직여야 하는지까지 함께 설명할 때 더 좋은 결과가 나옵니다.

이제 우리는 사용자의 움직임까지 그려봤습니다. 다음 장에서는 이 흐름을 바탕으로, 서비스 안의 정보를 어떻게 나눠 담을지, 즉 데이터를 쉬운 말로 설계하는 방법을 살펴보겠습니다.