정보처리기사 2단원(화면 설계) 요약

기출문제가 출제된 부분은 배경색으로 표시해 두었습니다

목차

1. UI 요구사항 확인
2. UI 설계

UI 요구사항 확인

---

UI(User Interface)

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

용어	설명
CLI(Command Line)	명령어로 텍스트를 입력하여 조작
GUI(Graphic User)	그래픽 환경을 기반으로 마우스나 전자펜 이용
NUI(Natural User)	신체 부위를 이용 (터치, 음성)
OUI(Organic User)	현실에 존재하는 모든 사물이 입출력장치로 변화

UX(User eXperience): 제품과 시스템, 서비스 등을 사용자가 경험하면서 느끼고 생각하는 총체적 경험 

 

UI 설계 원칙(직유학유)

💡 암기 TIP
직접 유도 or 학습시켜 유도

용어	설명
직관성	누구나 쉽게 이해 및 사용
유효성	정확하고 완벽하게 사용자의 목표 달성
학습성	초보와 숙련자 모두 쉽게 배우고 사용
유연성	사용자의 요구사항을 최대한 수용, 실수 방지

 

UI 요구사항 구분

용어	설명
기능적 요구사항	시스템이 제공하는 기능, 서비스에 대한 요구사항
비기능적 요구사항	기능을 제외한 품질, 제약사항에 관한 요구사항

 

UI 품질 요구사항(ISO/IEC 9126 기반, 기신사효유이)

💡 암기 TIP
기씨 성을 가진 신사가 효율이 가장 높다.

용어	설명
기능성	실제 수행 결과와 품질 요구사항과의 차이를 분석
신뢰성	시스템이 일정 시간 동안 의도한 기능을 수행함을 보증
사용성	사용자와 컴퓨터 사이에 발생하는 행위를 정확하고 쉽게 인지
효율성	할당된 시간에 한정된 자원으로 얼마나 빨리 처리
유지보수성	요구사항을 개선하고 확장하는데 용이
이식성	다른 플랫폼(OS)에서도 쉽게 적용

 

스토리보드

UI 화면 설계를 위해 정책이나 프로세스, DB 연동 등 구축하는 서비스를 위한 대부분 정보가 수록된 문서

용어	설명
와이어 프레임(Wireframe)	화면구성을 협의하거나 간략한 흐름을 공유하기 위해 화면 단위의 레이아웃 설계
스토리보드(Storyboard)	서비스 구축을 위한 모든 정보가 담겨 있는 설계 산출물
프로토타입(Prototype)	동적 효과를 적용하여 실제 구현된 것처럼 시뮬레이션 가능

 

 

UI 설계

---

UML(Unified Modeling Language)

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

 

UML 구성요소

💡 암기 TIP
사관다 (=사과한다)

용어	설명
사물	주제를 나타내는 요소(추상적 개념)
관계	사물의 의미를 확장하고 사물과 사물을 연결
다이어그램	사물과 관계를 모아 그림으로 표현

 

UML 다이어그램

구조적 다이어그램(정적)

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

 

행위적 다이어그램(동적)

용어	설명
유스케이스	시스템이 제공하고 있는 기능을 사용자 관점에서 표현
시퀀스	객체간 동적 상호작용을 시간적 개념을 중심으로 표현
커뮤니케이션	객체들이 주고받는 메시지를 표현
상태	하나의 객체가 자신이 속한 클래스의 상태 변화를 표현
활동	시스템이 어떤 기능을 수행하는지를 객체의 처리 로직이나 조건에 따라 표현
타이밍	객체 상태 변화와 시간 제약을 명시적으로 표현

 

UML 클래스 간의 관계(Relationships)

용어	설명	예시	표기
연관 관계	클래스가 개념적으로 연결	축구팀 ㅡ {공격수, 수비수, 골키퍼}
집합 관계	하나의 사물에 다른 사물이 포함	차 ◇ㅡ {엔진, 바퀴, 운전대}
복합 관계	영구적, 집합보다 강한 관계	엔진 ◆ㅡ {피스톤, 플러그}
일반화 관계	사물이 다른 사물에 비해 일반적	차 ㅡ▷ {자가용, 택시, 버스}
의존 관계	하나의 클래스가 다른 클래스 사용	수업 --> {교수}
실체화 관계	추상 클래스를 상속받아 구현	운송수단(추상) --▷ {기차}

 

UML 다이어그램 종류

💡 암기 TIP
그림을 보고 어떤 다이어그램인지 구분할 수 있을 정도면 충분할 것 같습니다.

다이어그램	그림
클래스(네모)
유스케이스(졸라맨)
시퀀스(세로선)
패키지(사각형 굴뚝)
활동(순서도)
상태(검은 점과 둥근 사각형)
커뮤니케이션(화살표 메시지)
컴포넌트(레고 블럭)