Date Pick UI 시나리오

Planning By 송혜빈 l Ver. 0.2
Update 2017-01-18
데이트픽 Storyboard
1

2
1. 문서개정이력
문서버전 제 개정 내용 작성 작성일 확인
0.1 최초작성 송혜빈 2017.01.18
0.2 1차 수정 송혜빈 2017.01.19
0.3 2차 수정 송혜빈 2017.01.20
0.4 3차 수정 송혜빈 2017.01.25

3
구분 상세
OS 최소 사양 : 안드로이드 4.2 Jelly Bean 이상 (API level 17)
해상도 1920 x 1080
기종 기준 단말 : 삼성 갤럭시 S3 이상
※ 기술적인 사항에 따라 변동 사항 체크 요청
2. 제공 환경

1. 서비스명
데이트픽
2. 서비스 컨셉
스마트한 데이트 계획의 첫걸음
데이트 전, 데이트 코스 짜는데 어려움이 있는 2030커플들을 위한 데이트 계획 솔루션
3. 서비스 목적
데이트 코스 계획에 어려움이 있는 커플들에게 동선을 고려한 데이트 장소 및 코스 계획을 효율적으로
할 수 있게 도와줌
4. 상세 기획 내용
서비스 상세내용
위치기반
실시간 지도를 보며 손쉬운 데이트 코스 계획을
할 수 있게 도와줌
데이트장소제공
카테고리 별 업체를 거리순/인기순 으로
리스트 제공
큐레이션 데이트 장소, 코스 추천
코스공유 사용자가 직접 만든 데이트 코스 앱 내 공유
3. 서비스 개요

5
5. 서비스 정책 (회원/로그인/결제 등)
회원가입(로그인) – 카카오톡 계정 연동을 통해 가입 / 이메일을 통해 신규 회원가입
회원탈퇴 – 카카오톡 연동 끊기
6. 운영 정책
①운영자들의 DB확보 및 코스 관련 컨텐츠 제작
②신규 제휴 가맹점 지속 발굴
③유저 확보 후 리워드 시스템을 통해 사용자 간의 정보 공유로 데이터 구축 -> 컨텐츠 선순환
7. 마케팅
①바이럴 마케팅 - 사용자 확보를 위해 여성 커뮤니티 사용자를 타겟으로 남자친구에게 ‘데이트픽’
을 설치하게 하는 마케팅
②제휴서비스 – 제휴를 맺은 업체를 앱 내의 추천코스를 통해 홍보, 제휴 업체는 사용자들에게 할
인쿠폰을 제공하여 고객들의 유입을 유도
3. 서비스 개요

8. 일정
9. 구축 및 운영 예산
서버 비용 (월 38,000 원 X 12개월) = 456,000 원
개발 비용 30,000,000 원
마케팅 비용 10,000,000 원
합 계 40,456,000 원
디자인
기획
서버
안드로이드

장소썸네일
상세보기
담기
7
4. 정보 구조 IA
splash
Home
menu
Map
Search
Intro
사이드메뉴 인기코스
장소리스트 위시리스트
필터 탭
최신순
인기순
카테고리
식당
카페술집
놀거리
카테고리 별
장소 썸네일
상세보기
담기해제
Map
코스짜기
선택한 코스 목록
이름
시간
이동시간
프로필
닉네임
이메일
사진
인기코스 리스트
상세보기
담기
수정하기
Map
다음
코스요약
완료
선택
코스짜기에 들어
갈 장소 선택
홈
내가 만든 코스
내가 쓴 리뷰
인기코스
카테고리 별
인기장소 리스트
상세보기
담기
전체보기 전체보기
검색
검색 결과
마이페이지
카카오 연동 끊기
로그아웃
개인정보취급방침

