카드혜택모아

9조 | 김태형, 이재희, 이진아, 장다영, 지정훈

개인이 소유한 카드를 등록하고, 지도/검색 등을 통해서 카드별 혜택을 확인할 수 있다.

앱 정의(ADS)

• 우리 앱은 카드혜택을 잘 누리지 못하는 사람에게 본인이 소유한 카드 혜택을 알차게 누릴 수 있도록 할 것이다.

페르소나

• 보유하고 있는 카드가 많은 사람
• 카드의 모든 혜택을 완벽하게 뽑아먹고 싶은 사람
• 내가 필요할 때 카드 혜택을 받고 싶은 사람(은행에서 카드 발급 권유 전화를 받기 너무 싫어~~ )
• 소유한 카드들의 혜택을 한눈에 비교해보고 싶은 사람

카드혜택모아 MVP - 테스트 시나리오 및 UI

사용 전 준비사항

1. Firebase와 연동을 위한 Google-Infoplist 필요

   • 테스트를 희망하시는 분들은 이메일([email protected] / [email protected])로 연락주시면, Infoplist 전달드리겠습니다.

2. 전달받으신 Infoplist는 프로젝트 파일(CardMoaMVP 파일) 내부 경로에 넣어서 빌드하시면 됩니다.

사용자 시나리오

• 제시된 사용자 시나리오에 따라 순차적으로 수행해 주시면 됩니다. 감사합니다 :)

1. 앱 로딩
   • 앱이 로딩될 때까지 기다린다.
2. 로그인뷰
   • 신규 사용자는 계정이 없기에, 아래 ‘회원가입’ 버튼을 눌러 회원가입 뷰로 이동한다.
3. 회원가입뷰
   • 가입 양식에 맞춰서 이름, 이메일, 비밀번호, 비밀번호 확인을 입력한다.
     • 이름 : 앱 내에서 사용할 이름
     • 이메일(아이디) : 본인임을 증명할 고유한 이메일을 입력한다.
     • 비밀번호 : 앱 로그인 시 사용할 비밀번호를 입력한다.
     • 비밀번호 확인 : 비밀번호 오류를 방지하기 위하여 비밀번호를 한번 더 입력한다.
   • 이메일 작성 양식 우측에 ‘중복체크’ 버튼을 눌러서 이미 등록된 이메일인지 확인한다.
   • 양식 작성 이후 ‘회원가입’ 버튼을 눌러 회원가입을 완료하고, 자동으로 로그인 뷰로 이동한다.

• 이메일 형식이 아닌 일반 아이디 작성 후 회원가입 시도 → 오류 알람 발생
• 비밀번호를 6자리 미만으로 작성 후 회원가입 시도 → 오류 알람 발생

4. 로그인 뷰

   • 이메일(아이디) 작성란에 본인이 계정을 등록한 이메일를 입력한다.
   • 비밀번호 작성한에 본인이 작성한 비밀번호를 입력한다.
   • 양식 작성 이후 ’로그인’ 버튼을 눌러 로그인을 완료하고, 자동으로 메인 뷰(=나의카드 뷰)로 이동한다.

5. 나의카드 뷰

   • 신규 사용자는 등록된 카드가 없기 때문에, 우측 하단 + 버튼을 눌러서 카드등록 뷰로 이동한다.

6. 카드추가 뷰

   • 뷰 이름 아래쪽, 신용카드/체크카드 우측에 “현대카드(기본 설정,카드사 변경 기능)” 버튼을 클릭하면 카드사들 목록이 나오는 시트가 올라온다.
   • 시트의 카드사 목록 중 원하는 카드사를 클릭해서 카드사별로 카드 리스트를 확인한다.
   • 리스트 중 본인이 소유한 카드가 있다면, 리스트를 우측 → 좌측 슬라이딩(끝에서 끝까지)하여 카드를 등록한다.(알림 팝업 후 ‘OK’ 버튼까지 눌러야 등록 가능)
   • 카드 등록을 완료했다면 왼쪽 상단에 ‘뒤로가기(네비게이션)’ 버튼을 눌러서 나의카드 뷰로 이동한다.

