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

[정보처리기사 실기] 2장 화면 설계 - UI 설계

2022. 4. 18. 14:15ㆍ정보처리기사/실기

728x90

UI 설계를 위한 UML

UML

(1) 개념

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

(2) 특징

가시화 언어 : 오류가 적고 의사소통이 용이
구축 언어 : 다양한 프로그래밍 언어로 실행 시스템의 예측 가능, UML을 소스 코드로 변환해 구축 가능, 역 변환해 역공학 가능
명세화 언어 : 정호가한 모델 제시, 완전한 모델 작성 가능
문서화 언어 : 평가 및 의사소통 문서

(3) 구성 요소

사물 : 추상적 개념, 주제, 명사 또는 동사
관계 : 의미 확장하고 명확히, 사물과 사물 연결, 형용사 또는 부사
다이어그램 : 형식과 목적 따라 9가지 정의

(4) UML 다이어그램

구조적/정적 다이어그램
- 클래스 : 속성 및 연산과 클래스 간 정적인 관계 표현
- 객체 : 사물, 즉 인스턴스 특정 시점의 객체와 객체 사이 관계 표현, 연관된 모든 인스턴스 표현
- 컴포넌트 : 물리적인 컴포넌트와 사이의 의존 관계 나타내는 다이어그램
- 배치 : 물리적 요소들의 위치를 표현, 컴포넌트 사이 종속성 표현
- 복합체 구조 : 복합 구조를 갖는 경우 내부 구조를 표현
- 패키지 : 유스케이스나 클래스 등 모델을 그룹화한 관계를 표현
행위적/동적 다이어그램
- 유스케이스 : 제공하는 기능 및 그와 관련된 외부 요소를 사용자의 관전에서 표현
- 시퀀스 : 객체 간 동적 상호 작용을 시간적 개념을 중심으로 메시지 흐름
- 커뮤니케이션 : 동작에 참여하는 객체들이 주고 받는 메시지 표현, 객체 간의 연관 표현
- 상태 : 자신이 속한 클래스의 상태 변화 혹 다른 객체와의 상호 작용에 따라 상태가 어떻게 변화하는지 표현
- 활동 : 어떤 기능을 수핸하는지 객체의 처리 로직이나 조건에 따른 처리의 흐름을 순서대로 표현
- 타이밍 : 객체 상태 변화와 시간 제약을 명시적으로 표현

(5) UML 활작 모델의 스테레오 타입

- 스테레오 타입은 새로운 요소를 만들기 위한 확장 매커니즘

<<Include>> : 하나의 유스케이스가 어떤 시점에 반드시 다른 유스케이스 실행하는 포함 관계
<<extend>> : 하나의 유스케이스가 어떤 시점에 반드시 실행할 수도 있고, 않을 수도 있다.
<<interface>> : 모든 메소드가 추상이며 바로 인스턴스 만들수 없다. 클래스로 추상 메소드와 상수만으로 구성된 메소드
<<entity>> : 기억 장치에 저장 되어야 할 정보를 표현하는 클래스
<<boundary>> : 시스템과 외부 액터와의 상호 작용을 담당하는 클래스
<<control>> : 로직 및 제어를 담당하는 클래스

UML의 유형

(1) 클래스 다이어그램 : 클래스의 속성 및 연산과 클래스 간 정적인 관계 표현

(1) - 1 구성요소

- 이름, 속성, 연산, 접근 제어자, 관계

