[iOS] 모바일 기획서 분석 - Malloc72P/airbnb GitHub Wiki

Epic

Airbnb 방식 숙소 예약 서비스 만들기

Story

1. 아이폰 유저는 Github 소셜 로그인을 통해 서비스에 로그인할 수 있다.
2. 아이폰 유저는 탭바를 통해 검색, 위시리스트, 예약(로그인) 페이지로 이동할 수 있다.
3. 아이폰 유저는 숙소 큐레이션 배너가 노출되는 히어로 이미지(상단에 위치한 큰 배너) 영역을 확인할 수 있다.
4. 아이폰 유저는 상단 검색바를 통해 여행지 위치를 검색할 수 있다.
5. 아이폰 유저는 위치 입력 후 캘린더를 통해 여행 일정을 입력한다.
6. 아이폰 유저는 일정 입력 후 레인지 슬라이더를 이용해 요금을 입력한다.
7. 아이폰 유저는 요금 입력 후 인원을 입력한다.
8. 아이폰 유저는 입력한 조건값(위치, 일정, 요금, 인원)에 따라 숙소를 카드 리스트 형태로 확인할 수 있다.
9. 아이폰 유저는 숙소 리스트를 지도에서 확인할 수 있다.
10. 아이폰 유저는 리스트에서 선택한 숙소의 상세 페이지를 확인할 수 있다.
11. 아이폰 유저는 공유 버튼을 눌러 해당 숙소 정보를 공유하는 액션 시트를 확인할 수 있다.
12. 아이폰 유저는 누락된 정보가 있는 경우 예약 전 추가 입력을 할 수 있다.
13. 아이폰 유저는 예약하기 버튼을 눌러 입력 정보를 확인하고 숙소를 예약할 수 있다.
14. 아이폰 유저는 에약탭에서 예약한 숙소 리스트를 확인할 수 있다.
15. 아이폰 유저는 예약 취소 버튼을 통해 해당 숙소의 예약을 취소할 수 있다.
16. 아이폰 유저는 위시리스트를 통해 하트 아이콘을 누른 숙소를 모아볼 수 있다.

Task

1. 아이폰 유저는 Github 소셜 로그인을 통해 서비스에 로그인할 수 있다.

• 1-1. 로그인 버튼을 누르면 Webview로 Github 인증 페이지가 표시된다.
• 1-2. 사용자가 성공적으로 로그인을 마치면 첫 화면으로 이동한다.

2. 아이폰 유저는 탭바를 통해 검색, 위시리스트, 로그인(예약) 페이지로 이동할 수 있다.

• 2-1. 예약이 되어 있지 않은 상태라면 로그인 후에 예약탭이 보여진다.

3. 아이폰 유저는 숙소 큐레이션 배너가 노출되는 히어로 이미지(상단에 위치한 큰 배너) 영역을 확인할 수 있다.

• 3-1. 히어로 이미지는 이미지, 텍스트, 버튼 등으로 구성되어 있다. (동작은 하지 않는다.)

4. 아이폰 유저는 상단 검색바를 통해 여행지 위치를 검색할 수 있다. [위치 입력]

• 4-1. 스크롤이 가능하더라도 검색바는 항상 상단에 고정되어 있다.
• 4-2. 검색바를 탭하면 근처 인기 여행지 리스트가 뜬다.
• 4-3. 검색바를 탭하면 검색어를 입력하는 텍스트필드에 포커싱 되며 자동으로 키보드가 올라온다.
• 4-4. 키보드가 올라온 상태에서 다른 곳을 탭하거나 스크롤링하면 자동으로 텍스트필드에서 포커스가 사라지며 키보드가 내려간다.
• 4-5. 텍스트필드에 검색어를 입력하면 관련 정보가 자동 완성되어 리스트로 보여진다.
• 4-6. 검색바 우측 상단에 있는 지우기 버튼을 누르면 검색어가 초기화되면서 다시 근처의 인기 여행지 리스트가 표시된다.
• 4-7. 리스트에서 원하는 여행지를 선택하면 날짜를 입력하는 페이지로 이동한다.

5. 아이폰 유저는 위치 입력 후 캘린더를 통해 여행 일정을 입력한다.

