[新정보처리기사 실기] 화면 설계

1. 사용자 인터페이스

2. UI 표준 및 지침

3. UI 요구사항 확인

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

5. UI 흐름 설계

6. UI 상세 설계

 

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

 

a) 사용자 인터페이스의 개요

사용자 인터페이스 : 사용자와 시스템 간의 상호작용이 원활하게 이뤄지도록 도와주는 장치나 소프트웨어

*발달 과정: 사용자와 컴퓨터 간의 상호작용 -> 사용자가 수행할 작업을 구체화시키는 기능 위주 -> 정보내용을 전달하기 위한 표현 방법

*인터페이스: 서로 다른 두 시스템이나 소프트웨어 등을 서로 이어주는 부분 또는 접속 장치

 

사용자 인터페이스의 세 가지 분야 

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

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

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

 

b) 사용자 인터페이스의 특징

- 사용자의 만족도에 가장 큰 영향을 미치는 중요한 요소, 변경이 자주 발생

- 사용자의 편리성과 가독성을 높이고, 작업 시간 단축, 업무에 대한 이해도 높여줌.

- 최소한의 노력으로 원하는 결과 얻을 수 있음

- 수행 결과의 오류를 줄임

- 막연한 작업 기능에 대해 구체적인 방법을 제시

- 사용자 인터페이스를 설게하기 위해서는 소프트웨어 아키텍처를 반드시 숙지해야 한다.

- 정보 제공자와 공급자 간의 매개 역할을 수행

* 소프트웨어 아키텍처: 개발할 소프트웨어의 기본 틀을 만드는 것

 

c) 사용자 인터페이스의 구분 (상호작용의 수단 및 방식에 의해) 

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

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

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

- VUI: 사람의 음성으로 기기를 조작하는 인터페이스

- OUI: 모든 사물과 사용자 간의 상호작용을 위한 인터페이스

 

d) 사용자 인터페이스의 기본 원칙

-직관성 : 누구나 쉽게 이해하고 사용할 수 있어야한다.

-유효성: 사용자의 목적을 정확하고 완벽하게 달성 할 수 있어야한다.

-학습성: 누구나 쉽게 배우고 익힐 수 있어야 한다.

-유연성: 사용자의 요구사항을 최대한 수용하고, 실수를 최소화해야한다. 

 

e)사용자 인터페이스의 설계 지침

-사용자 중심: 사용자가 쉽게 이해하고 편리하게 사용할 수 있는 환경을 제공하며, 실사용자에 대한 이해가 바탕이 되어야한다.

-일관성: 버튼이나 조작 방법 등을 일관성있게 제공하므로 사용자가 쉽게 기억하고 습득 할 수 있게 설계해야 한다.

-단순성: 조작 방법을 단순화시켜 인지적 부담을 감소시켜야 한다.

-결과 예측 가능: 작동시킬 기능마 보고도 결과를 미리 예측할 수 있게 설계 해야 한다.

-가시성: 메인 화면에 주요 기능을 노출시켜 최대한 조작이 쉽도록 설계 해야한다.

-표준화: 기능 구조와 디자인을 표준화하여 한 번 학습한 이후에는 쉽게 사용 할 수 있도록 설계해야 한다.

-접근성: 사용자의 연령,성별,인종 등 다양한 계층이 사용할 수 있도록 설계 해야한다.

-명확성: 사용자가 개념적으로 쉽게 인지할 수 있도록 설계해야 한다.

-오류 발생 해결: 오류가 발생하면 사용자가 쉽게 인지 할 수 있도록 설계해야 한다.

 

f)사용자 인터페이스(UI) 설계 도구

-와이어프레임: 페이지에 대한 개략적인 레이아웃이나 UI 요소 등에 대한 뼈대를 설계하는 단계

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

-스토리보드: 와이어프레임에 콘텐츠에 대한 설명,페이지 간 이동 흐름 등을 추가한 문서이다.

-프로토타입: 와이어프레임이나 스토리보드 등에 인터랙션을 적용함으로써, 실제 구현된 것처럼 테스트가 가능한 동적인 형태의 모양 

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

 

 

2. UI 표준 및 지침

 

a) UI 표준 및 지침

-UI 표준: 전체 시스템에 포함된 모든 UI에 공통적으로 적용될 내용으로, 화면 구성이나, 화면 이동 등이 포함된다.

-UI 지침: UI 요구사항, 구현 시 제약사항 등 UI 개발 과정에서 꼭 지켜야 할 공통의 조건을 의미한다.

-UI 표준과 지침을 토대로 웹의 3요소가 고려되었는지 확인한다. 

 

