SlideShare a Scribd company logo
● MVP / 객체지향 반영
● Custom View
● Google Map,Place API
● Facebook Login API
● Retrofit 활용
● CoordinatorLayout을 통한 Reactive한 UI
● Animation을 통한 다양한 Effect
● ConstraintLayout
● ToolbarCustom을 통한 Navigation Bar사용
● Material Design (최대한 적용해보는)
● Firebase (고민중..)
by 박유석,박지훈
Scenario Login
회원
인지?
yes
no
가입
선택
이메일로
페이스북으로
Scenario List
핀클릭
목록클릭
검색
사이드메뉴
수정
이미지확대
검색된 리스트
보여주기
해당
해쉬태그관련
리스트
Scenario Map / 추가
핀클릭
검색
검색된 리스트
보여주기
지도
핀
검색된 리스트
보여주기
Scenario 친구 찾기 / 내정보
이미지확대
Depth 1 Depth 2 Depth 3 Depth 4 Depth 5 Depth 6 Depth 7
로그인 입력 리스트(첫화면) 목록 클릭 목록 상세정보      
      핀클릭 핀 상세정보    
        수정    
      수정      
    네비게이션버튼 해시태그 클릭 해당 목록 리스트 반영    
 
 
검색
검색어에 맞는
리스트반영
     
      최근 검색      
    수정 지도 정보 수정      
      저장      
  지도 검색 해당 검색 위치로 이동      
      최근 검색      
    핀클릭 핀 상세정보      
      수정      
  추가 지도 만들기 지도명 입력      
      설명 입력      
      해시태그      
      저장 지도 화면으로 이동    
      취소 지도 화면으로 이동    
    핀 만들기 핀명 입력      
      사진 추가 갤러리 선택    
      설명 입력      
      지도 선택 지도 리스트 중 선택    
      해시태그      
  친구찾기 이메일 입력        
    검색 리스트 보여주며 클릭 해당 친구 정보    
        지도 리스트 정보 클릭 지도 상세정보  
          핀 클릭 핀 상세정보
  내정보보기 내 상세정보        
    정보 수정 자기 소개 수정      
      저장      
      취소      
    탈퇴        
회원가입 이메일로가입 이메일 입력        
    비밀번호 입력        
    비밀번호 확인 입력        
    자기소개        
    회원가입        
    취소        
  페이스북으로가입 페이스북 로그인창        
