정처기 실기 파트2

２  화면 설계

I.    UI 요구사항 확인

1.   UI 요구사항 확인

(1)  UI(User Interface 개념) : 사용자와 시스템 사이의 의사소통을 위한 물리적, 가상의 매개체 / UX(User Experience)

(2)  UI 유형 : CLI(Command Line), GUI(Graphic), NUI(Natural), OUI(Organic)

(3)  UI 분야 : 물리적 제어 분야, 디자인적 분야, 기능적 분야

(4)  UI 설계 원칙 : 직유학유(직관성, 유효성, 학습성, 유연성)

(5)  UI 설계 지침 : 사일단결가표접명오(사용자 중심, 일관성, 단순성, 결과 예측 가능, 가시화, 표준화, 접근성, 명확성, 오류 발생 해결)

(6)  UI 요구사항 확인 : 기신사효유이(기능성, 신뢰성, 사용성, 효율성, 유지보수성, 이식성)
(ISO/IEC 9126)

-     기능성 : 적절성, 정밀성, 상호 운용성, 부안성, 호환성

-     신뢰성 : 성숙성, 고장 허용성, 회복성

-     사용성 : 이해성, 학습성, 운용성

-     효율성 : 시간 효율성, 자원 효율성

-     유지보수성 : 분석성, 변경성, 안정성, 시험성

-     이식성 : 적용성, 설치성, 대체성

2.   UI 표준

(1)  UI 표준 구성 : 엑정스페조(전체적인 UX 원칙, 정책 및 철학, UI 스타일 가이드, UI 패턴 모델 정의, UI 표준 수립을 위한 조직 구성)

(2)  UI 스타일 가이드 구성

-     UI 구동 환경 정의 : OS, 웹브라우저, 모니터 해상도, 프레임세트 확인

-     레이아웃 정의 : Top Area, Left Area, Contents Area, Footer Area

-     메뉴 네비게이션 정의

-     공통표준화면 정의

-     기능 정의

-     구성요소 정의

(3)  UI 패턴 모델 정의

-     업무 화면 클라이언트 정의, 서버 컨트롤러 정의, 서버 메시지 및 예외 처리 정의, 클라이언트-서버 간 데이터 변환 정의, 기업 포털 연계 정의, 보고서 정의, 외부 컴포넌트 연계 정의

3.   UI 지침(Gauideline)

(1)  UI 개발을 위한 주요 기법 : 3C(Customer, Company, Competitor) 분석, SWOT(Strength, Weakness, Opportunity, Threat) 분석, 시나리오 플래닝, 사용성 테스트, 워크숍

(2)  사용자 요구사항 도출 : 페르소나 정의, 콘셉트 모델 정의, 사용자 요구사항 정의, UI컨셉션

4.   스토리 보드

(1)  UI화면 설계 구분 : 와이어프레임(화면단위의 레이아웃 설계), 스토리보드(서비스 구축을 위한 모든 정보 담겨있는 설계 산출물), 프로토타입(동적 효과 적용하여 시뮬레이션이 가능한 모델)

(2)  스토리보드 작성 절차 : 전체 개요 작성, 서비스 흐름 작성, 스타일 확정, 메뉴별 화면 설계도 작성 및 상세 설명, 추가 관련 정보 작성

5.   UI 프로토타입 제작 및 검토

(1)  유형

	아날로그	디지털
개념	종이와 펜을 활용하여 스케치	프로토타이핑 도구 이용
도구	화이트보드, 팬 등	Keynote, UX pin, HTML
특징	제작 기간 짧음, 제작 비용 적음, 업무 협의 빠름	재사용 가능, 산출물과 비슷한 효과, 숙련된 전문가 필요

 

II.   UI 설계

1.   UI 설계를 위한 UML

(1)  UML

-     UML : 객제 지향 소프트웨어 개발 과정에서의 모델링 기술과 방법론을 통합해서 만든 표준화된 범용 모델링 언어

-     UML 특징 : 가구명문(가시화, 구축, 명세화, 문서화)

-     UML 구성요소 : 사관다(사물, 관계, 다이어그램)

-     UML 다이어그램 : 구조적(정적) 다이어그램 – 클객컴배복패(클래스, 객체, 컴포넌트, 배치, 복합체 구조, 패키지) / 행위적(동적) 다이어그램 – 유시커상활타(유스케이스, 시퀀스, 커뮤니케이션, 상태, 활동, 타이밍)

-     UML 확장 모델의 스테레오 타입 : <<include>>, <<extend>>, <<interface>>, <<entity>>, <<boundary>>, <<control>>

(2)  UML의 유형

-     클래스 다이어그램

①  클래스 다이어그램 구성요소
클래스 : 객체들의 집합
속성 : 인스턴스가 보유 할 수 있는 값의 범위
연산, 매서드 : 클래스의 행위적 특징
접근제어자 : - 클래스 내부 접근만 허용(private) / + 클래스 외부 접근을 허용(public) / # 동일 패키지, 파생 클래서에서 접근 가능(protected) / ~ 동일 패키지 클래스에서 접근 가능(default)

