한이아지와 함께하는 정보처리기사 1과목 2번째) 화면 설계

이번에는 1과목 2번째 부분은

화면설계에 대해서 정리해보겠습니다!

(☆ 중요도 0.5 / ★ 중요도 1)

 

---

PART1. 소프트웨어 설계

• Chap01) 요구사항 설계
  • 현행 시스템 분석
  • 요구사항 확인 
  • 분석 모델 확인
• Chap02) 화면설계 
  • UI 요구사항 확인
  • UI 설계
• Chap03) 애플리케이션 설계
  • 공통 모듈 설계
  • 객체지향 설계
• Chap04) 인터페이스 설계
  • 인터페이스 요구사항 확인
  • 인터페이스 대상 식별
  • 인터페이스 상세 설계

---

Chap02) 화면 설계

---

1. UI 요구사항 확인

1.1. UI 개요 (★★★)

 

UI란?

UI는 넓은 의미에서 사용자와 시스템 사이에서 의사 소통할 수 있도록 고안된 물리적 · 가상적 매개체

        좁은 의미로는 정보기기나 소프트웨어 화면 등에서 사람이 접하게 되는 화면

출처 : https://www.webtrickshome.com/blog/what-is-the-difference-between-ux-and-ui-in-web-design

UI 유형 : CGNO (이 영화는 CG가 NO)

 - CLI : 정적인 텍스트 기반 인터페이스, 명령어를 텍스트 형태

 - GUI : 그래픽 반응 기반 인터페이스, 아이콘이나 메뉴를 마우스를 선택하여 작업을 수행

 - NUI : 직관적 사용자 반응 기반 인터페이스, 사용자의 말이나 행동으로 기기를 조작

 - OUI : 유기적 상호작용 기반 인터페이스, 현실에 존재하는 모든 사물이 입출력장치로 변화할 수 있는 사용자 인터페이스

 

UI 분야 : 물디기

 - 물리적 제어 분야

 - 디자인적 분야

 - 기능적 분야

 

UI 설계 원칙 : 직유학유 (직접 사는 우유 학교에서 주는 우유)

직관성, 유효성, 학습성, 유연성

 

UI 설계 지침 : 사일단결가표접명오

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

1.2. UI 표준 (★)

UI 표준 및 지침

UI 표준 : 전체 시스템에 포함된 모든 UI에 공통적으로 적용될 내용, 화면 구성 그리고 화면 이동이 포함

UI 지침 : UI요구사항 구현 시 제약사항 등 UI 개발 과정에서 꼭 지켜야할 공통 조건

 

WEB의 3요소 : 표접호

웹 표준 : 웹 사이트 작성 시 HTML, CSS, JS 등에 대한 규정, 웹 페이지가 어떤 플랫폼에서도 구현되도록 제작하는 기법

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

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

 

UI 스타일 가이드 구성

 ① UI 구동 환경 정의 : OS, 웹 브라우저, 모니터 해상도, 프레임 세트 확인

 ② 레이아웃 정의 : 기본 배치는 크게 상단, 왼쪽, 콘텐츠 3개 부분으로 설계 (하단 메뉴 구성은 상황에 맞게)

 ③ 메뉴 네비게이션 정의 : 메뉴 구조에 따라 적당한 타입을 선택하여 적용

 ④ 기능정의 : 시스템 요구사항에 대한 개념 모델을 논리적 모델로 상세화

 

1.3. UI 지침 (☆)

UI 표준을 위한 환경 분석

 - 사용자 트렌드 분석 : 현재 UI의 단점 및 트렌드 파악, 사용자의 요구사항 파악

 - 기능 및 설계 분석  : 기능 조작성 분석, 오류 방지 분석, 최소한의 동작으로 업무 처리 가능 확인, UI 정보 전달력 확인

 

