Step 2 User FlowChart - 100-hours-a-week/16-team-katopia-fe GitHub Wiki

본 유저 플로우는 비로그인 사용자에게 서비스의 핵심 가치를 미리 제공하면서, 자연스럽게 로그인을 유도하고 로그인 이후의 주요 기능으로 연결하기 위한 흐름을 설계한 것이다.

• 진입 즉시 로그인 강제 → 사용자 이탈 가능성 증가
• 제한된 콘탠츠 노출 후 로그인 유도 → 서비스 이해도 및 전환율 증가

이를 통해 탐색 → 관심 → 행동(로그인)의 단계적 사용자 경험을 제공한다.

서비스 진입 시 가장 먼저 로그인 여부를 판단함으로써, 로그인 사용자와 비로그인 사용자의 경험을 명확히 분리한다.

• 로그인 사용자 : 불필요한 중간 단계 없이 바로 Home 진입
• 비로그인 사용자 : 서비스의 미리 기능 경험이 가능한 게스트 플로우 제공
  • 비로그인 사용자에게도 일부 피드를 노출함으로써 서비스의 성격, 주요 콘텐츠 유형을 사전에 인지할 수 있도록 한다.
    • 노출 정책 - 읽기 전용 피드, 좋아요/댓글/북마크 등 인터랙션 제한

회원가입과 로그인을 분리하지 않고, OAuth 기반 소셜 로그인으로 진입 장벽을 최소화한다.

• 카카오 로그인 버튼 클릭 → OAuth 인증 요청 → 인증 성공/실패 분기

본 유저 플로우는 신규 로그인 사용자가 서비스 이용에 필요한 최소한의 프로필 정보를 입력하고 입력 오류 및 API 실패 상황에서도 이탈 없이 프로필 설정을 완료할 수 있도록 설계되었다.

OAuth 로그인 이후, 신규 유저는 아직 서비스 내부에서 사용할 기본 사용자 데이터가 없는 상태이므로 프로필 설정 화면으로 바로 진입한다.

입력 항목

• 프로필 사진
• 닉네임
• 성별
• 키/몸무게(선택)
• 스타일(선택)

→ 이 정보들은 이후 서비스의 개인화의 기반이 된다.

본 유저플로우는 로그인 사용자의 Home 화면에서 팔로우 한 계정의 게시물을 노출하고 게시물 → 상세 진입 → 인터랙션(좋아요, 북마크, 댓글 작성) → 즉각적인 UI 반영까지 끊김없는 메인 사용자 경험을 제공하기 위해 설계되었다.

로그인 사용자는 서비스의 핵심 기능을 바로 사용할 수 있어야 하므로 중간 단계없이 Home화면으로 진입한다.

사용자의 팔로우 상태에 따라 게시물 노출 구성 방식이 달라져야 하므로 Home 진입 직후 팔로우 여부를 판단한다.

• 팔로우가 0명인 경우
  • 팔로우한 사용자가 없는 경우, 빈 피드 또는 랜덤 콘텐츠를 노출하는 대신 팔로우 유도를 위한 친구 추천 섹션을 제공한다.
• 팔로우가 1명 이상인 경우
  • 팔로우한 계정의 게시물을 우선 노출하여 사용자의 관심도와 체류시간을 증가시킨다.

본 유저 플로우는 로그인 사용자의 Home 화면에서 미확인 알림 여부를 직관적으로 인지할 수 있도록 알림 아이콘 상태를 제어하기 위해 설계되었다.

미확인 알림이 존재할 경우, 알림 아이콘에 배지를 표시하여 사용자가 별도의 클릭 없이도 상태를 인지하도록 한다.

미확인 알림이 없는 경우, 불필요한 강조 요소를 제거하고 UI를 최대한 깔끔하게 유지한다.

본 유저플로우는 알림 센터 내에서 알림의 상태를 명확히 구분하고 알림 클릭 시 알림에 맞는 화면으로 정확히 이동할 수 있도록 설계되었다.

알림의 상태는 사용자가 이미 인지한 정보인지 여부를 나타내는 핵심 요소이므로 각 알림 아이템별로 읽음 여부를 명확히 구분한다.

