정보처리기사 실기 6장 화면 설계 요점 정리

1. 사용자 인터페이스(UI)

● 개요 : 사용자와 시스템 간의 상호작용이 원활하게 이뤄지도록 도와주는 장치나 SW를 의미

● 분야

- 정보 제공과 전달을 위한 물리적 제어에 관한 분야

- 콘텐츠의 상세적인 표현과 전체적인 구성에 관한 분야

- 모든 사용자가 편리하고 간편하게 사용하도록 하는 기능에 관한 분야

● 특징 

- 사용자의 만족도에 가장 큰 영향, SW의 영역 중 변경이 가장 많이 발생, 작업 단축 시킴, 정보 제공자와 공급자 간의 매개 역할 수행, 오류 줄임, SW 아키텍처(비기능적, 논리적 구성) 반드시 숙지

● 사용자 인터페이스 구분

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

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

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

● 기본 원칙 : 직관성, 유효성, 학습성, 유연성

● 설계 지침 : 사용자 중심, 일관성, 단순성, 결과 예측 가능성, 가시성, 표준화, 접근성, 명확성, 오류 발생 해결

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

- 와이어 프레임 : 기획 단계의 초기에 제작하는 것으로, 페이지에 대한 개략적인 레이아웃이나 UI 요소 등에 대한 뼈대 설계, 제작 시 화면 단위로 설계, (협의, 공유) 위해 사용 ex) 손그림, 파워 포인트, 키노트, 스케치

- 목업 : 와이어 프레임보다 좀 더 실제 화면과 유사하게 한 정적인 형태 모형 ➜ 실제 구현 X

- 스토리보드(화면 단위로 정리) : 와이어 프레임의 설명 + 페이지 간의 이동 흐름, 최종적으로 참고하는 작업 지침서

ex) 파포, Axure

- 프로토타입 : (와이어 프레임, 스토리보드)에 인터랙션을 적용함으로써 실제 테스트 가능한 동적인 형태 모형(샘플)

ex) html, Finto

- 유스 케이스 : 사용자 측면에서의 요구사항으로, 사용자가 원하는 목표를 달성하기 위해 수행할 내용 기술 ➜ 사용자 요구사항 빠르게 파악 ➜ 문서화

​

2. UI 표준 및 지침

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

- UI 표준 : 모든 UI에 공통적으로 적용될 내용으로 화면 구성 or 화면 이동이 포함

- UI 지침 : UI 개발 과정에서 꼭 지켜야 할 공통의 조건

● UI 스타일 가이드 작성

- 개발자나 디자이너들이 UI를 작성 시 기준이 되는 규칙들로, 구동 환경 레이아웃 네비게이션 등을 정의

- 순서 : 구동 환경 정의 ➜ 레이아웃 정의 ➜ 네비게이션 정의 ➜ 기능 정의 ➜ 구성 요소 정의

● 구동 환경 정의

: 구동 환경 정의 단계는 컴퓨터 OS, 웹 브라우저, 모니터 해상도, 프레임 세트 등을 사용 환경에 적합하도록 규정

- 프레임 세트 : 업무 처리의 편의성이나 속도를 고려하여 화면을 Top, Left, Contents 등의 영역으로 프레임을 구분 적용

● 레이아웃 정의 : 

: 레이아웃 정의 단계는 화면 구조를 정의하고 각 영역의 메뉴를 구성하는 단계

● 내비게이션 정의 

: 내비게이션의 메뉴 타입을 선택하여 적용하는 단계

● 기능 정의

: 기능 정의 단계는 시스템에 적용할 업무 과정에서 일어나는 모든 활동이나 필요한 데이터 간의 관계 등을 논리적인 모델로 상세화하는 단계

● 구성 요소 정의

: 화면에 표시할 그리드나 버튼 등을 정의하는 단계

 

3. UI 요구사항 확인 (다양한 경로 이용)

● 순서

① 목표 정의 : 인터뷰 진행을 통해 요구사항 정의

- 인터뷰 진행 유의사항 : 인터뷰 한 시간 이내(개별 진행), 사용자 리서치 이전에 인터뷰 진행