o 웹의 3요소

- 웹 표준: 웹에서 사용되는 규칙 또는 기술로서, 웹 사이트 작성시 이용하는 HTML, Javascript 등에 대한 규정, 웹 페이지가 다른 기종이나 플랫폼에서도 구현되도록 제작하는 기법 등을 포함함.

- 웹 접근성 : 누구나, 어떤 환경에서도 웹 사이트에서 제공하는 모든 정보를 접근하여 이용할 수 있도록 보장하는 것

- 웹 호환성: 하드웨어나 소프트웨어 등이 다른 환경에서도 모든 이용자에게 동등한 서비스를 제공하는 것을 의미

 

b) UI 스타일 가이드 작성

- ui 스타일 가이드 작성 순서

 o 구동 환경 정의-> 레이아웃 정의 -> 네비게이션 정의 -> 기능 정의 -> 구성 요소 정의

 

c) 구동 환경 정의

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

 o 프레임 세트: 업무 처리의 편의성이나 속도를 고려하여 화면을 top,left,contents 등의 영역을 프레임을 구분해 적용한다. 

 

d) 레이아웃 정의

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

 o 레이아웃 영역에는 top,left,contents,footer가 있으며, 기본적으로 top,left,contents 영역으로 구성

 o left와 footer 영역은 상황에 따라 표시 여부를 선택적으로 결정

 

-상단 메뉴(top): 필수 영역으로 시스템 전체 페이지에 동일하게 적용 (시스템 로고, 로그인 사용자, 주 메뉴 등)

-좌측 메뉴(left): 선택 영역이며, 시스템별 서브 페이지에 선택적으로 적용( 서브 메뉴,배너 등)

-내용 구성(contents): 필수 영역으로 시스템의 전체 콘셉트를 나타내는 메인 이미지와 시스템 별로 필요한 콘텐츠를 표시하는 부분( 메인 이미지, 시스템별 구성 콘텐츠 등) 

-하단 메뉴(footer): 선택 영역이며, 회사 상황에 따라 표시 여부 결정 (회사 CI, 저작권 등)

*CI: 회사에 대한 역할이나 비전등을 나타내는 회사 이미지나 행동,전략

 

e) 네비게이션 정의

-네비게이션 정의 단계는 네비게이션의 메뉴 타입을 선택하여 적용하는 단계

 o 네비게이션은 사용자가 원하는 정보를 빠르게 찾을 수 있도록 안내하는 것으로 메뉴, 버튼, 링크 등으로 구성된다.

 

f) 기능 정의

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

 o 프로세스 모델링 정의: 시스템에 적용할 업무에서 발생할 수 있는 모든 활동들을 쉽게  파악할 수 있도록 업무 기능 모델링 정의함.

 o 데이터 모델 정의: 업무 처리 과정에서 필요한 데이터를 엔티티로 정의하고, 이를 기반으로 엔티티 간의 관계를 논리적 데이터 모델로 정의함

 

g) 구성 요소 정의

-구성 요소 정의 단계는 화면에 표시할 그리드나 버튼 등을 정의 하는 단계이다.

 o 그리드: 데이터를 테이블 형식으로 쉽게 표시할 수 있도록 해주는 도구

 o 버튼: 기능,검색,그리드 관련,기타로 구분

 

 

3. UI 요구사항 확인

 

 

a) UI 요구사항 확인

-새로 개발할 시스템에 적용할 UI 관련 요구사항을 조사해서 작성하는 단계 (사용자 요구사항 조사,분석,작성)

 o 순서: 목표 정의 -> 활동 사항 정의 -> UI 요구사항 작성 

 

b) 목표 정의

-사용자들을 대상으로 인터뷰를 진행한 후 의견이 수렴된 비즈니스 요구사항을 정의

-인터뷰 진행 시 유의사항

 o 인터뷰는 가능하면 개별적으로 진행

 o 가능한 많은 사람을 인터뷰하여 다양한 의견을 수렴하되, 개인의 중요한 의견을 놓치지 않도록 주의함.

 o 인터뷰는 한 시간을 넘지 않도록 한다.

 o 인터뷰 진행은 반드시 사용자 리서치를 시작하기 전에 해야 함

*리서치: 사용자들의 요구사항이나 불편사항 등을 파악하기 위해 진행되는 것

 

c) 활동 사항 정의

