Skip to content

데모 시나리오

Minsu Kang edited this page Dec 17, 2020 · 3 revisions

데모 영상 시나리오

1. 서비스 사이트 접속

크롬 브라우저에서 http://moa.r-e.kr 접속


2. 로그인

2.1. 카카오 로그인 버튼을 클릭하여, 개인 정보 제공 동의하기 페이지로 이동

2.2. 카카오 계정 로그인이 필요하다면 카카오 계정 로그인

2.3. 개인 정보 제공 동의하기 페이지에서 전체 동의하기 클릭 후 동의하고 계속하기 버튼을 클릭

2.4. 2.3를 마치면 가계부 선택 페이지로 이동됨


3. 가계부 선택 페이지

3.1 가계부 생성 버튼 클릭하여, 가계부 생성 모달창이 출력되게 함

3.2 가계부 이름, 가계부 설명, 가계부 색상 설정 후 생성 버튼 클릭

3.3 데모용 가계부를 클릭하여 내역페이지로 이동


4. 가계부 내역 페이지

거래 내역 조회

4.0. 사이드바 햄버거 버튼을 클릭하여 사이드바 내부의 요소에 대해 설명하기

  • 4.0.1. 홈 버튼 호버하며 '홈 버튼 클릭 시 가계부 선택 페이지로 이동할 수 있음'을 언급
  • 4.0.2. 가계부 버튼을 호버하며 '사용자가 소유하고 있는 가계부 목록이 보여지며, 클릭 시 해당 가계부 거래 내역 페이지로 이동할 수 있음'을 언급

4.1. 기본적으로 켜지는 12월 거래 내역에서 스크롤을 내리며, 거래 내역이 무한스크롤 방식으로 보여짐을 언급

4.2. 위로 가기 버튼을 누른 후, 왼쪽으로 월을 넘기며 11월, 10월까지 넘기고 다시 12월로 복귀

4.3. 필터링 버튼을 클릭하여 필터 모달창을 연 후, 각각의 필터링 옵션을 설명하며 필터를 적용

  • 여기서 필터는 어떤 것을 적용해볼지 미리 시연해본 후, 적절하다고 판단되면 필터 정보를 적어놓자.

4.4. 모든 필터가 적용된 후, 모달창 우측 상단의 적용 버튼을 클릭하여 모달창을 빠져 나오기

4.5. 필터링된 거래 내역을 보여주기

4.6. x 버튼을 눌러서 필터가 적용되어 있지 않은 거래내역 화면으로 전환


거래 내역 생성

4.7. 거래내역 생성 버튼을 클릭하여 거래내역 생성 모달창을 열기

4.8. '모달창에는 이런 입력 정보들이 있다'고 언급하며, 수입/지출 버튼을 클릭하여 거래내역을 구분하여 작성할 수 있다고 언급. 우리는 데모에서 수입 내역만 작성하겠다고 언급하며 수입 버튼을 클릭하여 수입 거래 내역 작성 화면으로 전환

4.9. 각각의 입력 정보를 설명하며 정보를 입력

4.10. 모달창 우측 상단의 완료 버튼을 클릭하여 모달창을 빠져 나오기

4.11. 새롭게 생겨난 거래 내역을 보여준 후, 다시 한 번 거래내역 생성 버튼을 클릭

4.12. SMS 버튼 좌측 상단의 물음표 아이콘을 호버하여 SMS 파싱 기능에 대한 설명을 한 후, SMS 아이콘을 클릭하여 거래 내역 문자를 입력하는 모달창으로 전환

4.13. 입력창에 거래 내역 문자를 복사하여 붙여넣은 후 변환 버튼을 클릭

4.14. 거래 내역 문자의 내용을 기반으로 거래 내역이 작성된 것을 보여주기. 단, 이때 카테고리와 내용은 공란으로 비워진다는 것을 언급해주고 사용자가 등록하지 않은 결제수단으로 결제한 내역일 경우, 결제수단까지 공란으로 비워진다고 언급

4.15. 공란으로 비워진 거래 내역 정보를 마저 작성한 후, 모달창 우측 상단의 완료 버튼을 클릭하여 모달창을 빠져 나오기


거래 내역 수정

4.16. 화면에 보이는 거래 내역 중 가장 위에 있는 거래 내역을 클릭

4.17. 거래 내역을 작성할 당시의 정보가 그대로 담겨있는 모달창이 보여진다는 것을 언급한 후, 변경하고자 하는 정보를 변경한 후 모달창 우측 상단의 수정 버튼을 클릭하면 된다고 언급하기

4.18. 특정 정보를 변경한 후 모달창 우측 상단의 수정 버튼을 클릭하여 모달창 빠져나가기

  • 어떤 정보를 어떻게 바꿀지 미리 결정해놓고 데모 영상 촬영하기

4.19. 변경된 거래 내역 정보를 보여주기


거래 내역 삭제

4.20. 삭제 또한 거래 내역을 클릭하여 나오는 모달창에서 진행할 수 있다는 것을 언급하며, 특정 거래 내역을 클릭하여 모달창 띄우기

4.21. 모달창 우측 상단의 삭제 버튼을 클릭하면 삭제된다는 것을 언급해주며, 실제로 삭제 버튼을 눌러 모달창 빠져나오기

4.22. 거래 내역이 삭제되었음을 보여주기


소켓을 활용한 실시간 서비스

4.23. 해당 가계부에 관련된 거래 내역, 카테고리, 결제수단 등의 정보가 변경될 때 실시간으로 감지되고 있음을 언급