② 활동 사항 정의 : 조사한 요구사항으로 활동 사항 정의, 사용자와 회사 비전 일치 작업, 협의, 방향 제시, 단위 업무 구분

③ UI 요구사항 작성 : 요구사항 검토 분석 후 UI 개발 목적에 맞게 작성, 실사용자 중심, 여러 경로로 수집

  ㉠ 요구사항 요소 확인 : 파악된 요구사항 요소(네이터 요구, 기능 요구, 품질, 제약 사항)의 종류와 각각의 표현 방식 등을 검토

  ㉡ 정황 시나리오(초기 시나리오) 작성 : 수행하는 방법을 순차적으로 묘사한 것, 사용자 관점에서 기능 위주 작성, 육하원칙

  ㉢ 요구사항 작성 : 요구사항은 정황 시나리오를 토대로 작성

​

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

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

- 최대한 간단히 작성(작은 범위, 적은 인원), 실사용자 대상으로 테스트

- 사용자의 요구사항을 취합하여 만든 모형​

- 프로토타이핑은 실제 분석 작업 완료 전에 진행

● UI 프로토타입 장· 단점

- 장점 : 설득 및 이해 쉬움, 개발 시간 감소, 사전 오류 발견 가능

- 단점 : 작업 시간 증가, 필요 이상 자원 소모, 중요 작업 생략(부분적 프로토타이핑 진행 시)

● UI 프로토타이핑 제작 단계

① 요구사항 분석

② 프로토타입 아날로그(종이에 손으로) or 디지털(편집 도구)로 작성

③ 작성된 프로토타입이 요구사항을 잘 수행하는지 사용자가 집적 확인, 추가 및 수정 의견 제안 가능

④ 작성된 프로토타입을 기반으로 수정과 합의가 이뤄지는 단계, 보완 작업, 승인 완료할 때까지 3, 4단계 반복

 

5. UI 흐름 설계

● 개요 : 업무의 진행 과정이나 수행 절차에 따른 흐름을 파악하여 화면과 폼을 설계하는 단계

- 순서 : 기능 작성 ➜ 입력 요소 확인 ➜ 유스 케이스 설계 ➜ 기능 및 양식 확인

● 기능 작성 : 화면에 표현할 기능을 작성하는 단계

- 기능적 요구사항 : 무엇을 하는지, 어떻게 하는지, 어떤 데이터 저장, 어떤 연산 수행 ex) 결정, 수정, 조회

- 비기능적 요구사항 : 품질 및 제약사항, 시스템 환경에 관한 요구사항 ex) 확장성, 가용성, 보안성, 신뢰성, 호환성

● 입력 요소 확인 : 화면에 표현되어야 할 기능을 확인한 후 화면에 입력할 요소를 확인하는 단계

● 유스케이스 설계 : UI 요구사항을 기반으로 UI 유스 케이스를 설계하는 단계

● 기능 및 양식 확인 : 분석한 기능을 토대로 텍스트 박스, 콤보 박스, 라디오 박스, 체크 박스 등을 확인하고 규칙을 정의

 

7. UI 상세 설계

: 실제 설계 및 구현을 위해 모든 화면에 대해 자세하게 설계를 진행하는 단계

● 순서

- 요구사항 확인 ➜ UI 설계서 표지 및 개정 이력 작성 ➜ UI 구조 설계 ➜ 메뉴 구조 설계 ➜ 화면 설계

● 요구사항 확인 : UI 상세 설계를 위한 요구사항을 최종적으로 확인하는 단계

● UI 설계서 표지 및 개정 이력 작성

- UI 설계서 표지는 다른 문서와 혼동되지 않도록 프로젝트명이나 시스템명을 포함시켜 작성

- UI 설계서 개정 이력은 UI 설계서가 수정될 때마다 어떤 부분이 어떻게 수정되었는지를 정리해 놓은 문서

● UI 구조 설계 : UI 요구사항과 UI 프로토타입에 기초하여 UI 구조를 설계하는 단계

● 메뉴 구조 설계 : 사이트 맵 구조를 통해 사용자 기반 메뉴 구조를 설계하는 단계

● 화면 설계 : UI 프로토타입과 UI 프로세스를 참고하여 필요한 화면을 페이지별로 설계하는 단계