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

2022년 정보처리기사 필기

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

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

 

1. 소프트웨어 설계

Cp2. 화면 설계2

 

 

---

 

1. UI 설계

1-1) UI 설계 프로세스

순서	프로세스	설명
1	문제 정의	시스템 목적 수립, 최적화 위해 해결할 문제를 정의
2	사용자 모델 정의	사용자 특성 파악해 사용자모델 정의 사용자모델은 사용자의 소프트웨어와 작업에 대한 지식 정도에 따라 초보자, 중급자, 숙련자로 분류
3	작업 분석	문제 정의하고 사용자 특징을 세분화하는 작업 분석 수행
4	컴퓨터 오브젝트 및 기능 정의	분석한 작업을 컴퓨터의 어떤 사용자 인터페이스를 통해 표현할 것인지 정의
5	사용자 인터페이스 정의	작업 모델을 기반으로 작업자가 예측한 대로 동작하도록 사용자 인터페이스를 정의 사용자인터페이스 설계에서는 컴퓨터나 작업 수행 방법에 상호작용을 하는 오브젝트(마우스, 키보드 등)를 선택, 시스템의 상태를 명확히 함
6	디자인 평가	설계한 인터페이스가 분석한 작업에 맞게 설계가 되었는지, 사용자의 능력이나 지식에 적합한지, 사용자가 쓰기 쉽고 편리한지 등을 평가 GOMS, 휴리스틱 등의 사용성 공학의 평가 방법론 활용

*GOMS: Goals, Operators, Methods, Selection rules의 약자

*Heuristic: 경험 기반으로 문제해결 또는 학습하거나 발견하는 기법

 

1-2) UI 흐름 설계

순서	프로세스	설명
1	기능 작성	기능적 요구사항 검토(입출력 데이터 파악, 저장데이터 분석, 수행연산 분석), 비기능적 요구사항 정의(처리속도, 보안성 등 시스템 기능)
2	입력 요소 확인	화면에 표현되어야할 기능 확인 기능표현 위해 필요한 페이지 확인 각 화면간 이동과 흐름 확인
3	유스케이스 설계	UI 요구사항 기반으로 액터별 시나리오 작성 액터의 상호작용을 기반으로 액터를 그룹화, 세분화 유스케이스 설계(각 입력 요소들의 형태 등 구상)
4	기능 및 양식 확인	입력박스, 콤보박스 등 확인하고 규칙 정의

 

1-3) UI 상세 설계

순서	프로세스	설명
1	UI 요구사항 기반으로 메뉴구조 설계	UI 상세설계 위한 요구사항 최종 확인 UI 설계서 표지 및 개정 이력 작성 UI 구조, 메뉴구조, 화면구조설계
2	내외부 화면과 폼설계	실행차이 줄이기 위한 UI 설계원리 검토 평가차이 줄이기 위한 UI설계원리 검토 하위 시스템 단위의 내외부 화면과 폼 설계
3	UI 검토 및 보완	UI가 요구사항에 맞게 설계되었는지 검토

 

 

2. 감성공학

: 인간 감성을 정성적, 정량적으로 측정 및 평가하고, 과학적 분석으로 구체적인 제품설계로 실현해 내는 공학

: 감성공학의 연구 영역은 인간의 생리적, 심리적 특성에 기반한 인간과 기계 또는 환경 사이를 연계시키는 인터페이스 설계 분야.

 

2-1. 감성공학의 접근 방법

1) 1류 접근방법

: 의미 미분법

: 인간 감성을 표현하는 어휘를 이용하여 제품 이미지 조사, 분석통해 제품 디자인 요소와 연계시키는 방법

2) 2류 접근방법

: 문화적 감성의 일부 반영

: 개인의 연령, 성별 등 개별적 특성과 생활 방식으로부터 개인이 갖고 있는 이미지를 구체화하는 방법

: 감성의 심리적 특성을 강조한 접근 방법

3) 3류 접근방법

: 기존의 감성적 어휘 대신 공학적인 방법으로 접근해 인간의 감각을 측정, 이를 바탕으로 수학적 모델을 구축하여 활용

: 제품의 물리적 특성에 대한 객관적 지표와 연관분석을 통해 설계에 응용

: 감성의 생리적 특성을 강조한 접근 방법

 

2-2. 감성공학 관련 기술의 종류

구분	세부요소	설명
감성공학 기반 기술	인간공학	인간특성을 고려해 디자인을 과학적인 방법으로 사용하기 편리하게 만듦
	생체기술	생물의 다양한 기능을 인위적으로 모방해 이용하는 기술
	인간 감각 계측 기술	인간 감각을 측정