②  클래스 간 관계 : 연집복일의실(연관, 집합, 복합, 일반화, 의존, 실체화)
연관(Association) 관계 : 실선, 1..*등 으로 다중성 표현
집합(Aggregation) 관계 : 속이 빈 마름모, 부분(Part)에서 전체(Whole)로
복합(Composition) 관계 : 속이 찬 마름모 , 포함 관계 라고도 함
일반화(Generalization) 관계 : 속이 빈 화살표, 하위에서 상위로, 상속 관계
의존(Dependency) 관계 : 점선 화살표, 영향 주는 에서 영향 받는 으로
추상클래스(Abstract Class) : 동일한 부모를 가지는 클래스를 묶는 개념으로 상속 받아 기능 확장, <<abstract>>로 표기 / 인터페이스(Interface) : 기능을 모아놓은 클래스로 추상 메서드와 상수만을 포함하는 추상 클래스, <<interface>>로 표현 / 실체화 관계(Realization) : 자식 클래스가 추상 메서드를 구현할 때 사용

-     유스케이스 다이어그램

①  유스케이스 다이어그램 구성요소
유스케이스 : 시스템이 제공해야하는 서비스, 기능
액터 : 이벤트 흐름을 시작하게 하는 객체
시스템 : 전체 시스템의 영역을 표현
시나리오 : 발생되는 이벤트의 흐름
이벤트의 흐름 : 사람, 시스템, 하드웨어, 시간의 흐름에 의해 시작

②  유스케이스 다이어그램의 관계
포함(include) 관계 : 유스케이스를 수행할 때 다른 유스케이스가 반드시 수행 되는 관계, <<>include>>로 표현
확장(extend) 관계 : 특정 조건에서 한 유스케이스로만 확장되는 관계, <<extend>>로 표현
일반화(Generalization) 관계 : 하위 액터나 유스케이스에서 상위 엑터나 유스케이스로 속이 빈 화살표

-     시퀀스 다이어그램

①  시퀀스 다이어그램 구성요소
객체(Object) : 사각형 안에 밑줄 친 이름
생명성(Lifeline) : 객체로부터 뻗어나가는 점선, 실제 시간 흐름에 따라 작성
실행(Activation) : 직사각형은 오퍼레이션(함수)이 실행되는 시간을 의미
메시지(Message) : 수행해야 할 동작 혹은 함수

-     패키지 다이어그램

①  패키지 다이어그램 구성요소
패키지 : 개별 요소를 그룹으로 조직하기 위한 요소
의존관계 : 하나의 패키지가 다른 패키지를 사용하는 관계, 점선 화살표로 표현, <<import>>, <<access>>로 표현

-     활동 다이어그램

①  활동 다이어그램 구성요소
시작점(Initial Node) : 활동의 시작, 검은색 동그라미
전이(Transition) : 실행의 흐름을 나타냄, 화살표
액션(Action) / 액티비티(Activity) : 액션 – 단일작업 / 액티비티 : 액션의 분기점, 모서리가 둥근 사각형 안에 액션인지 액티비티인지 기술
종료점(Final Node) : 처리 종료, 검은색 동그라미를 포함한 원
조건(판단) 노드(Decision Node) : 조건에 따른 제어 흐름의 분리를 표현
병합 노드(Merge Node) : 여러 경로의 흐름이 하나로 합쳐진 것을 표현
포크 노드(Fork Node) : 평행적으로 수행되는 흐름을 나누는 노드
조인 노드(Join Node) : Fork Node로 나눠진 흐름을 다시 하나로 합치는 노드
구획면(Swim Lane) : 액티비티 수행을 담당하는 주체를 구분하는 면

-     상태 다이어그램

①  상태 다이어그램 구성요소

상태 : 객체가 존재 할 수 있는 조건 중 하나, 둥근 사각형

시작 상태 : 객체의 시작 상태, 검은색 동그라미

종료 상태 : 객체의 종료 상태, 검은색 동그라미를 포함한 원

전이 : 상태 사이의 흐름/변화, 화살표

이벤트 : 상태의 변화를 주는 현상, 시간의 흐름/조건/외부 신호 등

전이 조건 : 특정 조건 만족에 사용되는 속성값의 불리언 식

-     커뮤니케이션 다이어그램

①  커뮤니케이션 다이어그램 구성요소

액터(Actor) : 시스템으로부터 서비스를 요청하는 외부 요소(사람, 외부 시스템)

객체(Object) : 메시지를 주고 받는 주체, 객체명:클래스명 기술

링크(Link) : 액터와 객체, 객체간 실선으로 표현

메시지(Message) : 화살표의 방향으로 메시지 받는 쪽을 표현

-     컴포넌트 다이어그램

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

컴포넌트 : 반드시 이름이 있어야 함, 탭이 달린 직사각형

인터페이스 : 실제로 동작하는 컴포넌트에 인터페이스 적용, 점선 화살표

의존 관계 : 컴포넌트에 변경이 발생한 경우 변경 범위 추적에 유용

2.   UI 흐름 설계

(1)  UI 설계서 구성

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

(2)  UI 흐름 설계 수행 절차 : 실행 차를 줄이기 위한 UI 설계 원리 / 평가 차를 줄이기 위한 UI 설계 원리

3.   UI 상세설계

(1)  UI 상세설계 프로세스

(2)  UI 검토 및 보완

(3)  UI 시나리오 문서의 작성 요건 : 완일이가추수(완전성(Complete), 일관성(Consistent), 이해성(Understandable), 가독성(Readable), 추적 용이성(Traceable), 수정 용이성(Modifiable))

4.   UI 설계 도구

(1)  UI 설계 도구의 유형

-     화면 설계 도구 : 파워 목업, 발사믹 목업, 카카오 오븐

-     프로토타이핑 도구 : UX핀, 액슈어, 네이버 프로토나우

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

-     UI 디자인 산출물로 작업하는 프로토타이핑 도구 : 인비전, 픽사에이트, 프레이머