[정보처리기사] 1과목 소프트웨어 설계 | 화면 설계

* 개인 학습을 위한 정리입니다.

1과목 소프트웨어 설계
2장 화면 설계

010. 사용자 인터페이스

3. 사용자 인터페이스의 구분
- CLI : 명령과 출력이 텍스트 형태
- GUI : 아이콘+메뉴 마우스로 선택하여 작업을 수행하는 그래픽 환경
- NUI : 말 / 행동으로 기기 조작

4. 사용자 인터페이스의 기본 원칙
- 직관성
- 유효성
- 학습성
- 유연성

011. UI 표준 및 지침

웹의 3요소 : 웹 표준, 웹 접근성, 웹 호환성

내비게이션
: 내비게이션은 사용자가 사이트에서 원하는 정보를 빠르게 찾을 수 있도록 한내하는 것으로 자용자 중심

- 원하는 정보를 쉽고 빠르게 찾을 수 있도록 다양한 경로 or 방법 제공
- 메뉴, 사이트맵, 버튼, 링크등으로 구성되는데, 이들 구성 요소는 사용자가 직관적으로 찾아 사용할 수 있도록 설계, 사용자가 혼동하지 않도록 전체 페이지에서 일관성이 있어야함

 

012. UI 설계 도구

2. 와이어 프레임

: 와이어프레임은 기획 단계의 초기에 제작하는 것으로, 페이지에 대한 개략적인 레이아웃. UI 요소 등에 대한 뼈대를 설계하는 단계

- 각 페이지의 영역 구분, 콘텐츠, 텍스트 배치 등 화면 단위로 설계

- 와이어프레임 툴 : 손그림, 파워포인트, 키노트, 스케치, 일러스트, 포토샵 등

 

3. 목업

: 와이어프레임보다 좀 더 실제화면과 유사하게 만든 정적인 형태 모형

- 목업 툴 : 파워 목업, 발사믹 목업

 

4. 스토리보드

: 와이어프레임에 콘텐츠에 대한 설명, 페이지 간 이동  흐름 등을 추가한 문서

- 디자이너와 개발자가 최종적으로 참고하는 작업 지침서

- 스토리보드 툴 : 파워포인트, 키노트, 스케치, Axure 등

 

5. 프로토타입

: 실제 구현된 것처럼 테스트가 가능한 동적인 형태 모형

- 사용성 테스트나 작업자 간 서비스 이해를 위해 작성하는 샘플

- 프로토타입 툴 : HTML/CSS, Axure, Flinto, 네이버 프로토나우, 카카오 오븐 등

 

013. UI 요구사항 확인

014. 품질 요구사항

 

1. 품질 요구사항

- ISO/IEX 9126 : 기능성, 신뢰성, 사용성, 효율성, 유지보수성, 이식성

 

015. UI 프로토타입 제작 및 검토

1. UI 프로토타입의 개요

: 사용자 요구사항을 기반으로 실제 동작하는 것처럼 만든 동적인 형태의 모형으로, 테스트 가능

- 사용자의 요구사항을 개발자가 맞게 해석했는지 검증하기 위한 것으로, 최대한 간단하게 만들어야 한다.

- 일부 핵심적인 기능만을 제공하지만, 최종 제품의 작동 방식을 이해 시키는데 필요한 기능은 반드시 포함

- 사용자의 요구사항이 모두 반영될 때까지 프로토타입을 계속하여 개선하고 보완

 

3. 종류

- 페이퍼 프로토타입

- 디지털 프로토타입

 

** 아이텍처가 확정된 이후 프로젝트의 실제 분석작업이 완료 되기전 진행

 

---

오늘의 공부 후기

UI 부분은 원래 재미있어했고, 여러 프로젝트를 진행하면서 직접 몸으로 체험하고 느꼈던 내용이라 쉽고 재미있게 공부할 수 있었다!