-조사한 요구사항을 토대로 앞으로 해야 할 활동 사항을 정의함

 o 사용자와 회사의 비전을 일치시키는 작업을 진행함.

 o 리서치 규모, 디자인 목표 등을 결정할 수 있도록 각각에 필요한 예산과 일정을 결정함.

 o 기술의 발전 가능성을 파악하고 UI 디자인의 방향을 제시함.

 o 인터뷰한 내용을 기반으로 경영진들에게 프로젝트를 정확히 이해시키고 협의하도록 도움.

 o 사업 전략 및 목표, 프로세스의 책임자 선정, 회의 일정 및 계획 작성, 우선 순위의 선정, 개별적인 단위 업무를 구분함.

 

d) UI 요구사항 작성

-UI 요구사항을 작성할 때는 여러 경로를 통해 수집된 사용자들의 요구사항을 검토하고 분석하여 UI개발 목적에 맞게 작성 해야함.

 o UI 요구사항은 반드시 실사용자 중심으로 작성해야 함.

 o UI 요구사항은 여러 사람의 인터뷰를 통해 다양한 의견을 수렴해서 작성해야 함.

 o UI 요구사항을 바탕으로 UI의 전체적인 구조를 파악 및 검토해야함.

 o UI 요구사항 작성 순서 : 요구사항 요소 확인 -> 정황 시나리오 작성 -> 요구사항 작성

 

e) 요구사항 요소 확인

-요구사항 요소 (종류와 각각의 표현 방식)

데이터 요구	ex) 이메일의 메시지 속성은 제목,발신일,발신인,참조인,답변 등
기능 요구	ex) 사용자는 이메일의 메시지를 읽거나 삭제하며, 일정한 양식으로 다른 메시지와 함꼐 보관한다.
제품/ 서비스의 품질	ex) 시스템이 파일을 얼마나 빠르게 처리할 수 있는지 여부 등 정량화가 가능한 요구사항들을 확인한다.
제약 사항	o 사전에 제약사항의 변경 가능 여부를 확인 한다.

 

f) 정황 시나리오 작성

-사용자의 요구사항을 도출하기 위해 작성하는 것으로, 사용자가 목표를 달성하기 위해 수행하는 방법을 순차적으로 묘사한 것임.

 o 정황 시나리오는 요구사항 정의에 사용되는 초기 시나리오이다.

 o 정황 시나리오는 개발하는 서비스의 모습을 상상하는 첫 번째 단계로 사용자 관점에서 시나리오를 작성해야 한다.

 o 사용자가 주로 사용하는 기능 위주로 작성해야 하며, 함께 발생되는 기능들은 하나의 시나리오에 통합해야 함.

 o 육하원칙에 따라 간결하고 명확하게 작성해야 함.

 o 작성된 시나리오는 외부 전문가 도는 경험이 풍부한 사람에게 검토를 의뢰한다.

 

g) 요구사항 작성

- 요구사항은 정황 시나리오를 토대로 작성함.

 

 

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

 

 

a) UI 프로토타입의 개요

- 프토토타입: 와이어프레임이나 스토리보드 등에 인터랙션을 적용함으로써, 실제 구현된 것처럼 테스트가 가능한 동적인 형태의 모양 

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

 o 프로토타입은 최종 제품의 작동 방식을 이해시키는데 필요한 기능은 반드시 포함해야 함.

 o 사용자 요구사항이 모두 반영될 때 까지 계속 개선하고 보완해야한다.

 o 프로토타이핑 및 테스트는 실제 사용자를 대상으로 테스트하는 것이 좋다.

* 프토토타이핑: 프로토타입을 만드는 과정

 

b) UI 프로토타입의 장.단점

-장점

 o 사용자를 설득하고 이해시키기 쉽다.

 o 사전에 오류를 발견할 수 있다.

 o 요구사항과 기능의 불일치 등으로 인한 혼선을 예방 할 수 있어 개발 시간을 줄일 수 있다.

 

-단점

 o 반복적인 개선 및 보완 작업 때문에 작업 시간을 증가 시킬 수 있고, 필요 이상으로 자원을 소모하게 됨.

 o 부분적으로 프로토타이핑을 진행하다보면 중요한 작업이 생략될 수 있다.

 

c) 프로토타이핑의 종류

-페이퍼 프로토타입: 아날로그적인 방법으로, 스케치,그림 글 등을 이용하여 손으로 직접 작성

 o when do we use this? 제작 기간이 짧은 경우, 제작 비용이 적을 경우, 업무 회의가 빠를 경우 

 o 장점

   1) 회의 중 대화하면서 생성 가능함.

   2) 즉시 변경 가능함

   3) 비용 저렴

   4) 고객이 과다한 기대를 하지 않음 

 o 단점 

   1) 테스트하기에 부적당하다

   2) 상호 관계가 많을 경우 나타내기 복잡함

   3) 여러 사람에게 나눠주거나 공유하기 어렵다.

 

