[정보처리기사_실기] Chapter 6. 화면 설계

■ UI !! - User Interfae : 사용자 인터페이스다.

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

[ 종 류 ]

- CLI (Command Line Interface) : 명령과 출력이 텍스트 형태로 이루어지는 인터페이스 

- GUI (Graphical User Interface) : 아이콘이나 메뉴를 마우스로 선택하여 작업을 수행하는 그래픽 환경의 인터페이스 

  + 사용자가 문자 명령어 대신 이미지를 사용해 전자기기와 상호 작용할 수 있도록 하는 일종의 사용자 인터페이스

- NUI (Natural User Interface) : 사용자의 말이나 행동으로 기기를 조작하는 인터페이스 

 

■ UI 설계 원칙  [ 직 유 학 유 ] 

직관성(누구나 쉽게 이해) / 유효성(사용자의 목적이 정확) / 학습성(쉽게 배움) / 유연성(사용자 요구사항 수용, 오류 최소화)

 

■ UI 설계 화면 기법

- 와이어 프레임 : 손그림, 파워포인트, 키노트, 일러스트, 포토샵 등으로 개략적인 레이아웃이나 UI등에 대한 뼈대를 설계 

- 스토리 보드 

- 프로토타입 

 

■ UI 설계 도구 종류 

와이어 프레임(뼈대 제작) / 목업(와이어프레임보다 좀더 실제화면과 유사하게 만든 정적인 형태의 모형) / 스토리보드/ 프로토타입 / 유스케이스 

 

■ UI 품질 요구사항 특성 (ISO/IEC 9126)  [ 기 신 사 효 유 이 ]

기능성 / 신뢰성 / 사용성 / 효율성 / 유지보수성 / 이식성 

* 사용성 : [ 이 학 운 ] ▷ 이해성, 학습성, 운영성 

 

■ 유스케이스 (Use Case)

- 사용자 측면에서의 요구사항으로, 사용자가 원하는 목표를 달성하기위해 수행할 내용을 기술함 

*참고 (이런모양)

 

■ 프로토타입 (Prototype)

- 새로운 컴퓨터 시스템이나 소프트 웨어의 설계 또는 성능, 구현 가능성, 운용 가능성을 평가하거나 

요구사항을 좀 더 잘 이해하고 결정하기 위해서 기능을 간략한 형태로 구현한 시제품이다. 

- 사용자의 요구사항이 정확히 반영될 떄까지 개선, 보완, 보강하여 최종 설계가 완성 

+ 와이어프레임이나 스토리보드 등에 인터렉션을 적용함으로써 실제 구현된 것처럼 테스트가 가능한 동적인 형태의 모형 

+ 프로토타입은 사용성테스트나 작업간 서비스 이해를 위해 작성하는 샘플 

 

■ 프로토타입의 종류 

- 직접 손으로 작성하는 페이퍼 프로토 타입(Paper Prototype) : 화이트보드, 펜, 종이, 포스트 잇 사용 

- 컴퓨터 등 도구를 사용하여 작성하는 디지털 프로토 타입(Digital Prototype) : 파워포인트, 아크로뱃, Adobe 등 사용

 

■ 스토리보드

스토리보드는 디자이너와 개발자가 최종적으로 참고하는 산출 문서

+ 정책이나 프로세스 및 콘텐츠의 구성, 와이어프레임, 기능에 대한 정의, 데이터베이스 연동 등 서비스 구축정보가 수록된 설계 산출물이다. 

 

■ UI 시나리오 

시나리오 작성은 UI 상세설계에 있어 반드시 필요한 사항이다. 

 

■ UI 시나리오 문서 작성요건 [ 완 일 이 가 추 수 ] 

완전성 / 일관성 / 이해성 / 가독성 / 추적 용이성 / 수정 용이성 

 

■ 웹 접근성 원칙 [ 인 운 이 견 ] 

인식의 용이성 : 모든 컨텐츠는 사용자가 인식할 수 있어야한다 + 장애인도 인식가능한 명확한 콘텐츠 

운용의 용이성 : 웹사이트 이동, 입력 등 운용에 있어 불편함이 없어야한다는 원칙 + 키보드 접근, 쉬운 네비게이션, 광과민성 발작예방 등 

이해의 용이성 : 가독성, 예측 가능성, 입력도움(오류방지), 컨텐츠 논리성, 접근정보의 수용의 어려움X 

견고성 : 웹 콘텐츠는 미래의 기술로도 접근할 수 있도록 견고하게 만들어야함 + 마크업언어 문법준수(오류방지), 웹어플리케이션 접근 준수(접근성)

 

■ UI (사용자 인터페이스) 설계 지침 

- 사용자 중심  : 실 사용자에 대한 이해가 바탕 

- 일관성 : 버튼이나 조작 방법의 일관성 

- 단순성 : 조작방법이 단순 

- 결과 예층 가능 

- 가시성 : 최대한 조작이 쉽게 

- 표준화 : 한번 학습으로 쉽게 이용 

- 접근성 : 사용자의 연령, 성별, 인종 등 다양한 계층이 사용 

- 명확성 

- 오류 발생 해결 

 

■ 네비게이션 Navigation 

내비게이션은 사용자가 원하는 정보를 빠르게 찾을 수 있도록 안내하는 것으로 메뉴, 버튼, 링크 등으로 구성되는 것

 

■ 컴포넌트 (Component)

특정한 기능을 수행하기 위해 독립적으로 개발되어 보급되는 잘 정의된 인터페이스를 가지며 다른 부품과 조립되어 응용시스템을 구축하기 위해 사용되는 소프트웨어