8
5. 기능명세서
카테고리 기능 기능설명 비고
로그인
이메일 로그인 이메일, 비밀번호 입력 후 로그인
카카오톡 연동하기 카카오톡 아이디 연동하여 로그인
이메일 회원가입 이메일로 회원가입
홈 화면
(메인 화면)
사이드바 홈, 내가 만든 코스, 내가 쓴 리뷰' 탭
검색하기 앱 내 정보 키워드 검색 가능
인기코스 TOP5 코스 중 찜하기 수 많은 5개의 코스 리스트업
장소 리스트 식당, 카페&술집, 놀거리 별 장소 리스트업
장소리스트
지도 지도상 장소 위치 확인 마커, 장소명 말풍선 띄움
장소 카테고리 식당, 카페&술집, 놀거리'로 분류
필터탭 최신순, 인기순' 정렬 가능
썸네일 형식의 장소 리
스트
썸네일 형식의 장소 리스트 제공 ♡ 터치 시, 위시리스트에 담김
장소 상세 페이지
장소 찜하기 해당 장소 찜하기 위시리스트'에 담기
장소 정보
장소명, 평점, 찜하기 수, 리뷰 수, 전화번호, 영업시간, 메뉴 및 가격, 주소, 주차
가능 여부 정보 제공
지도 장소 위치 정보 제공
리뷰 해당 장소 관련 사용자 리뷰 제공 ver1.0에서 개발하지 않음
코스짜기
지도 지도상 장소 위치 확인
이동시간 도보 기준 예상 이동시간 계산하여 나타냄
코스요약 해당 코스 이름 및 요약 정보 제공
선택한 코스목록 선택한 코스목록 제공
수정하기 현재 코스 수정하기

9
5. 기능명세서
카테고리 기능 기능설명 비고
코스 상세
페이지
코스 전체 찜하기 코스에 포함된 전체 장소 '위시리스트'에 담기 ♡ 터치 시, 위시리스트에 담김
개별 장소 찜하기 개별 장소 '위시리스트'에 담기 ♡ 터치 시, 위시리스트에 담김
사이드 메뉴
(사이드바)
프로필 프로필 사진 보여주기 기능 사진 변경 가능
홈 홈(메인 페이지)으로 이동
내가 만든 코스 내가 만든 코스' 히스토리 목록 페이지로 이동
내가 쓴 리뷰 내가 쓴 리뷰 보여줌 ver1.0에서 개발하지 않음
마이페이지
카카오톡 연동 on/off 카카오톡 연동 on/off
로그아웃 해당 계정 로그아웃
개인정보 취급방침 개인정보 취급방침' 페이지로 이동
인기코스
인기코스 리스트 인기코스
전체보기 인기코스 리스트 전체보기
인기장소
카테고리 별 인기장소
리스트
인기순'으로 자동 정렬하여 카테고리별 리스트업
전체보기 인기순'으로 자동 정렬하여 장소 리스트업
위시리스트
선택하기 코스짜기'에 넣을 장소 선택 선택한 장소 재선택 시, 선택해제 가능
썸네일 형식의 장소 리
스트
위시리스트에 담긴 개별 장소 리스트업
지도 개별 장소
찜하기 찜하기 tab 시, '찜하기' 해제

6. 벤치마킹
- 메인화면
- 메인화면
데이트팝 취향 분석 데이트 코스 추
천 어플리케이션, 코스를 한눈에 쉽
게 알아보기 위해서는 메인 페이지에
지도가 필요하다.
- 바로 검색
추천 코스가 아닌 정확히 원하는 장
소가 있을 시 빠른 검색을 위해 가장
시선이 잘 가는 곳에 검색 탭 위치
- 인기 코스
정해진 장소가 없을 시 다른 커플들
의 데이트 코스를 참고하여 즐거운
데이트를 할 수 있도록 공유를 통해
많은 추천을 받은 코스들을 제공
- GNB 메뉴 네 가지
홈, 장소 리스트, 코스 짜기, 마이페
이지 순으로 데이트 코스를 계획 할
때 거치는 프로세스 순서대로 배열하
여 이동을 편리하게 하였음.

6. 벤치마킹
- 업체 상세 페이지
비트윈 데이트 어플리케이션
- 찜
가게에 대한 정보를 본 뒤 ‘찜’ 기능을 통해
내 코스에 넣어볼 수 있도록 하였음.
- 찜 횟수
얼마나 많은 사람들이 이 장소를 담았는지
알아 볼 수 있도록 찜 횟수를 보여줌.
- 가게 상세 정보
메뉴, 가격, 전화번호, 분위기 등 다른 앱이
나 웹을 사용하지 않아도 앱 내에서 한번에
정보를 찾아볼 수 있도록 제공.

6. 벤치마킹
- 내 코스 짜기
- 지도
담은 코스들을 마커로 표시해주어 코스를 짤 때 고
려하기 어려웠던 위치 및 동선을 한번에 파악할 수
있게 하였음.
- 타임라인
담은 코스들을 순서에 따라 배열 하여 ‘하루 데이트
코스’를 한눈에 알아보기 쉽게 하였음.

