[2020 정보처리기사 실기 암기] 6-1. UI 요구사항 확인

* UI 

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

 

* UI 유형

- CLI : 정적인 텍스트 기반 인터페이스, 명령어를 텍스트로 입력

- GUI : 그래픽 반응 기반 인터페이스, 마우스나 전자펜

- NUI : 직관적 사용자 반응 기반 인터페이스, 신체부위(터치, 음성)

- OUI : 유기적 상호작용 기반 인터페이스, 현실에 존재하는 모든 사물이 입출력장치

 

* UI 설계 원칙

 직관성, 유효성, 학습성, 유연성

- 직관성 ; 누구나 쉽게 이해하고 쉽게 사용 

- 유효성 : 목표가 달성될 수 있도록 제작, 쉬운 오류 처리 및 복구

- 학습성 : 초보와 숙련자 모두 쉽게 배우고 사용

- 유연성 : 사용자의 인터렉션 최대한 포용하고 실수 방지

 

* UI 설계 지침

 - 사용자 중심 : 사용자가 이해하기 쉽고 편하게 사용

 - 일관성 : 버튼이나 조작 방법을 사용자가 기억하기 빠르고 쉽게 습득하도록 설계

 - 단순성 : 조작 방법이 간단하게, 인지적 부담 최소화

 - 결과 예측 가능 : 작동시킬 기능만 보고 결과 예측이 가능하도록

 - 가시성 : 주요 기능을 메인 화면에 노출하여 쉬운 조작 가능

 - 표준화 : 디자인을 표준화하여 기능 구조의 선행 학습 이후 쉽게 사용 가능

 - 접근성 : 사용자 직무, 연령, 성별 등이 고려된 다양한 계층 수용

 - 명확성 : 사용자가 개념적으로 쉽게 인지

 - 오류 발생 해결 : 사용자가 오류에 대한 상황을 정확하게 인지하도록 함

 

* UI 요구사항

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

 요구사항은 시스템 개발과정 전 기간 동안 기준이 되고, 시스템 개발 종료 및 검수 기준

 

* 기능적 요구사항

  시스템의 입출력, 저장할 데이터, 수행할 연산, 기타 요구사항

* 비기능적 요구사항

  품질(사용성, 효율성, 신뢰성, 유지보수성, 재사용성), 시스템 환경(플랫폼, 사용 기술), 프로젝트 계획(비용, 일정)

 

* UI 스타일가이드 구성 요소

 - 레이아웃 정의 : 화면 구조, 상단 영역, 좌측 영역, 콘텐츠 영역, 하단 영역, 사용자 환경에 맞춘 페이지 폭 정의

 - 메뉴 내비게이션 정의 : 기본 내비게이션, 변형, 메뉴 구조가 2뎁스인 경우 적용, 메뉴 구조가 복잡할 경우 적용

 - 공통 표준 화면 정의 : 검색 영역이나 탭 메뉴 등 공통된 표준 화면을 정의

 - 구성요소 정의 : 그리드, 버튼/ 컨트롤 타입, 페이지 요소, 팝업 요소, 경고 요소 등 화면 구성에 필요한 요소 정의

 

* UI 스타일 가이드 구성 요소 중 UI 구동 환경 

 - 모니터 해상도 : 1280*1024 기본, 스크롤이 생기지 않도록 설정

 - 프레임세트 확인 : 속도 및 업무 편의성을 고려하여 영역별 프레임 구분 

 - 프레임세트 적용 : 프레임 구분, 단일 프레임, 웹 애플리케이션 경우

 

* UI 스타일 가이드 구성 요소 중 레이아웃 정의

 - 화면 구조 정의 : 상단 좌측 콘텐츠 영역, 하단 메뉴 구성(추가 및 제외)

 - 상단 메뉴 구성 정의 : 필수, 로고, 사용자, 바로가기, 메뉴, 주메뉴, 시스템 전체 페이지에 동일하게 적용

 - 좌측 메뉴 구성 정의 : 서브 메뉴, 배너, 시스템별 서브 페이지에 선택 적용

 - 콘텐츠 구성 정의 : 필수, 메인 이미지, 시스템별 구성 콘텐츠 존재

 - 하단 메뉴 구성 정의 : 회사 CI, 저작권 등, 회사 상황에 맞게 적용 및 삭제

 - 사용 환경에 맞춰 페이지 폭 정의 : 브라우저 사이즈에 따라 페이지 폭 크기 유동적 적용

 

* UI 지침

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

 1) 페르소나 정의

 2) 콘셉트 모델 정의

 3) 사용자 요구사항 정의

 4) UI 컨셉션

 

* UX

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

 

* UI 개발 필요성 및 목표 공유 주요 기법

 - 3C 분석 : 고객, 자사, 경쟁사 비교

 - SWOT 분석 : 강점, 약점, 기회, 위협

 - 시나리오 플래닝 : 불확실성이 높은 상황 변화 예측하고 시나리오 설계

 - 사용성 테스트

 - 워크숍 : 소집단 인원으로 새로운 지식, 기술, 아이디어, 방법 교환하고 검토하는 연구회

 

* 사용성 테스트

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

 

* 스토리보드

  UI 화면 설계를 위해 정책이나 프로세스 및 콘텐츠 구성, 와이어 프레임(UI/UX), 기능에 대한 정의, 

  데이터베이스 연동 등 서비스 구축을 위한 대부분 정보가 수록된 문서

 

* UI 화면 설계 구분

 - 와이어 프레임 : 화면구성 협의, 간략한 흐름 공유 (파워포인트, 키노트, 스케치, 일러스트)

 - 스토리보드 : (파워포인트, 키노트, 스케치)

 - 프로토타입 : 컴퓨터 시스템, 소프트웨어 설계, 성능, 구현 가능성, 응용 가능성을 평가,

                    요구사항 이해와 결정을 위해 간략하게 구현한 시제품

 

* 스토리보드 작성 절차

 1) 전체 개요 작성

 2) 서비스 흐름 작성

 3) 스타일 확정

 4) 메뉴별 화면 설계도 작성 및 상세 설계

 5) 추가 관련 정보 작성

 

* UI 프로토타입 제작 절차

 1) 소프트웨어 아키텍처 설계 원리 확인

 2) 프로토타입 유스케이스 작성

 3) UI 요구사항 반영한 프로토타입 제작

 4) UI 적정성 검토

 

* 프로토타이핑 제작 순서

 1) UI 페이퍼 프로토타이핑 작성 : 종이와 펜

 2) 디지털 편집기 기반 프로토타이핑 초기 작성

 3) HTML 기반 디지털 프로토타이핑 초기 작성