2020. 6. 26. 18:42ㆍ정보보안/정보처리기사
사용자 인터페이스(User Interface)
- UI는 사용자와 시스템 간의 상호작용이 원할하게 이뤄지도록 도와주는 장치나 소프트웨어를 의미
UI의 종류
1. GUI : 그래픽 환경
2. CLI : 텍스트 형태
3. NUI(Natural User Interface) : 사용자의 말이나 행동으로 기기를 조작하는 인터페이스
4. VUI(Voice User Interface) : 사람의 음성으로 기기를 조작
5. OUI(Organic User Interface) : 모든 사물과 사용자 간의 상호 작용을 위한 인터페이스(IoT, VR, AR 등)
UI의 기본 원칙
1. 직관성 : 누구나 쉽게 이해하고 사용할 수 있어야 한다.
2. 유효성 : 사용자의 목적을 정확하고 완벽하게 달성해야 한다.
3. 학습성 : 누구나 쉽게 배우고 익힐 수 있어야 한다.
4. 유연성 : 사용자의 요구사항을 최대한 수용하고 실수를 최소화 해야 한다.
UI 설계 지침
1. 사용자 중심 : 사용자가 쉽게 이해하고 편리하게 사용할 수 있는 환경을 제공, 사용자에 대한 이해가 바탕이 되어야 함
2. 일관성 : 버튼이나 조작 방법 등을 인관성있게 제공하므로 사용자가 쉽게 기억하고 습득할 수 있게 설계
3. 단순성 : 조작 방법을 단순화시켜 인지적 부담을 감소시켜야 한다.
4. 결과 예측 가능 : 작동시킬 기능만 보고도 결과를 미리 예측할 수 있게 설계해야 한다.
5. 가시성 : 메인 화면에 주요 기능을 노출시켜 최대한 조작이 쉽도록 설계해야 한다.
6. 표준화 : 기능 구조와 디자인을 표준화하여 한 번 학습한 이후에는 쉽게 사용할 수 있도록 설계해야 한다.
7. 접근성 : 사용자의 연령, 성별, 인종 등 다양한 계층이 사용할 수 있도록 설계해야 한다.
8. 명확성 : 사용자가 개념적으로 쉽게 인지할 수 있도록 설계해야 한다.
9. 오류 발생 해결 : 오류가 발생하면 사용자가 쉽게 인지할 수 있도록 설계해야 한다.
UI 설계 도구
1. 와이어 프레임(Wireframe) : 기획 단계의 초기에 제작, 뼈대를 설계하는 단계
2. 목업(Mockup) : 와이어프레임보다 좀 더 실제 화면과 유사하게 만든 정적인 형태
3. 스토리보드(Story Board) : 와이어프레임에 콘텐츠에 대한 설명, 페이지 간 이동 흐름 등을 추가한 문서
4. 프로토타입(Prototype) : 와이어프레임이나 스토리보드 등에 인터랙션을 적용함으로서 실제 구현된 것처럼 테스트가 가능한 동적인 형태의 모형
5. 유스케이스(Use Case) : 사용자 측면에서의 요구사항으로 사용자가 원하는 목표를 달성하기 위해 수행할 내용을 기술
UI 표준 및 지침
웹의 3요소
1. 웹 표준 : 웹에서 사용되는 규칙 또는 기술을 의미하는 것으로, 웹 사이트 작성 시 이용하는 HTML, JavaScript 등에 대한 규정, 웹 페이지가 다른 기종이나 플랫폼에서도 구현되도록 제작하는 기법 등을 포함
2. 웹 접근성 : 누구나, 어떠한 환경에서도 웹 사이트에서 제공하는 모든 정보를 접근하여 이용할 수 있도록 보장하는 것을 의미
3. 웹 호환성 : 하드웨어나 소프트웨어 등이 다른 환경에서도 모든 이용자에게 동등한 서비스를 제공하는 것을 의미
UI 스타일 가이드 작성 순서
구동 환경 정의 → 레이아웃 정의 → 네비게이션 정의 → 기능 정의 →구성 요소 정의
1. 구동 환경 정의 : 컴퓨터 OS, 웹 브라우저, 모니터 해상도, 프레임 세트 등을 사용 환경에 적합하도록 규정하는 단계
2. 레이아웃 정의 : 화면 구조를 정의하며 각 영역의 메뉴를 구성하는 단계
3. 네비게이션 정의 : 네비게이션의 메뉴 타입을 선택하여 적용하는 단계
※ 네비게이션은 사용자가 원하는 정보를 빠르게 찾을 수 있도록 안내하는 것으로 메뉴, 버튼, 링크 등으로 구성
4. 기능 정의 : 시스템에 적용할 업무 과정에서 일어나는 모든 활동이나 필요한 데이터 간의 관계 등을 논리적인 모델로 상세화 하는 단계
※ 프로세스 모델링 정의 : 시스템에 적용할 업무에서 발생할 수 있는 모든 활동들을 쉽게 파악할 수 있도록 업무 기능 모델링을 정의한다.
※ 데이터 모델 정의 : 업무 처리 과정에서 필요한 데이터를 엔티티로 정의하고, 이를 기반으로 엔티티 간의 관계를 논리적 데이터 모델로 정의한다.
5. 구성 요소 정의 : 화면에 표시할 그리드나 버튼 등을 정의하는 단계
※ 그리드 : 데이터를 테이블 형식으로 쉽게 표시할 수 있도록 해주는 도구로, 그리드를 이용하여 화면에 표시할 데이터를 정의한다.
UI 요구사항 확인
- 새로 개발할 시스템에 적용할 UI ㅗ간련 요구사항을 조사해서 작성하는 단계
UI 요구사항 확인 순서
목표 정의 → 활동 사항 정의 → UI 요구사항 작성
1. 목표 정의 : 사용자들을 대상으로 인터뷰를 진행한 후 사용자들의 의견이 수렴된 비즈니스 요구사항을 정의
* 가능하면 개별로 인터뷰 진행
2. 활동 사항 정의 : 조사한 요구사항을 토대로 앞으로 해야 할 활동 사항을 정의
3. UI 요구사항 작성
* UI 요구사항은 반드시 실사용자 중심으로 작성
* UI 요구사항 작성 순서
요구사항 요소 확인 → 정황 시나리오 작성 → 요구사항 작성
3.1 요구사항 요소 확인
- 데이터 요구, 기능 요구, 제품 / 서비스의 품질 제약 사항등을 확인
3.2 정황 시나리오 작성
- 사용자의 요구사항을 도출하기 위해 작성하는 것으로, 사용자가 목표를 달성하기 위해 수행하는 방법을 순차적으로 묘사한 것
- 정황 시나리오는 요구사항 정의에 사용되는 초기 시나리오다.
3.3 요구사항 작성
- 요구사항은 정황 시나리오를 토대로 작성한다.
UI 프로토타입
프로토타이핑
- 프로토타입을 만드는 과정으로 사용자의 요구사항 검토부터 최종적인 프로토타입을 완성하기 까지 반복적으로 수행되는 전 과정을 의미
프로토타이핑의 종류
1. 페이퍼 프로토타입
- 아날로그적인 방법으로 스케치, 그림, 글 등을 이용하여 손으로 직접 작성하는 방법
- 비용이 저렴하며 즉시 변경 가능
- 테스트하기 부적당하며 여러사람과의 공유가 어려움
2. 디지털 프로토타입
- 파워포인트, 아크로뱃 등과 같은 프로그램을 사용하여 작성하는 방법
- 수정하기 쉬우며 재사용 가능, 최종 제품과 비슷하게 테스트 가능
- 프로그램 사용법을 알아야 한다.
프로토타입 리더
: 프로토타입을 통해서 발생하는 이슈를 종류별로 취합하고 해결 방법을 제시하며 이것을 모두 정리해서 보고해야 하는 사람
UI 흐름 설계
- 업무의 진행 과정이나 수행 절차에 따른 흐름을 파악하여 화면과 폼을 설계하는 단계이다.
UI 흐름 설계 순서
기능 작성 입력 → 요소 확인 → 유스케이스 설계 → 기능 및 양식 확인
1. 기능 작성
- 화면에 표현할 기능을 작성하는 단계
- 기능적/비기능적 요구사항을 정리
2. 입력 요소 확인
- 화면에 표현되어야 할 기능을 확인한 후 화면에 입력할 요소를 확인하는 단계
- 기능을 표현하기 위해 필요한 화면이나 각 화면 간 이동 및 흐름 등도 확인한다.
3. 유스케이스 설계
- UI 요구사항을 기반으로 UI 유스케이스를 설계하는 단계
- 유스케이스는 화면에 표현할 입력 요소들의 형태나 입력 방법, 배치 등을 고려해서 설계한다.
4. 기능 및 양식 확인
- 분석한 기능을 토대로 텍스트 박스, 콤보 박스, 라디오 박스, 체크 박스 등을 확인하고 규칙을 정의한다.
UI 상세 설계
- 실제 설계 및 구현을 위해 모든 화면에 대해 자세하게 설계를 진행하는 단계이다.
UI 상세 설계 순서
요구사항 확인 → UI 설계서 표지 및 개정 이력 작성 → UI 구조 설계 → 메뉴 구조 설계 → 화면 설계
1. 요구사항 확인
- UI 상세 설계를 위한 요구사항을 최종적으로 확인하는 단계
2. UI 설계서 표지 및 개정 이력 작성
- 다른 문서와 혼동되지 않도록 프로젝트명 혹은 시스템명을 포함시켜 표지를 작성하며 UI 설계서가 수정될 때마다 어떤 부분이 어떻게 수정되었는지를 정리
3. UI 구조 설계
- UI 요구사항과 UI 프로토타입에 기초하여 UI 구조를 설계
4. 메뉴 구조 설계
- 사이트 맵 구조를 통해 사용자 기반 메뉴 구조를 설계하는 단계
5. 화면 설계
- UI 프로토타입과 UI 프로세스를 참고하여 필요한 ㅗ하면을 페이지별로 설계하는 단계
- 필요한 화면 수를 산출
- 화면을 구분하기 위해 화면별 고유 ID를 부여