데이터 플로우를 통해서 유저가 어떻게 데이터를 활용할지 알기 어렵기 때문에 유저 시나리오를 따로 작성합니다.

• 유저가 사이트를 어떻게 이용할지를 정리하는 단계입니다.
• 비회원, 회원, 구매 회원, 어드민 크게 네 가지 유저들에 대한 시나리오를 작성합니다.
  1. 비회원 : 사이트가 궁금해서 한번 들어와본 유저입니다., 눈팅
  2. 회원 : 락인이 된 유저, 구매까지는 이어지지 않은 유저 입니다.
  3. 구매 회원 : 다른 강의보다 본인이 구매한 강의를 먼저 보여줘도 됩니다.
  4. 어드민 : 내부 직원들이 어드민 권한을 가지고 있을때 입니다.

유저의 타겟에 대해선 사이트마다 차이가 큽니다.

• 유저 타겟이 유저 시나리오를 작성하는 데 가장 중요한 유인입니다.

유저에 따라서 어떤 것들을 수행할 수 있는지 액션을 정리해야 합니다.

• MVP 방법론 : 가장 기본적인 유저의 액션을 제일 처음 구현하고 고도화 하는 방향으로 진행
• 유저 시나리오 작성하는 것은 프론트엔드 개발자 혼자 작성하면 안됩니다.
  • 개발자, 디자이너, 기획자 등 모두 모여서 함께 정리해야 합니다.
• 예시, 메인 페이지 공통유저
  • 메인 페이지에 접속할 수 있어야 한다.
  • 로그인을 할 수 있어야 한다.
  • 회원가입을 할 수 있어야 한다.
  • 메뉴가노출되어야 한다.

메인 페이지처럼 큰 단위 유저 시나리오도 있지만 메뉴 컴포넌트 같이 컴포넌트 단위 유저 시나리오도 작성해야합니다.

• 예시, 메뉴 컴포넌트
  • 카테고리 버튼이 보여야 한다.
  • 카테고리 버튼에 마우스를 올리면 메뉴가 확장된다.
  • 최신 혹은 어드민이 지정한 메뉴가 상단에 노출되어야 한다.
    • 어드민이 지정한 메뉴 : XXX API 를 호출하면 된다.
    • 메뉴는 어드민이 n일에 한번씩 변경한다.
  • 메뉴는 메인메뉴와 서브메뉴가 존재한다.
    • 메인 메뉴는 언제나 노출된다.
    • 서브메뉴는 메인메뉴에 묶여있는 그룹에 한해서 노출된다.
  • 강의 전체보기를 클릭하면 강의 목록으로 넘어간다.

• 예시, 배너
  • 어드민에서 지정한 배너가 상단에 노출되어야 한다.
    • 배너는 5초마다 자동으로 롤링된다.

• 예스, 강의목록
  • 4단 그리드로 보여주어야 한다.
  • 특정 옵션의 강의 목록이 노출되어야 한다.
    • 특정 옵션 : 태그, 카테고리, 신규런칭
  • 타입
    • 목록형
    • 슬라이드형
  • 강의 데이터
    • 썸네일
    • 태그
      • 태그 목록 API
    • 강의 제목
    • 강의 요약
    • URL

• 자세한 단위들을(5초 등)을 미리 상수로 빼놓고 프로젝트를 관리하면 코드 구현시 보다 간편합니다.

  유저가 컴포넌트를 사용하는 모든 케이스에 대해서 정리한 후 정리한 내용을 바탕으로 하나씩 구현합니다.

• 정리된 액션들을 바탕으로 테스트 케이스가 나오고 테스트 케이스를 바탕으로 코드로 구현합니다.
• 스펙을 개발자 관점에서 정리하는 과정이기도 합니다.

  ---

  결론

  정리된 내용을 바탕으로 구현시 의도대로 동작이 되는지 안된다면 데이터 플로우, 유저 시나리오 단계에서 무슨 문제가 있었는지 리뷰하면서 개발을 진행합니다.

  ---