감성공학 기반 인터페이스 구현 기술	센서 및 센싱 기술	온도, 속도, 장치의 상태를 계측 및 제어하며, 어떠한 반으에 의해 자동으로 행동할 수 있도록 하는 기술
	디스플레이 기술	인간 시각에 최적화된 영상을 보여줌
	액츄에이터 기술	유체에너지를 이용해 기계적인 작업을 함
	센서 퓨전 기술	측정 대상물로부터 물리량을 검출하고 검출된 물리량을 전기적인 신호로 변환시켜주는 센서를 응용하는 기술
	마이크로 머시닝 기술	집적회로 제조 기술을 이용하여 3차원 구조의 센서를 미세 가공하는 기술
	퍼지 뉴럴 네트워크 기술	인간의 뇌 기능을 모방해 연산, 인공지능에 활용
	산업 디자인 기술	최적의 산업제품을 만드는 디자인기술
적합성 판단/ 새로운 감성 창출 기술	사용성 평가 기술	인간 감성에 기반한 사용 편의성 등을 평가
	가상 현실 기술	특정상황을 3차원 그래픽으로 나타내 마치 실제 주변 상황,환경과 상호작용을 하는 것처럼 만들어 줌

 

3. UI 설계 도구

: 사용자와 시스템 사이 의사소통을 위해 접근을 목적으로 만들어진 물리적, 가상적 매개체인 UI의 설계 지원 도구

: UI설계도구는 분석, 설계 및 구현 부분을 지원함.

 

3-1. UI 개발 단계별 활용 가능한 설계 도구

프로세스	UI디자이너	업무전문가/개발자	도구
분석	UI 표준 설계	화면 프로토타이핑 화면 정의 보고서 정의	UI 패턴 UI 모델링
설계	디자인 시안 제작 화면 템플릿 제작	화면 설계 보고서 설계 응용 아키텍처 구현	UI 설계
구현	-	화면 개발	프로토타이핑 틀

 

3-2. UI 설계 도구의 유형

: UI 구현 절차에 따라 기획단계에서 화면 UI 설계 및 인터랙션 적용에 적합한 도구와 설계 작업 이후 이미 설계된 이미지의 인터랙션 적용에 적합한 도구로 구분할 수 있음.

1) 화면 설계 도구

도구	설명
파워 목업	PPT에 추가메뉴를 설치해 지원 PPT 레이아웃, 컴포넌트, 내비게이션 등 다양한 목업을 드래그해서 사용
발사믹 목업	스케치 느낌으로 빠르고 심플하게 콘셉을 전달 디테일보다는 간단한 스케치
카카오 오븐	카카오 제작의 온라인 프로토타이핑 도구 직관적 인터페이스와 손쉬운 사용 제작화면을 QR코드, URL 통해 공유

2) 프로토타이핑 도구

도구	설명
UX핀	웹을 통해 와이어프레임과 프로토타이핑 작업을 동시에 할 수 있는 도구 구글 글라스에 포함한 다양한 디바이스환경에 맞춰 설계 가능 다양한 목업 지원 가능
액슈어(AXURE)	UI설계보다 스토리보드에 포함되는 정책, 플로차트, 디스크립션까지 모두 작성 가능
네이버 프로토나우	네이버에서 만든 프로토타이핑 툴로 스토리보드, 플로차트 등의 기능 지원 가능

3) UI디자인 도구

도구	설명
스케치	다양한 목업, 템플릿을 활용한 레이아웃 중심의 UI 디자인 설계 지원 도구
어도비 익스피리언스 디자인 CC (Adobe XD)	UI 디자인에 최적화된 툴 쉽고 직관적인 인터페이스 제공 포토샵, 일러스트와 연동 지원

4) UI 디자인 산출물로 작업하는 프로토타이핑 도구

도구	설명
인비전(Invision)	포토샵, 스케치 등으로 디자이너가 작업한 결과를 사이트에 업로드하고, UI를 연결해 간단한 인터랙션 적용이 가능
픽사에이트(Pixate)	구글이 인수한 프로토타이핑 툴. 현재 아마존, 애플 등 다양한 회사에서 사용 모바일 앱 프로토타이핑에 최적화. 디테일한 인터랙션 설정
프레이머(Framer)	커피 스크립트 개발언어를 사용하는 코드 기반의 프로토타이핑 도구 코드기반으로 실제 작업물과 흡사하게 작동