Recommended
Recommended
More Related Content
More from Artcoon
More from Artcoon (20)
2016 알바천국 스토리보드
- 1. 2016.12.03 Ver 1.0 알바맵 메뉴 상세설계 계원예술대학교 디지털미디어디자인과 박채원, 조영지, 김윤신, 안가은 알바천국 어플리케이션 현위치 개선 스토리보드
- 2. 버전 날짜 내용 내용상세 작성자 비고 0.1 2016-11-25 가이드라인 / 초안 가이드라인 및 초안 박채원, 조영지, 김윤신, 안가은 0.2 2016-11-25 추가 가이드라인 수정 박채원 0.3 2016-11-26 추가 화면 추가 박채원 0.4 2016-11-27 추가 리스트 화면 추가 김윤신 0.5 2016-11-28 수정 리스트 화면 드롭다운 >>> 팝업으로 수정 김윤신 0.7 2016-11-28 플로우 차트 추가 플로우차트 추가 조영지 0.9 2016-11-29 컨펌 후, 수정 보완 ‘즐겨찾기 지역을 추가해보세요~ ‘문구 추가 브랜드이미지 다음 이미지들 보이게 수정 화면경로 작성 리스트 버튼,즐겨찾기 버튼 위치 변경 버튼 라벨링 정렬조건 - 가까운순추가 박채원 1.0 2016-12-02 수정 및 추가 유저시나리오 – 오류들 수정 즐겨찾기 팝업 변경 등 화면 추가 및 수정 디스크립션 디벨롭 박채원 문서 이력 0.2 updated 0.3 updated 0.4 updated 0.5 updated 0.7 updated 0.9 updated 1.0 updated
- 3. SKT 오후 04:08 탐앤탐스 안양역점 알바맵 서울 강남구 역삼동 알바를 찾아주지!! ★ Icon Icon Icon Icon Description 화면ID: Main_S2 화면명 지역변경 화면경로 ★ 우리집 학교 + 계원예술대학교 디지털미디어디자인과 2 1 5 6 7 5-1 8 1 GSP 현위치 버튼 • 탭 시, GPS기능을이용해 현 위치로 지도화면이동. • 오른쪽에 지역 주소 표시됨. 2 현 위치 표시 • ‘현주소값+알바를찾아주지!!’문구 • 디폴트값(GPS값없을시) – ‘너가 어디든 알바를 찾아주지!!’ • 주소부분or오른쪽삼각형모형탭 시, ‘Main_S1’화면으로이동 3 리스트보기버튼 • 탭 시, 리스트보기화면으로 이동 (오른쪽에서슬라이드되며나옴) 4 지도화면 • 화면을 움직일 때마다 그 지역의 알바를 점으로 보여줌. • 일정 값으로 지도 지도 축소 시, 클러스터링.(알바수로 보여줌) 6 알바정보 창 • 업체로고 이미지, 시급, 시간 근무 일 등 구인정보에대한 이미지 제공 7 업체 로고 (이미지) 지역 즐겨찾기 버튼 4 3 5 • 플로팅 버튼. 탭 시, 과 같이 상단으로나열 5-1 8 시급, 시간, 근무일 이미지(아이콘) 삭제됨 (문서p4로 수정) 0.2 updated
- 4. 화면ID: M_M_0 화면명 알바맵 메인 화면 화면경로 메인 > 알바맵 Description 알바맵 ★ 2 1 4 1 GSP 현위치 버튼 • 탭 시, GPS기능을이용해 현 위치로 지도화면이동. • 오른쪽에 지역 주소 표시됨. 2 현 위치 표시 • ‘현주소값+알바를찾아주지!!’문구 • 디폴트값(GPS값없을시) – ‘너가 어디든 알바를 찾아주지!!’ • 주소부분or오른쪽삼각형모형탭 시, ‘Main_S1’화면으로이동 경기도 의왕시 포일동 알바를 찾아주지!! 계원예술대학교 디지털미디어디자인과 인덕원역이 근처에 있습니다 5 6 3 목록 버튼 • 현재 지도 범위에 포함된 모든 알바가 리스트로 보여짐 • 탭 시, 리스트보기화면으로 이동 (아래쪽에서슬라이드되며 나옴) 4-1 4 지도화면 • 화면을 움직일 때마다 그 지역의 알바를 점으로 보여줌. • 일정 값으로 지도 지도 축소 시, 클러스터링.(알바수로 보여줌) 5 핫 플레이스팝업 • 현 위치에서가장 가까운(5km이내)핫플레이스에대한 정보 팝업 • ‘000(핫플레이스이름) +근처에 있습니다’ • 지도 상 움직임이감지되면 띄워주고,5초 후 자동으로사라짐 • 탭 시, 해당 핫 플레이스로지도 이동 6 지역 즐겨찾기 버튼 • 플로팅 버튼. 탭 시, 팝업 탐엔탐스 외 3개 4-1 아이콘 • 알바 스팟 탭 시, 대표 업직종(1차분류기준)의아이콘 표시 – 대표 업직종은 광고상품우선이며 광고상품 없을 시, 최근등록순 • 하단에 정보나타남 • 2개 이상의 알바 정보가 있을 시, 상단에 ‘--외0개’ 표시 • 10~12자 띄어쓰기 우선으로 줄바꿈 • 사이드에 있는 핀 탭 시. 양옆 최소간격유지할 수 있을 만큼 지도화 면이 안쪽으로 이동. 6-1 0.2 updated ▲ 목록 3 즐겨찾기 지역 우리집 학교 저장 + 6-1 편 집 0.9 updated
- 5. 화면ID: M_M_0 화면명 알바맵 메인 화면 화면경로 메인 > 알바맵 > 즐겨찾기 탭 Description 탐앤탐스 안양역점 알바맵 image 시급 7000원 1년이상 오전 9-12시 1 즐겨찾기 지역 목록 • 등록된 즐겨찾기 지역이 나타남 • 최대 4개까지 등록가능 • 즐겨찾기 버튼 탭 후, +버튼 옆에 ‘즐겨찾기지역을 추가해보세요 ’ 문구가 뜨고 5초후 자동으로사라짐 • + 버튼 탭 시, 팝업 2 지역 즐겨찾기 등록 팝업 • 디폴트 값 ‘즐겨찾기1,2,3’ • ㅊ 탭 시, 입력박스내용 삭제 • 입력박스 – 최대 6글자까지 등록가능 • 확인 탭 시, 6-1에 등록됨. • 닫기 탭 시, 이전화면으로이동 경기도 의왕시 포일동 알바를 찾아주지!! 계원예술대학교 디지털미디어디자인과 학교 탐앤탐스 안양역점 알바맵 ★ ★ image 시급 7000원 1년이상 오전 9-12시 경기도 의왕시 포일동 알바를 찾아주지!! 우리집 학교 + 지역 즐겨찾기 등록 즐겨찾기 1 x 닫기 확인 6-2 6-1 6-2 6-2 x ▼ 0.3 updated ★ ▲ 목록 우리집 학교 + 즐겨찾기 지역을 추가해보세요 6-1 즐겨찾기 팝업 변경 0.9 updated
- 6. 화면ID: M_M_F1 화면명 알바맵 즐겨찾기지역 화면경로 메인 > 알바맵 > 즐겨찾기 Description 알바맵 1 편집 버튼 • 탭 시, ‘M_M_F2’즐겨찾기 지역 편집 화면으로이동 2 설정된 즐겨찾기 지역 목록 • 탭 시, 지도로 이동(즐겨찾기등록된 위치값) • 설정된 즐겨찾기 지역이 하나도 없을 경우 : ‘+버튼을 탭하여, 현재 지역을 즐겨찾기로등록해보세요!’문구 노출 경기도 의왕시 포일동 알바를 찾아주지!! 계원예술대학교 디지털미디어디자인과 3 즐겨찾기 추가 버튼 • 탭 시, 화면으로이동. (+한글키패드노출) 5 저장 버튼 • 탭 시, 이전화면(M_M_0알바맵 메인화면)으로이동 • 이동 시 지도 위치값은팝업 전 위치로 고정 3-1 즐겨찾기 지역 추가 • 키패드 오른쪽 상단 완료 버튼 추가 • 팝업은 상단 최소마진값을남겨두고최대로 올려줌.( 팝업 디자인 시, 키패드가올라와도 4개 목록이 다 보이도록 할 것) • 완료 탭 시, 추가 완료되며 키패드 사라짐 • 입력박스 디폴트 값 ‘즐겨찾기1,2,3,4’: 등록된 지역이름 중 ‘즐겨 찾기 1’이 없으면 ‘즐겨찾기1’로, 있다면 ‘즐겨찾기2’,’즐겨찾기3’,’ 즐겨찾기4’차례로표기 • 입력박스는최대 6글자까지 등록가능 ▲ 목록 1.0 updated ★ 즐겨찾기 지역 우리집 학교 저장 + 편 집 알바맵 경기도 의왕시 포일동 알바를 찾아주지!! ▲ 목록 ★ 즐겨찾기 지역 우리집 학교 취소 저장 즐겨찾기1ㅣ 편 집 1 2 3 5 3-1 3-1
- 7. 화면ID: M_M_F2 화면명 알바맵 즐겨찾기지역 편집 화면경로 메인 > 알바맵 > 즐겨찾기> 편집 Description 1 뒤로가기 버튼 • 탭 시, 편집 전 팝업으로 이동됨 2 닫기 버튼 • 탭 시, 팝업 닫힘(M_M_0알바맵 메인화면으로이동) • 이동 시 지도 위치값은팝업 전 위치로 고정 계원예술대학교 디지털미디어디자인과 3 체크박스 • 탭 시, 처럼 변경됨. 4 수정 버튼 • 지역이름을변경할 수 있게 됨. 로 이동 ▼ 1.0 updated 알바맵 경기도 의왕시 포일동 알바를 찾아주지!! ▲ 목록 ★ 즐겨찾기 지역 편집 우리집 학교 삭제 수 정 수 정 알바맵 경기도 의왕시 포일동 알바를 찾아주지!! ▲ 목록 ★ 즐겨찾기 지역 편집 우리집 학교 삭제 V 1 2 3 5 4 3-1 4-1 3-1 즐겨찾기 지역 추가 • 탭 시, 체크박스에체크되며,목록 선택 표시(색으로) • 탭 시, 아래 삭제 버튼이 활성화 됨. • 체크가 하나이상일때, 오른쪽 수정버튼이사라짐 3-1
- 8. 화면ID: M_M_F2 화면명 알바맵 즐겨찾기지역 편집 화면경로 메인 > 알바맵 > 즐겨찾기> 편집 Description 계원예술대학교 디지털미디어디자인과 1.0 updated 알바맵 경기도 의왕시 포일동 알바를 찾아주지!! ▲ 목록 ★ 즐겨찾기 지역 편집 우리집 학교 삭제 수 정 수 정 알바맵 경기도 의왕시 포일동 알바를 찾아주지!! ▲ 목록 ★ 즐겨찾기 지역 편집 우리집ㅣ 학교 삭제 완 료 수 정 4-1 4-1 즐겨찾기 지역 수정 • 탭 시, 키패드가 올라옴.(한글키패드) • 키패드에 입력창이가려질 경우, 팝업이 위로 이동됨 • 키워드를 한글자 이상 입력하였을때 오른쪽 ‘완료’버튼이활성화 • 완료버튼 탭 시, 키패드가 내려가고변경값 저장된 팝업 창으로 변 환
- 9. 화면ID: M_M_0 화면명 알바맵 메인 화면 화면경로 메인 > 알바맵 > 핀 탭 Description 탐앤탐스 안양역점 알바맵 image 시급 7000원 1년이상 오전 9-12시 7 • 업체 로고이미지,시급, 장단기.시간 등 표기 • 2개 이상시 처럼 화살표 표시 • 탭 시, 상세보기 페이지로 이동. 8 업체 로고 이미지 • 모양에 맞게 축소하여 자동 맞춤 될 수 있도록 함. • 등록된 이미지가 없을 시, 상점모양의일러스트(기본등록) 경기도 의왕시 포일동 알바를 찾아주지!! 계원예술대학교 디지털미디어디자인과 7 8 9 알바 정보창 7-1 탐엔탐스 외 3개 9 아이콘 정보 • 아이콘 하단에 아이콘 정보 표시 • 해당 정보는 업체측 등록 시 설정하는 값을 불러옴 • 정보없음 일 시, 전화협의로바꾸고 이에 맞는 전화아이콘으로대 체함 0.3 updated ★ ▲ 목록 7-1 1/3 2/3 7 • 업체명 오른쪽에 전체 개수와 현재 페이지 번호 ‘현재/전체’형태로 표시 • 정보가 있는쪽에 화살표와 로고이미지가일부 보여짐 알바 정보창 (정보가 2개 이상일 때) 7-1 image image 1.0 updated
- 10. 화면ID: M_S_0 화면명 지역변경 화면경로 메인 > 알바맵 > 현주소 탭 Description 탐앤탐스 안양역점 알바맵 ★ 4 image 시급 7000원 1년이상 오전 9-12시 서울 강남구 역삼동 알바를 찾아주지!! 계원예술대학교 디지털미디어디자인과 Cancel 지역 경기도 안양시 동안구 관양2동 경기도 안양시 동안구 평촌동 지하철 인덕원역 평촌역 스팟 계원예술대학교 IT밸리 2 1 3 1 • 지역,지하철,스팟등장소검색 가능 2 검색 도움 창 • 가까운 지역, 지하철,스팟(랜드마크,학교,핫플레이스등등)2개씩 표시 • 주소 탭 시, 해당 지역으로 지도 이동 (Main_0 화면으로 이동) • 입력박스에한 글자 이상 검색 시, 로 변경됨 검색창(입력박스) 탐앤탐스 안양역점 알바맵 ★ 4 image 시급 7000원 1년이상 오전 9-12시 서울 강남구 역삼동 알바를 찾아주지!! Cancel 경기도 안양시 동안구 관양2동 경기도 안양시 동안구 평촌동 동안구청 동안 고등학교 동안산병원 동안교회 동안 2-1 2-1 2 검색 도움 창 • 검색한 글자가 들어간 주소,지하철,스팟표시 • 해당 글자가 있는 것 중 0. 내 최근 검색 순 1.가까운 순서 , 2.앱사 용자들이 많이 본 순서로 나열. • 개수 제한 없이 나열(스트롤가능) 2-1 검색어삭제 • 탭 시, 입력된 글 전체 삭제 • 입력된 글 삭제시 2번 검색 도움 창 기본 값으로 변경됨. 3 4 지도 화면 • 탭 시, 지도화면으로이동 (Main_0 화면으로 이동) 4 5 검색 닫기 버튼 • 탭 시, 검색창 닫힘 (Main_0 화면으로 이동) 5 0.3 updated 1.0 updated
- 11. 화면ID: M_S_0 화면명 지역변경 화면경로 메인 > 알바맵 > 현주소 탭 Description 계원예술대학교 디지털미디어디자인과 탐앤탐스 안양역점 알바맵 ★ 4 image 시급 7000원 1년이상 오전 9-12시 서울 강남구 역삼동 알바를 찾아주지!! Cancel 검색어를 한글자 이상으로 입력해주세요. ㄱ 2-2 2 검색 도움 창 • ㄱ 과 같은 자음 또는 모음만 입력되었을경우 : ‘검색어를한글자 이상으로 입력해주세요.’문구 노출 2-2 1.0 updated 탐앤탐스 안양역점 알바맵 ★ 4 image 시급 7000원 1년이상 오전 9-12시 서울 강남구 역삼동 알바를 찾아주지!! Cancel 서울시 송파구 가락동 경기도 가평구 가평읍 가산디지털단지역 가락시장역 강서구청 강남역 가 2-3 2 검색 도움 창 • 한글자만 검색하였을경우 2-1과 같은 원리로 노출될 수 있도록 하되, 정보가 많을 경우 스크롤로 내릴 수 있도록함. 2-3
- 12. 정렬조건 확인 ▼ 지도 탐앤탐스 안양역점 Icon Icon Icon 709M 설빙 인덕원점 Icon Icon Icon 708M 스타벅스 안양역점 Icon Icon Icon 700M 총 28건 정렬조건▼ 직종선택▼ 탐앤탐스 안양역점 Icon Icon Icon 609M 시급 7000원 1년이상 오전 9-12시 시급 7000원 1년이상 오전 9-12시 시급 7000원 1년이상 오전 9-12시 시급 7000원 1년이상 오전 9-12시 화면ID: M_L_0 화면명 목록화면 화면경로 메인 > 알바맵 > 목록 계원예술대학교 디지털미디어디자인과 Description 1 2 직종선택 버튼 • 텍스트 or 삼각형 탭시 , 과 같이 팝업창으로직종 제공 3 정렬조건 버튼 4 거리정보 제공 5 • 지역,지하철,스팟등장소검색 가능 검색창(입력박스) • 텍스트 or 삼각형 탭시 , 과 같이 팝업창으로직종 제공 2-1 3-1 알바정보 • 한페이지에총 10개 업체 정보 제공 • 업체로고 이미지, 시급, 시간 근무 일에 대한 이미지 제공 • 업체로고 이미지, 시급, 시간 근무 일 등 구인정보에대한 이미지 제공 0.5 updated 0.4 updated 0.2 updated 1.0 updated 알바맵 알바맵 탐앤탐스 안양역점 Icon Icon Icon 709M 설빙 인덕원점 Icon Icon Icon 708M 스타벅스 안양역점 Icon Icon Icon 700M 총 28건 정렬조건▼ 직종선택▼ 2 3 4 5 탐앤탐스 안양역점 Icon Icon Icon 609M 시급 7000원 1년이상 오전 9-12시 시급 7000원 1년이상 오전 9-12시 시급 7000원 1년이상 오전 9-12시 시급 7000원 1년이상 오전 9-12시 ▼ 지도 직종선택 확인 매장관리 서빙 주방 서비스 생산 기능 사무 회계 IT 디자인 상담 영업 강사교육 2-1 시급높은순 일급높은순 주급높은순 월급높은순 연봉높은순 가까운 순 3-1 지도 돌아가기 아이콘 6 • 목록을 내리고 지도를 볼 수 있는 페이지(M_M_0)로돌아감. • 이동 시 지도 위치값은팝업 전 위치로 고정 6 2-1 직종선택 팝업 • 하단 직종 탭 시, 칸 색이 변하면서 선택됨을알림. 한번 더 탭 시, 선택취소. • 중복선택가능. • 기본 값은 전체선택. • X버튼 탭 시, 팝업 닫힘 (팝업 내 설정값 적용 안됨) • 확인버튼 탭 시, 리스트 페이지로 이동 ( 설정값 적용하여 새로고 침됨) ▼
- 13. ▼ 지도 탐앤탐스 안양역점 Icon Icon Icon 709M 설빙 인덕원점 Icon Icon Icon 708M 스타벅스 안양역점 Icon Icon Icon 700M 총 28건 정렬조건▼ 직종선택▼ 탐앤탐스 안양역점 Icon Icon Icon 609M 시급 7000원 1년이상 오전 9-12시 시급 7000원 1년이상 오전 9-12시 시급 7000원 1년이상 오전 9-12시 시급 7000원 1년이상 오전 9-12시 화면ID: M_L_0 화면명 목록화면 화면경로 메인 > 알바맵 > 목록 계원예술대학교 디지털미디어디자인과 Description 0.5 updated 0.4 updated 0.2 updated 1.0 updated 알바맵 3-1 정렬조건 팝업 • 하단 직종 탭 시, 칸 색이 변하면서 선택됨을알림. 한번 더 탭 시, 선택취소. • 중복선택 불가능. • 기본 값은 거리 가까운 순으로 • X버튼 탭 시, 팝업 닫힘 (팝업 내 설정값 적용 안됨) • 확인버튼 탭 시, 리스트 페이지로 이동 ( 설정값 적용하여 새로고 침됨) 정렬조건 확인 시급높은순 일급높은순 주급높은순 월급높은순 연봉높은순 가까운 순 3-1
- 14. 탐앤탐스 안양역점 오픈 아르바이트 Icon Icon Icon Icon 등록일 : 2016.11.25 ㅣ 업데이트 : 2016.12.03 04:00 6300원 3-6개월 주4일 08시 -03시 모집조건 12월 02일 2명 무관 모집마감 모집인원 성별 지원하기 2 3 4 화면ID: M_S_0 화면명 상세보기 화면경로 메인 > 알바맵 > 상세보기 계원예술대학교 디지털미디어디자인과 Description 0.5 updated 0.4 updated 0.2 updated 1.0 updated 탐엔탐스 안양역점 탐엔탐스 안양역점 씨엔티테크㈜ 주소 : 서울 서대문구 증가로29길 35 (북가좌동) 씨엔티테크 전화 : 02.3151.8008 모집직종 서빙.주방 > 커피전문점> 조리 복리후생 산재보험,고용보험 상세 채용 정보 + 확대보기 지원하기 7 12월 02일 2명 무관 21세(1996년생)~25세(1992년생) 무관 초보가능 모집마감 모집인원 성별 연령 학력 기타사항 탐앤탐스 커피 안양역점입니다. 초보도 지원할 수 있으며, 오픈시간이지만 일은 어렵지 않습니다. 최소 3개월 이상 장기근무 가능하신분 남녀 모두 지원 가능합니다. 오전 8시부터 근무하며 오픈 준비로 인해 12월 초부터 근무합니다. 9 1 2 1 2 1 2 공고 날짜 제공 • 아르바이트구인 공고 날짜 제공 3 상세 채용정보 제공 4 확대보기 버튼 7 • 텍스트 좌측 화살표 탭시, 이전화면인목록 화면으로이동 되돌아가기버튼 • 아이콘과 텍스트로시급, 근무일 , 시간 등 모집 조건 제공 • 해당 정보는 업체측 등록 시 설정하는 값을 불러옴 • 정보없음 일 시, 전화협의로바꾸고 이에 맞는 전화아이콘으로대체함 지도 이미지 제공 • 업체 장소 위치 제공 탭했을 경우 지도화면 풀화면로 제공 (현재 상 세페이지의지도보기와동일기능) • 상세 채용정보 확대화면팝업으로 제공 공백 화면 (탭 했을 때 화면 닫힘) 8 지원하기 버튼 TOP 버튼 • 좌측 전화 아이콘 탭했을 때 자동으로 전화화면으로이동 그외에 문자 지원, 이메일 지원 화면으로이동 • 최상단으로올라가는 버튼 , 탭했을 경우 가장 상단으로 올라감 1 5 6 8 9 5 회사 정보 • 업체 등록시 필수정보 불러옴.전화번호,주소,업체명 6 모집조건 • 모집조건 입력 시, 등록된 정보 불러옴.(정보가 없을 경우 항목에 서 제외되며입력값만 불러옴 – 복리후생,모집직종도동일)
- 15. Use Case Scenario 0.7 updated 1.0 updated TAP swipe 알바 pin TAP 하단 정보 영역 Swipe 하단 정보 영역 반대로 Swipe 1. 핀 정보보기
- 16. Use Case Scenario 0.7 updated 1.0 updated TAP 알바 pin TAP ‘목록’ TAP 뒤로가기 TAP TAP 2. 지도영역 전체 목록 보기 ‘지도’ TAP
- 17. Use Case Scenario ‘직종선택’TAP ‘매장관리’TAP ‘매장관리’TAP TAP 3. 목록 상세검색 매장관리 TAP 1.0 updated X 버튼 TAP
- 18. Use Case Scenario TAP 상단 주소TAP ‘ㄱ’입력 Cancle 버튼 TAP Or 글자 전부 지우기 TAP 4. 지도 검색 1.0 updated 상단 주소 TAP
- 19. Use Case Scenario 1.0 updated TAP 즐겨찾기 버튼 TAP + 버튼 탭 X 버튼 TAP 5. 즐겨찾기 추가 TAP X ‘저장’ 버튼 탭
- 20. Use Case Scenario TAP ‘편집’ 버튼 TAP 체크박스 탭 체크박스 탭 6. 즐겨찾기 삭제 TAP 1.0 updated 뒤로가기 탭
- 21. Use Case Scenario TAP 상단 주소TAP ‘ㄱ’입력 완료 TAP 7. 즐겨찾기 수정 TAP 1.0 updated 뒤로가기 탭
- 22. 계원예술대학교 디지털미디어디자인과 박채원, 조영지, 김윤신, 안가은 알바천국 어플리케이션 현위치 개선 스토리보드 End of document 2016.12.03 Ver 1.0