안읽음 → 강조 스타일 적용 읽음 → 기본 스타일 적용

본 유저 플로우는 게시글 상세 화면에서 댓글의 조회, 작성, 수정, 삭제 전 과정을 권한에 따라 명확히 제어하고 사용자의 액션 결과가 즉시 UI에 반영되도록 설계되었다.

댓글에 대한 수정/삭제 권한은 작성자에게만 부여되어야 하므로 각 댓글마다 작성자 여부를 판단한다.

작성자에게만 수정/삭제 버튼을 노출함으로써 권한 오남용 방지를 달성한다.

권한이 없는 사용자에게는 불필요한 버튼을 노출하지 않음으로써 잘못된 기대 행동을 사전에 차단한다.

댓글 수정은 사용자의 의도 변경을 반영하는 행동이므로 기존 댓글 맥락을 유지할 채 수정이 가능해야한다.

댓글 삭제는 되돌릴 수 없는 행동이므로 명확한 API 성공 여부 판단을 통해 처리한다.

본 유저 플로우는 사용자가 계정, 게시물, 해시태그로 다양한 탐색 목적을 가지고 콘텐츠를 검색할 수 있도록 검색 진입부터 결과 탐색, 상세 페이지 진입까지의 흐름을 명확하고 직관적으로 제공하기 위해 설계되었다.

사용자는 자신의 체형(키/몸무게/성별)에 맞는 콘텐츠를 찾고자 할 수 있으므로 사이즈 필터를 on/off 형태로 자유롭게 조작할 수 있도록 한다.

흐름

1. 계정 검색 탭 선택
2. 계정 닉네임 입력
3. 계정 검색 결과 리스트 노출
4. 계정 선택
5. 선택한 계정 프로필 페이지 진입

계정 검색은 사람 중심 탐색이므로 불필요한 분기없이 단순하고 직관적인 흐름을 유지한다.

흐름

1. 게시물/해시태그 검색 탭 선택

2. 검색어 입력

3. #포함 여부 판단

   사용자는 하나의 검색창에서 해시태그 검색, 게시물 내용 검색을 모두 기대할 수 있으므로 입력값에 따라 검색 방식을 자동으로 분기한다.

   • #포함 → 해시태그 검색 결과 리스트
   • 미포함 → 게시물 내용 검색 결과 리스트

본 유저 플로우는 사용자가 일반 게시글 또는 투표 게시글을 선택하여 작성할 수 있도록 하고, 작성 과정에서의 입력 오류를 사전에 방지하며 작성 완료 이후에는 자연스럽게 결과 확인 화면으로 연결되도록 설계되었다.

1. 게시글 작성 폼 진입

   일반 게시글은 이미지 중심 콘텐츠, 자유로운 의견 공유를 목적으로 하므로 사진 업로드와 내용 입력을 중심으로 한 작성 폼을 제공한다.

2. 사진 업로드 및 내용 입력

   게시글의 핵심 정보는 이미지, 텍스트 설명이므로 두 요소를 동시에 입력하도록 구성한다.

3. 유효성 검사

   작성 완료 이전에 필수 입력 여부(이미지는 필수, 내용 입력은 선택), 이미지 개수/형식, 텍스트 길이 등을 검증하여 잘못된 게시글이 생성되는 것을 사전에 방지한다.

1. 투표 작성 폼 진입

   투표 게시글은 질문,투표 이미지가 핵심이므로 일반 게시글과 완전히 분리된 작성 폼을 제공한다.

2. 제목 및 투표 이미지 입력

   투표의 본질은 선택을 유도하는 비교이므로 제목과 투표 이미지 입력을 필수 요소로 설정한다.

3. 유효성 검사

   투표 게시글은 최소 선택지 개수, 이미지 누락 여부 등의 조건이 반드시 충족되어야 하므로 작성 완료 이전에 유효성 검증을 수행한다.

