[정보처리기사 실기] 2. 화면 설계

정보처리기사

수제비2024 기출문제집으로 공부하면서 기록

1. UI 요구사항 확인

1. UI 요구사항 확인

1. UI(User Interface) 개념

UI: 사용자 인터페이스, CLI가 대표적인 예시

UX: 사람의 감정이나 경험을 나타내는 개념

2. UI 유형

• CLI (Command Line Interface)
• GUI (Graphic User Interface)
• NUI (Natural User Interface)
  • 키보드나 마우스 없이 신체를 활용한 사용자 인터페이스
• OUI (Organic User Inteface)

3. UI 설계 원칙 [직유학유]

• 직관성
  • 누구나 쉽게 이해하고 사용할 수 있어야 한다
• 유효성
  • 사용자의 목표가 정확하게 달성될 수 있어야 한다
• 학습성
  • 초보와 숙련자 모두가 쉽게 배우고 사용할 수 있게 제작
• 유연성

4. UI 요구사항 확인

2. UI 품질 요구사항 [기신사효유이]

• 기능성
• 신뢰성
• 사용성
  • UI 품질 요구사항 중 사용성은 사용자와 컴퓨터 사이에 발생하는 어떠한 행위를 정확하고 쉽게 인지 가능함을 의미한다
  • 이 품질 요구사항의 사용성에는 3가지 특성이 있다
    1. 이해성: 소프트웨어의 논리적인 개념과 적용 가능성(응용 가능성)을 분간하는 데 필요한 사용자의 노력 정도에 따른 소프트웨어 특성
    2. 학습성: 소프트웨어 애플리케이션 익히는 데 필요한 사용자의 노력 정도에 따른 특성
    3. 운용성: 소프트웨어의 활용과 운용 통제에 필요한 사용자의 노력 정도에 따른 특성
• 효율성
• 유지보수성
• 이식성

2. UI 지침

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

1. 목표 정의

목표 정의를 위한 주요 기법

• 3C 분석
  • 고객(Customer), 경쟁하고 있는 자사(Company), 경쟁사(Competitor)를 비교하고 분석하여 자사를 어떻게 차별화해서 경쟁에서 이길 것인가를 분석하는 기법
• SWOT 분석
• 시나리오 플래닝
  • 불확실성이 높은 상황 변화를 사전에 예측하고 다양한 시나리오를 설계하는 방법으로 불확실성을 제거해 나가려는 방법
• 워크숍

5. 테스트

테스트 계획 수립 단계를 거쳐서 실제 사용성 테스트를 수행한다

사용성 테스트

• 사용자가 직접 제품을 사용하면서 미리 작성된 시나리오에 맞추어 과제를 수행한 후, 질문에 답하도록 하는 테스트
• 현 제품에 대한 사용자의 요구사항과 행동을 관찰할 수 있는 진단 방법

3. UI 화면 설계

• 와이어프레임
  • 이해 관계자들의 화면구성을 협의하거나 서비스의 간략한 흐름을 공유하기 위해 화면 단위의 레이아웃을 설계하는 UI 화면 설계 방식
• 스토리보드
  • 화면 설계를 위해서 정책이나 프로세스 및 콘텐츠의 구성, 와이어프레임(UI, UX), 기능에 대한 정의, 데이터베이스의 연동 등 구축하는 서비스를 위한 대부분 정보가 수록된 문서로서, 디자이너와 개발자가 최종적으로 참고하는 산출 문서
• 프로토타입

2. UI 설계

1. UML

1. UML(Unified Modeling Language)의 개념

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

3. UML의 구성 요소

UML은 사물, 관계, 다이어그램으로 구성된다

• 사물
• 관계
  • 사물의 의미를 확장하고 명확히 하는 요소
  • 사물과 사물을 연결하여 관계를 표현하는 요소
• 다이어그램

4. UML 다이어그램

UML 다이어그램은 구분에 따라 구조적(정적) 다이어그램, 행위적(동적) 다이어그램으로 구분된다.

 

1. 구조적 다이어그램(Structual Diagram) / 정적 다이어그램(Static Diagram) [클객 컴배 복패]

• 클래스
  • 클래스 다이어그램은 객체 지향 모델링 시 클래스의 속성 및 연산과 클래스 간 정적인 관계를 포현한 다이어그램
