[Project] 크로스 플랫폼 앱 개발 : 디자인

개요

진행할 프로젝트의 구체적인 화면을 제작하고 완성도를 높인다.

팀에서 선정한 UI 설계 기준은 다음과 같다.

1.     요구사항에 작성된 기능들을 모두 반영하는가?

2.     각 화면에서 진행하는 입출력 동작을 구체화한다.

3.    예측 가능한 예외를 찾는다.

요구사항 정의서

기존에 작성한 요구사항 정의서 내용은 다음과 같다.

시작 화면

앱을 실행하면 처음 등장하는 화면이다.

세 가지 로그인 방식을 제공하며, 클릭 시 각각의 로그인 화면으로 이동할 수 있다.

로그인 화면

본인을 인증하고 홈화면으로 이동하는 화면이다.

세 가지 로그인 방식을 제공하며, 클릭 시 각각의 로그인 화면으로 이동할 수 있다. 1.로그인:: 이메일과 비밀번호를 대조하여 계정정보를 확인한다.	[에러] 존재하지 않는 이메일로 로그인을 요청한다. 에러 메시지와 이메일 주소 입력 필드로 포커싱된다.	[에러] 존재하지 않는 비밀번호로 로그인을 요청한다. 에러 메시지와 비밀번호 입력 필드로 포커싱된다.

회원가입 화면

이메일을 인증하고 새로운 계정을 생성하는 화면이다.

계정 생성을 위해 최초 개인 정보(이메일, 닉네임, 비밀번호, 비밀번호 확인)를 입력한다. 1.회원가입:: 새로운 계정을 생성하고 로그인 창으로 리다이렉팅 시킨다.	본인 인증과, 개별적인 이용자 분류를 위해 이메일 기입 후 버튼을 눌러 인증을 요청한다. 1.이메일 인증:: 해당 이메일로 인증번호 메일을 발송한다.	[에러] 각 항목에 올바르지 않은 서식을 입력한다. 항목에 명칭에 따른 에러 메시지를 띄우고 해당 필드로 포커싱한다. (항목의 올바른 서식은 TextField의 Place holder에 기술)	[에러] 이메일 인증번호 인증에 실패한다. 이메일 인증코드를 재전송해주는 버튼이 나타난다. 인증코드 필드로 포커싱하고, 에러 메시지를 띄운다.

비밀번호 재설정

이메일과 연관된 계정의 비밀번호를 재설정한다.

비밀번호 재설정을 위한 새로운 비밀번호를 입력한다.   1.재설정:: 이메일에 대한 새로운 비밀번호를 설정하고 로그인 창으로 리다이렉팅 시킨다.	[에러] 작성한 비밀번호와 다른 비밀번호로 확인을 요청하였다. 비밀번호 확인 입력 필드로 포커싱하고 에러 메시지를 띄운다.

홈 화면

각 핵심기능을 가리키고, 보조 기능을 제공한다.

여행 시작 전에 보여지는 항목이다. 여행 준비를 도와주는 내용(남은 날짜, 항공권)이 나타난다. 1.확인하기:: 체크리스트로 이동한다. 2.일정보기:: 계획중인 일정 리스트로 이동한다.	여행 중에 보여지는 항목이다. 여행 중 필요한 (당일) 일정이 시간 별로 나타난다. 시각, 내용이 보여진다. 1.일정보기:: 계획된 일정 리스트로 이동한다.	보조 기능이다. 여행에 필요한 여행지 환율과 이전에 진행한 여행기록을 보여준다.	보조 기능이다. 여행지의 날씨 예보를 보여준다. 날짜, 날씨 아이콘, 최저/고 기온이 보여진다. 셀렉바를 이용해 지역을 변경할 수 있다. 하단바를 통해, 각 핵심기능으로 이동할 수 있다.

일정 화면(일정 없음)

[SCHEDULE01] 전체 여행에 대한 요약과 세부 일정을 볼 수 있는 화면이다.