⒜ UI 개발 목표 및 범위

 - 경영진의 UI 관련 개발 요구사항 조사 및 정의 : 경영진을 대상으로 심층 인터뷰를 통해 비즈니스 요구사항 정의

 - 3C 분석 및 트렌드 분석 : 기존의 자사 제품과 타사 제품을 분석하는 마케팅적 관점으로 시장 이해

 - 관계자 간 개발 목표 협의 : 부서 간, 내부 관계자간 개발 목표 협의, 디자인 및 개발 이슈가 많은 상황에서 필요

 

⒝ UI 개발을 위한 주요 기법

 - 3C 분석 : 고객, 경쟁사, 자사를 비교 분석

 - SWOT 분석 : 기업의 강점, 약점, 기회 그리고 위협 요인을 규정하고 경영 전략 수립

 - 시나리오 플래닝 : 불확실성이 높은 상황 변화를 사전에 예측하고 다양한 시나리오를 설계

 - 사용성 테스트 : 사용자가 직접 제품을 사용하면서 미리 작성된 시나리오에 맞춰 과제를 수행 후 질문에 답변

 - 워크샵 : 소수 인원으로 특정 문제나 과제에 대해 의견을 교환하고 검토하는 세미나

 

⒞ 사용자 분석 및 니즈 조사

 리서치 대상 선정 및 내용 설계 → 리서치 진행 → 리서치 결과 정리

 

⒟ 사용자 요구사항 도출

 - 페르소나 : 잠재적 사용자의 다양한 목적과 관찰된 행동패턴을 정의해놓은 가상의 사용자

 - 컨셉 모델 정의 : 여러 추상적인 콘셉트들 사이의 관계를 보여주는 다이어그램, 다양한 아이디어들을 시각화 가능

 - 사용자 요구사항 정의 : 리서치 및 페르소나 결과물을 토대로 요구사항 도출

 - UI 컨셉션 : 정의된 요구사항을 구체화, 화면 디자인 단계 전 대표 화면 설계를 진행

                  (정보 구조 설계 → 와이어 프레임 스케치 → 페이퍼 프로토타입을 통한 스토리보드 설계)

 

(e) UI 상세 설계 : UI 시나리오 문서 작성 (사용자 인터페이스의 기능 구조, 화면 간 인터렉션 흐름, 예외처리 정리)

 

UI 시나리오 문서 작성 원칙: 플로우 차트 표기법으로 작성, 인터렉션의 흐름 정의, 기능 별 상세 기능 시나리오 정의

 

UI 시나리오 문서 작성 요건 : 완일이가추수 (완일이가 쓴 추수용 기계가 용이했음)

 완전성, 일관성, 이해성, 가독성, 추적 용이성, 수정 용이성

---

2. 화면 설계

2.1. UI 흐름 설계 및 상세 설계 (★☆)

UI 설계 프로세스 : 문사작컴인디 (문사 작업용 컴퓨터 인디요)

 ① 문제 정의 : 시스템의 목적 수립 및 문제 정의

 ② 사용자 모델 정의 : 시스템을 사용할 사용자의 특성을 파악하여 모델 정의

 ③ 작업 분석 : 해결해야 할 문제를 정의하고 사용자 특징을 세분화

 ④ 컴퓨터 오브젝트 및 기능 정의 : 분석한 작업을 컴퓨터의 어떤 사용자 인터페이스를 통해 표현할 지 정의

 ⑤ 사용자 인터페이스 정의 : 작업 모델을 기반으로 작업자가 예측한 대로 동작하도록 사용자 인터페이스 정의

 ⑥ 디자인 평가 : 분석한 작업에 맞게 설계되었는지, 사용자가 쓰기 쉽고 편리한 지 평가 (GOMS, 휴리스틱 사용)

 

UI 흐름 설계 : 기입유양 (문서 기입은 유(너)에게 양보할께)

화면에 표현할 기능 작성, 화면의 입력 요소 확인, 유스케이스 설계, 기능 및 양식 확인

2.2. UI 설계 도구 (★☆)

