[2022년 정보처리기사 필기] 1. 소프트웨어설계: Cp2. 화면 설계

2022년 정보처리기사 필기

(수제비 2021년 필기책 보고 공부하며 요약한 내용입니다.)

http://www.yes24.com/Product/Goods/96051171

 

1. 소프트웨어 설계

Cp2. 화면 설계

 

---

 

1. UI

: 사용자와 시스템 사이에서 의사소통할 수 있도록 고안된 물리적, 가상의 매개체

*UX: 제품과 시스템, 서비스 등을 사용자가 직,간접적으로 경험하면서 느끼고 생각하는 총체적 경험

 

1-1. UI 유형

: CLI, GUI, NUI, OUL

NUL: 직관적 사용자 반응 기반 인터페이스. 사용자가 가진 경험을 기반으로 키보드/마우스 없이 신체부위를 이용함. (터치,음성 포함)

OUL: 유기적 상호작용 기반 인터페이스. 입력장치가 곧 출력장치이며, 세상 모든 사물이 입출력장치가 될 수 있음

 

1-2. UI 분야

1) 물리적 제어 분야: 정보 제공과 기능 전달을 위한 하드웨어 기반

2) 디자인적 분야: 콘텐츠의 정확하고 상세한 표현과 전체적 구성

3) 기능적 분야: 사용자의 편의성에 맞춰 쉽고 간편하게 사용

 

1-3. UI 설계 원칙

UI 설계원칙	설명	부특성
직관성(intuitiveness)	누구나 쉽게 이해하고 쉽게 사용	쉬운 검색, 쉬운 사용성, 일관성
유효성(efficiency)	정확하고 완벽하게 사용자 목표 달성될 수 있도록 제작	쉬운 오류 처리 및 복구
학습성(learnability)	쉽게 배우고 사용할 수 있게 제작	쉽게 학습, 쉬운 접근, 쉽게 기억
유연성(flexibility)	사용자 인터렉션을 최대한 포용하고, 실수를 방지할 수 있도록 제작	오류 예방, 실수 포용, 오류감지

 

1-4. UI 설계 지침

1) 사용자 중심: 사용자가 이해하기 쉽고 편하게 사용하는 환경을 제공

2) 일관성: 버튼, 조작 방법을 기억하기 빠르고 쉽게 습득하도록 설계

3) 단순성: 조작방법을 간단하게 작동하도록 함

4) 결과 예측 가능

5) 가시성: 주기능을 메인화면에 노출해 쉬운 조작이 가능하도록 함

6) 표준화: 디자인을 표준화하여 기능 구조의 선행 학습 후 쉽게 사용 가능해야함

7) 접근성: 사용자의 직무, 연령, 성별 등이 고려된 다양한 계층을 수용해야 함.

8) 명확성: 사용자가 개념적으로 쉽게 인지해야함

9) 오류 발생 해결: 사용자가 오류에 대한 상황을 정확하게 인지할 수 있어야 함

 

1-5. UI 시스템의 필요 기능

: 사용자의 입력을 검증함

: 에러 처리와 에러 메시지를 처리함

: 도움과 프롬프트 제공함

 

2. UI표준이란?

:  디자인 철학과 원칙 기반 하에 전체 시스템에 공통으로 적용되는 화면 간 이동, 화면구성 등에 관한 규약

 

UI 표준구성	설명
전체적인 UX 원칙	사용자관점에서 사용자업무를 효율적으로 수행
정책 및 철학	조직 목표, 정체성 포함하는 정책 및 철학 설정
UI 스타일 가이드	UI에 대한 구동 환경 및 레이아웃 등을 정의
UI 패턴 모델 정의	CRUD 방식을 기반으로 데이터 입력, 출력 패턴 모델 정의
UI 표준 수립을 위한 조직 구성	UI 팀 및 표준 개발 팀을 주축으로 추진 조직 구성

 

2-1. UI 스타일 가이드 구성

1) 기업이 운영하는 업무와 OS 확인

2) 기업 환경에 가장 적합한 웹 브라우저 확인

3) 모니터 해상도 확인

4) 프레임 세트 확인 (레이아웃)

 

3. UI 지침

: UI 표준에 따라 사용자인터페이스 설계, 개발 시 지켜야할 세부 사항

1) 목표 정의: 환경 분석, UI 개발 목표 및 범위 정의

2) 프로젝트 계획: 사용자 분석 및 니즈 조사

3) 요구사항 정의: 요구사항 도출, UI 컨셉션 정의

4) 설계 및 구현: UI 상세 설계, UI화면 디자인, UI 검증

5) 테스트

6) 배포 및 관리

 

3-1. UI 개발을 위한 주요기법

1) 3C분석: 고객, 자사와 경쟁사를 비교분석해 자사를 어떻게 차별화해서 경쟁해서 이길 것인지 분석