13
7. 화면구성요소 정의(1)
1. Definition Number 01 02
2. Popup, Toast
3. Font
P01 P02
메시지입니다.
OK
×
메시지입니다.
Cancel
×
OK
본문 나눔고딕 12pt
나눔고딕 9pt
나눔고딕 9pt
나눔고딕 8pt
나눔고딕 8pt
팝업, 토스트 돋움 8pt
돋움 8pt
화면설명 01
- 돋움 8pt
- 이동화면 : [Screen ID]
01-a
- 돋움 8pt
- 넓은 영역 내 세부 설명
P01
- 돋움 8pt
- 팝업 설명
T01
- 돋움 8pt
- 토스트 설명
01-b 01-b

14
4. Scroll Area
5. Touch Interaction
Tap Flick left Flick right Flick up Flick downScroll
6. Notification 20150414 - 정책변경
Memo

15
8. Process Form Screen User Action Conditional branch Flow line Flow line(NO)
화면이름
N
Y동작
7. Hard Key Interaction 메뉴 키는 사용하지 않음
홈 키는 앱 실행을 유지한 채 앱을 닫음.
- Background에서는 앱이 실행되어있는 상태가 됨
이전 키는 이전 화면으로 이동함.
- 이전 화면이 없는 경우, 이전 키를 Tap 하면 앱을 종료함.
External doc.
Screen ID

앱 실행
홈(메인)
APP_03
인기코스 Top5
APP_03
카카오톡 로그인
이메일 로그인
APP-01
회원가입
APP-01
이메일 회원가입
APP-01
최초 찜하기 시
로그인 페이지로 이동
사이드바
APP_01프로필이미지
APP_01
홈
APP_01
내가만든코스
APP_01
내가 쓴 리뷰
APP_01
리뷰
APP_01
코스상세
APP_06
전체찜하기♡
APP_06
개별장소 찜하기♡
APP_06
Tab Tab
검색하기
APP_04
장소 정보
(식당,카페술집, 놀거리)
APP_03
검색결과 페이지
APP_0401
검색키워드
입력장소상세
APP_07
찜하기
APP_02 장소리스트(해당 카테
고리 자동정렬)
APP_05
위시리스트
APP_02
코스짜기
APP_09
장소 정보 전체보
기
APP_03
장소리스트
APP_05
선택하기
/선택해제
APP_02
장소 상세
APP_02
식당/카페술/
놀거리
APP_05
최신순/인기순
APP_05
지도마커
APP_05
마커 상호명
말풍선
APP_05
장소 상세
APP_09
찜하기
APP_07
찜하기
APP_05
찜하기
APP_05
코스짜기
상세
APP_09
수정하기
APP_09
지도마커
요약정보
APP_09
코스이름 입
력(취소저장)
APP_09
하단수정바(위
로,아래로,삭제,
선택취소)
APP_09
NY
8. 프로세스 : 데이트픽

DescriptionScreen Title
Adelie
Screen ID
Screen Definition 로그인
로그인
17
APP_01
01
- E-Mail(텍스트 칸) Tab시 키보드 노출
- 비밀번호(텍스트 칸) Tab시 키보드 노출
02 - Tab 시 로그인
03 - 회원가입 방법1. 카카오톡 연동
P03 - 카카오톡 연동 팝업
04
- 회원가입 방법2. E-Mail 가입하기
- 이동화면 : APP_02
01
02
03
04
P03

Adelie
Screen ID
Screen Definition 회원가입
회원가입
18
APP_02
01
- E-Mail(텍스트 칸) Tab시 키보드 노출
- 비밀번호(텍스트 칸) Tab시 키보드 노출
- 비밀번호 확인(텍스트 칸) Tab시 키보드 노
출
- 닉네임(텍스트 칸)Tab시 키보드 노출
02
- 회원가입 하기 Tab 시 메인화면으로 이동
01
02

