[정보처리기사] 실기 - 2과목 화면 설계 정리

ch01 UI 요구사항 확인

 

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

▶ UI 유형
*CGNO*

 - CLI : 정적 텍스트 기반 / 명령어를 텍스트로 입력하여 조작

 - GUI : 그래픽 반응 기반 / 그래픽 환경을 기반 (마우스, 전자펜)

 - NUI : 직관적 사용자 반응 기반 / 신체 부위 이용 (터치, 음성)

 - OUI : 유기적 상호작용 기반 / 모든 사물이 입출력장치로 변화

▶ UI 설계 원칙
*직유학유*

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

 - 유효성 : 정확하고 완벽하게 사용자의 목표가 달성될 수 있도록 제작

 - 학습성 : 쉽게 배우고 사용할 수 있게 제작

 - 유연성 : 사용자의 인터랙션을 최대한 포용하고 실수를 방지

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

설계지침	설명
사용자 중심	사용자가 이해하기 쉽고 편하게 사용할 수 있는 환경 제공
일관성	버튼이나 조작 방법을 사용자가 기억하기 쉽고 빠르게 습득할 수 있도록 설계
단순성	조작 방법은 가장 간단하게 작동
결과 예측 가능	작동시킬 기능만 보고도 결과 예측이 가능
가시성	주요 기능을 메인 화면에 노출하여 쉬운 조작이 가능
표준화	디자인을 표준화하여 기능구조의 선행 학습 이후 쉽게 사용 가능
접근성	다양한 계층 수용
명확성	사용자가 개념적으로 쉽게 인지
오류 발생 해결	오류에 대한 상황을 정확하게 인지

▶ UI 품질 요구사항 (ISO/IEC 9126 기반)
*기신사효유이*
① 기능성 : 실제 수행 결과와 품질 요구사항과의 차이를 분석

• 상세 품질 요구사항
  • 적절성 : 소프트웨어 제품이 필요 적적한 기능들을 제공
  • 정밀성 : 소프트웨어 제품이 요구되는 정확도로 올바른 결과를 산출
  • 상호 운용성 : 소프트웨어 제품이 특정 시스템과 상호작용하여 운영
  • 보안성 : 비인간된 접근 차단, 고의적 접근 인지하여 대처
  • 호환성 : 소프트웨어 제품이 비슷한 환경에서 표준, 관례 및 규정을 준수

② 신뢰성 : 시스템이 작동되는 시간 동안 의도하는 기능을 수행함을 보증

• 상세 품질 요구사항
  • 성숙성 : 결함으로 인한 고장 회피
  • 고장 허용성 : 결함이나 오류 시에도 특정 수준 이상의 성능 유지
  • 회복성 : 고장 발생 시 영향을 받은 데이터 복구하고 성능의 수준을 확보

③ 사용성 : 어떠한 행위를 정확하고 쉽게 인지할 수 있는 품질 기준

• 상세 품질 요구사항
  • 이해성 : 논리적 개념과 적용 가능성을 구분하는 데 필요한 사용자의 노력
  • 학습성 : 애플리케이션 학습에 필요한 사용자의 노력
  • 운용성 : 운용과 운용 통제에 필요한 사용자의 노력

④ 효율성 : 할당된 시간에 한정된 자원으로 얼마나 빨리 처리할 수 있는지

• 상세 품질 요구사항
  • 시간 효율성 : 반응 시간, 처리 시간 및 처리율
  • 자원 효율성 : 자원의 양과 그 지속시간

⑤ 유지보수성 : 요구사항을 개선하고 확장하는데 있어 얼마나 용이한가

• 상세 품질 요구사항
  • 분석성 : 고장의 원인, 결함 진단 또는 수정이 요구되는 부분 확인
  • 변경성 : 결함 제거 또는 환경 변화에 따른 수정
  • 안정성 : 변경으로 발생하는 예상치 못한 영향에 의한 위험 요소
  • 시험성 : 변경되어 검증에 필요한 노력의 정도

⑥ 이식성 : 다른 플랫폼에서도 많은 추가 작업 없이 얼마나 쉽게 적용 가능한가

• 상세 품질 요구사항
  • 적용성 : 목적을 위해 제공된 수단이나 다른 조치 없이 특정 환경으로 전환
  • 설치성 : 특정 환경에 소프트웨어를 설치하는 데 필요한 노력
  • 대체성 : 특정 운용 환경하에서 동일한 목적 달성을 위해 다른 소프트웨어를 대신 사용

▶ UI 표준 : 전체 시스템에 공통으로 적용되는 화면 간 이동, 화면 구성 등에 관한 규약

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

