나도개발자

1) UI 설계를 위한 UML

UML(Unified Modeling Language)이란?

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

UML 특징

- 가시화 / 구축 / 명세화 / 문서화

UML 구성

- 사물 / 관계 / 다이어그램

UML 확장 모델의 스테레오 타입

<<include>> 하나의 유스케이스가 어떤 시점에 반드시 다른 유스케이스를 실행하는 포함 관계

<<extend>> 하나의 유스케이스가 어떤 시점에 다른 유스케이스를 실행할 수도 있고, 그렇지 않을 수 도 있는 확장 관계

<<interface>> 모든 메서드가 추상 메서드. 추상 메서드와 상수만으로 구성된 클래스

<<entity>> 일반적으로 정보 또는 오래 지속되는 연관된 행의를 형상화하는 클래스. 유스케이스 처리 흐름이 수행되는 과정에서 기억 장치에 저장되어야 할 정보를 표현하는 클래스

<<boundary>> 시스템과 외부 액터와의 상호 작용을 담당하는 클래스

<<control>> 시스템이 제공하는 기능의 로직 및 제어 담당하는 클래스

UML 다이어그램

- 구조적 다이어그램

클래스 / 객체 / 컴포넌트 / 배치 / 복합체 구조 / 패키지

> 클래스 다이어그램 : 클래스 / 속성 / 연산 / 접근 제어자.       연관 / 의존 / 일반화 / 실체화 / 포함 / 집합 관계

> 컴포넌트 다이어그램 : 컴포넌트 / 인터페이스 / 의존관계

> 패키지 다이어그램 : 패키지 / 의존관계

- 행위적 다이어그램

유스케이스 / 시퀀스 / 커뮤니케이션 / 상태 / 활동 / 타이밍

> 유스케이스 다이어그램 : 유스케이스 / 액터 / 시스템 / 시나리오 / 이벤트의 흐름.        포함 / 확장 / 일반화 관계

> 시퀀스 다이어그램 : 객체 / 생명선 / 실행 / 메시지

> 활동 다이어그램 : 시작점 / 전이 / 액션 및 액티비티 / 종료점 / 조건 노드 / 병합 노드 / 포크 노드 / 조인 노드 / 구획면

> 상태 다이어그램 : 상태 / 시작 상태 / 종료 상태 / 전이 / 이벤트 / 전이 조건

> 커뮤니케이션 다이어그램 : 액터 / 객체 / 링크 / 메시지

UML 확장 모델의 스테레오 타입

UML의 기본적 요소 이외의 새로운 요소를 만들어 내기 위한 확장 매커니즘.

형태는 UML 요소 사용. 내부 의미는 다른 목적으로 사용하도록 확장.

<<>> 기호 사용.

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

클래스 다이어그램의 구성 요소