상단에서 전체 여행정보를 볼 수 있다. 일정에 대한 정보를 알 수 있다. 1.지도:: 일정에 대한 동선을 볼 수 있는 일정 지도를 확장한다 (미리보기). 2.일정추가:: 당일의 새로운 일정을 추가하는 페이지로 이동한다.	당일 일정에 작성한 항목에 맞는 새로운 일정을 추가한다. 1.추가:: 새로운 일정을 추가한다. 2.장소:: 정확한 장소를 입력하는 검색창으로 이동한다.	[에러] 필수 항목을 작성하지 않고 일정을 추가하였다.

장소 검색 화면

[SCH(SEARCH), SCHEDULE04] 일정에서 정확한 장소를 검색할 수 있게 지원하는 화면이다.

지역검색 API를 이용하여 정확한 장소를 선택한다. 1.선택:: 장소 정보가 일정추가 항목에 들어간다. 2.정보:: 장소에 대한 정보창으로 이동한다.	[에러] 검색한 장소가 존재하지 않는다.	선택한 장소에 대한 정보가 출력된다. 해당 장소에 대한 리뷰 요약도 제공한다. 1.닫기:: 해당 페이지를 닫는다.

장소 검색 화면(일정 존재)

[SCHEDULE02] 전체 여행에 대한 요약과 세부 일정을 볼 수 있는 화면이다.

|
|
|
|   | |————————————————————–|————————————————————–|————————————————————–|—–| | 상단에서 전체 여행정보(항공권 일자, 항공사, 지역 위치, 탑승구, 탑승시간, 총 기간)를 볼 수 있다.
일정에 대한 정보를 알 수 있다. 1.지도:: 일정에 대한 동선을 볼 수 있는 일정 지도를 확장한다
(미리보기). 2.일정추가:: 당일의 새로운 일정을 추가하는 페이지로 이동한다. 3.일정수정:: 추가된 일정의 정보를 수정하는 페이지로 이동한다. 4.공유하기:: 해당 페이지를 Url로 공유한다. | [기능] 일정 삭제 아이콘은 우에서 좌로 슬라이딩 했을 때, 아이콘이 나타난다. 1.삭제:: 해당 일정을 삭제한다. | 추가되어 있는 일정을 수정한다. 제목, 장소, 시간, 내용을 수정할 수 있다. 1.수정:: 수정된 내용을 저장한다. |   | 일정 지도 화면

[SHCEDULE03] 전체 여행에 대한 요약과 세부 일정을 볼 수 있는 화면이다.

일정 화면에서 지도 클릭 시 나오는 미리보기 화면(지도 2D와 마커가 표시됨) 1.지도:: 일정 지도 화면으로 이동한다.	전체 일정에 대한 장소 위치를 Marker로 볼 수 있다. 1.전체:: 모든 일정에 대한 장소 Marker를 볼 수 있다. 2.Day ?:: 해당일 일정에 대한 장소Marker를 볼 수 있다. 3.‘<’,’>’:: 다른 일자의 Marker를 확인 할 수 있다. 4. Marker:: 관련 일정 제목과 수정 버튼을 볼 수 있다.	특정 일을 클릭하면, 해당 일 일정에 대한 Marker만 볼 수 있다.

일정 지도 화면

[SCHEDULE01] 전체 여행에 대한 요약과 세부 일정을 볼 수 있는 화면이다.

Marker 클릭 시 해당 일정 제목을 볼 수 있다. 1.수정:: 해당 일정을 수정 페이지로 이동한다.	추가되어 있는 일정을 수정한다. 제목, 장소, 시간, 내용을 수정할 수 있다. 1.수정:: 수정된 내용을 저장한다. 2.삭제:: 해당 일정을 삭제한다.	사용자의 실수를 고려하여, 3초 동안 일정 삭제 취소가 가능하다. 1.일정 삭제 취소:: 삭제된 일정을 되돌린다.

체크 리스트 화면

[CHK01, CHK02, CHK03] 여행 출발 전, 준비사항을 점검하는 페이지이다.

