[정보처리기사]1.소프트웨어 설계/화면설계/사용자 인터페이스 설계

[정보처리기사] 정보처리기사 필기 목차

사용자 인터페이스 설계

 

UI설계 지침

사용자 인테페이스 설계 시 고려 사항 : 사용자 중심, 일관성, 단순성, 결과 예측 가능, 가시성, 표준화, 접근성, 명확성, 오류 발생 해결 등

• UI 표준 : 전체 시스템에 포함된 모든 UI에 공통적으로 적용될 내용으로 화면 구성, 이동
• UI 지침 : UI 개발 과정에서 꼭 지켜야 할 공통의 조건

 

UI 스타일 가이드

개발자/디자이너들이 UI 작성시 기준이 되는 규칙들

구동 환경 정의 → 레이아웃 정의 → 네비게이션 정의 → 기능 정의 → 구성 요소 정의 (그리드, 버튼)

 

UI 컨셉션 세부 수행 활동

- 정보 구조 설계 → 대표 화면 와이어 프레임 스케치 → 페이퍼 프로토타입을 통한 스토리보드 설계

 

UI 설계 프로세스 

- 문제 정의 → 사용자 모델 정의 → 작업 분석 → 컴퓨터 오브젝트 및 기능 정의 → 사용자 인터페이스 정의 → 디자인 평가

 

 

 UI 설계 도구 

사용자의 요구사항에 맞게 UI의 화면 구조나 화면 배치 등을 설계할 때 사용하는 도구

•  와이어프레임(Wireframe): 레이아웃을 협의하거나 공유하기 위해 사용(화면 단위)
•  스토리보드(Story Board): 최종적으로 참고하는 작업 지침서, 작업 산출물 (디스크립션)
•  프로토타입(Prototype): 인터랙션을 적용해 실제 구현된 것처럼 테스트가 가능한 동적인 모형
  • 페이퍼 프로토타입
  • 디지털 프로토타입
•  목업(Mockup): 실제 화면과 유사한 정적인 모형
•  유스케이스(Use Case): 사용자 측면 요구사항을 다이어그램 형식으로 묘사 (유스케이스 명세서)

#와스프목유

UI 프로토타입 제작 및 검토

 UI 프로토타입 사용자 요구사항을 기반으로 실제 동작하는 것처럼 만든 동적인 형태의 모형

▶ 장점: 사용자를 설득하고 이해시키기 쉬움, 개발 시간을 줄일 수 있음, 사전 오류 발견 가능

▶ 단점: 반복적인 개선 및 보완 작업으로 인한 작업 시간 증가 및 자원 소모, 부분적인 프로토타이핑으로 인한 중요한 작업 생략 가능성

# 페이퍼 프로토타입, 디지털 프로토타입, HTML/CSS

 

UI 설계서

사용자의 요구사항을 바탕으로 UI 설계를 구체화해 작성하는 문서

- 기획자, 개발자, 디자이너 등과의 원활한 의사소통을 위해 작성

 

UI 설계서 작성 순서 

1. UI 설계서 표지 작성 프로젝트명/시스템명을 포함 시켜 작성

2. UI 설계서 개정 이력 작성  UI 설계서가 수정 시 어떤 부분이 어떻게 수정되었는지를 정리해 놓은 문서

- 변경 사항이 있을 때마다 0.1씩 버전을 높이며 작성

3. UI 요구사항 정의서 작성 사용자의 요구사항을 확인하고 정리한 문서

4. 시스템 구조 작성 UI 요구사항과 UI 프로토타입에 기초해 전체 시스템의 구조를 설계한 것

5. 사이트 맵 작성  시스템 구조를 바탕으로 사이트에 표시할 콘텐츠를 한 눈에 알아 볼 수 있도록 메뉴별로 구분하여 설계한 것

6. 프로세스 정의서 작성 사용자 관점: 사용자가 요구하는 프로세스들을 작업 진행 순서에 맞춰 정리

7. 화면 설계

 

UI의 유용성 평가

유용성은 사용자가 시스템을 통해 원하는 목표를 얼마나 효과적으로 달성할 수 있는가에 대한 척도가 됨

- 사용자가 생각하는 사용자 모형과 시스템 설계자가 만드려고 하는 개발자 모형 간의 차이를 최소화해야 함

- 실행 차 : 사용자가 원하는 목적과 실행 기능이 다르기 때문에 발생

- 평가 차 : 사용자가 원하는 목적과 실행 결과가 다르기 때문에 발생

 

실행 차를 줄이기 위한 UI 설계 원리 검토

- 사용자 의도 파악

- 행위 순서 규정

- 행위의 순서대로 실행

 

평가 차를 줄이기 위한 UI 설계 원리 검토

- 수행한 키 조작의 결과를 사용자가 빠르게 지각하도록 유도

- 키 조작으로 변화된 시스템의 상태를 사용자가 쉽게 인지하도록 유도

- 사용자가 가진 원래 의도와 시스템 결과 간의 유사 정도를 사용자가 쉽게 파악하도록 유도

 

 

 UI 상세 설계

UI 설계서를 바탕으로 실제 설계 및 구현을 위해 모든 화면에 대한 자세한 설계를 진행하는 단계

UI 시나리오 문서(필수)

- UI의 기능 구조, 대표 화면, 화면 간 인터렉션의 흐름, 다양한 상황에서의 예외 처리 등을 문서로 정리한 것