• 5-1. 요일은 고정되어 있고 년, 월, 일의 캘린더만 스크롤링 된다.
• 5-2. 캘린더의 이미 지난 날짜는 선택할 수 없도록 비활성화 된다.
• 5-3. 하단에는 입력한 조건들이 CollectionView로 보여진다.
• 5-4. 체크인/체크아웃 정보를 입력하지 않은 상태에서는 우하단에 건너뛰기 버튼이 표시되며 좌하단 다음 버튼은 비활성화 된다.
• 5-5. 체크인/체크아웃 정보를 입력한 상태에서는 우하단에 지우기 버튼이 표시되며 좌하단 다음 버튼이 활성화 된다.
• 5-6. 네비게이션바에 뒤로 버튼을 누르면 위치 입력 페이지로 돌아간다.
• 5-7. 특정 일자를 선택하면 검은 동그라미 음영으로 표시된다.
• 5-8. 선택된 특정 일자들은 각각 하단 체크인, 체크아웃 텍스트필드에 입력된다.
• 5-9. 특정 기간을 선택하면 시작일과 종료일은 검은 동그라미 음영으로, 중간 일자들은 연한 회색 음영으로 표시된다.
• 5-10. 첫번째 일자는 체크인 날짜, 두번째 일자는 체크아웃 날짜로 표시된다.
• 5-11. 두번째로 입력한 일자가 첫번째로 입력한 일자보다 빠른 경우, 두번째 일자가 체크인 날짜로 변경된다.
• 5-12. 같은 날짜를 두번 탭하면 체크인, 체크아웃 일자가 같은 날이 된다.
• 5-13. 다음 버튼을 누르면 요금(금액대 조정) 입력 페이지로 이동한다.

6. 아이폰 유저는 일정 입력 후 레인지 슬라이더를 이용해 요금을 입력한다.

• 6-1. x축은 가격의 범위, y축은 숙소의 개수인 그래프가 표시된다.
• 6-2. 기본 가격 범위는 검색한 위치 및 일정 내의 최저-최고 가격으로 표시된다.
• 6-3. 레인지 슬라이더를 이용해 금액대를 조정할 수 있으며 변동된 가격 범위는 슬라이더 상단 레이블과 하단 입력조건 테이블에 실시간으로 반영된다.
• 6-4. 기본 슬라이더 위치는 최저-최고값으로 그래프의 양끝이다.
• 6-5. 슬라이더는 완전히 겹치거나 서로를 지나쳐 이동할 수 없다.
• 6-6. 선택 범위는 그래프는 프라이머리 컬러로, 범위 밖의 그래프는 회색으로 표시한다.
• 6-7. 최고가가 100만원 이상인 경우는 ₩1,000,000+로 표기된다.
• 6-8. 다음 버튼을 누르면 인원 입력 페이지로 이동한다.

7. 아이폰 유저는 요금 입력 후 인원을 입력한다.

• 7-1. 사용자는 스탭퍼를 통해 성인, 어린이, 유아의 인원을 각각 입력할 수 있다.
• 7-2. 각 인원의 기본 및 최소값은 0명, 최대값은 8명으로 최소값 혹은 최대값에 도달하면 버튼이 비활성화 된다.
• 7-3. 성인이 0명인 상태에서 어린이 혹은 유아의 인원 수가 입력되면 성인의 인원수는 자동으로 1로 변경된다.
• 7-4. 하단 입력조건 테이블에 성인과 어린이는 합산되어 게스트로 표시되고 유아는 유아로 별도로 표시한다. (e.g. 게스트 2명, 유아 1명)

8. 아이폰 유저는 입력한 조건값(위치, 일정, 요금, 인원)에 따라 숙소를 카드 리스트 형태로 확인할 수 있다.

9. 아이폰 유저는 숙소 리스트를 지도에서도 확인할 수 있다.

10. 아이폰 유저는 숙소 리스트에서 선택된 숙소의 상세 페이지를 확인할 수 있다.

11. 아이폰 유저는 공유 버튼을 눌러 해당 숙소 정보를 공유할 수 있는 액션 시트를 확인할 수 있다.

12. 아이폰 유저는 누락된 정보가 있는 경우 예약 전 추가 입력을 할 수 있다.

13. 아이폰 유저는 예약하기 버튼을 눌러 입력 정보를 확인하고 숙소를 예약할 수 있다.

14. 아이폰 유저는 에약탭에서 예약한 숙소 리스트를 확인할 수 있다.

15. 아이폰 유저는 예약 취소 버튼을 통해 해당 숙소의 예약을 취소할 수 있다.

16. 아이폰 유저는 위시리스트를 통해 하트 아이콘을 누른 숙소를 모아볼 수 있다.

• 16-1. 숙소 검색 결과 리스트의 카드와 동일한 형태이나 하트 아이콘에 색상이 차있고 총 일정 비용에 대한 부분 없이 표시한다.
• 16-2. 하트 아이콘을 누르면 위시리스트에서 해당 숙소가 삭제된다.