클래스 / 속성 / 연산 및 메서드 / 접근 제어자 (private - / public + / protected # / default ~)

클래스 간의 관계

연관(Association) / 의존(Dependency) / 일반화(Generalization) / 실체화(Realization) / 포함(Composition) / 집합(Aggregation)

유스케이스 다이어그램이란?

시스템이 제공하고 있는 기능 및 그와 관련된 외부 요소를 사용자의 관점에서 표현하는 다이어그램.

유스케이스 다이어그램 구성요소

유스케이스 / 액터 / 시스템 / 시나리오 / 이벤트의 흐름

시퀀스 다이어그램이란?

객체 간 상호 작용을 메시지 흐름으로 표현한 다이어그램.

객체 간의 동적 상호 작용을 시간적 개념을 중심으로 모델링하는 과정.

객체의 오퍼레이션과 속성을 상세히 정의.

유스케이스 실현.

시퀀스 다이어그램 구성요소

액터 / 객체 / 생명선 / 활성화 / 메시지

패키지 다이어그램이란?

서로 다른 패키지들 사이의 의존 관계를 표현하기 위한 다이어그램.

패키지 다이어그램 구성요소

패키지 / 의존관계

활동 다이어그램이란?

시스템이 어떤 기능을 수행하는지를 객체의 처리 로직이나 조건에 따른 처리의 흐름을 순서대로 표현하는 다이어그램.

오퍼레이션이나 처리과정이 수행되는 동안 일어나는 일들을 단계적으로 표현.

하나의 유스케이스 안이나, 유스케이스 사이에서 발생하는 복잡한 처리의 흐름을 명확하게 표현.

활동 다이어그램 구성요소

시작점 / 전이 / 액션 및 액티비티 / 조건 노드 / 병합 노드 / 포크 노드 / 조인 노드 / 구획면

상태 다이어그램이란?

하나의 객체가 자신이 속한 클래스의 상태 변화 혹은 다른 객체와의 상호 작용에 따라 상태가 어떻게 변화하는지 표현하는 다이어그램.

어떤 이벤트에 의해 객체 자신이 속한 클래스의 상태 변화나 객체 간 상호 작용하는 과정에서의 상태 변화를 표현.

객체는 파악된 상태들 이외의 상태는 가질 수 없고, 특정 순간에는 오직 한 상태로만 존재.

객체의 상태란 객체가 갖는 속성값의 변화.

상태 다이어그램 구성요소

상태 / 시작 상태 / 종료 상태 / 전이 / 이벤트 / 전이 조건

커뮤니케이션 다이어그램이란?

시퀀스 다이어그램과 같이 동작에 참여하는 객체들이 주고받는 메시지를 표현하고, 메시지뿐만 아니라 객체 간의 연관까지 표현하는 다이어그램.

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

액터 / 객체 / 링크 / 메시지

컴포넌트 다이어그램이란?

시스템을 구성하는 물리적인 컴포넌트와 그 사이의 의존 관계를 나타내는 다이어그램.

코드 컴포넌트 기반의 물리적 구조로 표현.

실질적 프로그래밍 작업에 사용.

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

컴포넌트 / 인터페이스 / 의존 관계

2) UI 흐름 설계

UI 설계서 구성

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

UI 흐름 설계 수행 절차

UI 설계안의 적정성 확인 -> 화면과 폼의 흐름 설계

3) UI 상세 설계

UI 상세 설계 프로세스

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

UI 검토 및 보완

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

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

4) UI 설계 도구

UI 설계 도구란?

사용자와 시스템 사이에 의사소통할 수 있도록 일시적 또는 영구적인 접근을 목적으로 만들어진 물리적, 가상적 매개체인 UI의 설계를 지원하는 도구.

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

- 분석단계 : UI 패턴, UI 모델링

- 설계단계 : UI 설계

- 구현단계 : 프로토타이핑 툴

UI 설계 도구의 유형

UI 설계 도구의 유형은 UI 구현 절차에 따라 기획단계에서 화면 UI 설계 및 인터랙션 적용에 적합한 도구와 설계 작업 이후 이미 설계된 이미지의 인터랙션 적용에 적합한 도구로 구분.

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

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

- UI 디자인 도구 : 스케치 / 어도비 익스피리언스 디자인 CC (Adobe XD)

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

인비전 / 픽사에이트 / 프레이머

1) UI 요구사항 확인

UI란?

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

좁은 의미로는 정보 기기나 소프트웨어의 화면 등에서 사람이 접하게 되는 화면.

UX란?

제품과 시스템, 서비스 등을 사용자가 직/간접적으로 경험하면서 느끼고 생각하는 총체적 경험을 의미.

UI 유형

- CLI (Command Line Interface) : 정적인 텍스트 기반 

- GUI (Graphical User Interface) : 그래픽 반응 기반 (마우스)

- NUI (Natural User Interface) : 직관적 사용자 반응 기반 (터치, 음성)

- OUI (Organic User Interface) : 유기적 상호 작용 기반

UI 분야

- 물리적 제어 분야 : 정보 제공과 기능 전달을 위한 하드웨어 기반

- 디자인적 분야 : 콘텐츠의 정확하고 상세한 표현과 전체적 구성

- 기능적 분야 : 사용자의 편의성에 맞춰 쉽고 가편하게 사용 가능

UI 설계 원칙

- 직관성 : 누구나 쉽게 이해하고 사용가능해야 함.

- 유효성 : 정확하고 완벽하게 사용자의 목표가 달성될 수 있도록 제작해야 함.

- 학습성 : 초보와 숙련자 모두가 쉽게 배우고 사용할 수 있게 제작해야 함.

- 유연성 : 요구사항을 최대한 수용하고, 실수를 방지할 수 있도록 제작해야 함.