Adelie
Screen ID
Screen Definition 홈
홈
19
APP_03
05
- 카테고리별 (식당, 카페술집, 놀거리) 장소
사진 Tab시 해당 장소 상세페이지로 이동
- 이동화면: APP_07
06
- 하트 아이콘 Tab시 시 빈 하트아이콘에서
색깔 하트 아이콘으로 바뀌며 위시리스트
담기
07
- 전체보기> Tab시 장소리스트화면으로 이
동
08
- 전체보기> Tab시 코스리스트화면으로 이
동
09
- 하단탭 장소리스트 Tab시 장소리스트화면
으로 이동
10
- 하단탭 하트버튼 Tab시 코스짜기 화면으
로 이동
11
- 하단탭 장소리스트 Tab시 위시리스트화면
으로 이동
0102
02-a
02-b
02-c
02-d
03 04
05
07
08
09 10 11
06
01
- 검색화면으로 이동
02
- Tab시 좌측 사이드메뉴 노출
- 혹은 swipe시 사이드메뉴 노출
02-a
- 화살표 Tab시 마이페이지 화면으로 이동
02-b
- 홈 Tab시 홈 화면으로 이동
02-c
- 내가 만든 코스 Tab시 내가 만든 코스 화
면으로 이동
02-d
- 내가 쓴 리뷰Tab시 내가 쓴 리뷰화면으로
이동
03
- 인기코스 TOP5 목록 노출
- 목록 보는 방법1: swipe 시 다음 코스 보
여줌
- 목록 보는 방법2: swipe하지 않을 시 자
동으로 목록 넘어가며 코스 보여줌
04
- 하트 아이콘 Tab시 시 빈 하트아이콘에서
색깔 하트 아이콘으로 바뀌며 위시리스트
담기
Scroll
Scroll
swipe

Adelie
Screen ID
Screen Definition 검색화면
검색화면
20
APP_04
01 - 검색창 tab 시 키보드 자동 노출
02
- 검색 아이콘 Tab시 검색 결과 화면으로 이
동
- 이동호면: APP_0401
03 - 최근 검색어 tab시 검색 결과 화면으로 이동
04 - X아이콘 tab시 최근 검색어 목록에서 삭제
01 02
03
04

Adelie
Screen ID
Screen Definition
Scroll
검색결과
검색결과
21
APP_0401
01
02
03
04
01
- 검색창에 정확한 상호명 검색어 입력 시 매
치 된 장소 검색 결과 제공
- 썸네일 Tab시 지도 마커에서 요약정보 표
시
02
- 검색 된 장소 마커표시
- 마커 Tab시 요약정보 제공
- 요약정보 tab시 장소상세페이지 화면이동
- 이동화면:APP_07
03
- 검색창에 정확하지 않은 상호명 검색어 입
력 시 해당 검색어가 포함 된 장소 검색 결
과 제공
- 썸네일 Tab시 지도 마커에서 요약정보 표
시
04
- 검색 된 장소 마커표시
- 마커 Tab시 요약정보 제공
- 요약정보 tab시 장소상세페이지 화면이동
05 - Swipe시 좌측 사이드메뉴 노출
Scroll
swipe
swipe
05

Adelie
Screen ID
Screen Definition 장소리스트
장소리스트
22
APP_05
01
02
03 - 지도 마커 Tab시 요약정보 노출
03-a
- 요약정보 Tab시 장소 상세페이지 화면
이동
04
- 상단 카테고리(식당, 카페술집, 놀거리)
Tab시 해당 카테고리 목록 노출
04-a - 카페술집 카테고리 tab시 결과값
05
- 필터(최신순, 인기순) 탭 시 최신순, 인기
순으로 정렬
06
- 장소 썸네일 Tab시 지도에 마커로 요약
정보 노출
07
- 하트 아이콘 Tab시 시 빈 하트아이콘에
서 색깔 하트 아이콘으로 바뀌며 위시리
스트 담기
01 02
03
04 05
06 07
08 09 10
03-a
04-a
08
으로 이동
09
로 이동
10
으로 이동
Scroll
Scroll
swipe

Adelie
Screen ID
Screen Definition 코스 상세 화면
코스 상세 화면
23
APP_06
01
- 혹은 swipe시 좌측 사이드메뉴 노출
02
03 - 지도 마커 Tab시 요약정보 노출
03-a
이동
04 - 코스 타이틀과 한 줄 정보 노출
05
- 코스에 담긴 장소 이름, 평점, 한 줄 정보,
썸네일 노출
06
- 하트 아이콘 Tab시 시 빈 하트아이콘에
서 색깔 하트 아이콘으로 바뀌며 위시리
스트 담기
07
정보 노출
08
- 하단탭 장소리스트 Tab시 장소리스트화
면으로 이동
09
로 이동
10
- 하단탭 장소리스트 Tab시 위시리스트화
면으로 이동
03-a
Scroll
Scroll
Scroll
Scroll
01 02
03
04
05 06
07
08 09
10
Scroll
swipe