4.24. (영상 편집을 활용하여 화면 전환) 두 개의 브라우저를 한 화면에 띄운 후, 각각의 아이디로 로그인되어 있는 것을 언급

4.25. 한쪽에서 거래 내역을 수정했을 때, 다른 한쪽에서 수정한 내용이 실시간으로 반영되는 것을 보여주기


5. 가계부 통계 페이지

카테고리별 통계

5.1. 우측 상단의 네비게이션 바에서 통계 버튼을 클릭하여 가계부 통계 페이지로 이동

5.2. 기본적으로 최근 1개월의 카테고리별 지출 통계를 확인할 수 있음을 언급, 카테고리별 통계는 기타를 포함하여 최대 8개의 카테고리를 출력해줌을 언급

5.3. 스크롤을 내려 카테고리별 구체적인 금액과 비율을 보여주는 막대그래프가 있음을 언급

5.4. 필터 드랍다운을 클릭하여 다음과 같은 기간 필터를 적용하여 그래프를 확인할 수 있다고 언급한 후, 3개월 필터를 적용하여 3개월 필터가 적용된 파이그래프와 막대그래프를 보여주기

5.5. 우측 하단의 수입 통계 보기 버튼을 클릭하여 카테고리별 수입 통계를 확인할 수 있으며, 기능은 앞서 언급한 기능들과 동일한 방식임을 언급


월별 통계

5.6. 기간 설정 하단에 있는 radio 버튼을 클릭하여 월별 통계로 이동

5.7. 기본적으로 현재 속한 달의 월별 지출 통계를 라인 그래프로 보여준다고 언급

5.8. 월 단위로 이동하여 통계를 확인할 수 있음을 언급하며, 11월, 10월로 넘어가기

5.9. 우측 하단의 수입 통계 보기 버튼을 클릭하여 수입 통계로 전환할 수 있으며, 보고 있던 월은 유지가 된다고 언급


6. 가계부 설정 페이지으로의 이동

6.1. 가계부 선택 페이지에서 보이는 톱니바퀴 버튼이나, 가계부 선택 페이지 우측 하단의 톱니바퀴 버튼을 클릭하여 가계부 설정 페이지로 이동할 수 있다고 언급

  • 영상 편집을 활용하여 멈취 있는 두 개의 화면(가계부 선택 페이지, 가계부 거래 내역 페이지)을 순서대로 보여주기

7. 가계부 설정 페이지

(가계부 설정 페이지에서 가계부 표지에 대한 설정을 할 수 있음을 설명)

7.1. 가계부 표지 색을 변경하는 것을 보여줌

7.2. 가계부 별칭을 변경하는 것을 보여줌

7.3. 가계부 상세 설명을 변경하는것을 보여줌

7.4. 완료 버튼을 누른후 표지가 변경

7.5. 가계부 설정 페이지에서 변경된 가계부를 확인


8. 결제수단 관리 페이지

(결제수단 관리 페이지에서 결제수단을 관리할 수 있음을 설명)

8.1. 결제수단을 생성을 클릭하여 모달창이 나옴

8.2. 이름 중복검사 통과 실패하는 것을 보여줌

8.3. 중복검사 통과하여 생성하는 것을 보여줌

8.4. 생성한 태그를 눌러 수정하는 것을 보여줌

8.5 수정한 태그를 삭제하는 것을 보여줌


9. 카테고리 관리 페이지

8. 결제수단 설정 페이지와 동일하게 생성/수정을 할 수 있음을 언급


10. 소셜 설정 페이지

10.1. 존재하지 않는 유저를 검색하여 검색 결과를 보여줌

10.2. 존재하는 유저를 검색하여 검색 결과를 보여줌

10.3. 검색된 유저를 가계부에 추가

10.4. 현재 관리자인 상태에서 구성원을 추방하는 것을 보여줌

10.5. 현재 관리자인 상태에서 다른 구성원에게 관리자 권한을 위임하는 것을 보여줌

10.6. 위임 후 관리자권한이 없을 때는 추방, 위임 기능 사용이 불가능하다는 것을 보여줌


11. CSV 파일 관리 페이지

11.1. 모든 거래 내역을 CSV 파일로 Export하는 기능임을 언급

11.2. 데이터 내보내기 우측에 있는 Export 버튼을 클릭하면 현재 가계부의 모든 거래 내역이 오래된 순으로 정렬되어 CSV 파일로 저장되는 것을 보여줌


12. 가계부 삭제

12.1. 가계부 선택 페이지로 이동하여 '해당 페이지에서 가계부 삭제를 할 수 있다'고 언급

12.2. 관리자 권한이 없는 가계부를 삭제하려고 했을 때는 이런 모달창이 뜬다고 보여주고

12.3.1. (편집을 활용하여) 관리자 권한이 있는 가계부를 삭제하려고 했을 때는 이런 모달창이 뜬다고 보여주기.

12.3.2. '정말 삭제하시겠습니까?' 모달창에서 삭제 버튼을 클릭하여 나오는 관리자 권한 부여 장면은 소셜 관리 페이지에서 했던 것과 동일한 방식으로 이루어지며, 관리자 권한을 부여할 구성원을 체크한 후 삭제 버튼을 누르면 관리자 권한을 위임하는 동시에 가계부가 삭제된다고 언급해주기


13. 로그아웃 기능

13.1. 우측 상단에 위치한 프로필 사진에 마우스를 hover하면 로그아웃 드롭다운 메뉴가 출력됨을 보여줌

13.2. 로그아웃 버튼을 클릭하면 해당 계정에서 로그아웃이 되고 로그인 페이지로 이동됨을 보여줌

Clone this wiki locally