UI 설계 지침

사용자 중심 / 일관성 / 단순성 / 결과 예측 가능 / 가시성 / 표준화 / 접근성 / 명확성 / 오류 발생 해결

UI 요구사항이란?

사용자가 정보시스템을 구축하여 얻고자 하는 최종 목적의 기준.

요구사항은 시스템 개발과정 전체에 대한 기준이 되며, 시스템 개발 종료 및 검수의 기준이 됨.

[ 기능적 요구사항 : 시스템이 무엇을 해야하는지 설명 ]

시스템이 제공하는 기능, 서비스에 대한 요구사항.

시스템의 입출력, 데이터, 연산에 관한 요구사항.

[ 비기능적 요구사항 : 개발 과정에서 지켜져야 할 제약 조건 설명 ]

사용성, 효율성, 신뢰성, 유지보수성, 재사용성 등 품질에 관한 요구사항.

플랫폼, 사용 기술 등 시스템 환경에 관한 요구사항.

비용, 일정 등 프로젝트 계획에 관한 요구사항.

UI 품질 요구사항

- 기능성 : 실제 수행 결과와 품질 요구사항과의 차이를 분석하고, 실제 사용 시 정확하지 않은 결과가 발생할 확률과 관련하여 시스템의 동작을 관찰하기 위한 품질 기준.

적절성 / 정밀성 / 상호 운용성 / 보안성 / 호환성

- 신뢰성 : 시스템이 일정한 시간 또는 작동되는 시간 동안 의도하는 기능을 수행함을 보증하는 품질 기준.

성숙성 / 고장 허용성 / 회복성

- 사용성 : 사용자와 컴퓨터 사이에 발생하는 어떠한 행위를 정확하고 쉽게 인지할 수 있는 품질 기준.

이해성 / 학습성 / 운용성

- 효율성 : 할당된 시간에 한정된 자원으로 얼마나 빨리 처리할 수 있는가에 대한 품질 기준.

시간 효율성 / 자원 효율성

- 유지보수성 : 요구사항을 개선하고 확장하는데 있어 얼마나 용이한가에 대한 품질 기준.

분석성 / 변경성 / 안정성 / 시험성

- 이식성 : 다른 플랫폼에서도 많은 추가 작업 없이 얼마나 쉽게 적용이 가능한가에 대한 품질 기준.

적용성 / 설치성 / 대체성

2) UI 표준

UI 표준이란?

디자인 철학과 원칙 기반하에 전체 시스템에 공통으로 적용되는 화면 간 이동, 화면 구성 등에 관한 규약.

UI 표준 구성

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

UI 표준 수립 시 고려 사항

- 많은 업무 케이스 포함

- 다양한 사용상황에 대처

- 표준 적용이 쉽도록 충분한 가이드와 활용 수단 제공 필요

- 변화 상황에 맞게 빠르게 변경할 수 있는 관리 조적 수반 필요

- 사용자 편리

UI 스타일 가이드 구성

- UI 구동 환경의 정의 (OS / Web / 해상도 / 프레임 세트)

- 레이아웃 정의 (Top / Left / Contents / Footer Area)

- 메뉴 내비게이션 정의

- 공통 표준 화면 정의

- 기능 정의 : 요구사항에 대한 개념 모델을 논리적 모델로 상세화하여 기능 정의.

- 구성요소 정의 (그리드 / 버튼 및 컨트롤 타입 / Page 요소 / 팝업 요소 / Alert 요소)

UI 패턴 모델 정의

CRUD 방식을 기반으로 데이터의 입출력을 처리하는 화면 흐름을 포함하여 오퍼레이션 방식에 대한 표준 절차를 표시하고 UI 패턴 모델을 개발.

표준 프레임워크로 개발하고, 유스케이스를 이용해 패턴별 표준 개발 방법 7가지 영역을 정의.

- 패턴별 표준 개발 방법 7가지 영역 (업무 화면 클라이언트 / 서버 컨트롤러 / 서버 메시지 및 예외 처리 / 클라이언트 - 서버 간 데이터 변환 / 기업 포털 연계 / 보고서 / 외부 컴포넌트 연계)

UI 표준 수립을 위한 조직 구성

- 조직 구성 및 역할 정의 : 효과적인 프로젝트 추진을 위해 UI 팀 및 표준 개발 팀을 주축으로 한 추진 조직 구성 확정.