여행 전 각종 체크리스트(여행 필수품, 의류, 전자기기, 세면도구)를 생성하고, 점검할 수 있다. 1.여행 정보 수정::여행 전체에 대한 정보 수정 페이지로 이동한다. 2.여행 필수품:: 해당 카테고리에 저장된 체크 리스트를 확장한다. 3.의류, 전자기기, 세면도구:: <여행 필수품과="" 동일="">	특정 카테고리에 대한 체크 리스트 아이템을 확인한다. 1.여행 필수품:: 체크 리스트를 축소한다. 2.체크리스트 내용:: 각 내용에 대한 설명을 확장한다. 3.공유하기:: 전체 체크 리스트를 Url로 공유한다. 4,추가하기::체크리스트 항목 추가 페이지로 이동한다.	체크리스트 내용에 대한 설명을 확인할 수 있다. 1.체크리스트 내용:: 해당 내용에 대한 설명을 축소한다. 2.밑줄 정보:: 해당 용어에 대한 설명을 볼 수 있다.	호버링 혹은 클릭으로 underline되어있는 단어에 대해서 자세한 설명을 확인할 수 있다. 1.링크:: 해당 설명이 소개된 웹 사이트로 이동한다.

체크 리스트 화면

[CHK03] 여행 출발 전, 준비사항을 점검하는 페이지이다.

새로운 체크리스트를 추가한다. 물건 이름, 수량, 내용을 입력할 수 있다. 1.추가:: 해당 항목에 대한 체크리스트를 추가한다.	작성된 항목을 수정한다. 물건 이름, 수량, 내용을 변경할 수 있다. 1.삭제:: 카테고리를 삭제한다. 2.수정:: 카테고리를 수정한다.	[에러] 여행 필수품 수량을 미입력하였을 시 발생한다.	[에러] 여행 필수품에 대한 이름을 작성하지 않을 시 발생한다.

메뉴 번역 화면

[TRL01] 외국어로 작성된 메뉴판을 번역해주는 화면이다.

메뉴판을 캡처하는 화면이다. 1.카메라 아이콘:: 카메라로 이동 한다. 촬영 후 이미지가 저장된다. 2.주문:: 주문 내역을 추가하는 화면이다.	촬영된 메뉴판이 한국어로 번역되어 나타난다. 1.드래그:: 드래그한 영역이 마스킹되어 자동 번역된다.	사진메뉴에서 번역된 음식들이 수량 0개로 저장된다. ※총액이 0이어서 음성주문이 제한된다. 1.음성버튼:: 원어로 메뉴를 말해준다. 2. ‘+’,’-‘::메뉴의 수량을 조정한다.	수량 조절이 완료되면, 음성주문 버튼이 활성화된다. 1.음성 주문:: 번역된 문장을 TTS가 원어로 출력한다.

설정 화면

앱 설정을 수정하는 화면이다.

개인정보를 수정하는 화면이다. 1.계정 설정:: 개인 정보를 수정하는 페이지로 이동한다. 2.알림::알림을 키고 끈다. 3.고객지원:: 앱의 정보를 전달한다.	서비스 이용약관이다.	개인정보 처리방침이다.

계정 설정 화면

개인정보를 수정하는 화면이다.

계정 정보를 확인 가능하다. 1.수정:: 계정 닉네임 수정 페이지로 이동한다. 2.로그아웃:: 로그인 정보를 삭제하고, 시작화면으로 이동한다. 3.회원탈퇴:: 계정을 삭제한다.	계정 닉네임을 수정할 수 있다. 1.완료:: 닉네임 수정사항을 완료한다.	[예외] 서식 오류가 존재한다. (공백을 포함할 수 없다.)	[예외] 서식 오류가 존재한다. (첫 글자는 영어로 시작한다.)

계정을 삭제를 재확인하는 페이지 1.회원탈퇴:: 계정을 영구적으로 삭제한다. 2.취소:: 계정 삭제를 취소한다.