[정보처리기사 이론 정리]사용자 인터페이스(UI)
<UI(User Interface) 개념>
넓은 의미에서 사용자와 시스템 사이에서 의사소통할 수 있도록 고안된 물리적, 가상의 매개체이며, 좁은 의미로는 정보 기기나 소프트웨어의 화면 등에서 사람이 접하게 되는 화면을 뜻하는 용어
<UI 설계 기본 원칙>
1. 직관성 - 누구나 쉽게 이해 / 쉽게 사용
2. 유효성 - 정확, 완벽하게 사용자 목표 달성
3. 학습성 - 초보, 숙련자가 모두 쉽게 배우고 사용
4. 유연성 - 사용자 인터랙션을 최대한 포용하고 실수 방지
<UI 흐름 설계>
업무 흐름과 업무수행에 의한 화면 위치, 흐름을 흐름도 형식으로 표현하는 것
수행 절차
1. UI 설계안 적정성 확인
2. 화면에 표현될 기능적, 비기능적 요구사항 검토
3. 화면 입력요소와 유스케이스로 UI 요구사항 확인
4. 유스케이스 설계 - UI 요구사항으로 액터별 시나리오를 구상하고 세분화해 UI 액터 설계
5. 기능, 양식 확인 - Input Box / Combo Box / Radio Box / Check Box 확인과 규칙 정의
<스토리보드>
UI 화면 설계를 위해서 정책이나 프로세스 및 콘텐츠의 구성, 와이어 프레임(UI, UX), 기능에 대한 정의, 데이터베이스의 연동 등 구축하는 서비스를 위한 대부분 정보가 수록된 문서로서, 디자이너와 개발자가 최종적으로 참고하는 산출 문서
<UI 품질 요구사항>
1. 사용성(Usablity)
사용자와 컴퓨터 사이에 발생하는 어떠한 행위를 정확하고 쉽게 인지 가능함을 의미한다. 이 품질 요구사항의 사용성에는 다음과 같은 3가지 특성이 있다.
(1) 이해성(Understandablility)
소프트웨어의 논리적인 개념과 적용 가능성(응용 가능성)을 분간하는 데 필요한 사용자의 노력 정도에 따른 소프트웨어 특성
(2) 학습성(Learnability)
소프트웨어 애플리케이션 익히는데 필요한 사용자의 노력 정도에 따른 특성
(3) 운용성
소프트웨어의 활용과 운용 통제에 필요한 사용자의 노력 정도에 따른 특성
2. 기능성
3. 신뢰성
4. 효율성
5. 유지 보수성
6. 이식성
<UI 시나리오 문서 작성의 요건>
1. 완전성(Complete)
UI 시나리오는 누락이 없어야 하고, 최대한 빠짐없이 가능한 한 상세하게 기술한다.
시스템 기능보다 사용자의 태스크에 초점을 맞춰 기술한다.
2. 일관성(Consistent)
서비스에 대한 목표, 시스템 및 사용자의 요구사항이 일관성이 있어야 하고, 모든 문서의 UI 스타일(Flow 또는 Layout)을 일관적으로 구성한다.
3. 이해성(Understandable)
처음 접하는 사람도 이해하기 쉽도록 구성하고 설명해야 하고, 이해하지 못하는 추상적인 표현이나 이해하기 어려운 용어는 사용하지 않아야 한다.
4. 가독성(Readable)
문서를 쉽게 읽을 수 있어야 하고(문서 템플릿과 타이포그래피), 표준화된 템플릿을 작성하여 적용한다.
버전의 넘버링은 v1.0, v2.0 등과 같이 일관성 있게 하고, 시각적인 효과를 위한 하이라이팅은 일관성 있게 활용한다.
5. 추적 용이성(Traceable)
쉽게 추적이 가능해야 하고, 변경 사항들이 언제, 어디서, 어떤 부분들이, 왜 발생하였는지 추적이 쉬워야 한다.
6. 수정 용이성(Modifiable)
쉽게 변경이 가능해야 하고, 수정 또는 개선 사항을 시나리오에 반영함에 있어 쉽게 적용할 수 있어야 한다.
동일한 수정 사항을 위해 여러 문서를 편집하지 않도록 한다.
<사용자 인터페이스(UI)에서 활용되는 프로토타입(Prototype)의 개념>
컴퓨터 시스템이나 소프트웨어의 설계 또는 성능, 구현 가능성, 운용 가능성을 평가하거나 요구사항을 좀 더 잘 이해하고 결정하기 위하여 전체적인 기능을 간략한 형태로 실제로 구현한 시제품이다.
<UI 설계 도구별 분류>
1. 화면설계 도구
발사믹 목업(Balsamiq Mockups), 파워 목업(Power Mockup), 카카오 오븐(Oven)
2. 프로토타이핑 도구
UX 핀(UXPin), 네이버 프로토나우(ProtoNOW), 액슈어(AXURE)
3. UI 디자인 도구
스케치(Sketch), 어도비 익스피리언스 디자인 CC
4. UI 디자인 산출물로 작업하는 프로토타이핑 도구
인비전(Invision), 픽사에이트(Pixate), 프레이머(Framer)
<UI 지침>
UI표준에 따라 사용자 인터페이스 설계, 개발 시 지켜야할 세부 사항을 규정하는 가이드라인
‘목표 정의, 프로젝트 계획, 요구사항 정의, 설계 및 구현, 테스트, 배포 및 관리’ 요소로 구성
<UI 패턴 모델(UI Pattern Model)>
CRUD 방식을 기반으로 데이터의 입력과 출력을 처리하는 화면 흐름을 포함하여 오퍼레이션 방식에 대한 표준 절차를 표시하고 개발하는 것으로, 표준 프레임워크로 개발하고, 유스케이스를 이용해서 패턴별 표준 개발 방법 총 7가지 영역을 정의한 UI 모델
<UI 유형>
1. GUI(Graphical User Interface, 그래픽 반응 기반 인터페이스)
그래픽 환경을 기반으로 한 마우스나 전자펜을 이용하는 사용자 인터페이스
2. CLI(Command Line Interface, 정적 텍스트 기반 인터페이스)
명령어를 텍스트로 입력하여 조작하는 사용자 인터페이스