Information Architecture
Screen ID 로그인
N
o.
Description Type
Display
Condition
1 ID image
2 PW image
3. 회원가입 Button
N
o.
Description Type
Display
Condition
A 아이디 입력 EditText
B 비밀번호 입력 EditText
C 회원가입창으로 Button
Information
Control
1
2
A
B
3 C
Screen ID 회원가입
N
o.
Description Type
Display
Condition
1 이메일로 가입하기 Button
2 페이스북으로 가입하기 Button
N
o.
Description Type
Display
Condition
A 회원정보입력창으로 Button
B 페이스북으로 이동 Button
Information
Control
1
2
A
B
Screen ID 리스트 첫화면
No
.
Description Type
Display
Condition
1. 수정 Button 상시
2. 리스트 ListView
3. 검색 image 상시
4. Nav Image 상시
5. 메인 리스트 Image 상시
6 지도 Image 상시
7 새등록 Image 상시
8 친구 Image 상시
9 내프로필 Image 상시
No. Description Type
Display
Condition
A 수정페이지로 이동 Button
B 목록클릭화면으로 이동 ListView+Click
C 리스트 검색으로 Image+Click
D 네비바 image+Click
E 메인 리스트(현재화면) Image+Click
F 지도화면(지도창) Image+Click
G 새등록 화면 Image+Click
H 친구 화면 Image+Click
I 프로필화면 Image+Click
Information
Control
1
2
A
B
3C4D
5 E
6 F 7 G 8 H 9 I
Screen ID 목록클릭화면
N
o.
Description Type
Display
Condition
1 핀 image
2 등록한 지도 이름 Text
3 지도에 등록된 해시태그 Text
4 지도에 등록된 핀 갯수 Text
N
o.
Description Type
Display
Condition
A 핀클릭 화면으로
Image +
Click
Information
Control
1 A
2
3 4
Screen ID 핀 클릭
N
o.
Description Type
Display
Condition
1 핀에 등록된 사진 Image
2 핀 이름 Text
3 핀에 등록된 해시태그 Text
N
o.
Description Type
Display
Condition
A 사진 확대 image
Information
Control
1
2
3
A
Screen ID 리스트 검색
N
o.
Description Type
Display
Condition
1. 지도명/태그 검색창 EditText
2. 검색버튼 Image
3. 취소 Image
N
o.
Description Type
Display
Condition
A 검색할 Text입력 EditText
B. 확인버튼
Image_Clic
k
C
검색창을 끄고
이전화면으로
Image+Clic
k
Information
Control
1 A
2 B
3 C
Screen ID 리스트 네비바
N
o.
Description Type
Display
Condition
1. 리스트의 태그정렬 Text
N
o.
Description Type
Display
Condition
A
태그클릭시 해당정보별로
정렬
Text+Click
Information
Control
1 A
Screen ID 지도화면 (내위치 기준)
N
o.
Description Type
Display
Condition
1. 검색 Image
2. 핀 태그 ImageTag
N
o.
Description Type
Display
Condition
A 주소/태그별 검색
Image+Clic
k
B 핀 클릭시 핀클릭으로
Image+Clic
k
Information
Control
1 A
2 B
Screen ID 지도화면 (검색)
N
o.
Description Type
Display
Condition
1. 지도명/태그 검색창 EditText
2. 검색버튼 Image
3. 취소 Image
N
o.
Description Type
Display
Condition
A 검색할 Text입력 EditText
B. 확인버튼
Image_Clic
k
C
검색창을 끄고
이전화면으로
Image+Clic
k
Information
Control
1 A
2 B
3 C
Screen ID 선택추가
N
o.
Description Type
Display
Condition
1. 지도만들기
Button+Te
xt
2. 핀 만들기
Button+Te
xt
N
o.
Description Type
Display
Condition
A 지도추가 화면이동 Bution
B 핀 추가 화면이동 Button
Information
Control
1 A
2 B
Screen ID 지도추가1
N
o.
Description Type
Display
Condition
1. 이름(지도명) Text
2. 실명 Text
3. 해쉬태그 Text
4. 취소 Button
5. 저장 Button
N
o.
Description Type
Display
Condition
A 장소이름 editText
B 장소에 대한 설명 입력 editText
C 해쉬태그 입력( 선택사항) editText
D 취소시 이전화면으로 Button
E 저장시 리스트 화면으로 Button
Information
Control
1
A
2
B
3
C
4 D 5 E
Screen ID 핀추가
N
o.
Description Type
Display
Condition
1. 핀 Image
2. 검색 image
3. 내위치 Button
4. 취소 Button
5. 다음 Button
N
o.
Description Type
Display
Condition
A 길게터치시 핀생성 Image
B
핀추가를 원하는 장소
입력시 검색
image+Clic
k
C 내위치로 이동 Button
D 취소시 이전하면으로 Button
E 다음시 핀 정보입력으로 Button
Information
Control
1
A
2 B
3 C
4 D 5 E
Screen ID 핀추가(검색)
N
o.
Description Type
Display
Condition
1. 지도명/태그 검색창 EditText
2. 검색버튼 Image
3. 취소 Image
N
o.
Description Type
Display
Condition
A 검색할 Text입력 EditText
B. 확인버튼
Image_Clic
k
C
검색창을 끄고
이전화면으로
Image+Clic
k
Information
Control
1 A
2 B
3 C
Screen ID 핀 정보입력1
N
o.
Description Type
Display
Condition
1. 이름(핀명) Text
2. 사진 imageView
3. 사진추가 Button
4. 설명 Text
N
o.
Description Type
Display
Condition
A 장소이름 editText
B 장소에 대한 설명 입력 editText
C 앨범에서 선택 editText
D 핀에 대한 설명적기 EditText
Information
Control
1
A
2
B
3 C
4
D
Screen ID 핀 정보입력2
N
o.
Description Type
Display
Condition
5. 지도 선택 Text
6 해시태그 Text
7 취소 Button
8 저장 Button
N
o.
Description Type
Display
Condition
E 등록한 지도중에서 선택 Spiner
F
등록할 해시태그 입력
(선택사항)
EditText
G 취소시 이전화면으로 Button
H 저장시 리스트 화면으로 Button
Information
Control
5
E
6
F
7 G 8 H
Screen ID 친구찾기
N
o.
Description Type
Display
Condition
1 이메일 검색 Text
2 친구 프로필 이미지 Image
3 친구 리스트 카드 CardView
N
o.
Description Type
Display
Condition
A 친구의 이메일주소 검색 EditText
B
버튼클릭시 아래에
검색결과 출력
Button
C
카드 클릭시 친구찾기
(클릭)화면으로
View+Click
Information
Control
1
A B
2
3 C
Screen ID 친구찾기(클릭)
N
o.
Description Type
Display
Condition
1 친구 프로필 이미지 Image
2 친구 이메일 Text
3
친구가 등록한 지도와 핀
개수
Text
4
N
o.
Description Type
Display
Condition
A
지도 클릭시 친구찾기
(지도클릭) 화면으로
Image+Clic
k
Information
Control
1
A
2
3
4
Screen ID 친구찾기(지도클릭)
N
o.
Description Type
Display
Condition
1 친구가 등록한 핀 Image
2 등록한 지도 이름 Text
3 지도에 등록된 해시태그 Text
4 지도에 등록된 핀 갯수 Text
N
o.
Description Type
Display
Condition
A
클릭시 친구찾기(핀클릭)
화면으로
Image+Clic
k
Information
Control
1 A
2
3 4
Screen ID 친구찾기(핀클릭)
N
o.
Description Type
Display
Condition
1 핀에 등록된 사진 Image
2 핀 이름 Text
3 핀에 등록된 해시태그 Text
N
o.
Description Type
Display
Condition
A 사진 확대 image
Information
Control
1
2
3
A
Screen ID 내정보
N
o.
Description Type
Display
Condition
1 프로필 이미지
Imagevie
w
2 계정 이메일 Text
3 등록한 지도 개수 Text
4 등록한 핀 개수 Text
5 자기소개 Text
N
o.
Description Type
Display
Condition
A 자기소개 정보 수정
Information
Control
1 2
3
4
5
A
Screen ID 내정보
N
o.
Description Type
Display
Condition
1 자기소개 Text
2 수정할 자기소개 EditText
3 등록한 지도 개수 Text
4 등록한 핀 개수 Text
5 자기소개 Text
N
o.
Description Type
Display
Condition
A 자기소개 정보 수정
Information
Control
1
2 A
3 4B C