Adelie
Screen ID
Screen Definition 장소상세페이지
장소 상세페이지
24
APP_07
01
- 하트 Tab시 빈 하트에서 색깔하트로 바
뀌며 위시리스트 추가
02
- 장소 썸네일 이미지와 Swipe시 여러 사
진 노출
03 - 장소 이름 및 키워드 설명
04 - 평점, 위시리스트 담은 수. 리뷰 수
05
- 전화번호, 영업시간, 메뉴이름. 메뉴가격,
주소, 주차정보 개제
06 - 장소 위치정보 지도에 표시
07 - 리뷰 개제
08
- 작성하기 Tab시 리뷰작성 화면 이동
- 이동화면: 추후제작
swipe
Scroll
Scroll
01
02
03
04
05
06
07 08
swipe
09

Adelie
Screen ID
Screen Definition
Scroll
코스짜기
코스짜기
25
APP_09
01
02
03 - 다음 버튼 tab시 코스 이름 입력 팝업
P01
- 원하는 코스 이름 입력 후 취소 및 저장
- 저장 후 내가 만든 코스 화면으로 이동
- 텍스트 창 TAB시 키보드 노출
04
- 지도 마커 TAB시 요약정보 노출
이동
05 - 담은 장소로 만들어진 코스 요약
06 - 도보 이동시간 제공
07
정보 노출
08 - 수정하기 TAB시 하단 수정 바 노출
08-a
- 수정 할 장소 선택 후 위로/아래로/삭제
/선택취소
09
면으로 이동
10
- 하단탭 하트버튼 Tab시 코스짜기 화면
으로 이동
11
면으로 이동
01 02 03
04
05
06
07
08
09 10 11 08-a
P01
swipe

Adelie
Screen ID
Screen Definition 위시리스트
위시리스트
26
APP_08
01
02
03
- ‘선택 아이콘’ tab 시 ‘리스트 선택화면’
으로 변경
03-a
- 이미 선택된 장소 재선택 시 해당 장소
선택 해제
03-b
- 선택되지 않은 장소 선택 시 해당 장소
선택
03-c
- 모두 선택한 후 완료 버튼 tab시 코스짜
기 화면으로 이동
04
- ‘하트 아이콘’ Tab시 빈 하트아이콘에서
빈 하트 아이콘으로 바뀌며 위시리스트
해제
05
정보 노출
05
- ‘하트 아이콘’ Tab시 빈 하트아이콘에서
빈 하트 아이콘으로 바뀌며 위시리스트
해제
06
면으로 이동
07
로 이동
08
면으로 이동
09
이동
01 02
05
03
04
06 07
08
03-a 03-b
03-c
09
Scroll
Scroll
swipe
Scroll

Adelie
Screen ID
Screen Definition 내가 만든 코스
내가 만든 코스
27
APP_10
01
02
3
- 코스 썸네일 tab시 코스상세페이지(타이
틀)화면으로 이동
03-a - 직접 지정한 코스 타이틀 제목
03-b
- 아이콘 tab 시 앱 내 공유/카카오톡 내보
내기
03-c
이동
03-d
- 담은 장소로 만들어진 코스 요약
- 도보 이동시간 제공
03-e - 수정하기 TAB시 하단 수정 바 노출
03-f
- 장소 썸네일 Tab시 장소 상세페이지 화
면 이동
- 장소 이름과 시간정보 제공
04 - 삭제하기 Tab 시 삭제가능
04-a - 코스 tab시 체크 활성화
04-b - 삭제 버튼 tab시 체크 된 항목 삭제
4P01 - 취소 / 확인 버튼으로 삭제 완료
01 02
03 04
05 06 07
03-a 03-b
03-c
03-d
03-e
03-f
04-a
4P01
APP_101
04-b
05
면으로 이동
06
로 이동
07
면으로 이동
Scroll
Scroll
swipe
swipe

Adelie
Screen ID
Screen Definition 마이페이지
마이페이지
28
APP_11
01 - 카메라 아이콘 Tab시 사진 수정
01-a - 카메라 앨범
01-b
- 완료 버튼 tab 시 프로필 사진 변경 후 마
이페이지 화면 이동
01-c - 원하는 사진 선택
02 - 카카오톡 연동 Tab시 연동 끊기 on/off
03
- 개인정보취급 방침 Tab시 약관정보 화면 이
동
04 - 로그아웃 TAB 시 로그아웃
05
으로 이동
06
- 하단탭 하트버튼 Tab시 코스짜기 화면으로
이동
07
으로 이동
01
02
03
04
05 06 07
03-a 01-a 01-b
01-c
APP_1101
Scroll
Scroll
swipe
08

Date Pick UI 시나리오

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Date Pick UI 시나리오