▶ UI 지침 : UI 표준에 따라 사용자 인터페이스 설계, 개발 시 지켜야 할 세부사항을 규정하는 가이드라인

▶ UI 개발을 위한 주요 기법

 - 3C 분석 : 고객, 자사, 경쟁사를 비교 분석하여 어떻게 경쟁에서 이길 것인지 분석

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

 - 시나리오 플래닝 : 상황 변화를 사전에 예측하고 다양한 시나리오를 설계

 - 사용성 테스트 : 사용자가 직점 제품을 사용하면서 과제를 수행하고 질문에 답하도록 하는 테스트

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

▶ 사용자 요구사항 도출
 - 페르소나 정의 : 잠재적 사용자의 다양한 목적과 관찰된 행동 패턴을 응집시켜 놓은 가상의 사용자
 - 콘셉트 모델 정의 : 여러가지 추상적인 콘셉트들 사이의 관계를 보여주는 다이어그램
 - 사용자 요구사항 정의 : 결과물을 토대로 요구사항을 도출, 우선순위를 정함
 - UI 컨셉션 : 정리된 요구사항을 구체화 하는 단계 (정보 구조 설계 / 와이어 프레임 스케치 / 스토리보드 설계)

▶ 스토리보드 : UI 화면 설계를 위해 구축하는 서비스를 위한 대부분의 정보를 수록한 문서

▶ UI 화면 설계 구분
*와스프*

 - 와이어 프레임 (Wireframe) : 화면단위의 레이아웃을 설계하는 작업

 - 스토리보드 (Storyboard) : 서비스 구축을 위한 모든 정보가 담겨있는 설계 산출물

 - 프로토타입 (Prototype) : 실제 구현된 것 처럼 시뮬레이션 할 수 있는 모형. 요구사항을 좀 더 잘 이해하고 결정하기 위해 전체적인 기능을 간략한 형태로 구현한 시제품

 

---

ch02 UI 설계

 

▶ UML : 객체지향 소프트웨어 개발 과정에서 산출물을 명세화, 시각화, 문서화 할 때 사용되는 표준화된 범용 모델링 언어

▶ UML 특징
*가구명문*
가시화 언어 / 구축 언어 / 명세화 언어 / 문서화 언어

▶ UML 구성요소
*사관다*
- 사물 (Things) : 주제 , 명사 or 동사
- 관계 (Relationships) : 관계 표현 , 형용사 or 부사
- 다이어그램 (Diagrams) : 그림으로 표현

▶ UML 다이어그램

• 구조적/정적 다이어그램 : *클객컴배복패*
• 행위적/동적 다이어그램 : *유시커상활타*

 

• 구조적 / 정적 다이어그램

다이어그램	설명
클래스 (Class)	클래스의 속성 및 연산과 클래스 간 정적인 관계 표현
객체 (Object)	인스턴스를 특정 시점의 객체와 객체 사이의 관계로 표현
컴포넌트 (Component)	물리적인 컴포넌트와 그들 사이의 의존 관계
배치 (Deployment)	컴포넌트 사이의 종속성 표현
복합체 구조 (Composite Structure)	클래스나 컴포넌트가 복합 구조를 갖는 경우 그 내부 구조를 표현
패키지 (Package)	유스케이스나 클래스 등을 그룹화한 패키지들의 관계 표현

• 행위적 / 동적 다이어그램

다이어그램	설명
유스케이스 (Usecase)	사용자 관점에서 표현
시퀀스 (Sequence)	시간적 개념을 중심으로 메시지 흐름으로 표현
커뮤니케이션 (Communication)	객체들이 주고받는 메시지 표현
상태 (State)	상태가 어떻게 변화하는지 표현
활동 (Activity)	시스템이 어떤 기능을 수행하는지 처리의 흐름을 순서대로 표현
타이밍 (Timing)	시간 제약을 명시적으로 표현

▶ UML 확장 모델의 스테레오 타입
: << >> 길러멧 기호 사용
- 유형

유형	설명
<<include>>	어떤 시점에 반드시 다른 유스케이스 실행
<<extend>>	실행할 수도 있고 안할 수도 있고~
<<interface>>	모든 메서드가 추상 메서드
<<entity>>	연관된 행위를 형상화 하는 클래스
<<boundary>>	상호작용 담당
<<control>>	로직 및 제어 담당

▶ UML 유형

• 구조적/정적 다이어그램 : *클객컴배복패*

① 클래스 다이어그램 : 클래스의 속성 및 연산과 클래스의 정적인 관계를 표현
- 구성요소

