정보처리기사 정처기 | 실기 2 화면 설계 | UI 요구사항 확인, UI 설계 | 단원별 정리

 

✅ 핵심 키워드

UI, User Interface

• 넓은 의미에서 사용자와 시스템 사이에서 의사소통할 수 있도록 고안된 물리적, 가상의 매개체이다.

 

프로토타입(Prototype)

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

 

UML, Unified Modeling Language

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

 

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

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

 

소프트웨어 아키텍처(Software Architecture)

• 시스템에 대한 기본 조직 체계로 시스템을 이루는 구성요소와 구성요소들 사이의 관계, 구성요소와 주변 환경들과의 관계 및 시스템의 진화와 설계를 지배하는 원칙이다.

 

✅ 4. UI 요구사항 확인

💡 UI 요구사항 확인

• 사용자 인터페이스에 대한 요구사항을 분석하고 문서화하여 개발자와 사용자 간의 의사소통을 원활하게 하기 위한 과정이다.
• UI 디자인에 필요한 사용자의 요구사항과 기능적, 비기능적 요구사항을 파악하여 UI 설계의 기반을 마련한다.
• UI 디자인의 표준, 가이드라인, 스타일 가이드 등을 고려하여 일관성 있는 UI 디자인을 유지한다.
• 프로토타입, 모형 등의 방법을 사용하여 사용자의 피드백을 수집하고 UI 디자인을 개선한다.
• UI 품질의 향상과 사용자 만족도의 증대를 위한 사용자 중심의 UI 디자인을 추구하는 데 필수적인 작업이다.

 

💡 UI 지침

• UI 디자인 목표: 사용자 경험(UX)을 향상한다.
• UI 디자인 가이드라인: 일관성, 간결성, 직관성, 접근성, 유연성, 안정성
• UI 요소: 버튼, 텍스트, 이미지, 폼, 색상, 아이콘
• UI 디자인 프로세스: 요구사항 수집 및 분석, 프로토타이핑, UI 디자인, 테스트 및 검증, 개선 및 유지보수 단계
• UI 테스트 방법: 사용자 시나리오에 기반한 테스트, A/B 테스트, 적응형 디자인 테스트, 가용성 및 성능 테스트 

 

💡 스토리보드

• 사용자 인터페이스(UI) 요구사항을 시각화한다.
• 개발자, 디자이너, 고객 등 각 이해관계자들이 서로의 의견을 공유하며 프로토타입을 만든다.
• UI 요구사항 분석을 기반으로 사용자의 화면 이동 경로, 각 화면에서 제공할 기능, UI 구성 등을 기획하고, 시각적으로 나타낸다.
• 종이나 컴퓨터로 제작 가능하며, 주로 스케치, 프로토타입 툴, 그래픽 툴 등을 이용하여 제작한다.
• UI 개발 전 단계에서 고객과 개발자들 사이의 의사소통 도구로 사용되며, 수정과 변경이 쉽게 가능하다.
• UI 개발 전 요구사항 분석을 정확하게 수행하고, 변경 및 오류를 최소화하여 UI 개발의 효율성과 품질을 높인다.

 

💡 UI 프로토타입 제작 및 검토

• 실제 사용자에게 보일 화면의 레이아웃과 기능을 시각화하여 검증하는 단계이다.
• 다양한 도구를 활용하여 제작 가능하며, 사용자의 피드백을 수용할 수 있는 유연성을 가진다.
• 기획자, 디자이너, 개발자 등의 팀원들과 함께 검토하며, 문제점을 발견하고 수정한다.
• 최종 제품 개발에 들어갈 사용자 경험(UX)을 미리 예측하고 개선한다.

 

💡 기출

[단답형] 2020년 2회

UI 설계 원칙 중 정확하고 완벽학 사용자가 목표가 달성될 수 있도록 제작할 수 있어야 한다는 원칙으로 다음 빈카에 들어갈 용어는 무엇인가?

