5. 화면 설계서 작성 양식 - TEAM-PROJECT-ACC/trip-at-five-client GitHub Wiki
화면설계서
작성자 : 장원일
참조
https://thinkhubhee.tistory.com/1
https://blog.naver.com/soomichip_/223128859692
https://blog.naver.com/hsh-0825/222252419062
https://grow-s0.tistory.com/69
https://thinkhubhee.tistory.com/63
https://yozm.wishket.com/magazine/detail/1606/
https://blog.naver.com/soomichip_/223128859692
포함되어야 하는 내용
-
수정 이력 관리 : 표 형태의 수정 날짜, 버전 명, 수정 내용, 수정자 기록
-
기획 의도 / KPI : 기획한 서비스의 의도, 목표, 측정 가능한 과업 목표 작성
-
프로세스 플로우 차트 : 사용자 또는 케이스 별 프로세스 플로우
-
프로젝트에 포함된 모든 화면 목록(IA 등)과 화면이 없는 API 등의 개발 대상 작성
-
Wireframe (Mock-up) : 케이스 별 상세 세분화
-
기능명세서 추가 (Description) : Wireframe에 숫자를 표시하여 해당 숫자에 해당하는 설명, 로직, 디자인 솔루션 등 설명 가능한 모든 것을 기입
육하원칙에 따라 케이스별로 작성하고, 단위별로 분기된 서비스를 기능 단위로 나누어 관리
버전 관리 (History)
수정 또는 신규 개발된 내용을 버전, 버전 업데이트 시 날짜와 함께 기록 (수정 이력 관리)
기능 구조
화면 또는 기능 단위로 서비스를 분기하여 트리 형태의 구조 작성 (프로세스 플로우 차트)
화면 목록
서비스에 필요한 화면을 대메뉴, 중메뉴, 화면 ID, 화면 이름, 요약 설명, 비고 등으로 기록하여 목록 작성 (개발 대상 작성)
흐름도 (Flow-chart)
데이터가 필요한 화면 또는 기능을 분류하여 흐름도 작성
화면설계서 문서 목록 정리
1. 화면 목록 정리
- 대메뉴, 중메뉴, 페이지 id, 페이지 이름, 페이지 설명, 비고/기타(Related id)
1. 메인 화면
-
검색으로 접근 시 가장 첫 화면/기본 화면
-
인기/추천 등 카테고리 별 숙소 목록 출력
-
지역 명, 숙박 업소 명으로 검색 영역
-
지역 명과 지역 대표 사진 데이터를 포함한 카드 형식 목록
-
평점 높은 순의 숙소 TOP5
-
이번 달의 평점 높은 순의 숙소 TOP5
2. 회원가입
- 사용자 회원 정보 입력 페이지
- 필수 항목 : 이메일, 비밀번호, 생년월일, 전화번호 / 선택 항목 : 닉네임
3. 로그인
- 이메일, 비밀번호 입력 페이지
- 소셜 로그인 버튼
4. 마이페이지
- 메인
- 장바구니, 예약 내역의 요약 정보 조회 페이지
- 회원 정보 수정
- 회원 가입 시 입력한 회원 정보 수정 페이지, 필수 입력 항목 제외 선택 항목만 수정 가능
- 회원 탈퇴
- 비밀번호, 비밀번호 확인 입력 후 회원 탈퇴 요청 페이지
- 관리자 1:1 문의
- 서비스 관리자에게 1:1로 문의 요청 페이지
-
예약 내역 조회
- 최근 날짜 기준 내림차순으로 숙박 예약 정보를 조회 후 예약 취소하는 페이지
-
챌린지 목록 조회
- 챌린지 목록 조회 및 진행율을 확인하고 완료 시 혜택을 수령하는 페이지
- 장바구니
- 장바구니에 담은 숙소 목록을 아래로 스크롤하며 목록 개수만큼 모두 조회하는 페이지
5. 관리자 페이지
- 숙박 업소
- 숙박 업소의 모든 목록을 조회 또는 검색으로 특정 숙박 업소를 조회하는 페이지
- 결제 내역
- 실시간으로 모든 결제 내역을 조회 또는 회원 아이디, 전화 번호 값으로 특정 결제 내역을 조회하는 페이지
- 1:1 문의
- 사용자가 요청한 1:1 문의 내용을 조회하여 답변을 입력하여 전달하는 페이지
6. 숙박 업소
- 메인
- 사용자가 검색한 모든 숙박 업소의 목록을 조회하는 페이지
- 상세 정보
- 해당 숙박 업소의 기본 정보, 후기 정보, 지도 정보 등 관련 정보를 전달하는 페이지
7. 예약/결제 페이지
- 예약
- 예약 정보 출력 및 예약자 명, 전화번호, 쿠폰을 입력 받는 페이지
- 결제
- 결제 완료 후 완료 정보를 출력하는 페이지
2. 흐름도 정리
- 화면 목록에 기반하여 화면 흐름도 작성