[정보처리기사 실기 요약] - 2.화면설계 (ch01. UI 요구사항 확인, ch02.UI 설계)

Chap01 UI 요구사항 확인 (중요도: ***)

 

1. UI : 사용자와 시스템 사이에서 의사소통 하도록 고안된 물리적 가상의 매개체

 

2. UI 유형

• CLI(Command Line Interface): 명령어를 텍스트로 입력하여 조작하는 UI
• GUI(Graphical User Interface): 그래픽 환경 기반으로한 마우스/전자펜을 이용한 UI
• NUI(Natural User Interface): 신체 부위를 이용하는 UI
• OUI(Organic User Interface): 현실에 존재하는 모든 사물이 입출력 장치로 변화할 수 있는 UI

3. UI 설계 원칙

• 직관성: 누구나 쉽게 이해, 쉽게 사용
• 유효성: 정확하고 완벽하게 사용자의 목표가 달성될 수 있게함
• 학습성: 초보/숙련자 모두 쉽게 배우고 사용
• 유연성: 사용자의 요구사항 최대한 수용, 실수 방지하도록 제작

4. UI 설계 지침: 사용자 중심, 일관성, 단순성, 결과 예측 가능, 가시성, 표준화, 접근성, 명확성, 오류 발생 해결

 

5. UI 품질 요구사항 (ISO/IEC 9126 기반)

• 기능성: 실제 수행 결과와 품질 요구사항과의 차이 분석, 시스템 동작 관찰 위한 품질 기준 (적절성,정밀성,상호운용성,보안성,호환성)
• 신뢰성: 시스템이 일정 시간 or 작동되는 시간동안 의도하는 기능을 수행하는가 (성숙성, 고장 허용성, 회복성)
• 사용성: 사용자와 컴퓨터 사이에 발생하는 행위를 정확하고 쉽게 인지하는가 (이해성, 학습성, 운용성)
• 효율성: 할당된 시간에 한정된 자원으로 얼마나 빨리 처리하는가 (시간 효율성, 자원 효율성)
• 유지보수성: 요구사항 개선/확장에 있어 얼마나 용이한가 (분석성, 변경성, 안정성, 시험성)
• 이식성: 다른 플랫폼에서도 추가 작업 없이 얼마나 쉽게 적용 가능한가 (적용성, 설치성, 대체성)

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

 

7. CRUD(Create, Read, Update, Delete): 컴퓨터 소프트웨어가 가지는 기본적인 데이터 처리기능

 

8. UI 개발을 위한 주요 기법

• 3C 분석: Customer, Company, Competitor 을 비교 분석하여 Company를 어떻게 차별화해서 경쟁에서 이길 것인지 분석
• SWOT 분석: 기업 내/외부 환경 분석해 Strength, Weakness, Opportunity, Tread 요인을 규정하고 이를 토대로 전략 수립
• 시나리오 플래닝: 상황 변화 사전 예측, 다양한 시나리오 설계해 불확실성 제거
• 사용성 테스트: 사용자가 직접 제품 사용하며 시나리오에 맞춰 과제 수행 후 질문에 응답
• 워크숍: 새로운 지식,기술,아이디어,방법을 서로 교환/검토하는 세미나

9. UI 화면 설계 구분

• 와이어프레임: 화면 단위의 레이아웃을 설계하는 작업 (ppt,키노트,스케치,일러스트)
• 스토리보드: 서비스 구축을 위한 모든정보(정책,프로세스,와이어프레임,기능 정의 등)가 담겨있는 설계 산출물(ppt,키노트,스케치)
• 프로토타입: 정적인 화면(와이어프레임,스토리보드)에 동적인 효과를 적용하여 실제 구현된 것처럼 시뮬레이션 할 수 있는 모형. 전체적인 기능 간단히 구현(HTML,CSS)

 

Chap02 UI 설계 (중요도:***)

1. UML(Unified Modeling Language)

: 객체 지향 소프트웨어 개발 과정에서 산출물을 명세화/시각화/문서화 할 때 사용되는 모델링 기술과 방법론을 통합해 만든 표준화된 범용 모델링 언어

 

2. UML 특징: 가시화 언어, 구축 언어, 명세화 언어, 문서화 언어

 

3. UML 구성요소: 사물, 관계, 다이어그램

 

4. UML 다이어그램

   1) 구조적/정적 다이어그램

• 클래스: 클래스 속성, 연산, 클래스간 정적인 관계 표현
• 객체: 클래스에 속한 사물(객체=인스턴스)를 특정 시점 객체와 객체사이 관계로 표현
• 컴포넌트: 시스템을 구성하는 물리적인 컴포넌트와 그들 사이 의존관계 표현
• 배치: 컴포넌트 사이 종속성 표현, 물리적 요소 위치 표현
• 복합체 구조: 클래스나 컴포넌트가 복합 구조를 갖는 경우 그 내부 구조를 표현
• 패키지: 유스케이스, 클래스 등의 모델 요소들을 그룹화한 패키지들의 관계

   2) 행위적 다이어그램 / 동적 다이어그램

• 유스케이스: 시스템이 제공하고 있는 기능 및 그와 관련된 외부 요소를 사용자 관점에서 표현
• 시퀀스: 객체 간 동적 상호작용을 시간적 개념을 중심으로 메시지 흐름으로 표현
• 커뮤니케이션: 동작에 참여하는 객체들이 주고받은 메시지 표현, 객체 간 연관까지 표현
• 상태: 자신이 속한 클래스의 상태 변화 혹은 다른 객체와의 상호 작용에 따라 상태가 어떻게 변화하는 지 표현
• 활동: 객체 처리 로직이나 조건에 따른 처리 흐름을 순서대로 표현
• 타이밍: 객체 상태 변화와 시간제약을 명시적으로 표현

5. UI 시나리오 문서 작성 요건: 완전성, 일관성, 이해성, 가독성, 추적 용이성, 수정 용이성

 

6. UI 설계 도구의 유형 

• 화면 설계 도구: 파워 목업 , 발사믹 목업, (카카오) 오븐
• 프로토타이핑 도구: UX핀, 액슈어, 네이버 프로토나우
• UI 디자인 도구: 스케치, Adobe XD
• UI 디자인 산출물로 작업하는 프로토타이핑 도구: 인버전, 픽사에이트, 프레이머