1. 직관성: 누구나 쉽게 이해하고 사용할 수 있어야 한다.
2. 학습성: 누구나 쉽게 배우고 익힐 수 있어야 한다.
3. 유연성: 사용자의 요구사항을 최대한 수용하며 오류를 최소화해야 한다.
4. (유효성): 사용자의 목적을 정확하게 달성하여야 한다.

 

[해설]

• 직관성: UI는 누구나 쉽게 이해하고 사용할 수 있어야 하며, 사용자들이 복잡한 설명 없이 쉽게 사용할 수 있도록 디자인한다.
• 학습성: UI는 누구나 쉽게 배우고 익힐 수 있어야 하며, 사용자가 UI를 처음 접하는 경우에도 쉽게 이해하고 사용할 수 있도록 디자인한다.
• 유연성: UI는 사용자의 요구사항을 최대한 수용하고, 사용자들이 오류를 최소화하며 쉽게 사용할 수 있도록 디자인한다.
• 유효성: UI는 사용자의 목적을 정확하게 달성해야 하며, 사용자들이 UI를 사용하여 원하는 작업을 정확하고 효율적으로 수행할 수 있도록 디자인한다.

---

[약술형] 2020년 3회

UI 설계 원칙 중 직관성에 대해서 쓰시오.

• UI는 누구나 쉽게 이해하고 사용할 수 있어야 하며, 사용자들이 복잡한 설명 없이 쉽게 사용할 수 있도록 디자인한다.

---

[단답형] 2021년 2회

아래에서 설명하는 용어를 쓰시오.

1. 사람의 감정이나 경험을 나타내는 개념이다. UX, User Experience
2. 사용자 인터페이스, CLI가 대표적인 예시이다. UI, User Interface

 

[해설]

• UX, User Experience: 사용자가 제품 또는 서비스를 사용하면서 느끼는 전반적인 경험이다.
• UI, User Interface: 사용자와 컴퓨터 또는 기기간의 상호작용을 위한 인터페이스를 디자인하는 것이다.

---

[단답형] 2021년 3회

사용자가 그래픽 환경을 기반으로 한 마우스, 전자펜 등을 이용하는 사용자 인터페이스는 무엇인가?

• GUI, Graphical User Interface

 

[단답형] 2022년 1회

신체를 활용한 사용자 인터페이스(UI)를 무엇이라고 하는가?

• NUI, Natural User Interface

 

[해설]

• GUI(Graphical User Interface): 사용자가 마우스, 키보드 등을 사용하여 그래픽으로 표현된 아이콘, 버튼, 창 등을 조작하여 시스템과 상호작용하는 사용자 인터페이스(UI)이다.
• NUI(Natural User Interface): 사용자의 체형, 목소리, 제스처 등의 자연스러운 동작을 감지하고, 이를 통해 시스템과 상호작용하는 사용자 인터페이스(UI)이다.
• CLI(Command Line Interface): 사용자가 텍스트 명령어를 입력하여 시스템과 상호작용하는 사용자 인터페이스(UI)이다.
• OUI(Object-oriented User Interface): 객체지향 프로그래밍 개념을 사용하여 GUI를 구현하는 사용자 인터페이스(UI)이다.

 

✅ 5. UI 설계

💡 UI 설계를 위한 UML

• UI 설계를 위해 UML, Unified Modeling Language을 사용한다.
• 객체지향 소프트웨어 개발을 위한 모델링 언어로, UI 구성 요소들의 관계를 시각적으로 표현한다.
• 유스케이스, 클래스, 시퀀스, 활동, 상태 등을 사용하여 UI 요구사항, 구성 요소, 동작 흐름 등을 모델링한다.

 

💡 UI 설계 도구

• UI 디자인을 위해 사용하는 도구로, 스케치, Adobe XD, Figma, Axure RP 등이 있다.
• UI 디자인 및 프로토타이핑, 협업 및 공유, UI 테스팅 등의 기능을 제공하여 UI 설계를 효과적으로 수행한다.
• UI 디자이너, 개발자, 프로젝트 매니저 등 다양한 역할의 사용자들이 협업할 때 필요한 정보를 쉽게 공유하고 이해한다.

 

