2024 #정보처리기사 필기요약 #1-2. 화면 설계

---

제 1과목 소프트웨어 설계 > 화면 설계

---

(1) UI 요구사항 확인

사용자 인터페이스(UI; User Interface)

• 사용자 중심으로 설계되어야 한다. [2021년 3회]
• 넓은 의미에서 사용자와 시스템 사이에서 의사소통할 수 있도록 고안된 물리적, 가상의 매개체이다.
• 좁은 의미로는 정보 기기나 소프트웨어의 화면 등에서 사람이 접하게 되는 화면이다.
• 배우기가 용이하고 쉽게 사용할 수 있도록 만들어져야 한다.
• 사용자 요구사항이 UI에 반영될 수 있도록 구성해야 한다.

사용자 경험(UX; User eXperience)

• 제품과 시스템, 서비스 등을 사용자가 직·간접적으로 경험하면서 느끼고 생가하는 총체적 경험을 의미한다.

UI 유형 (CG NO)

유형	특징	설명
CLI (Command Line Interface)	정적인 텍스트 기반 인터페이스	명령어를 텍스트로 입력하여 조작하는 사용자 인터페이스 대표적으로 DOS 및 UNIX 등의 운영체제에서 조작을 위해 사용하던 것으로, 정해진 명령 문자열을 입력하여 시스템을 조작하는 사용자 인터페이스 [2021년 3회] [2022년 3회]
GUI (Graphical User Interface)	그래픽 반응 기반 인터페이스	그래픽 환경을 기반으로 한 마우스나 전자펜을 이용하는 사용자 인터페이스
NUI (Natural User Interface)	직관적 사용자 반응 기반 인터페이스	사용자가 가진 경험을 기반으로 키보드나 마우스 없이 신체 부위를 이용하는 사용자 인터페이스(터치, 음성 포함) [2023년 3회]
OUI (Organic User Interface)	유기적 상호작용 기반 인터페이스	입력장치가 곧 출력장치가 되고, 현실에 존재하는 모든 사물이 입출력장치로 변화할 수 있는 사용자 인터페이스

NUI > 모바일 제스처(Mobile Gesture) [2022년 3회] [2023년 2회]

• Tap : 누르기
• Double Tab : 두 번 누르기
• Drag : 누른 채 움직임
• Pan : 누른 채 계속 움직임
• Press : 오래 누르기
• Flick : 빠르게 스크롤
• Pinch : 두 손가락으로 넓히기/좁히기

UI 설계 원칙 (직유 학유)

설계 원칙	설명	부특성
직관성 (Intuitiveness)	누구나 쉽게 이해하고, 쉽게 사용할 수 있어야 함 [2020년 1회]	쉬운 검색 쉬운 사용성 일관성
유효성 (Efficiency)	정확하고 완벽하게 사용자의 목표가 달성될 수 있도록 제작	쉬운 오류 처리 및 복구
학습성 (Learnability)	초보와 숙련자 모두가 쉽게 배우고 사용할 수 있게 제작	쉽게 학습 쉬운 접근 쉽게 기억
유연성 (Flexibility)	사용자의 인터랙션을 최대한 포용하고, 실수를 방지할 수 있도록 제작	오류 예방 실수 포용 오류 감지

UI 설계 지침 [2021년 2회] [2022년 1회, 2회]

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

• 이해하기 편하고 쉽게 사용할 수 있는 환경을 제공해야 함
• 주요 기능을 메인 화면에 노출하여 조작이 쉽도록 하여야 함
• 오류가 발생하면 사용자가 쉽게 인지할 수 있도록 설계해야 함
• 사용자의 직무, 연령, 성별 등 다양한 계층을 수용하여야 함
• 심미성보다는 사용성을 우선하여 설계해야 함

UI 시스템의 필요 기능

• 사용자 입력의 검증
• 에러 처리와 에러 메시지 처리
• 도움(Help)과 프롬프트(Prompt) 제공

---

UI 표준 개념

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

 

