본 문서는 화면설계서에 대하여 기술한다.

앱아이콘.png

버전 V0.3
작성일 2023.03.10
작성자 이진욱

목차

1. 변경 내역

버전 작성자 내용
V0.1 이진욱 첫 화면 설계서 작성
V0.2 이진욱 설명 수정
V0.3 이진욱 음성 입력에 대한 튜토리얼 변경과 일부 상세 설명 추가, 그림 변경

2. 화면 흐름도 (연동 흐름도)

연동 흐름도.png

3. 화면 구성 및 설명

3-1. 튜토리얼 화면 구성

그림 1. 튜토리얼 시작 화면

그림 1. 튜토리얼 시작 화면

그림 2. 상단 설명 화면

그림 2. 상단 설명 화면

그림 3. 하단 설명 화면

그림 3. 하단 설명 화면

그림 4. 튜토리얼 마무리.

그림 4. 튜토리얼 마무리.

예시 화면명 화면ID 설명
그림1 튜토리얼_시작 Tuto_001 앱을 처음 실행했을 때 나오는 화면. 텍스트 음성으로 제공.
터치 / 음성 입력(예: ‘다음’)시 Tuto_002 으로 이동
그림2 튜토리얼_상단설명 Tuto_002 앱 상단부에 대한 설명. 텍스트 음성으로 제공.
터치 / 음성 입력(예: ‘다음’)시 Tuto_003 으로 이동
그림3 튜토리얼_하단설명 Tuto_003 앱 하단부에 대한 설명. 텍스트 음성으로 제공.
터치 / 음성 입력(예: ‘다음’)시 Tuto_004 으로 이동
그림4 튜토리얼_마무리 Tuto_004 튜토리얼에 대한 마무리 음성 명령어에 대해 재차 설명. 텍스트 음성으로 제공.
터치 / 음성 입력(예: ‘다음’, ‘메인’)시 Main_001 으로 이동

3-2. 메인 화면 구성, UI 요소 설명

그림 5. 기본 화면, 화면정보 선택

그림 5. 기본 화면, 화면정보 선택

그림 6. 프로그램 정보 설명 선택

그림 6. 프로그램 정보 설명 선택

그림 7. 인물 정보 설명 선택

그림 7. 인물 정보 설명 선택

그림 8. 음악 정보 설명 선택

그림 8. 음악 정보 설명 선택

UI 요소명 요소ID 설명
1 기능 버튼 Btn_main 튜토리얼 이후 처음 메인 화면에 진입 시 음성 송출: “메인 화면에 진입하셨습니다.”
터치 / 음성 입력(예: ‘기능’ - 화면, 프로그램, 인물 / 사람, 음악 / 노래, ‘설명’ 와 같은 핵심 키워드 인식) 시 기능 설명 텍스트를 음성으로 송출하고, 활성화된 기능을 수행한다. 이후 2번 UI의 텍스트를 변경하고 2번 UI의 텍스트를 음성으로 송출하게 된다.
위쪽으로 스와이프도 동일한 역할을 수행한다.
음성 입력으로 활성화되었다고 표시되지 않은 기능을 말한다고 해도, 기능이 수행되고 자동으로 3번 UI의 버튼이 변경되어 표시되어야 한다.
2 설명 텍스트 구역 Desc_area 안내 텍스트가 쓰여지는 구역. 기능 활성화 시 결과값으로 텍스트가 바뀌게 된다. 음성 입력 (ex: ‘다시’ 등의 핵심 키워드 인식) 으로 다시 텍스트를 음성으로 재생 가능하다.
3 기능 모드 선택 구역 func_select 기능 모드를 터치 / 음성 입력 (예: ‘모드 변경’) 로 전환할 수 있는 구역. 각 영역 터치로 기능을 전환할 수 있으며,
아래쪽 스와이프로 ‘화면 정보 → 프로그램 정보 → 인물 정보 → 음악 정보’ 순으로 토글 변경할 수 있다.
음성 입력으로 기능이 활성화 된 경우 자동으로 해당 기능이 활성화된 것처럼 표시가 변경되어야 한다.
각 기능 버튼이 터치될 경우, 기능 음성 명령어에 대한 정보를 다시 설명한다. ‘화면 정보’ 의 경우 ‘화면’, ‘프로그램 정보’ 의 경우 ‘프로그램’, ‘인물 정보’ 의 경우 ‘사람’, ‘인물’, ‘음악 정보’ 의 경우 ‘노래’, ‘음악’ 을 음성으로 송출해 주어야 한다.