[정보처리기사] 6장 화면 설계

01. 사용자 인터페이스(UI)

     : 변경이 가장 많이 발생, 작업 시간↓, 업무 이해도↑, 수행 결과 오류↓

     

     CLI(Command Line Interface) : 텍스트 형태

     GUI(Graphical User Interface) : 아이콘이나 메뉴를 선택

     NUI(Natural User Interface) : 사용자의 말이나 행동으로 조작

     

     # 기본 원칙 : 직관성(누구나 쉽게 이해) / 유효성(정확하게 달성) / 학습성(쉽게 익힘) / 유연성(최대한 수용)

     # 설계 지침 : 사용자 중심 / 일관성 / 단순성 / 결과 예측 가능 / 가시선 / 표준화 / 접근성 / 명확성 / 오류 발생 해결

     # 설계 도구 : 와이어프레임(초기 제작, 뼈대 설계) / 목업(실제 화면과 유사하게 만든 정적인 형태의 모형) /

                       스토리보드 / 프로토타입(테스트 가능한 동적인 형태의 모형) / 유스케이스(문서화)

 

02. UI 스타일 가이드 작성

     : 구동 환경 정의 -> 레이아웃 정의 -> 네비게이션 정의 -> 기능 정의 -> 구성 요소 정의

    

     # 구동 환경 정의 : 프레임을 구분한 경우 / 프레임을 구분하지 않은 경우

     # 레이아웃 정의 : 상단 메뉴, 좌측 메뉴, 내용 구성, 하단 메뉴

     # 네비게이션 정의

     # 기능 정의 : 프로세스 모델링 정의(모든 활동) / 데이터 모델 정의(엔티티로 정의)

     # 구성 요소 정의 : 그릴드(테이블 형식)나 버튼 정의(기능 버튼, 검색 버튼, 그리드 관련 버튼, 기타 버튼)

 

03. UI 요구사항 확인

     : 목표 정의 -> 활동 사항 정의 -> UI 요구사항 정의

     

     # 목표 정의 : 인터뷰 진행 후 사용자 의견 수렴된 요구사항 정의

     (개별적 진행 / 다양한 의견 수렴 개인의 중요한 의견 놓치지 않도록 / 한시간 넘지 않게 / 리서치 시작 전)

     # 활동 사항 정의 : 필요한 예산과 일정 결정 / UI 디자인 방향 제시 / 정확히 이해하고 협의하도록 돕기

     # UI 요구사항 작성 : 실 사용자 중심 / 다양한 의견 수렴

     (요구사항 요소 확인 -> 정황 시나리오 작성 -> 요구사항 작성)

     - 요구사항 요소 확인 : 데이터 요구(초기에 확인) / 기능 요구(기능 요구 리스트) / 제품·서비스의 품질 / 제약사항

     - 정황 시나리오 작성 : 수행 방법 순차적 묘사 / 초기 시나리오

     - 요구사항 작성 : 정황 시나리오 토대로 작성

 

04. UI 프로토타입

     프로토타입 : 실제 동작하는 것처럼 만든 동적인 형태의 모형

     (최대한 간단하게 / 필요한 기능은 반드시 포함 / 계속 개선 및 보완 / 실제 사용자 대상으로 테스트)

     # 장점 : 사용자를 이해시키고 설득하기 쉽다 / 개발 시간↓ / 사전 오류 발견

     # 단점 : 작업 시간↑ / 필요 이상 자원 소모 / 중요한 작업 생략 가능성

     # 종류

     - 페이퍼 프로토타입 : 손으로 직접 작성

        # 장점 : 비용↓ / 회의 중 생성 가능 / 즉시 변경 가능 / 고객 기대↓ / 제작 기간↓

        # 단점 : 테스트 부적당 / 상호 관계 많은 경우 복잡 / 공유 어려움

     - 디지털 프로토타입 : 프로그램 사용하여 작성

        # 장점 : 최종 제품과 비슷하게 테스트 / 수정 쉬움 / 재사용 가능

        # 단점 : 프로그램 사용법 알아야 함

 

05. UI 흐름 설계

     : 기능 작성 -> 입력 요소 확인 -> 유스케이스 설계 -> 기능 및 양식 확인

     

     기능 작성 : 기능적 / 비기능적 요구사항 정리

     입력 요소 확인 : 기능 확인 / 입력 요소 확인 / 화면 확인 / 화면 간 흐름 확인

     유스케이스 설계

     기능 및 양식 확인 : 텍스트 박스 / 콤보박스 / 라디오 박스 / 체크 박스

 

06. UI 상세 설계

     : 요구사항 확인 -> UI 설계서 표지 및 개정 이력 작성 -> UI 구조 설계 -> 메뉴 구조 설계 -> 화면 설계

     

     요구사항 확인 : 최종적으로 확인 (요구사항 정의서)

     UI 설계써 표지 및 개정 이력 작성 : 어떤 부분 수정되었는지(v1.0) / 프로젝트명 포함 작성

     UI 구조 설계 : UI 요구사항과 UI 프로토타입 기초

     메뉴 구조 설계 : 사이트맵 구조

     (사이트맵 구조 설계 -> 사이트맵 상세 내용 표 형태 작성 -> 프로세스 정의서 작성)

     화면 설계 : UI 프로토타입과 UI 프로세스 참고