[2020 정보처리기사 실기 암기] 6-2. UI 설계

* UI 흐름 설계

  업무 흐름이나 업무 수행과 관련된 일련의 클릭에 의한 화면의 위치와 흐름을 흐름도 형식으로 표현

 

* UI 설계서 구성요소

 - UI 설계서 표지 : UI 설계서에 포함될 프로젝트 명 또는 시스템 명 포함

 - UI 설계서 개정 이력 : 초기 버전 1.0, 변경이나 보완 충분하면 X.0으로 바꿈

 - UI 요구사항 정의 : UI 요구사항을 재확인하고 정의

 - 시스템 구조 : UI 프로토타입 재확인, UI 요구사항들과 UI 프로토타입 기초해서 설계

 - 사이트 웹 : UI 시스템 구조의 내용을 사이트 맵 형태로 작성, 사이트 맵 상세 내용을 표 형태로 작성

 - 프로세스 정의 : 사용자 관점에서 요구되는 프로세스들을 진행 순서에 맞추어 정리

 - 화면 설계 : 페이지별 필요한 화면 설계, 고유 ID 부여와 별도 표지 페이지, 화면 별 필요한 내용 설계

 

* UI 설계 원리

 - 실행차 줄이기 위한 UI 설계 원리 : 사용 의도 파악, 행위 순서 규정, 행위의 순서대로 실행

 - 평균차 줄이기 위한 UI 설계 원리 : 수행 키 조작결과 지각유도, 변화된 시스템 상태 인지 유도, 원래 의도와 유사 정도

 

* UI 흐름 설계 수행 절차

 1) UI 설계안의 적정성 확인

 2) 화면에 표현되어야 할 기능 및 비 기능적 요구사항 검토

 3) 화면의 입력 요소 및 유스케이스를 통한 UI 요구사항 확인

 4) 유스케이스 설계

 5) 기능 및 양식 확인

 

* UI 흐름 설계 중 화면에 표현되어야 할 요구사항

 - 기능적 요구사항 : 입출력, 데이터 / 회원 등록, 삭제, 수종, 이벤트 시 필요한 기능, 검색은 쉽고 빠르게

 - 비기능적 요구사항 : 품질관련, 시스템 환경 요구사항 / OS에 종속되지 않게, 일부 오류로 작동 불능되지 않게

 

* UI 유스케이스 설계 단계

 1) UI 요구사항을 바탕으로 액터 별 시나리오 구상

 2) UI 요구사항을 바탕으로 액터 세분화

 3) UI 유스케이스 설계

 

* UI 흐름 설계 중 기능 및 양식 확인 단계

 - INPUT BOX 확인, 규칙 정의 : 필드 길이와 자료 길이 일치, 텍스트 정렬은 가운데 정렬

 - COMBO BOX 확인, 규칙 정의 : 초기 설정 값은 자주 사용하는 값, 버튼 값을 비우고 사용자가 정의하게 함

 - RADIO BOX 확인, 규칙 정의 : 메뉴 중 하나만 선택하도록 강제하는 버튼, 버튼은 텍스트와 정렬 맞도록 CSS 적용

 - CHECK BOX 확인, 규칙 정의 : 체크박스 버튼은 텍스트와 정렬 맞도록, 초기 값은 자주 사용하는 값 우선 적용

 

* UI 상세설계 수행 절차

 1)UI 요구사항 최종 확인

 2)UI 구조 설계

 3)사용자 기반 메뉴 구조 설계

 4)화면 설계

 5)하위 시스템 단위의 내외부 상세 화면과 폼 설계

 

* UI 검토 및 보완

 - UI 검토 수행 : 반복적 검토, UI 스토리보드로 페이퍼 프로토타입 평가는 짧게

 - UI 검토 보완 : UI 검토 수행으로 사용자 평가 결과를 토대로 설계 보완

 - 사용성 검토 및 검증 수행 : 고수준 프로토타입 활용으로 내부 개발자 및 전문가들의 UI 사용성 평가를 통해 개선 사항 반영

 

* 화면설계 도구

 - 파워목업 : 파워포인트에 추가 메뉴 설치로 목업 기능 사용하도록 지원

 - 발사믹 목업 : 스케치 느낌으로 심플하게 컨셉 전달

 - 카카오 오븐 : 카카오에서 제작한 프로토타이핑 도구

 

* 프로토타이핑 도구

  UX핀, 액슈어, 네이버 프로토나우