UI 표준 구성 (액정 스패조)

• 전체적인 UX 원칙
• 정책 및 철학
• UI 스타일 가이드
• UI 패턴 모델 정의
• UI 표준 수립을 위한 조직 구성

UI 표준 수립 시 고려사항

• 사용자가 불편해하지 않아야 한다.
• 많은 업무 케이스를 포함해야 한다.
• 다양한 사용상황에 대처할 수 있어야 한다.
• 표준 적용이 쉽도록 충분한 가이드와 활용 수단 제공이 필요하다.
• 변화하는 상황에 맞게 빠르게 변경할 수 있는 관리조직 수반이 필요하다.

UI 스타일 가이드 구성

• UI 구동 환경 정의
• 레이아웃 정의
• 네비게이션 정의
• 기능 정의

UI 기본 개념

• Feedback : 시스템의 상태와 사용자의 지시에 대한 효과를 보여주어 사용자가 명령에 대한 진행 상황과 표시된 내용을 해석할 수 있도록 도와주는 것 [2022년 2회]

---

 

UI 지침(Guideline)

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

소프트웨어 개발 단계별 UI 지침

목표 정의 → 프로젝트 계획 → 요구사항 정의 → 설계 및 구현 → 테스트 → 배포 및 관리

UI 개발 목표 및 범위 정의

• 경영진의 UI 관련 개발 요구사항 조사 및 정의
• 자사-타사-사용자 분석(3C 분석) 및 트렌드 분석
• 관계자 간 개발 목표 협의 및 공유 워크숍

UI 개발을 위한 주요 기법

기법	설명
3C 분석	고객(Customer), 자사(Company), 경쟁사(Competitior) 를 비교하고 분석하여 어떻게 차별화해서 경쟁에서 이길 것인가를 분석하는 기법
SWOT 분석	기업의 내부 환경과 외부 환경을 분석하여 Strength(강점), Weakness(약점), Opportunity(기회) Threat(위협) 요인을 규정하고 이를 토대로 경영 전략을 수립하는 방법
시나리오 플래닝 (Scenario Planning)	불확실성이 높은 상황 변화를 사전에 예측하고 다양한 시나리오를 설계하는 방법으로 불확실성을 제거해나가려는 경영 전략의 한 방법
사용성 테스트 (Usability Test)	사용자가 직접 제품을 사용하면서 미리 작성된 시나리오에 맞추어 과제를 수행한 후 질문에 답하도록 하는 테스트
워크숍 (Workshop)	소집단 정도의 인원으로 특정 문제나 과제에 대한 새로운 지식, 기술, 아이디어, 방법들을 서로 교환하고 검토하는 연구회 및 세미나

사용자 요구사항 도출

• 페르소나(Persona) 정의
• 콘셉트 모델 정의
• 사용자 요구사항 정의
• UI 컨셉션

UI 컨셉션 세부 수행 활동 (정와스)

정보 구조 설계 / 와이어 프레임 스케치 / 스토리보드 설계

UI 상세설계 - 시나리오 문서의 작성 요건 (완일이가 추수)

• 완전성(Complete)
• 일관성(Consistent)
• 이해성(Understandable)
• 가독성(Readable)
• 추적 용이성(Traceable)
• 수정 용이성(Modifiable)

---

(4) 스토리보드

스토리보드(Storyboard) 개념

• 스토리보드는 UI 화면 설계를 위해서 정책이나 프로세스 및 콘텐츠의 구성, 와이어 프레임(UI, UX), 기능 정의, 데이터베이스 연동 등 구축 서비스를 위한 정보가 수록된 문서이다.
• 디자이너와 개발자가 최종적으로 참고하는 산출 문서이다.
• UI 화면 설계를 위해서는 스토리보드, 와이어 프레임, 프로토타입이 활용된다.

UI 설계 도구