More Related Content

Featured

PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
Neil Kimberley
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
contently
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
Albert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
SpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Lily Ray
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
Rajiv Jayarajah, MAppComm, ACC
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
Christy Abraham Joy
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
Vit Horky
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
MindGenius
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
RachelPearson36
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Applitools
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
GetSmarter
 
ChatGPT webinar slides
ChatGPT webinar slidesChatGPT webinar slides
ChatGPT webinar slides
Alireza Esmikhani
 
More than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike RoutesMore than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike Routes
Project for Public Spaces & National Center for Biking and Walking
 
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
DevGAMM Conference
 
Barbie - Brand Strategy Presentation
Barbie - Brand Strategy PresentationBarbie - Brand Strategy Presentation
Barbie - Brand Strategy Presentation
Erica Santiago
 

Featured (20)

PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
 
ChatGPT webinar slides
ChatGPT webinar slidesChatGPT webinar slides
ChatGPT webinar slides
 
More than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike RoutesMore than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike Routes
 
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
 
Barbie - Brand Strategy Presentation
Barbie - Brand Strategy PresentationBarbie - Brand Strategy Presentation
Barbie - Brand Strategy Presentation
 

Map project

  • 1. ● MVP / 객체지향 반영 ● Custom View ● Google Map,Place API ● Facebook Login API ● Retrofit 활용 ● CoordinatorLayout을 통한 Reactive한 UI ● Animation을 통한 다양한 Effect ● ConstraintLayout ● ToolbarCustom을 통한 Navigation Bar사용 ● Material Design (최대한 적용해보는) ● Firebase (고민중..) by 박유석,박지훈
  • 4. Scenario Map / 추가 핀클릭 검색 검색된 리스트 보여주기 지도 핀 검색된 리스트 보여주기
  • 5. Scenario 친구 찾기 / 내정보 이미지확대
  • 6. Depth 1 Depth 2 Depth 3 Depth 4 Depth 5 Depth 6 Depth 7 로그인 입력 리스트(첫화면) 목록 클릭 목록 상세정보             핀클릭 핀 상세정보             수정           수정           네비게이션버튼 해시태그 클릭 해당 목록 리스트 반영         검색 검색어에 맞는 리스트반영             최근 검색           수정 지도 정보 수정             저장         지도 검색 해당 검색 위치로 이동             최근 검색           핀클릭 핀 상세정보             수정         추가 지도 만들기 지도명 입력             설명 입력             해시태그             저장 지도 화면으로 이동           취소 지도 화면으로 이동         핀 만들기 핀명 입력             사진 추가 갤러리 선택           설명 입력             지도 선택 지도 리스트 중 선택           해시태그         친구찾기 이메일 입력             검색 리스트 보여주며 클릭 해당 친구 정보             지도 리스트 정보 클릭 지도 상세정보             핀 클릭 핀 상세정보   내정보보기 내 상세정보             정보 수정 자기 소개 수정             저장             취소           탈퇴         회원가입 이메일로가입 이메일 입력             비밀번호 입력             비밀번호 확인 입력             자기소개             회원가입             취소           페이스북으로가입 페이스북 로그인창         Information Architecture
  • 7. Screen ID 로그인 N o. Description Type Display Condition 1 ID image 2 PW image 3. 회원가입 Button N o. Description Type Display Condition A 아이디 입력 EditText B 비밀번호 입력 EditText C 회원가입창으로 Button Information Control 1 2 A B 3 C
  • 8. Screen ID 회원가입 N o. Description Type Display Condition 1 이메일로 가입하기 Button 2 페이스북으로 가입하기 Button N o. Description Type Display Condition A 회원정보입력창으로 Button B 페이스북으로 이동 Button Information Control 1 2 A B
  • 9. Screen ID 리스트 첫화면 No . Description Type Display Condition 1. 수정 Button 상시 2. 리스트 ListView 3. 검색 image 상시 4. Nav Image 상시 5. 메인 리스트 Image 상시 6 지도 Image 상시 7 새등록 Image 상시 8 친구 Image 상시 9 내프로필 Image 상시 No. Description Type Display Condition A 수정페이지로 이동 Button B 목록클릭화면으로 이동 ListView+Click C 리스트 검색으로 Image+Click D 네비바 image+Click E 메인 리스트(현재화면) Image+Click F 지도화면(지도창) Image+Click G 새등록 화면 Image+Click H 친구 화면 Image+Click I 프로필화면 Image+Click Information Control 1 2 A B 3C4D 5 E 6 F 7 G 8 H 9 I
  • 10. Screen ID 목록클릭화면 N o. Description Type Display Condition 1 핀 image 2 등록한 지도 이름 Text 3 지도에 등록된 해시태그 Text 4 지도에 등록된 핀 갯수 Text N o. Description Type Display Condition A 핀클릭 화면으로 Image + Click Information Control 1 A 2 3 4
  • 11. Screen ID 핀 클릭 N o. Description Type Display Condition 1 핀에 등록된 사진 Image 2 핀 이름 Text 3 핀에 등록된 해시태그 Text N o. Description Type Display Condition A 사진 확대 image Information Control 1 2 3 A
  • 12. Screen ID 리스트 검색 N o. Description Type Display Condition 1. 지도명/태그 검색창 EditText 2. 검색버튼 Image 3. 취소 Image N o. Description Type Display Condition A 검색할 Text입력 EditText B. 확인버튼 Image_Clic k C 검색창을 끄고 이전화면으로 Image+Clic k Information Control 1 A 2 B 3 C
  • 13. Screen ID 리스트 네비바 N o. Description Type Display Condition 1. 리스트의 태그정렬 Text N o. Description Type Display Condition A 태그클릭시 해당정보별로 정렬 Text+Click Information Control 1 A
  • 14. Screen ID 지도화면 (내위치 기준) N o. Description Type Display Condition 1. 검색 Image 2. 핀 태그 ImageTag N o. Description Type Display Condition A 주소/태그별 검색 Image+Clic k B 핀 클릭시 핀클릭으로 Image+Clic k Information Control 1 A 2 B
  • 15. Screen ID 지도화면 (검색) N o. Description Type Display Condition 1. 지도명/태그 검색창 EditText 2. 검색버튼 Image 3. 취소 Image N o. Description Type Display Condition A 검색할 Text입력 EditText B. 확인버튼 Image_Clic k C 검색창을 끄고 이전화면으로 Image+Clic k Information Control 1 A 2 B 3 C
  • 16. Screen ID 선택추가 N o. Description Type Display Condition 1. 지도만들기 Button+Te xt 2. 핀 만들기 Button+Te xt N o. Description Type Display Condition A 지도추가 화면이동 Bution B 핀 추가 화면이동 Button Information Control 1 A 2 B
  • 17. Screen ID 지도추가1 N o. Description Type Display Condition 1. 이름(지도명) Text 2. 실명 Text 3. 해쉬태그 Text 4. 취소 Button 5. 저장 Button N o. Description Type Display Condition A 장소이름 editText B 장소에 대한 설명 입력 editText C 해쉬태그 입력( 선택사항) editText D 취소시 이전화면으로 Button E 저장시 리스트 화면으로 Button Information Control 1 A 2 B 3 C 4 D 5 E
  • 18. Screen ID 핀추가 N o. Description Type Display Condition 1. 핀 Image 2. 검색 image 3. 내위치 Button 4. 취소 Button 5. 다음 Button N o. Description Type Display Condition A 길게터치시 핀생성 Image B 핀추가를 원하는 장소 입력시 검색 image+Clic k C 내위치로 이동 Button D 취소시 이전하면으로 Button E 다음시 핀 정보입력으로 Button Information Control 1 A 2 B 3 C 4 D 5 E
  • 19. Screen ID 핀추가(검색) N o. Description Type Display Condition 1. 지도명/태그 검색창 EditText 2. 검색버튼 Image 3. 취소 Image N o. Description Type Display Condition A 검색할 Text입력 EditText B. 확인버튼 Image_Clic k C 검색창을 끄고 이전화면으로 Image+Clic k Information Control 1 A 2 B 3 C
  • 20. Screen ID 핀 정보입력1 N o. Description Type Display Condition 1. 이름(핀명) Text 2. 사진 imageView 3. 사진추가 Button 4. 설명 Text N o. Description Type Display Condition A 장소이름 editText B 장소에 대한 설명 입력 editText C 앨범에서 선택 editText D 핀에 대한 설명적기 EditText Information Control 1 A 2 B 3 C 4 D
  • 21. Screen ID 핀 정보입력2 N o. Description Type Display Condition 5. 지도 선택 Text 6 해시태그 Text 7 취소 Button 8 저장 Button N o. Description Type Display Condition E 등록한 지도중에서 선택 Spiner F 등록할 해시태그 입력 (선택사항) EditText G 취소시 이전화면으로 Button H 저장시 리스트 화면으로 Button Information Control 5 E 6 F 7 G 8 H
  • 22. Screen ID 친구찾기 N o. Description Type Display Condition 1 이메일 검색 Text 2 친구 프로필 이미지 Image 3 친구 리스트 카드 CardView N o. Description Type Display Condition A 친구의 이메일주소 검색 EditText B 버튼클릭시 아래에 검색결과 출력 Button C 카드 클릭시 친구찾기 (클릭)화면으로 View+Click Information Control 1 A B 2 3 C
  • 23. Screen ID 친구찾기(클릭) N o. Description Type Display Condition 1 친구 프로필 이미지 Image 2 친구 이메일 Text 3 친구가 등록한 지도와 핀 개수 Text 4 N o. Description Type Display Condition A 지도 클릭시 친구찾기 (지도클릭) 화면으로 Image+Clic k Information Control 1 A 2 3 4
  • 24. Screen ID 친구찾기(지도클릭) N o. Description Type Display Condition 1 친구가 등록한 핀 Image 2 등록한 지도 이름 Text 3 지도에 등록된 해시태그 Text 4 지도에 등록된 핀 갯수 Text N o. Description Type Display Condition A 클릭시 친구찾기(핀클릭) 화면으로 Image+Clic k Information Control 1 A 2 3 4
  • 25. Screen ID 친구찾기(핀클릭) N o. Description Type Display Condition 1 핀에 등록된 사진 Image 2 핀 이름 Text 3 핀에 등록된 해시태그 Text N o. Description Type Display Condition A 사진 확대 image Information Control 1 2 3 A
  • 26. Screen ID 내정보 N o. Description Type Display Condition 1 프로필 이미지 Imagevie w 2 계정 이메일 Text 3 등록한 지도 개수 Text 4 등록한 핀 개수 Text 5 자기소개 Text N o. Description Type Display Condition A 자기소개 정보 수정 Information Control 1 2 3 4 5 A
  • 27. Screen ID 내정보 N o. Description Type Display Condition 1 자기소개 Text 2 수정할 자기소개 EditText 3 등록한 지도 개수 Text 4 등록한 핀 개수 Text 5 자기소개 Text N o. Description Type Display Condition A 자기소개 정보 수정 Information Control 1 2 A 3 4B C