UI 설계 도구란?

사용자의 요구사항에 맞게 UI의 화면 구조나 화면 배치 등을 설계할 때 사용하는 도구, 기획 단계에서 예시로 사용

 

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

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

 

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

             목업 툴) 파워 목업, 발사믹 목업 등

 

ⅲ. 스토리보드 : 와이어프레임에 콘텐츠에 대한 설명이나 페이지 간 이동 흐름을 정의한 문서이자

                      디자이너와 개발자가 최종적으로 참고하는작업 지침서(서비스 구축을 위한 모든 정보가 들어있음)

                      작성절차 : 전체 개요 작성 → 서비스 흐름 작성 → 스타일 확정 → 메뉴 별 화면 설계도 작성

                      유의사항 : 일관된 기호 표시, 공통 영역 정의, 영역 별 세부 설계, 버젼 업 관리

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

 

ⅳ. 프로토타입 : 와이어프레임이나 스토리보드 등에 인터랙션을 적용해 실제 구현된 것처럼 테스트가 가능한 모형

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

 

ⅴ. 유스케이스 : 사용자 측면에서의 요구사항으로 목표를 달성하기 위한 내용을 작성, 프로젝트 초기에 작성하고 문서화

                     자연어로 작성된 사용자의 요구사항을 구조적으로 표현 (다이어그램 사용)

출처 : https://en.wikipedia.org/wiki/Use_case_diagram

2.3. UI 요구사항 확인 (☆)

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

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

3) UI 요구사항 작성 : 여러 경로로 수집된 사용자의 요구사항을 검토하고 분석하여 UI 개발 목적에 맞게 작성

4) 요구사항 요소 확인 : 파악된 요구사항 요소의 종류와 각각의 표현 방식 등을 검토

5) 정황 시나리오 작성 : 사용자 관점에서 시나리오 작성, 사용자가 목표를 달성 과정을 순차적으로 묘사, 기능 위주

6) 요구사항 작성 : 정황 시나리오를 바탕으로 작성

 

2.4. 품질 요구사항 (★★☆)

품질요구사항은 소프트웨어의 기능, 성능, 만족도 등 요구사항을 얼마나 충족하는 가를 나타내는 것

ISO/IEC 9126 국제 표준으로 소프트웨어 품질 특성과 평가를 위한 표준 지침을 따름

 

(1) 기능성 : 소프트웨어가 사용자의 요구사항을 만족하는 기능을 제공하는 정도

                [정합성, 정확성, 상호 운용성, 보안성, 호환성]

 

(2) 신뢰성 : 소프트웨어가 요구된 기능을 정확하고 일관되게 수행하는 정도

                [성숙성, 고장허용성, 회복성]

 

(3) 사용성 : 사용자가 정확하게 이해하고 사용하며 추후에 다시 사용하고 싶어하는 정도

                [이해성, 학습성, 운용성, 친밀성]

 

(4) 효율성 : 할당된 시간, 한정된 자원으로 요구하는 기능을 얼마나 빨리 수행하는 지 확인하는 정도

                [시간 효율성, 자원 효율성]

 

(5) 유지보수성 : 새로운 요구사항 발생 시 소프트웨어를 개선 · 확장할 수 있는 정도 

                      [분석성, 변경성, 안정성, 시험성]

 

(6) 이식성 : 소프트웨어가 다른 환경에서도 쉽게 적용할 수 있는 정도

                [적용성, 설치성, 대체성, 공존성]

 

2.5. UI 프로토 타입 제작 및 검토 (★)

UI 프로토 타입이란?

사용자 요구사항을 기반으로 실제 동작하는 것처럼 만든 테스트 모형

요구사항이 모두 반영될 때 까지 지속적으로 요구사항 반영, 실제 사용자를 대상으로 테스트

 