UI 설계 도구	설명
와이어 프레임 (Wireframe)	이해관계자들과의 화면구성을 협의하거나 서비스의 간략한 흐름을 공유하기 위해 화면 단위의 레이아웃을 설계하는 작업
스토리보드 (Storyboard)	정책, 프로세스, 콘텐츠 구성, 와이어 프레임(UI, UX), 기능 정의, 데이터베이스 연동 등 서비스 구축을 위한 모든 정보가 담겨 있는 설계 산출물
프로토타입 (Prototype)	정적인 화면으로 설계된 와이어 프레임 또는 스토리보드에 동적 효과를 적용함으로써 실제 구현된 것처럼 시뮬레이션 할 수 있는 모형
목업 (Mockup)	디자인, 사용 방법 설명, 평가 등을 위해 실제 화면과 유사하게 만든 정적인 형태의 모형 [2022년 1회] [2023년 1회] 시각적으로만 구성 요소를 배치하는 것으로 일반적으로 실제로 구현되지는 않음
유스케이스 (Use Case)	사용자가 원하는 목표를 달성하기 위해 수행할 내용을 기술한 것

스토리보드 작성 절차

1. 전체 개요 작성
2. 서비스 흐름 작성
3. 스타일 확정
4. 메뉴별 화면 설계도 작성 및 상세설명
5. 추가 관련 정보 작성 

---

(2) UI 설계

UI 설계 프로세스 (문사 작컴 인디)

→ 프로세스 순서 암기법 : 문사 작업용 컴퓨터인디

1. 문제 정의
2. 사용자 모델 정의
3. 작업 분석
4. 컴퓨터 오브젝트 및 기능 정의
5. 사용자 인터페이스 정의
6. 디자인 평가

UI 흐름 설계 (기입유양)

UI 흐름 설계는 '화면에 표현되어야 할 기능 작성, 화면의 입력 요소 확인, UI 요구사항을 기반으로 유스케이스 설계, 기능 및 양식 확인' 순으로 되어 있다.

1. 화면에 표현되어야 할 기능 작성
2. 화면의 입력 요소 확인
3. UI 요구사항을 기반으로 유스케이스 설계
4. 기능 및 양식 확인

UI 설계 도구의 유형

UI 설계 도구는 사용자와 시스템 사이에 의사소통할 수 있도록 일시적 또는 영구적인 접근을 목적으로 만들어진 물리적, 가상적 매개체인 UI의 설계를 지원하는 도구이다.

• 화면 설계 도구
  ex) 파워 목업, 발사믹 목업, 카카오 오븐
• 프로토타이핑 도구
  ex) UXPin, AXURE, ProtoNOW
• UI 디자인 도구
  ex) Sketch, Adobe XD
• UI 디자인 산출물로 작업하는 프로토타이핑 도구
  ex) Invision, Pixate, Framer

 

감성공학(Sensibility Ergonomics) 

인간의 감성을 제품 설계로 실현해 내는 공학

감성공학의 접근 방법(나가마치 미츠오 교수)

구분	설명
1류 접근 방법	인간의 감성을 표현하는 어휘를 이용하여 제품 이미지를 조사, 그 분석을 통해 제품 디자인 요소와 연계시키는 접근 방법
2류 접근 방법	개인의 연령, 성별 등의 개별적 특성과 생활 방식으로부터 개인이 갖고 있는 이미지를 구체화하는 방법 감성의 심리적 특성을 강조한 접근 방법
3류 접근 방법	기존의 감성적 어휘 대신 공학적인 방법으로 접근하여 인간의 감각을 측정, 이를 바탕으로 수학적 모델을 구축하여 활용

감성공학 관련 기술의 종류

구분	세부 요소
감성공학 기반 기술	인간공학
	생체 기술
	인간 감각 계측 기술
감성공학 기반 인터페이스 구현 기술	센서 및 센싱 기술
	디스플레이 기술
	액츄에이터 기술
	센서 퓨전 기술
	마이크로 머시닝 기술
	퍼지 뉴럴 네트워크 기술
	산업 디자인 기술
적합성 판단 / 새로운 감성 창출 기술	사용성 평가 기술
	가상 현실 기술

 

---