2020 정보처리기사 2회 실기대비 정리 - 화면 설계

*개인적으로 정리한 내용이니 참고용으로 봐주세요 :)

화면 설계

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

: 사용자와 시스템간의 상호작용을 위해 도와주는 장치 또는 소프트웨어

1) 특징

- 사용자의 편리성 / 가독성을 높임으로써 작업시간을 단축, 업무에 대한 이해도를 높여줌

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

- 수행결과의 오류를 줄임

- 기능에 대한 구체적인 방법을 제시

- 정보 제공자와 공급자의 매개 역할

- 소프트웨어 아키텍처를 반드시 숙지해야 설계를 할 수 있다

2) 구분

- CLI(Command Line Interface) : 명령, 출력이 텍스트 형식

- GUI(Graphical User Interface) : 아이콘, 명령을 마우스로 선택하여 수행, 그래픽 환경 인터페이스

- NUI(Natural User Interface) : 사람의 말, 행동으로 조작하는 인터페이스

3) 기본 원칙

- 직관성 : 누구나 쉽게 이해하고 사용

- 유효성 : 사용자의 목적을 정확하고 완벽하게 달성

- 학습성 : 누구나 쉽게 배우고 익힘

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

4) 설계지침

 사용자 중심 / 일관성 / 단순성 / 결과 예측 가능 / 가시성 / 표준화 / 접근성 / 명확성 / 오류 발생 해결

5) 설계도구

- 와이어프레임(Wireframe) : 기획 단계의 초기에 제작 / 대략적인 레이아웃 등 뼈대를 설계 / 화면 단위로 설계

- 목업(Mockup) : 시각적으로만 구성 요소를 배치 / 실제로 구현되지 않음 / 정적인 형태의 모형

- 스토리보드(Story board) : 와이어프레임에 콘텐츠에 대한 설명, 페이지간 흐름 등 추가
- 프로토타입(Prototype) : 와이어프레임 혹은 스토리보드에 인터렉션을 적용함 / 실제 구현 됨 / 동적인 형태의 모형

- 유스케이스(Use Case) : 사용자 측면의 요구사항 / 사용자의 요구사항 빠르게 파악

* Interface란? 

서로 다른 두 시스템이나 소프트웨어를 서로 이어주는 부분 또는 접속 장치

* 인터렉션(Interaction) : UI를 통해 시스템을 사용하는 일련의 상호작용

 

2. 웹의 3요소

1) 웹 표준(Web Standards) : 웹에서 사용되는 규칙 또는 기능을 의미, 웹 페이가 다른 기종이나 플랫폼에서도 구현되도록 제작 하는 기업을 포함

2) 웹 접근성(Web Accessibility) : 누구나 어떠한 환경에서도 모든 정보에 접근할 수 있도록 보장

3) 웹 호환성(Cross Browsing) : 하드웨어, 소프트웨어 등 다른 환경에서도 모든 이용자에게 동등하게 서비스를 제공

 

3. UI 스타일 가이드

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

- 프레임 세트 : Top, Left, Contents등의 영역으로 프레임을 구분해 적용 / 프레임을 구분한 경우 렌더링 속도가 빠름

2) 레이아웃 : 화면 구조를 정의, 각 영역의 메뉴를 구성

- 상단 메뉴(Top Area) : 필수 영역 / 전체 페이지에 동일 

- 좌측 메뉴(Left Area) : 선택 영역 / 서브 페이지에 선택적으로 적용

- 내용 구성(Contents Area) : 필수 영역 / 메인 이미지, 필요한 콘텐츠를 표시

- 하단 메뉴(Footer Area) : 선택 영역 / 회사 상황 표시 여부

3) 네비게이션 : 네비게이션의 메뉴 타입을 선택 적용

- 메뉴 / 버튼 / 링크 등으로 구성

4) 기능

- 프로세스 모델링 정의 : 업무 시 발생하는 모든 활동들을 파악하기 위해 업무 기능 모델링을 정의

- 데이터 모델링 정의 : 필요한 데이터를 Entity로 정의하고, Entitiy 간의 관계를 논리적 데이터 모델조 정의

5) 구성 요소

- 그리드 : 테이블 형식으로 데이터를 쉽게 표시해주는 도구