2) SWOT분석: 강점, 약점, 기회, 위협 요인 규정해 경영 전략 수립

3) 시나리오 플래닝: 불확실성 높은 상황 변화를 사전에 예측하고 다양한 시나리오를 설계하는 방법으로 불확실성을 제거해나가려는 경영 전략의 한 방법

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

5) 워크숍: 소집단 정도의 인원으로 문제, 과제에 대한 새로운 지식, 기술, 아이디어, 방법 들을 서로 교환하고 검토하는 연구회 및 세미나

 

3-2. 사용자 요구사항 도출

사용자 요구사항 도출활동	개요	세부 수행 활동
페르소나 정의	잠재적 사용자의 다양한 목적과 관찰된 행동 패턴을 응집시켜 놓은 가상의 사용자	페르소나 분류 및 정의 페르소나 작성 페르소나 활용
콘셉트 모델 정의	여러 추상적 콘셉트들 사이 관계를 보여주는 다이어그램 다양한 아이디어들을 간편히 시각화하여 표현할 수 있는 유용한 방법으로 아이디어를 잘 전달하고 생각의 과정을 효율적으로 이끌어줌	콘셉트 모델 정의 브레인 스토밍 활용
사용자 요구사항 정의	리서치 및 페르소나 결과물을 토대로 요구사항 도출 후 우선순위 정의	요구사항 매트릭스 작성 정황 시나리오 제작 정황 시나리오로부터 요구사항 도출
UI 컨셉션	요구사항을 구체화하는 단계 디자인 단계 전에 대표 화면 설계를 진행함	정보 구조 설계 대표화면 아이어 프레임 스케치 페이퍼 프로토타입을 통한 스토리보드 설계

*요구사항 매트릭스: 수집된 요구사항들을 검토패 페르소나 목적을 기준으로 데이터 요구, 기능요구, 제품품질, 제약 요인 기반으로 만든 요구사항 표

*정황 시나리오: 요구사항 정의에 사용되는 초기 시나리오. 높은 수준, 낙관적이면서도 발생 상황에서의 이상적인 시스템 동작에 초점을 맞추는 시나리오

 

3-3. UI 상세 설계

: UI 시나리오 문서는 UI 기능 구조, 대표화면, 화면간 인터랙션 흐름, 예외처리방식 등을 문서로 정리한 것.

효율적인 UI관리와 여러 이해관계자 간의 원활한 의사소통을 할 수 있게 해줌

작성요건	설명
완전성	누락이 없어야하고, 상세하게 기술 시스템기능보다 사용자 태스크에 초점을 맞춰 기술
일관성(consistent)	서비스 목표, 요구사항, UI 스타일을 일관적으로 구성
이해성	어려운 용어 사용하지 말아야 함
가독성	문서를 쉽게 읽을 수 있어야 함
추적용이성	변경사항이 언제, 어디서, 어떻게 왜 발생했는지 추적이 쉬워야 함
수정용이성	쉽게 변경 가능 해야 하고, 동일한 수정사항을 위해 여러 문서를 편집하지 않도록 함.

 

4. 스토리보드란?

: UI 화면 설계를 위해서 정책, 프로세스 및 콘텐츠의 구성, 와이어 프레임(UI, IX), 기능에 대한 정의, 데이터베이스의 연동 등 구축하는 서비스를 위한 대부분 정보가 수록된 문서

: 디자니어와 개발자가 최종적으로 참고하는 산출 문서

: UI 화면 설계를 위해 스토리보드, 와이어프레임, 프로토타입이 활용됨

 

4-1. UI 화면 설계 구분

구분	설명	도구
와이어프레임	화면구성 협의, 서비스 흐름 공유 위해 화면 단위의 레이아웃을 설계하는 작업	PPT, 키노트, 스케치, 일러스트
스토리보드	정책, 프로세스, 콘텐츠, 구성, 와이어프레임, 기능 정의, DB 연동 등 서비스 구축을 위한 모든 정보가 담겨 있는 설계 산출물	파워포인트 키노트 스케치
프로토타입	정적인 화면으로 설계된 와이어 프레임 또는 스토리보드에 동적효과를 적용함으로써 실제 구현된 것처럼 시뮬레이션 할 수 있는 모형	HTML/CSS

 

4-2. 스토리보드 작성 절차

1) 전체 개요 작성: 문서명, 개정이력, 디렉토리, 작성 일자, 업데이트 기록 등 전반적인 개요 명시

2) 서비스 흐름 작성: 메인페이지로 부터 각각의 서브메뉴와 어떤 화면을 거쳐 진행되는지 과정을 보여줌

3) 스타일 확정: 레이아웃, 글자 모양, 크기, 색상, 그래픽 등 일관성 있게 스타일 확정

4) 메뉴별 화면 설계도 작성 및 상세설명: 각각 화면에 대한 상세 설명 페이지를 작성

5) 추가 관련 정보 작성