7. 나의카드 뷰

   • 이름 아래 탭바를 클릭하여 카드종류(신용카드/체크카드)를 선택해서 볼 수 있다. (구현중)
   • 선택된 카드종류(신용카드/체크카드)에 따라서 본인이 등록한 카드를 리스트로 보여준다.
   • 등록된 카드들은 우측에서 좌측으로 손가락 슬라이딩하여 전부 확인 가능하다.
   • 각 카드별로 카드 이미지를 손가락 터치하면 카드 뒷면에 카드가 가지는 고유 혜택 내용을 보여준다.
   • 아래쪽 탭바에 왼쪽 2번째 탭을 손가락 터치해서 혜택지도 뷰로 이동한다.

8. 혜택지도 뷰

   • 지도뷰 로딩 시 본인의 현재 위치를 기반으로 지도를 보여준다.
   • 지도 위에는 본인이 소유한 카드들의 혜택을 받을 수 있는 가맹점을 보여준다.
   • 뷰 상단에 검색창을 클릭하여 혜택을 확인하고 싶은 위치를 검색한다.(ex. 강남역 등)
   • 검색창 하단에 카테고리 리스트를 우측 → 좌측으로 손가락 슬라이딩하여 카테고리들을 전부 확인한다.
   • 원하는 카테고리를 클릭하면, 현재 보여지는 위치에서 해당 카테고리의 가맹점만 보여준다.
   • 지도에 있는 가맹점 중 하나를 클릭하면 아래쪽에서 시트가 올라온다.
   • 시트에는 해당 가맹점에서 혜택을 받을 수 있는 카드 목록이 나온다.
   • 아래쪽 탭바에 왼쪽 3번째 탭을 손가락 터치해서 혜택검색 뷰로 이동한다.

9. 혜택검색 뷰

   • 검색창에 카드를 사용할 가맹점을 입력한다.
     • 본인이 소유한 카드 중 검색한 가맹점에서 혜택을 받을 수 있는 경우, 가맹점에서 할인이 가능한 카드 리스트를 보여줌
     • 본인이 소유한 카드 중 검색한 가맹점에서 혜택을 받을 수 없는 경우, 가맹점에서 할인이 가능한 카드가 없다는 것을 보여줌
   • 검색을 하면 검색창 아래쪽 최근 검색어 하위에 본인이 검색한 내용이 저장된다.
   • 내 카드 혜택 모아보기 아래 가맹점 카테고리별로 본인이 소유한 카드 중 혜택을 받을 수 있는 카드 및 가맹점을 보여준다.

화면캡처

로그인뷰	회원가입뷰

나의카드뷰	나의카드뷰(카드 뒷모습)

카드추가뷰	카드추가뷰(브랜드선택)

혜택지도뷰

혜택검색뷰	검색결과창(검색한 혜택이 있는 경우)	검색결과창(검색한 혜택이 없는 경우)

TODO 리스트

• 나의 카드뷰에서 카드 뒷면 혜택 정보 기능
• 내 주변 혜택 지도뷰에서의 기능
  • 1단계 : 지도뷰에서 검색창에서 어떤 것을 필터링할지 의논
  • 2단계 : 광화문 D 타워 중심으로 근처 가게 위치 정보 저장 후 지도 상에서 카테고리별 필터링 후 지도에 띄워주기
  • 3단계 : Mapkit 사용이 아닌 카카오/네이버 지도 사용해 보기
• 카드 추천 뷰에서 어떻게 추천 시스템을 완성 시키고 데이터를 만들어갈지
• 그 외 피드백 받은 내용에서 보강해야 할 부분은 issue 란에 확인 필요!