[정보처리기사 실기] 과목2 - 화면 설계, 오답노트

 

Chapter ① UI 요구사항 확인

 

• UI 설계 원칙

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

 

---

 

• 와이어프레임(Wireframe)

        이해 관계자들과의 화면구성을 협의하거나 서비스의 간략한 흐름을 공유하기 위해 화면 단위의 레이아웃을 설계하는 작업

 

---

 

• UI 품질 요구사항 - 사용성(Usability)

        사용성은 사용자와 컴퓨터 사이에 발생하는 어떠한 행위를 정확하고 쉽게 인지할 수 있는 품질 기준이다.

상세 품질 요구사항	설명
이해성 (Understandability)	소프트웨어의 논리적인 개념과 적용 가능성(응용 가능성)을 구분하는 데 필요한 사용자의 노력 정도에 따른 소프트웨어 특성
학습성 (Learnability)	소프트웨어 애플리케이션 학습에 필요한 사용자의 노력 정도에 따른 특성
운용성 (Operability)	소프트웨어의 운용과 운용 통제에 필요한 사용자의 노력 정도에 따른 특성

 

♣ 「 기신사효유이 」

    기능성 / 신뢰성 / 사용성 / 효율성 / 유지보수성 / 이식성

 

---

 

• UI 설계 지침

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

 

---

 

• 사용성 테스트(Usability Test)

        사용자가 직접 제품을 사용하면서 미리 작성된 시나리오에 맞추어 과제를 수행한 후, 질문에 답하도록 하는 테스트

 

---

 

• 스토리보드(Storyboard) 개념

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

 

---

 

• 프로토타입(Prototype) 개념

        프로토타입은 컴퓨터 시스템이나 소프트웨어의 설계 또는 성능, 구현 가능성, 운용 가능성을 평가하거나 요구사항을 좀 더 잘 이해하고 결정하기 위하여 전체적인 기능을 간략한 형태로 구현한 시제품이다.

 

---

 

• 기능성 상세 품질 요구사항

상세 품질 요구사항	설명
적절성 (Suitability)	소프트웨어 제품이 주어진 작업과 사용자의 목표에 필요 적절한 기능들을 제공해 줄 수 있는 소프트웨어의 능력
정밀성 (Accracy)	소프트웨어 제품이 요구되는 정확도로 올바른 결과를 산출할 수 있는 능력
상호 운용성 (Interoperability)	소프트웨어 제품이 특정 시스템과 상호 작용하여 운영될 수 있는 능력
보안성 (Security)	비인가된 접근을 차단하고, 우연 또는 고의적인 접근을 인지하여 대처할 수 있는 능력
호환성 (Compliance)	소프트웨어 제품이 비슷한 환경에서 연관된 표준, 관례 및 규정을 준수하는 능력

 

 

---

 

Chapter ② UI 설계

 

• 패키지 다이어그램(Package Diagram) 표기법

 

https://velog.io/@e_juhee/UML

 

---

 

• UML의 관계(Relationships)