본 유저 플로우 차트는 게시글 상세 화면에서 작성자 권한에 따라 수정 및 삭제 기능을 안전하게 제공하고 수정/삭제 과정에서 발생할 수 있는 오류나 실수를 최소화하도록 설계되었다.

게시글 수정 및 삭제는 작성자에게만 허용되어야 하므로 상세화면 진입 시 가장 먼저 작성자 여부를 판단한다.

• 작성자 아님 -> 읽기 전용 화면
  • 작성자가 아닌 사용자는 게시글을 읽기만 할 수 있어야 하며 수정/삭제 버튼은 노출하지 않는다.
• 작성자 본인 -> 관리 기능 노출 가능

게시글 수정은 기존 내용을 유지한 채 변경해야 하므로 별도의 수정 페이지에서 진행한다. 사용자는 텍스트만 수정 가능하며, 기존 데이터를 기반으로 수정이 가능해야 한다.

게시글 삭제는 되돌릴 수 없는 행동이므로 반드시 명시적인 확인 단계를 거친다.

본 유저 플로우는 사용자가 투표 콘텐프에 참여하는 전 과정을 로그인 여부와 투표 진행 상태에 따라 명확히 분기하여 혼란 없이 투표를 완료하고 결과를 확인할 수 있도록 설계되었다.

투표는 사용자 참여 이력이 중요한 기능이므로 로그인 여부를 가장 먼저 판단한다.

• 로그인 사용자 → 즉시 투표 가능
• 비로그인 사용자 → 체험 흐름 제공 후 로그인 유도

로그인 사용자는 good/bad 선택 등, 모든 투표 액션을 제한 없이 수행할 수 있다.

비로그인 사용자에게도 서비스의 핵심 기능은 투표를 직접 경험할 수 있는 기회를 제공한다.

여러개의 투표가 연속적으로 제공되는 구조이므로 사용자가 모든 투표를 완료했는지 여부를 판단한다.

아직 투표가 남아있는데, 중간에 이탈한 경우

투표가 남아있다면 주의 모달, 진행 안내 메세지를 통해 사용자가 투표 흐름에서 이탈하지 않도록 한다.

모든 투표를 마친 경우에만 투표 결과를 종합적으로 노출하여 사용자의 참여가 의미있는 행동이었음을 전달한다.

본 유저 플로우는 사용자가 자신의 활동과 관계를 한 곳에서 관리할 수 있도록 마이프로필을 중심으로 한 탐색 및 관리 흐름을 정의한다.

마이프로필에서는 사용자가 작성한 콘텐츠, 저장한 콘텐츠, 참여한 콘텐츠를 구분해서 확인할 수 있어야 하므로 콘텐츠 유형 선택 탭을 제공한다.

투표는 결과 확인이 중요한 콘텐츠이므로 내 투표 선택 시 결과 상세 화면으로 바로 이동한다.

투표 삭제는 빈번한 행동이 아니므로 기본 UI를 복잡하게 만들지 않기 위해 메뉴로 숨겨진 액션으로 제공한다. → 투표 삭제는 되돌릴 수 없는 행동이므로 반드시 명시적인 확인 단계를 거치도록 설계한다.

본 유저 플로우는 사용자가 마이프로필에서 자신의 정보를 안전하고 유연하게 수정할 수 있도록 설계되었다. 모든 정보를 한번에 강제 수정하지 않고, 각 입력 항목에 대해 개별 유효성 검증을 제공하는 것을 목표로 한다.

이미지는 프로필의 시각적 정체성을 결정하므로 파일 선택 즉시 검증 단계를 거친다. 대용량 이미지 업로드로 인한 네트워크 지연, 서버 부하를 방지하기 위해 용량 제한을 둔다.

닉네임은 사용자 식별에 직접적으로 사용되므로 형식 검증과 중복 검증을 모두 수행한다. 닉네임 길이, 허용 문자 등 기본 규칙 위반을 사전에 차단한다. 닉네임은 유일해야 하므로 서버 기준 중복 여부를 확인한다. 서

모든 필드 수정은 즉시 저장되지 않고 사용자의 명시적인 수정 버튼 클릭을 통해 한 번에 반영된다.