UI 프로토 타입 장 · 단점

 - 장점 : 사용자를 이해시키고 쉬워 설득이 용이, 개발 시간 단축 가능, 사전에 오류 발견 가능

 - 단점 : 지속적인 요구사항 반영으로 작업 시간 증가, 필요 이상의 자원 소모, 부분적으로 중요한 작업 생략 위험

 

UI 프로토 타입의 종류

 - 페이퍼 프로토 타입 : 아날로그적 방법 (스케치, 그림 또는 글로 제작)

 - 디지털 프로토 타입 : 디지털적 방법 (파워포인트르 중심으로 하고 아크로뱃, 비지오, 옴니그래프 활용하여 제작)

 

UI 프로토 타입 계획 시 고려사항 

 - 개발 목적을 확인

 - 프로토 타입 일정은 아키텍처 확정 후 프로젝트 실제 분석 작업이 완료되기 전

 - 아키텍처의 핵심이 되는 UI 요소를 프로토 타입의 범위로 잡음

 - 분석, 설계, 개발, 테스트 등의 표준 가이드를 확정

 

UI 프로토 타입 작성 시 고려사항

 - 작성 계획을 세움

 - 범위나 리스크를 파악해 프로토 타입 제작 범위를 정함

 - 목표 확인 

 - 최소한의 기간과 자원 확인

 - 실제 개발에 참조될 수 있는 지 확인

 

UI 프로토 타입 제작 단계

 1단계... 사용자 요구 사항 분석

 2단계... 요구사항을 충족하는 프로토타입을 종이에 작성, 핵심적인 기능 위주로 개발

 3단계... 작성된 프로토 타입이 잘 수행되고 있는 지 사용자가 확인

 4단계... 작성된 프로토 타입을 기반으로 수정과 힙의를 진행 후 3단계 다시 수행

 

2.6. UI 설계서 작성 (★)

UI 설계서란?

UI 설계를 구체화하여 작성하는 문서

 

UI 설계서 작성 순서 : 표개요시사프화

 ① 표지 작성 : 프로젝트 명 or 시스템 명

 ② 개정 이력 작성 : UI 설계서가 수정될 때 마다 어떤 내용이 수정되었는 지 정리한 문서 (Ver 1.0을 시작으로 0.1 씩)

 ③ 요구사항 정의서 작성 : 사용자의 요구사항을 작성한 문서 (UI 적용 여부를 요구사항 별로 작성)

 ④ 시스템 구조 작성 : UI 요구사항 및 프로토 타입에 기초하여 전체 시스템의 구조를 설계

 ⑤ 사이트 맵 작성 : 시스템 구조를 바탕으로 사이트에 표시할 콘텐츠를 메뉴 별로 구분하여 설계

 ⑥ 프로젝트 정의서 작성 : 사용자 관점에서 프로세스를 작업 순서에 따라 작성 (UI 전체 흐름 파악 가능)

 ⑦ 화면 설계 : 프로토타입, 프로세스를 참고하여 화면을 페이지 별로 설계 (화면 별 고유 ID 부여, 스토리보드 형태)

 

2.7. HCI / UX / 감성공학 (★)

HCI란?

사람이 시스템을 보다 편리하고 안전하게 사용할 수 있도록 개발, 연구하는 학문 

 

UX란?

사용자가 시스템을 이용하면서 생각하는 모든 경험

 

감성공학이란?

인간의 감성을 정성적 · 정량적으로 측정 및 평가하고 과학적으로 분석하여 실제 제품 설계로 실현하는 공학

 

나가마치 미츠오 교수님의 감성 공학의 접근 방식 

 - 1류 접근 방법 : 의미 미분법, 인간의 감성을 표현하는 어휘를 이용하여 제품 이미지 조사하여 디자인 요소와 연계

 - 2류 접근 방법 : 문화적 감성의 일부 반영, 개인이 가지고 있는 이미지를 구체화하는 방법 

 - 3류 접근 방법 : 기존의 감성적 어휘 대신 공학적인 방법으로 인간의 감각을 측정하고 수학적 모델로 구축