클래스 : 객체들의 집합
속성 : 인스턴스가 보유 할 수 있는 값의 범위 기술
연산 메소드 : 요구되는 제약사항들을 명시하는 클래스의 행위적 특징, 객체에 요청하여 행동에 영향을 줄 수 있는 서비스
접급 제어자 :접근 할 수 있는 정도 표현
- private( - ), public( + ), protected( # ), default( ~ )

(1) - 2 클래스 간의 관계

연관 관계 : 서로 개념적 연결된 선, 2개 이상의 사물이 서로 관련 되어 있는 상태, 실선과 화살표로 표현, 양방향일 경우 실선만
의존 관계 : 다른 클래스 사용하는 관계, 멤버 함수 사용, 인자가 변함에 따라 다른 클래스도 변환, 영향을 주는 사물이 받는 사물에게 점선 화살표
일반화 관계 : 부모 자식 관계, 하위가 상위에게 빈 화살표 연결, 다른 의미로 상속이란 개념이다.
실체화 관계 : 인터페이스 (<<Interface>>) 상속 받아 추상 메소드(<<abstract>>)를 구현할 때, 서로를 그룹화 할 수 있는 관계 표현
포함 관계(복잡 관계) : 영구적이고, 집합보다 더 강한 관계 , 속이 채워진 마름모 연결, 복합관계
집합 관계 : 하나의 객체가 여러 개의 독립적인 객체 구성, 속이 빈 마름모 연결

(2) 유스케이스 다이어그램 : 시스템 제공하는 기능 및 그와 관련된 외부 요소를 사용자 관점에서 표현

(2) - 1 구성요소

유스케이스 : 시스템이 제공하는 서비스, 기능, 액터가 시스템 통해 수행하는 일련의 행위
액터 : 수행하는 역할, 시스템과 상호작용, 이벤트 흐름 시작 객체
시스템 : 전체 시스템
시나리오 : 흐름
이벤트의 흐름 : 사람, 시스템, 하드웨어, 시간의 흐름에 의해 시작

(2) - 2 관계

포함 관계 : 유스케이스 시작시 다른 유스케이스가 반드시 수행되는 관계, 이벤트 흐름을 포함하는 관계, 공통적으로 발견되는 기능, <<include>>로 표현
확장 관계 : 중복적으로 사용되지 않고, 특정 도건에서 확장되는 관계, <<extend>>로 표현
일반화 관계 : 액터와 추상적인 액터와의 사이 맺는 관계, 간결하게 작성, 속이 빈 삼각형 화살표 실선

(3) 시퀀스 다이어그램 : 메시지 흐름 표현, 시각적, 오퍼레이션과 속성을 정의, 유스케이스 실현한다.

(3) - 1 구성요소

객체 : 위쪽에 표시되며 아래로 생명선 가짐, 사각형 안에 및줄 친 이름 명시
생명선 : 객체로 뻗어 나가는 점선, 생명주기 동안 발생하는 이벤트 명시
실행 : 직사각형은 함수가 실행되는 시간, 길수록 수행 시간 김
메시지 : 상호간 메시지 교환

(4) 패키지 다이어그램 : 서로 다른 패키지 사이의 의존 관계

(4) - 1 구성요소

패키지 : 요소들을 그룹으로 조직하기 위한 요소
의존 관계 : 하나가 다른 패키지 사용하는 관계, 스테레오 타입을 붙일 수 있다(의존성), <<import>>,<<access>>

(5) 활동 다이어그램 : 객체의 처리 로직이나 조건에 따라 흐름을 순서대로 표현한 다이어그램

(5) - 1 구성요소

시작점 : 시작 의미, 오직 하나만 존재, 검은색 동그라미
전이 : 흐름, 화살표
액션 : 처리와 실행, 액션은 더 이상 분해 못하고, 액티비티는 분리될 수 있는 작업, 모서리가 둥근 사각형
종료점 : 종료, 여러개의 종료점 가능, 검은 동그라미 포함 원
조건판단 노드 : 조건 제어 흐름, 마름모 표현, 제어가 하나이거나 여러개 가능
병합 노드 : 흩어진 경로 하나로 합친다, 마름모 표현이고 들어오는 화살표와 나가는 화살표 하나
포크 노드 : 평행적 수행 노드, 굵은 가로선 표현하고 들어오는 액티비티 흐름은 하나, 나가는 액티비티 흐름은 여러개
조인 노드 : 포크 노드의 흐름은 하나로 합친다. 들어오는 흐름 여러개, 나가는 흐름 한개
구획면 : 수행을 담당하는 주체 구분하는 면, 가로 세로 실선그어 구분

-> 활동이 처리되면 그 다음 활동으로 자동적으로 옮겨지고, 활동 상태의 시작과 종료 항상 존재

(6) 상태 다이어그램 : 하나의 객체가 자신이 속한 클래스의 상태가 어떻게 변화하는지 표현하는 다이어그램

- 특정 순간 오직 하나의 상태로 존재할 수 있다. 속성값의 변화로 상태를 갖는다.

(6) - 1 구성요소

상태 : 존재하는 조건 중 하나, 둥근 사각형
시작 상태 : 시작 상태, 속이 채워진 원
종료 상태 : 종료, 원 안에 속찬 원
전이 : 흐름, 화살표
이벤트 : 전이를 유발 자극, 변화 주는 현상, 화살표 위에 이벤트 명 표기
전이 조건 : 특정 조건시 발생 속성값 불리언 식, 화살표 위에 조건 표기

(7) 커뮤니케이션 다이어그램 : 시퀀스 다이어그램과 같이 동작에 참여하는 객체 메시지 표현, 객체 간의 연관관계도 표기

(7) - 1 구성요소

액터 : 서비스 요청하는 외부 요소
객체 : 메시지 주고 받는 주체, :을 기준으로 앞은 객체명 뒤는 클래스 명 기술
링크 : 객체 간 관계, 실제 객체와의 관계 직접적으로 보여주는 객체 사이 링크, 액터와 객체, 객체 간 실선 표현, 링크에 메시지 표현
메시지 : 상호 작용 메시지, 화살표 방향으로 메시지 받는 쪽 향하게 표현

(8) 컴포넌트 다이어그램 : 물리적인 컴포넌트 사이의 의존 관계, 실질적인 프로그래밍

(8) - 1 구성요소

컴포넌트 : 탭이 달린 직사각형으로 표현, 반드시 이름을 가진다, 만약 패키지 포함이면 이름 앞에 패키지 이름을 붙일 수 있다 꼬리표 통해서 내부의 오퍼레이션 보여줄 수 있다.
인터페이스 : 실체화하는 의미는 실제로 동작하는 컴포넌트에 인터페이스 적용, 화살표 모양의 점선으로 연결
의존 관계 : 의존 관계는 한 컴포넌트에 변경이 발생한 경우, 변경 범위에 추적 유용

UI 흐름 설계

UI 설계서 구성

구성요소

UI 설계서 표지, 설계서 개정 이력, 요구사항 정의, 사이트 맵, 시스템 구조, 프로세스 정의, 화면 설계

UI 흐름 설계 수행 절차

- 설계는 설계인의 적정성 확인, 화면에 표현될 기능 및 비기능적 요구사항, 화면의 입력 요소 및 유스케이스 통한 UI 요구사항 확인, UI 유스케이스 설계, 기능 및 양식 확인 순

(1) UI 설계안의 적정성 확인

실행 차를 줄이기 위한 설계 원리
- 사용 의도 파악 : 불필요한 부가 기능 조사, 중복되는 기능 조사
- 행위 순서 규정 : 어떤 사전 행위가 수행되어야 하는지 나열, 상대적 중요도 구분, 수행 단계가 최소화 있는지 확인
- 행위의 순서대로 실행 : 편집창, 메뉴, 그 외의 값 확인
평가 차를 줄이기 위한 설계 원리
- 수행한 키 조작 결과를 사용자가 빠르게 지각하도록 유도
- 키 조작으로 변화된 시스템의 상태를 사용자가 쉽게 인지하도록 유도
- 사용자가 가진 원래 의도와 시스템 결과 간의 유사 정도를 사용자가 쉽게 파악하도록 유도

(2) 화면과 폼의 흐름 설계 : 지침에 따라 흐름을 설계

순서

화면에 표현되어야 할 기능 및 비기능적 요구사항 검토
화면의 입력 요소 및 유스케이스를 통한 UI 요구사항 확인
UI 유스케이스 설계
기능 및 양식 확인

UI 상세 설계

UI 상세 설계 프로세스

- 모든 화면에 대한 UI 상세 설계 단계 진행

설계 프로세스

UI 요구사항 최종 확인
UI 구조 설계
사용자 기반 메뉴 구조 설계
화면 설계
하위 시스템 단위의 내 외부 상세 화면과 폼 설계

UI 검토 및 보완

- UI 검토 수행, 검토 보완, 사용성 검토 및 검증 수행

UI 시나리오 문서의 작성 요건

- 완전성, 일관성, 이해성, 가독성, 추적 용이성, 수정 용이성

UI 설계 도구

UI 설계 도구의 개념

- 사용자와 시스템 간 의사소통 할 수 있도록 일시적 또는 영구적인 접근 목적

UI 개발 단계별 활용 가능한 설계 도구

UI 디자이너

분석 : UI 표준 설계 : UI 패턴, UI 모델링
설계 : 디자인 시안 제작, 화면 템플릿 제작 : UI 설계
구현 : - : 프로토타이핑 툴

업무 전무가 / 개발자

분석 : 화면 프로토타이핑, 화면 정의, 보고서 정의 : UI 패턴, UI 모델링
설계 : 화면 설계, 보고서 설계, 응용 아키텍처 구현 : UI 설계
구현 : 화면 개발 : 프로토타이핑 툴

UI 설계 도구의 유형

(1) 화면 설계 도구

- 파워 목업, 발사믹 목업, 카카오 오븐

(2) 프로토타이핑 도구

- UX 핀, 액슈어, 네이버 프로토나우

(3) UI 디자인 도구

- 스케치, 어도비 익스피리언스 디자인 CC

(4) UI 디자인 산출물로 작업하는 프로토타이핑 도구

- 인비전, 픽사에이트, 프레이머