-디지털 프로토타입: 파워포인트, 아크로뱃, 비지오 같은 프로그램을 사용하여 작성하는 방법

o when do we use this? 재사용이 필요,산출물과 비슷한 효과가 필요, 숙련된 전문가가 있을 경우

o 장점

   1) 최종 제품과 비슷하게 테스트 할 수 있음

   2) 재사용이 가능함

   3) 수정하기 쉽다.

o 단점

   1) 프로토타입을 작성할 프로그램의 사용법을 알아야 한다.

 

d) UI 프로토타입 계획 작성 시 고려 사항

 -계획 시 고려 사항

  o 프로토타입의 개발 목적을 확인한다.

  o 소프트웨어,하드웨어 등 프로토타입 개발에 필요한 환경을 마련한다.

  o 프로토타이핑 일정은 일반적으로 아키텍처가 확정된 이후 프로젝트의 실제 분석 작업이 완료되기 전에 진해해야함.

  o 프로토타입 개발 인원을 확인한다.

  o 주어진 비즈니스 요구사항을 모두 만족하는지 프로토타입 아키텍처를 검증한다

  o 프로토타입을 통해서 발생하는 이슈를 모두 취합하고 해결 방법을 제시한다. (프로토타입 리더)

  o 고객과 프로젝트 매니저,프로젝트 리더 등에게 완성된 프로토타입을 시연한다.

 

- 작성 시 고려 사항

  o 프로토타입의 작성 계획을 세운다.

  o 프로젝트의 범위나 리스크를 고려하여 프로토타입의 범위를 정한다.

  o 프로토타입을 통해서 얻고자하는 목표를 확인한다.

  o 프로토타입의 개발 목표 달성을 위해 필요한 최소한의 기간과 비용을 확인 한다.

 

e) UI 프로토타입 제작 단계

-1단계 : 사용자의 요구사항 분석하는 단계로, 기본적인 요구사항이 확정될 때 까지 수행

-2단계 : 요구사항을 충족하는 프로토타입을 작성하고 개발할 시스템의 핵심적인 기능을 중심으로 개발함.

-3단계 : 사용자가 직접확인하고, 프로토타입에 대해 다양한 추가 및 수정 의견을 제안함.

-4단계 : 작성된 프로토타입을 기반으로 수정과 합의가 이뤄지고 최종 승인이 이뤄질 때 까지 3~4단계를 반복함.

 

 

 5. UI 흐름 설계

 

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

 

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

 

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

- 구축할 시스템에서 필요한 기능적/비기능적 요구사항을 정리하고 그에 대한 설명을 정리한다.

기능적 요구사항	o 시스템이 어떤 연산을 수행해야 하는지 분석한다..
비기능적 요구사항	o 플랫폼,사용 기술 등 시스템 호나경에 관한 요구사항으로 어떤 것들이 있는지 분석한다.

 

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

-기능을 표현하기 위해 필요한 화면이나 각 화면 간 이동 및 흐름 등도 확인 한다.

 

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

-유스케이스는 화면에 표현할 입력요스들의 형태나 입력 방법,배치 등을 고려해서 설계 한다.

 

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

 

6.  UI 상세 설계

 

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

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

 

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

- 구조 및 디자인은 사용자의 목적에 맞게 동선의 편리함과 기능을 위주로 철저히 준비한다.

- 수집된 요구사항을 바탕으로 기능 및 제약 조건을 확인한다.

 

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

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

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

 o 처음 작성 시 첫 번째 항목을 '초안 작성', 버전을 1.0을 설정한다.

 o UI 설계 변경사항이 있을 때마다 변경 내용을 적고 버전을 0.1씩 높인다.  

 

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

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

-메뉴 구조 설계 순서

 1) UI 시스템 구조를 바탕으로 사이트에 표시할 콘텐츠를 한 눈에 알아 볼 수 있도록 메뉴별로 구분한 사이트 맵 구조를 설계 한다.

 2) 작성한 사이트 맵의 상세 내용은 표 형태로 작성한다

 3) 사용자 관점에서 사용자가 요구하는 프로세스들에 대해 작업 진행 순서에 맞춰 프로세스 정의서를 작성한다.

 

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

- 필요한 화면 수를 산출한다.

- 화면을 구분하기 위해 화면별 고유 ID를 부여하고 별도 표지를 작성한다.

- 각 화면별로 필요한 화면 내용을 설계 한다.