UI 요구사항 확인
1. UI 요구사항 확인
(1) UI(User Interface 사용자 인터페이스) 개념
사용자와 시스템 사이에서 의사소통 할 수 있도록 고안된 매개체
UX는 UI를 포함하고 있음
UX(User Experience)
(2) UI 유형
CLI (Command Line Interface)
GUI (Graphical User Interface)
NUI (Natural User Interface)
OUI (Organic User Interface)
(3) UI 설계 원칙
직관성 (Intuitiveness): 쉽게 이해하고 쉽게 사용할 수 있어야 한다는 원칙
유효성 (Effciency): 정확하고 완벽하게 사용자의 목표가 달성될 수 있도록 제작해야 하는 원칙
학습성 (Learnability): 초보와 숙련자 모두 쉽게 배우고 사용할 수 있어야 한다는 원칙
유연성 (Flexibility): 사용자의 요구사항을 최대한 수용해야 한다는 원칙
(4) UI 요구사항 확인
UI 요구사항: 사용자가 정보 시스템을 구축하여 얻고자 하는 최종 목적의 기준
UI 품질 요구사항
기능성 (Functionability): 실제 수행 결과와 품질 요구사항과의 차이를 분석하고 시스템의 동작을 관찰하기 위한 품질 기준
신뢰성 (Reliability): 작동되는 시간 동안 의도하는 기능을 수행함을 보증하는 품질 기준
사용성 (Usability): 쉽게 인지할 수 있는지에 대한 품질 기준
효율성 (Efficiency): 한정된 자원으로 얼마나 빠르게 처리할 수 있는가에 대한 품질 기준
유지보수성 (Maintainability): 요구사항을 개선하고 확장하는 데 있어 얼마나 용이한가에 대한 품질 기준
이식성 (Portability): 다른 플랫폼에 얼마나 쉽게 적용 가능한가에 대한 품질 기준
(기신사 효유이)
2. UI 지침
(1) UI 지침 개념
사용자 표준에 따라 사용자 인터페이스 설계, 개발 시 지켜야 할 세부사항을 규정하는 가이드라인
(2) 소프트웨어 개발 단계별 UI 지침
목표 정의
3C 분석: (Customer, Company, Competitor)를 비교하여 분석하여 어떻게 경쟁에서 이길 것인가를 분석
SWOT 분석: Strength, Weakness, Opportunity, Threat 요인을 규정하고 전략을 수립하는 방법
시나리오 플래닝 (Scenario Planning): 불확실성 제거
워크숍 (Workshop): 소집단 정도의 인원으로 지식, 기술, 방법 등을 서로 교환하고 검토
프로젝트 계획
파악된 핵심 기능을 토대로 UI개발 프로젝트 계획 수립
프로파일 (Profile): 사용자 특성이나 특징 속성을 그룹화
리서치 (Research): 체계적인 조사
요구사항 정의
페르소나 (Persona): 잠재적 사용자의 다양한 목적과 관찰된 행동 패턴을 응집시켜 놓은 가상의 사용자
브레인스토밍 (Brain Storming): 집단적 창의적 발상 기법
요구사항 매트릭스 (Requirement Matrix): 수집된 직접적인 요구사항을 검토하여 페르소나 목적을 기준으로 만든 표
정황 시나리오 (Contextual Scenario): 초기 시나리오
설계 및 구현
레이아웃, 컬러 패턴, 타이포 그래픽, 화면 디자인 요소 등을 정의
UI 시나리오 문서: 기능 구조, 대표 화면, 인터랙션 흐름 등 다양한 상황에서의 예외 처리방식 등을 정리한 문서
테스트
실제 사용성 테스트
사용성 테스트 (Usability Test): 사용자가 직접 제품을 사용하면서 미리 작성된 시나리오에 맞춰 과제를 수행한 후 질문에 답하도록 하는 테스트
(3) UI 화면 설계
와이어 프레임 (Wireframe): 화면 단위의 레이아웃 설계
스토리보드 (Storyboard): 모든 정보가 담겨 있는 설계 산출물
프로토타입 (Prototype): 동적 효과를 적용함으로써 실제 구현된 것처럼 시뮬레이션 할 수 있는 모형
목업 (Mockup): 실제 화면과 유사하게 만든 정적인 형태의 모형
(와스프목)
UI 설계
1. UML
(1) UML(Unified Modeling Language) 개념
UML은 객체 지향 소프트웨어 개발 과정에서 산출물을 명세화, 시각화, 문서화할 때 사용되는 모델링 기술과 방법론을 통합해서 만든 표준화된 범용 모델링 언어
(2) UML의 특징
가시화 언어: 개념 모델 작성 시 오류가 적고 의사소통이 용이
구축 언어: 소스 코드로 변환하여 구축 가능
명세화 언어: 정확한 모델 제시
문서화 언어: 평가 및 의사소통의 문서
(가구명문)
(3) UML 구성요소
사물 (Things): 주제를 나타내는 요소
관계 (Relationships): 사물과 사물을 연결하여 관계를 표현하는 요소
다이어그램 (Diagram): 사물과 관계를 모아 그림으로 표현한 형태
(4) UML 다이어그램
UML 다이어그램은 구분에 따라 구조적(정적), 행위적(동적) 다이어그램으로 구분
구조적(정적) 다이어그램
클래스 (Class): 클래스의 속성 및 연산과 클래스 간 정적인 관계를 표현한 다이어그램
객체 (Object): 특정 시점의 객체와 객체 사이의 관계로 표현하는 다이어그램
컴포넌트 (Component): 시스템을 구성하는 컴포넌트와 그들 사이의 의존 관계를 표현하는 다이어그램
배치 (Deployment): 물리적 요소들의 위치를 표현하는 다이어그램
복합체 구조 (Composite Structure): 복합 구조의 내부 구조 표현하는 다이어그램
패키지 (Package): 패키지들의 관계를 표현한 다이어그램
(컴클객 복배패)
행위적(동적) 다이어그램
유스케이스 (Usecase): 시스템이 제공하고 있는 기능 및 그와 관련된 외부 요소를 사용자의 관점에서 표현하는 다이어그램
시퀀스 (Sequence): 시간적 개념을 중심으로 메시지 흐름으로 표현하는 다이어그램
커뮤니케이션 (Communication): 주고받는 메시지를 표현하고 객체 간의 연관까지 표현하는 다이어그램
상태 (State): 상태가 어떻게 변화하는지 표현하는 다이어그램
활동 (Activity): 처리 로직이나 조건에 따른 처리의 흐름으로 순서대로 표현하는 다이어그램
타이밍 (Timing): 객체 상태 변화와 시간 제약을 명시적으로 표현하는 다이어그램
(5) UML 스테레오 타입 (Stereotype)
새로운 요소를 만들어 내기 위한 확장 매커니즘
<< >> 사용
(6) UML의 유형
클래스 다이어그램
구성 요소: 클래스 이름, 속성, 연산, 접근 제어자, 관계
* 접근제어자
- : 클래스 내부 접근만 허용 (private)
+: 클래스 외부 접근을 허용 (public)
#: 동일 패키지-파생 클래스에서 접근 가능 (protected)
~: 동일 패키지 클래스에서 접근 가능 (default)
- 클래스 간의 관계
연관 관계(Association): 클래스가 서로 개념적으로 연결된 관계, 실선으로 표현
의존 관계(Dependency): 하나의 클래스가 또 다른 클래스를 사용하는 관계, 점선으로 표현
일반화 관계(Generalization): 사물이 더 일반적인지 구체적인지 표현하는 관계, 실선 빈 화살표
실체화 관계(Realization): 상속 받아 추상 메소드를 구현할 때 사용하는 관계, 점선 빈 화살표
포함 관계(Composition): 포함하는 사물의 변화가 포함되는 사물에게 영향을 미치는 관계, 속이 채워진 마름모가 반대
집합 관계(Aggregation): 하나의 객체에 여러 개의 독립적인 객체들이 구성되는 관계, 속이 비워진 마름모가 반대
*추상 클래스: 상속하여 공통된 기능을 만들고 확장하기 위함, extends 키워드 사용
<<abstract>>로 표기
* 인터페이스: 구현하는 객체들이 같은 동작을 보장하기 위함, implements 키워드 사용
<<interface>>로 표기
유스케이스 다이어그램
- 유스케이스 다이어그램 개념(Usecase Diagram)
시스템이 제공하고 있는 기능 및 그와 관련된 외부 요소를 사용자의 관점에서 표현하는 다이어그램
- 유스케이스 다이어그램 구성요소
유스케이스(Usecase): 시스템이 제공해야 하는 서비스, 기능을 표현하는 요소 / 액터가 시스템을 통해 수행하는 일련의 행위
액터(Actor): 시스템과 상호 작용하는 사람 또는 사물
시스템(System): 전체 시스템의 영역을 표현
시스템 시나리오(Scenario): 발생되는 이벤트의 흐름
- 유스케이스 다이어그램 구성요소 간의 관계
포함 관계(Include): 유스케이스를 수행할 때 다른 유스케이스가 반드시 수행되는 관계, 점선 화살표 <<include>>
확장 관계(Extend): 특정 조건일 때 한 유스케이스로만 확장되는 관계, 점선 화살표 <<extend>>
일반화 관계(Generalization): 추상적인 액터와 좀 더 구체적인 액터 사이에 맺어주는 관계, 속이 빈 삼각형 화살표
시퀀스 다이어그램
- 시퀀스 다이어그램(Sequence Diagram: 순차 다이어그램) 개념
객체 간 상호 작용을 메시지 흐름으로 표현한 다이어그램
유스케이스를 실현(Realization)
- 시퀀스 다이어그램 구성요소
객체(Object): 객체는 위쪽에 표시되며 아래로 생명선을 가짐
생명선(Lifeline): 객체로부터 뻗어 나가는 점선, 실제 시간이 흐름에 따라 객체의 생명주기 동안 발생하는 이벤트를 명시
실행(Activation): 오퍼레이션(함수)이 실행되는 시간을 의미
메시지(Message): 객체 간의 상호 작용은 메시지 교환으로 이루어짐
희귀 메시지(Self-Message): 같은 객체에 대한 함수(메서드)를 호출
패키지 다이어그램
- 패키지 다이어그램(Package Diagram) 개념
시스템의 서로 다른 패키지들 사이의 의존 관계를 표현하기 위한 다이어그램
- 패키지 다이어그램 구성요소
패키지(Package): 객체들을 그룹화한 요소
의존(Dependency): 하나의 패키지가 다른 패키지를 사용하는 관계 <<import>>, <<access>>
활동 다이어그램
- 활동 다이어그램 개념
시스템이 어떤 기능을 수행하는지를 객체의 처리 로직이나 조건에 따른 처리의 흐름을 순서대로 표현하는 다이어그램
- 활동 다이어그램 구성요소
시작점(Initial Node): 활동의 시작을 표현하는 요소, 검은색 동그라미
전이(Transition): 실행의 흐름, 화살표
액션(Action)/액티비티(Activity): 더 이상 분해할 수 없는 단일 작업 / 몇 개의 액션으로 분리될 수 있는 작업
종료점(Final Node): 처리의 종료를 표현, 검은색 동그라미를 포함한 원
조건 노드(Decision Node): 조건에 따른 제 어 흐름의 분리를 표현
병합 노드(Merge Node): 여러 경로의 흐름이 하나로 합쳐진 것을 표현
포크 노드(Fork Node): 평행적으로 수행되는 흐름을 나누는 노드
조인 노드(Join Node): 포크 노드로 나눠진 흐름을 다시 하나로 합치는 노드
구획면(Swim Lane): 액티비티 수행을 담당하는 주체를 구분하는 면
상태 다이어그램
- 상태 다이어그램(State Diagram) 개념
하나의 객체가 자신이 속한 클래스의 상태 변화 혹은 다른 객체와의 상호작용에 따라 상태가 어떻게 변화하는지 표현하는 다이어그램
- 상태 다이어그램 구성요소
상태(State): 객체가 존재할 수 있는 조건
시작 상태(Initial State): 객체의 시작 상태, 속이 채워진 원
종료 상태(Final State): 객체의 종료 상태, 원 안에 속이 채워진 원
전이(Transition): 객체의 상태가 다른 상태로 변경되는 상태, 화살표로 표현
이벤트(Event): 상태의 변화를 주는 현상을 표현하는 요소, 전이 위에 이벤트 이름 표시
전이 조건(Transition Condition): 특정 조건 만족 시 전이가 발생하게 하도록 사용 [전이 조건]
커뮤니케이션 다이어그램
- 커뮤니케이션 다이어그램 개념
동작에 참여하는 객체들이 주고받는 메시지와 객체 간의 연관까지 표현
- 커뮤니케이션 다이어그램 구성요소
액터(Actor): 시스템으로부터 서비스를 요청하는 외부 요소
객체(Object): 메시지를 주고받은 주체
링크(Link): 객체들 간의 관계를 표현하는 요소
메시지(Message): 객체 간의 상호 작용을 위한 요소
컴포넌트 다이어그램
- 컴포넌트 다이어그램(Component Diagram) 개념
시스템을 구성하는 물리적인 컴포넌트와 그들 사이의 의존 관계를 나타내는 다이어그램
- 컴포넌트 다이어그램 구성요소
컴포넌트(Component): 모듈화된 소프트웨어 시스템의 구성 요소
인터페이스(Interface): 기능을 모아놓은 클래스
의존(Dependency): 컴포넌트 사이의 의존하는 관계