구분	설명	사례
연관 (Association) 관계	- 연관 관계는 클래스가 서로 개념적으로 연결된 선 - 연관 관계는 2개 이상의 사물이 서로 관련되어 있는 상태를 표현 - 사물 사이를 실선으로 연결하여 표현하며, 방향성은 화살표로 표현 - 서로에게 영향을 주는 양방향 관계의 경우 화살표를 생략하고 실선으로만 연결
의존 (Dependency) 관계	- 하나의 클래스가 또 다른 클래스를 사용하는 관계 - 다른 클래스의 멤버 함수 사용 - 의존 관계는 사물 사이에 서로 연관은 있으나 필요에 따라 서로에게 영향을 주는 짧은 시간 동안만 연관을 유지하는 관계를 표현 - 하나의 클래스에 있는 멤버 함수의 인자가 변함에 따라 다른 클래스에 영향을 미칠 때의 관계 - 영향을 주는 사물이 영향을 받는 사물 쪽으로 점선 화살표를 연결하여 표현
일반화 (Generalization) 관계	- 일반화 관계는 하나의 사물이 다른 사물에 비해 더 일반적인지 구체적인지를 표현 - 일반적인 개념을 부모(상위)라고 하고, 구체적인 개념을 자식(하위)라고 함 - 구체적(하위)인 사물에서 일반적(상위)인 사물 쪽으로 속이 빈 화살표를 연결하여 표현 - 일반화 관계는 다른 의미로 상속 관계라고 함
실체화 (Realization) 관계	- 추상 클래스나 인터페이스를 상속받아 자식 클래스가 추상 메서드를 구현할 때 사용 - 사물이 할 수 있거나, 해야 하는 기능(행위, 인터페이스)으로 서로를 그룹화할 수 있는 관계를 표현
포함 (Composition) 관계 (=복합 관계)	- 영구적이고, 집합 관계보다 더 강한 관계로 구성 - 포함되는 쪽(Part: 부분)에서 포함하는 쪽(Whole: 전체)으로 속이 채워진 마름모를 연결하여 표현 - 포함 관계는 집합 관계의 특수한 형태로, 포함하는 사물의 변화가 포함되는 사물에게 영향을 미치는 관계를 표현 - 포함 관계는 복합 관계라고도 함
집합 (Aggregation) 관계	- 하나의 객체에 여러 개의 독립적인 객체들이 구성되는 관계 - 집합 관계는 하나의 사물이 다른 사물에 포함되어 있는 관계 표현 - 포함되는 쪽(Part: 부분)에서 포함하는 쪽(Whole: 전체)으로 속이 빈 마름모를 연결하여 표현

 

---

 

• 클래스 다이어그램(Class Diagram)

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

 

▼ 클래스 다이어그램 예시

https://brownbears.tistory.com/577

 

구성요소	설명
클래스 (Class)	- 공통의 속성, 연산(메서드), 관계, 의미를 공유하는 객체들의 집합
속성 (Attribute)	- 클래스의 구조적 특성에 이름을 붙인 것으로 특성에 해당하는 인스턴스가 보유할 수 있는 값의 범위를 기술
연산 (Operation), 메서드	- 이름, 타입, 매개변수들과 연관된 행위를 호출하는데 요구되는 제약사항들을 명시하는 클래스의 행위적 특징 - 객체에 요청하여 행동에 영향을 줄 수 있는 서비스
접근 제어자 (Access Modifier)	- 클래스에 접근할 수 있는 정도를 표현

 

---

 

• UML 다이어그램

구분	다이어그램	설명
행위적 다이어그램 (Behavioral Diagram), 동적 다이어그램 (Dynamic Diagram)	시퀀스 (Sequence)	- 시퀀스 다이어그램은 객체 간 동적 상호 작용을 시간적 개념을 중심으로 메시지 흐름으로 표현한 다이어그램 - 구성요소로는 액터, 객체, 생명선, 활성화, 메시지가 있음
	커뮤니케이션 (Communication)	- 커뮤니케이션 다이어그램은 동작에 참여하는 객체들이 주고 받는 메시지를 표현하고, 메시지뿐만 아니라 객체 간의 연관까지 표현하는 다이어그램 - 구성요소로는 액터, 객체, 링크, 메시지가 있음
	상태 (State)	- 상태 다이어그램은 하나의 객체가 자신이 속한 클래스의 상태 변화 혹은 다른 객체와의 상호 작용에 따라 상태가 어떻게 변화하는지 표현하는 다이어그램

 

---

 

• UML 구성요소

        UML은 사물(Thing), 관계(Relationships), 다이어그램(Diagrams)으로 구성된다.

 

---

 

• 추상클래스

• 객체 인스턴스를 생성하지 않고, 단지 유사 클래스들의 공통된 특징을 정의하고, 하나 이상의 추상 메서드와 일반 필드 및 일반 메서드를 포함하는 클래스
• 동일한 부모를 가지는 클래스를 묶는 개념으로 상속을 받아서 기능을 확장시키는 것이 목적
• 이탤릭체로 클래스명을 표시하며, 스테레오타입을 이용하여 <<abstract>>로 표기

 

▼ 추상 클래스 예시

https://stackoverflow.com/questions/62252353/uml-to-java-code-abstract-class-simple-association-methods

 

---

 

• UI 흐름 설계

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

 

 

Reference

• https://www.yes24.com/Product/Goods/105812550

2022 수제비 정보처리기사 실기 (1권+2권 합본세트) - YES24