• 객체
• 컴포넌트
  • 컴포넌트 다이어그램은 시스템을 구성하는 컴포넌트와 그들 사이의 의존 관계를 나타내는 다이어그램
  • 실질적 프로그래밍 작업에 사용한다
• 배치
• 복합체 구조
• 패키지

2. 행위적 다이어그램(Behavioral Diagram) / 동적 다이어그램(Dynamic Diagram) [유시커상활타]

• 유스케이스
• 시퀀스
  • 객체 간 동적 상호 작용을 시간적 개념을 중심으로 모델링하고 객체 간 상호 작용을 메시지 흐름으로 표현한 다이어그램
• 커뮤니케이션
  • 시스템이나 객체들이 메시지를 주고받으며 시간의 흐름에 따라 상호 작용하는 과정을 표현하고, 문제에 객체의 연관을 표현하는 다이어그램
• 상태
  • 하나의 객체가 자신이 속한 클래스의 상태 변화 혹은 다른 객체와의 상호 작용에 따라 상태가 어떻게 변화하는 표현하는 다이어그램
• 활동
  • 활동 다이어그램은 시스템이 어떤 기능을 수행하는지를 객체의 처리 로직이나 조건에 따른 처리의 흐름을 순서대로 표현하는 다이어그램
• 타이밍

5. UML 스테레오 타입

• <<include>>
  • 하나의 유스케이스가 어떤 시점에 반드시 다른 유스케이스를 실행하는 포함 관계
• <<extend>>
  • 하나의 유스케이스가 어떤 시점에 다른 유스케이스를 실행할 수도 있고, 그렇지 않을 수도 있는 확장 관계
• <<interface>>
• <<entity>>
• <<boundary>>
• <<control>>

6. UML의 유형

1. 클래스 다이어그램

1. 클래스 다이어그램 개념

클래스 다이어그램은 객체 지향 모델링 시 클래스의 속성 및 연산과 클래스 간 정적인 관계를 표현한 다이어그램이다

 

2. 클래스 다이어그램 구성요소

클래스 다이어그램의 구성요소는 클래스 이름, 속성, 연산, 접근 제어자, 관계가 있다

• 클래스
• 속성
  • 클래스의 구조적 특성에 이름을 붙인 것으로 특성에 해당하는 인스턴스가 보유할 수 있는 값의 범위를 기술
• 연산
• 접근 제어자

3. 클래스 간의 관계

• Association 연관관계
• Dependency 의존관계
• Generalization 일반화관계
  • 하나의 사물이 다른 사물에 비해 더 일반적인지 구체적인지를 표현하는 관계
  • 일반적인 개념을 부모(상위)라고 하고, 구체적인 개념을 자식(하위)이라 함

• Realization 실체화관계
• Composition 포함관계
• Aggregation 집합관계
  • 하나의 사물이 다른 사물에 포함되어 있는 관계 표현

인터페이스

• 기능을 모아놓은 클래스로 추상 메서드와 상수만을 포함하는 추상 클래스
• 구현하는 모든 클래스에 대해 특정한 메서드가 반드시 존재하도록 강제하는 역할

3. 시퀀스 다이어그램

2. 시퀀스 다이어그램 구성요소

시퀀스 다이어그램 구성요소는 객체, 생명선, 활성화, 메시지가 있다.

 

4. 패키지 다이어그램

패키지 다이어그램은 시스템의 서로 다른 패키지들 사이의 의존 관계를 표현하기 위한 다이어그램이다.

 

8. 컴포넌트 다이어그램

컴포넌트 다이어그램은 시스템을 구성하는 물리적 컴포넌트와 그들 사이의 의존 관계를 나타내는 다이어그램이다.

 

2. 컴포넌트 다이어그램 구성요소

컴포넌트 다이어그램 구성요소는 컴포넌트, 인터페이스, 의존 관계가 있다.

• 컴포넌트
• 인터페이스
  • 기능을 모아놓은 클래스
  • 추상 메서드와 상수만을 초함하는 추상 클래스로 구현하는 모든 클래스에 대해 특정한 메서드가 반드시 존재하도록 강제하는 역할을 하는 클래스
• 의존 관계