정보처리기사 실기 요약 정리 - 6. 화면 설계

 

이 글은 수제비 정보처리기사 실기 책을 요약정리한 것으로 저작권은 건기원에 있습니다.

6. 화면 설계

1) UI 요구사항 확인

UI(User Interface)

=> 사용자와 시스템 사이에서 의사소통할 수 있도록 고안된 물리적, 가상의 매개체

 

UI 유형 (CG NO: 이 영화는 CG가 NO)

CLI(Command Line Interface) : 명령어를 텍스트로 입력하여 조작

GUI(Graphical User Interface) : 그래픽 환경을 기반으로 한 사용자 인터페이스

NUI(Natural User Interface) : 키보드나 마우스 없이 신체 부위 이용하는 사용자 인터페이스

OUI(Organic User Interface) : 현실에 존재하는 모든 사물이 입출력장치로 변화할 수 있는 사용자 인터페이스

 

UI 설계 원칙 (직유학유: 정답을 직접 유도하거나 학습시켜서 유도함)

직관성 : 누구나 쉽게 이해하고, 쉽게 사용할 수 있어야 함

유효성 : 정확하고 완벽하게 사용자의 목표가 달성될 수 있도록 제작

학습성 : 초보와 숙련자 모두가 쉽게 배우고 사용할 수 있게 제작

유연성 : 사용자의 인터랙션을 최대한 포용하고, 실수를 방지할 수 있도록 제작

 

UI 설계 지침 (사일단결 가표접명오)

=> 사용자 중심, 일관성, 단순성, 결과 예측 가능, 가시성, 표준화, 접근성, 명확성, 오류 발생 해결

 

UI 요구사항

=> 사용자가 정보시스템을 구축하여 얻고자하는 최종 목적의 기준

기능적 요구사항 : 시스템이 제공하는 기능, 서비스에 대한 요구사항 분석

비기능적 요구사항 : 사용성 효율성, 신뢰성, 유지보수성, 재사용성 등 품질 관련 요구사항 검토

 

UI 표준 구성 (액정스패조: 모니터 액정에 스페이스가 조금 보임)

=> 전체적인 UX 원칙, 정책 및 철학, UI 스타일 가이드, UI 패턴 모델 정의, UI 표준 수립을 위한 조직 구성

 

UX(User Experience;사용자 경험)

=> 제품과 시스템, 서비스 등을 사용자가 직/간접적으로 경험하면서 느끼고 생각하는 총체적 경험

 

UI 지침(Guideline)

=> UI 표준에 따라 사용자 인터페이스 설계, 개발시 지켜야 할 세부 사항을 규정하는것을 의미

 

UI 지침 사용자 요구사항 도출 단계 순서

페르소나(Persona) 정의 -> 콘셉트 모델 정의 -> 사용자 요구사항 정의 -> UI 컨셉션

 

UI 개발을 위한 주요 기법

=> 3C 분석, SWOT 분석, 시나리오 플래닝, 사용성 테스트, 워크숍

 

사용성 테스트(Usability Test)

=> 사용자가 직접 제품을 사용하면서 미리 작성된 시나리오에 맞추어 과제를 수행한 후, 질문에 답하도록 하는 테스트

 

스토리보드(Storyboard)

=> UI 화면 설계를 위해서 정책이나 프로세스 및 콘텐츠의 구성, 와이어 프레임(UI, UX), 기능에 대한 정의, 데이터베이스 연동 등 구축하는 서비스를 위한 대부분 정보가 수록된 문서

 

UI 화면 설계 구분

=> 와이어 프레임, 스토리보드, 프로토타입

 

프로토타입

=> 컴퓨터 시스템이나 소프트웨어의 설계 또는 성능, 구현 가능성, 운용 가능성을 평가하거나 요구사항을 좀 더 잘 이해하고 결정하기 위하여 전체적인 기능을 간략한 형태로 구현한 시제품

 

스토리보드 작성 절차 (개서스 메추: 개인적으로 서비스가 좋은 야구팀은 메추이다)

전체 개요 작성 -> 서비스 흐름 작성 -> 스타일 확정 -> 메뉴별 화면 설계도 작성 및 상세설명 -> 추가 관련 정보 작성

 

UI 프로토타입 작성 시 고려 사항 (계범 목기 산유: 계획돈 범죄를 목격한 기사를 산으로 유인했다)

=> 프로토타입 계획 작성, 프로토타입 범위 확인, 프로토타입 목표 확인, 프로토타입 기간 및 비용 확인, 프로토타입 산출물 확인, 프로토타입 유의사항 확인

 

UI 프로토타입 제작 및 검토 프로세스

소프트웨어 아키텍처 설계 원리 확인 -> 프로토타입 유스케이스 작성 -> UI 요구사항을 반영한 프로토타입 제작 -> UI 적정성 검토

 

---

 

2) UI 설계

UI 흐름 설계

=> 업무의 흐름이나 업무 수행과 관련도니 일련의 클릭에 의한 화면의 위치와 흐름을 흐름도 형식으로 표현하는 활동

 

UI 설계 원리, UI 설계안의 적정성 확인

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

평가 차를 줄이기 위한 UI 설계 원리 : 수행한 키 조작 결과를 사용자가 빠르게 지각하도록 유도

 

UI 유스케이스 설계 단계

UI 요구사항을 바탕으로 액터별 시나리오 구상 -> UI 요구사항을 바탕으로 액터 세분화 -> UI 유스케이스 설계

 

UI 기능 및 양식 확인

Input Box 확인, 규칙 정의 : 필드, Label에 CSS 적용

Combo Box 확인, 규칙 정의 : 버튼 값 비워 두고 사용자가 선택

Radio Box 확인, 규칙 정의 : 많은 메뉴들 중에서 한 개만 선택하도록 강제하는 버튼

Check Box 확인, 규칙 정의 : 많은 메뉴들 가운데 한 개 또는 여러 개를 동시에 선택 가능하도록 하는 버튼

 

UI 설계 도구

화면 설계 도구 : 파워 목업, 발사믹 목업, 카카오 오븐

프로토타이핑 도구 : UX핀, 액슈어, 네이버 프로토나우

UI 디자인 도구 : 스케치, 어도비 익스피리언스 디자인

UI 디자인 산출물로 작업하는 프로토타이핑 도구 : 인비전, 픽사에이트, 프레이머

 

UI 흐름 설계 수행 절차

UI 설계안의 적정성 확인 -> 화면에 표현되어야 할 기능 및 비기능적 요구사항 검토 -> 화면의 입력 요소 및 유스케이스를 통한 UI 요구사항 확인 -> 유스케이스 설계 -> 기능 및 양식 확인

 

UI 상세설계 수행 절차

UI 요구사항 최종 확인 -> UI 구조 설계 -> 사용자 기반 메뉴 구조 설계 -> 화면 설계 -> 하위 시스템 단위의 내·외부 상세 화면과 폼 설계