- 커뮤니케이션 방안 수립 : UI 개발이 원활히 수행되도록 정식 보고 및 정기적 회의와 이슈 회의 등 다양한 커뮤니케이션 방안 마련.

3) UI 지침

UI 지침이란?

UI 표준에 따라 사용자 인터페이스 설계, 개발 시 지켜야 할 세부 사항을 규정하는 가이드라인.

(목표 정의 / 프로젝트 계획 / 요구사항 정의 / 설계 및 구현 / 테스트 / 배포 및 관리)

UI 표준 적용을 위한 환경 분석

- 사용자 트렌드 분석

- 기능 및 설계 분석 : 기능 조작성 / 오류 방지 / 최소한 조작으로 업무 처리 가능 여부 / UI의 정보 전달력 확인

UI 개발 목표 및 범위

- UI 개발을 위한 주요 기법 (3C 분석 / SWOT 분석 / 시나리오 플래닝 / 사용성 테스트 / 워크숍)

사용자 분석 및 니즈 조사

- 리서치 대상 선정 및 내용 설계 -> 리서치 진행 -> 리서치 결과 정리

사용자 요구사항 도출

- 페르소나 : 잠재적 사용자의 다양한 목적과 관찰된 행동 패턴을 응집시켜 놓은 가상의 사용자

- 콘셉트 모델 : 여러 추상적인 컨셉들 사이의 관계를 보여주는 다이어그램. 브레인스토밍 활용

- 사용자 요구사항 : 결과물을 토대로 요구사항을 도출하고 우선순위 선정. 요구사항 매트릭스 작성 및 정황 시나리오 제작.

- UI 컨셉션 : 정리된 요구사항을 구체화. 대표 화면 설계.

4) 스토리보드

스토리보드란? 

UI 화면 설계를 위해 정책이나 프로세스 및 컨텐츠의 구성, 와이어 프레임, 기능에 대한 정의, DB 연동 등 구축하는 서비스를 위한 대부분 정보가 수록된 문서.

디자이너와 개발자가 최종적으로 참고하는 산출 문서.

UI 화면 설계

- 와이어 프레임 : 서비스의 간략한 흐름을 공유하기 위해 화면 단위의 레이아웃을 설계하는 작업. (PPT / 키노트 / 스케치 / 일러스트)

- 스토리보드 (PPT / 키노트 / 스케치)

- 프로토타입 : 정적인 화면으로 설계된 와이어프레임 또는 스토리보드에 동적 효과를 적용하여 실제 시뮬레이션할 수 있는 모형 (HTML / CSS)

스토리보드 작성 절차

전체 개요 작성 -> 서비스 흐름 작성 -> 스타일 확정 -> 메뉴별 화면 설계도 작성 및 상세 설명 -> 추가 관련 정보 작성

스토리보드 작성 시 유의사항

일관된 기호, 공통 영역 정의, 영역별 세부 설계, 버전 관리

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

프로토타입이란?

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

사용자의 요구사항이 정확하게 반영될 때 까지 지속적으로 개선하고 보완해서 최종 설계함.

사전에 프로토타입을 제작하고, 이를 기반으로 UI 적정성을 평가, 수정 보완함으로써 추후 발생 가능한 오류들을 사전에 방지 가능.

시스템 설계 및 개발에 소요되는 총 비용과 노력 절감 가능.

장점

- 사용자 설득과 이해 쉬움.

- 개발 시간 감소

- 오류 사전 발견 가능

단점

- 수정 과정 증가 시 작업 시간 증가 위험

- 요구사항에 대한 적절한 타협 필요

- 자원 효율성 관점에서 필요 이상의 많은 자원 소모

아날로그 유형

- 종이와 펜을 활용한 화면 구조 스케치

- 화이트보드, 펜, 종이, 포스트잇 사용

- 제작 기간 짧고, 비용이 적고, 업무 협의가 빠른 상황에 적용

디지털 유형

- 프로토타이핑 도구(HTML / 디지털 편집기)를 사용해 화면의 구조를 만듦.

- 키노트, HTML, UX pin 사용

- 재사용이 필요하거나 산출물과 비슷한 효과를 필요로 할 경우, 숙력된 전문가가 있을 경우에 적용