💡 기출

[단답형] 2020년 4회

다음은 판매와 관련된 다이어그램이다. 해당 다이어그램의 명칭을 쓰시오.

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

 

[해설]

• 패키지 다이어그램(Package Diagram): 시스템의 전체 구조를 볼 때 패키지와 패키지 간의 관계를 보여주는 UML 다이어그램이다.
• 패키지: 관련된 클래스나 하위 패키지를 모아놓은 논리적인 단위로, 소프트웨어의 모듈화와 구성 요소를 분류하고 조직화한다.
• 패키지 간의 관계: 의존 관계, 일반화 관계, 집합 관계 등 패키지와 패키지 간의 관계를 표현한다.

---

[단답형] 2021년 3회

UML 관계(Relationships)에 대한 설명이다. 괄호 안에 들어갈 용어를 쓰시오.

• 추상화, 하나의 사물이 다른 사물에 포함되어 있는 관계 표현: 집합 관계(Aggregation)
• 개념화, 하나의 사물이 다른 사물에 비해 더 일반적인지 구체적인지를 표현: 일반화 관계(Generalization)

 

[해설]

• 집합 관계(Aggregation)
  • 객체 간에 전체와 부분 관계를 나타내며, 전체 객체가 부분 객체를 포함한다.
  • 포함되어 있는 쪽(Part; 부분)에서 포함하는 쪽(Whole; 전체)으로 속이 빈 마름모를 연결하여 표현한다.
• 일반화 관계(Generalization)
  • 객체 간의 상속 관계를 나타내며, 상위 객체와 하위 객체 간의 공통 속성과 연산을 상위 객체에 정의하고, 하위 객체에서는 상속받아 사용한다.
  • 구체적(하위)인 사물에서 일반적(상위)인 사물 쪽으로 속이 빈 화살표를 연결하여 표현한다.

---

[단답형] 2021년 3회

UML의 유형 중 ( ) 다이어그램은 속성, 메서드를 포함하는 다이어그램이다. 괄호 안에 들어갈 용어를 쓰시오.

• 클래스(Class)

 

[해설]

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

• 객체지향 프로그래밍에서 클래스 간의 관계와 클래스의 속성, 메서드를 표현하는 다이어그램이다.
• 구성요소
  • 클래스(Class): 객체지향 프로그래밍에서 데이터와 해당 데이터를 처리하는 메서드를 포함하는 설계도이다.
  • 속성(Attribute): 클래스의 특성을 표현하는 데이터이다.
  • 연산(Operation): 클래스의 특성을 이용해 수행할 수 있는 동작이다.
  • 접근제어자(Access Modifier): 클래스의 속성과 연산의 접근 권한을 제어하는 키워드이다.

---

[단답형] 2022년 3회

다음 UML에 대한 설명이다. 괄호 안에 들어갈 용어를 쓰시오.

1. (관계): UML의 구성 요소 중 사물의 의미를 확장하고 명확히 하는 요소로 사물과 사물을 연결하여 표현하는 요소
2. (클래스): 공통의 속성, 연산(메서드), 관계, 의미를 공유하는 객체들의 집합
3. (인터페이스): 기능을 모아놓은 클래스로 추상 메서드와 상수만을 포함하는 추상 클래스로 구현하는 모든 클래스에 대해 특정한 메서드가 반드시 존재하도록 강제하는 역할을 하는 클래스

 

[해설]

• 관계: 객체들 간의 연결, 상호작용을 나타내는 것으로, 일반화, 연관, 집합, 의존, 실체화 등 있다.
• 클래스: 객체 지향 프로그래밍에서 객체의 속성과 연산을 정의한 것으로, 추상화된 데이터 타입이다.
• 인터페이스: 객체의 연산들의 집합으로, 해당 객체가 어떤 연산을 지원하는지를 명시하며, 상호작용을 위한 규약 역할이다.