구성요소	설명
클래스	객체들의 집합
속성	인스턴스가 보유할 수 있는 값의 범위 기술
연산	제약사항들을 명시하는 클래스의 행위적 특징
접근 제어자	- : 클래스 내부 접근만 허용 (private) + : 클래스 외부 접근 허용 (public) # : 동일 패키지/파생 클래스에서 접근 가능 (protected) ~ : 동일 패키지 클래스에서 접근 가능 (default)

- 클래스 간 관계
*연집복일의실*

구분	설명
연관 관계	→ or ― (양방향) : 클래스가 서로 개념적으로 연결
집합 관계	◇―> : 하나의 객체에 여러 개의 독립적인 객체들이 구성
복합 관계 (포함 관계)	◆―> : 영구적이고, 집합 관계보다 더 강한 관계
일반화 관계	―▷ : 하나의 사물이 다른 사물에 비해 더 일반적인지 구체적인지 표현
의존 관계	---> : 서로 연관은 있으나 서로에게 영향을 주는 짧은 시간 동안만 연관을 유지하는 관계 표현
실체화 관계	---▷ : 추상 클래스나 인터페이스를 상속받아 자식 클래스가 추상 메서드를 구현할 때 사용 * 추상 클래스 : <<abstract>> 으로 표기하고 실선 ―▷ / 자바에서는 <<extends>> * 인터페이스 : 추상 메서드와 상수만을 포함하는 추상클래스 <<interface>> 로 표기하고 점선 ---▷ / 자바에서는 <<implements>>

② 컴포지트 다이어그램 : 시스템을 구성하는 물리적인 컴포넌트와 그들 사이의 의존관계를 나타내는 다이어그램
- 구성요소 : 컴포넌트 / 인터페이스 / 의존 관계

③ 패키지 다이어그램 : 서로 다른 패키지들 사이의 의존 관계 표현
- 구성요소
: 패키지 / 의존 관계 (---> / <<import>> , <<access>>)

 

• 행위적/동적 다이어그램 : *유시커상활타*

① 유스케이스 다이어그램 : 사용자 관점에서 표현
- 구성요소 : 유스케이스 / 액터 / 시스템 / 시나리오 / 이벤트의 흐름

- 유스케이스 다이어그램의 관계

관계	설명
포함(include) 관계	유스케이스 수행 시 다른 유스케이스 반드시 수행
확장(Extend) 관계	여러 유스케이스에 걸쳐 중복적으로 사용 x , 한 유스케이스로만 확장
일반화(Generalization) 관계	추상적인 액터와 더 구체적인 액터 사이에 맺어주는 관계

② 시퀀스 다이어그램 : 객체 간 상호작용을 메시지 흐름으로 표현

③ 커뮤니케이션 다이어그램 : 객체들이 주고받는 메시지 표현

④ 상태 다이어그램 : 상태가 어떻게 변화하는지 표현

⑤ 활동 다이어그램 : 조건에 따른 처리흐름을 순서대로 표현

 

---

▶ UI 흐름 설계 : 업무의 흐름이나 업무 수행과 관련된 화면의 위치와 흐름을 흐름도 형식으로 표현하는 활동

▶ UI 시나리오 문서의 작성 요건
*완일이가 추수*

 - 완전성 (Complete) : 누락이 없어야 하고, 최대한 빠짐없이 가능한 한 상세하게 기술

 - 일관성 (Consistent) : 요구사항이 일관성 있어야 함

 - 이해성 (Understandable) : 처음 접하는 사람도 이해하기 쉽도록 구성

 - 가독성 (Readable) : 문서를 쉽게 읽을 수 있어야 함

 - 추적 용이성 (Traceable) : 쉽게 추적 가능

 - 수정 용이성 (Modifiable) : 쉽게 변경 가능

 

▶ 화면 설계 도구
- 파워 목업 : 파워포인트에 추가 메뉴를 설치해 목업 기능을 사용할 수 있도록 지원하는 툴
- 발사믹 목업 : 스케치한 느낌으로 빠르고 심플하게 서비스 콘셉트를 전달할 수 있는 목업 도구
- 카카오 오븐 : 카카오에서 제작한 온라인 프로토타이핑 도구

▶ 프로토타이핑 도구
- UX 핀 : 와이어 프레임과 프로토타이핑 작업 동시에 가능
- 액슈어 : 스토리보드에 포함되는 정책, 플로 차트 등을 모두 작성 가능
- 네이버 프로토나우 : 네이버에서 만든 프로토타이핑 툴

 

 

• 부족한 부분
• 직유학유 좀 헷갈림
• 기신사효유이 세부 사항까지
• UI 개발을 위한 주요 기법 정확히 외우기
• 스토리 보드
• 와스프 정확히 외우기
• 완일이가추수