- 버튼 : 기능 버튼 / 검색 버튼/ 그리드 관련 버튼 / 기타 버튼 4가지로 구분되어 정의

 

4. UI 요구사항 확인

1) 목표 : 사용자들을 대상으로 인터뷰를 진행 후 비즈니스 요구사항을 정의

- 인터뷰 진행 시 유의할 사항

-- 개별적으로 진행

-- 다수의 의견으로 인해 개인의 중요한 의견을 놓지지 않도록 주의

-- 한 시간을 넘지 않도록 함

-- 반드시 사용자 리서치를 시작하기 전에 진행

2) 활동사항 : 조사한 요구사항을 토대로 해야 할 활동 사항을 정의

- 필요한 예산과 일정을 결정

- UI 디자인의 방향 제시

- 우선 순위 선정, 개별적인 단위 업무를 구분

3) UI 요구사항 작성 : 사용자의 요구사항을 검토, 분석하여 UI 개발 목적에 맞게 작성, 반드시 실사용자 중심으로 작성

- 요구사항의 요소

-- 데이터 요구 : 데이터 객체들을 정리, 초기에 확인

-- 기능 요구 : 실행할 목적을 동사형으로 설명

-- 제품 / 서비스의 품질 : 처리 시간, 정량화 가능 여부

-- 제약 사항 : 비용, 시스템 준수 등 규제

- 정황 시나리오 작성 : 사용자의 요구사항을 도출하기 위해 작성, 목표 달성을 위해 수행하는 방법을 순차적으로 묘사

-- 요구사항 정의에 사용되는 초기 시나리오

-- 사용자가 주로 사용하는 기능 위주로 작성, 함께 사용되는 기능은 통합

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

 

5. UI 프로토타입

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

1) 특징

- 최대한 간단하게 만듦

- 사용자의 요구사항이 모두 반영될 때까지 계속해서 개선

- 실제 사용자를 대상으로 테스트

2) 장점

- 사용자를 설득, 이해시키기 쉬움

- 요구사항, 기능의 불일치 등을 예방하여 개발 시간 단축

- 사전에 오류 발견 가능

3) 단점

- 작업 시간이 증가

- 필요 이상으로 자원이 소모

- 중요한 작업 생략 가능성

4) 종류

- 페이퍼 프로토타입(Paper Prototype)

-- 아날로그적인 방법,

-- 스케치, 그림 등 손으로 직접 작성

-- 비용이 저렴, 즉시 변경 가능

-- 테스트하기 부적합

- 디지털 프로토타입(Digital Prototype)

-- 프로그램을 사용하여 작성

-- 테스트 가능

-- 수정하기 쉬움

-- 재사용 가능

-- 프로그램의 사용법을 알아야 함

5) 제작 단계

1단계 : 사용자 요구사항을 분석

2단계 : 핵심적인 기능을 중심으로 프로토타입 제작

3단계 ; 사용자가 직접 확인하는 단계

4단계 : 수정과 합의가 이루어지는 단계, 완료되면 3단계로 돌아가 최종적인 승인까지 반복

 

6. UI 흐름 설계

1) 기능

- 기능적 요구사항 : 시스템의 입력 / 출력 포함 사항, 데이터의 저장, 연산 수행의 방법 분석

- 비기능적 요구사항

-- 품질에 관한 요구사항 : 사용성 / 효율성 / 신뢰성 / 유지 보수성 / 재사용성 등 

-- 시스템 환경에 관한 요구사항 : 플랫폼 / 사용 기술

2) 입력 요소 : 화면에 표현되어야 할 기능 / 입력 요소 / 화면 / 화면 간 흐름 등을 확인한다.

3) UI 유스케이스 설계

4)기능 및 양식

- 텍스트 박스(Text Box) : 필드 길이, 텍스트 정렬 방식

- 콤보 박스(Combo Box) : 목록에서 항목 선택

- 라디오 박스(Radio Box) : 여러 값 중 단 하나 선택

- 체크 박스(Check Box) : 여러 값 중 하나 이상 선택

 

7. UI 상세 설계

* 사이트 맵(Site Map) : 화면의 정보를 한눈에 파악하기 위한 시각적인 콘텐츠 모형, 일반적으로 테이블 형태로 되어 있고 보통 계층형으로 되어 있음