1. UI 요구사항 확인
🔷 UI ( User Interface )
사용자와 시스템 사이에서 의사소통할 수 있도록 고안된 물리적, 가상의 매개체
📝 UX ( User eXperience ) : 제품과 시스템, 서비스 등을 사용자가 경험하면서 느끼고 생각하는 총체적 경험 ( UX는 UI를 포함 )
◼ 유형 🔔
- CLI ( Command Line Interface ) : 정적인 텍스트 기반 인터페이스 / 명령어로 텍스트를 입력하여 조작
- GUI ( Graphic User Interface ) : 그래픽 반응 기반 인터페이스 / 그래픽 환경을 기반으로 마우스나 전자펜 이용
- NUI ( Natural User Interface ) : 직관적 사용자 반응 기반 인터페이스 / 신체 부위를 이용 (터치, 음성)
- OUI ( Organic User Interface ) : 우기적 상호작용 기반 인터페이스 / 현실에 존재하는 모든 사물이 입출력장치로 변화
◼ 분야
- 물리적 제어 분야 : 정보 제공과 기능 전달을 위한 하드웨어 기반
- 디자인적 분야 : 콘텐츠의 정확하고 상세한 표현과 전체적 구성
- 기능적 분야 : 사용자 편의성에 맞춰 쉽고 간편하게 사용 가능
◼ 설계 원칙 ⭐ #직유학유 🔔
- 직관성 : 누구나 쉽게 이해 및 사용
- 유효성 : 정확하고 완벽하게 사용자의 목표 달성
- 학습성 : 초보와 숙련자 모두 쉽게 배우고 사용
- 유연성 : 사용자의 요구사항을 최대한 수용, 실수 방지
🔷 UI 요구사항
사용자가 정보시스템을 구축하여 얻고자 하는 최종 목적의 기준
◼ 구분
- 기능적 요구사항 : 시스템이 제공하는 기능, 서비스에 대한 요구사항
- 비기능적 요구사항 : 기능을 제외한 품질, 제약사항에 관한 요구사항
◼ UI 품질 요구사항 ( ISO/IEC 9126 기반 ) ⭐ #기신사효유이 🔔
- 기능성 : 실제 수행 결과와 품질 요구사항과의 차이를 분석
- 신뢰성 : 시스템이 일정 시간 동안 의도한 기능을 수행함을 보증
- 사용성 : 사용자와 컴퓨터 사이에 발생하는 행위를 정확하고 쉽게 인지
- 효율성 : 할당된 시간에 한정된 자원으로 얼마나 빨리 처리
- 유지보수성 : 요구사항을 개선하고 확장하는데 용이
- 이식성 : 다른 플랫폼(OS)에서도 쉽게 적용
🔷 스토리보드 ( Storyboard) ⭐
UI 화면 설계를 위해 정책이나 프로세스, DB 연동 등 구축하는 서비스를 위한 대부분 정보가 수록된 문서
◼ 와이어 프레임 ( Wireframe )
- 화면구성을 협의하거나 간략한 흐름을 공유하기 위해 화면 단위의 레이아웃 설계
- 파워포인트 , 키노트 , 스케치 , 일러스트
◼ 스토리보드 ( Storyboard )
- 서비스 구축을 위한 모든 정보가 담겨 있는 설계 산출물
- 파워포인트 , 키노트 , 스케치
◼ 프로토타입 ( Prototype )
- 동적 효과를 적용하여 실제 구현된 것처럼 시뮬레이션 가능
- HTML , CSS
2. UI 설계
🔷 UML ( Unified Modeling Language )
객체지향 소프트웨어 개발 과정에서 산출물을 명세화, 시각화, 문서화 할 때 사용되는 모델링 기술과 방법론을 통합하여 만든 표준화된 범용 모델링 언어
◼ 특징
- 가시화 언어 : 오류가 적고, 의사소통 용이
- 구축 언어 : 다양한 프로그래밍 언어로 실행 시스템 예측 가능
- 명세화 언어 : 정확한 모델 제시, 완전한 모델 작성 가능
- 문서화 언어 : 시스템에 대한 평가 및 의사소통의 문서
◼ 구성요소 ⭐
- 사물 ( Things ) : 주제를 나타내는 요소 ( 추상적 개념 )
- 관계 ( Relationships ) : 사물의 의미를 확장하고 사물과 사물을 연결
- 다이어그램 ( Diagrams ) : 사물과 관계를 모아 그림으로 표현
◼ UML 다이어그램 ⭐ #클객컴배복패 # 유시커상활타
❐ 구조적 / 정적 ( Structural / Static ) 다이어그램 🔔
- 클래스 ( Class ) : 객체지향 모델링 시 클래스의 속성 및 연산과 클래스 간 정적인 관계 표현
- 객체 ( Object ) : 클래스에 속한 사물( 객체 ), 인스턴스를 특정 시점의 객체 사이의 관계 표현
- 컴포넌트 ( Component ) : 시스템을 구성하는 물리적 컴포넌트와 그들 사이의 의존 관계
- 배치 ( Deployment ) : 컴포넌트 사이의 종속성 표현, 물리적 요소들의 위치 표현
- 복합체 구조 ( Composite Structure ) : 복합 구조를 갖는 경우 그 내부 구조를 표현
- 패키지 ( Package ) : 유스케이스나 클래스 등 모델 요소들을 그룹화한 패키지들의 관계 표현
❐ 행위적 / 동적 ( Behavioral / Dynamic ) 다이어그램 🔔
- 유스케이스 ( Usecase ) : 시스템이 제공하는 기능을 사용자 관점에서 표현
- 시퀀스 ( Sequence ) : 객체 간 동적 상호작용을 시간적 개념을 중심으로 표현
- 커뮤니케이션 ( Communication ) : 객체들이 주고받는 메시지를 표현
- 상태 ( State ) : 하나의 객체가 자신이 속한 클래스의 상태 변화를 표현
- 활동 ( Activity ) : 시스템이 어떤 기능을 수행하는지를 객체의 처리 로직이나 조건에 따라 표현
- 타이밍 ( Timing ) : 객체 상태 변화와 시간 제약을 명시적으로 표현
◼ UML 확장 모델의 스테레오 타입 ( Stereotype ) ⭐ 🔔
UML의 기본적 요소 이외의 새로운 요소를 만들어내기 위한 확장 메커니즘
기존의 UML 요소를 그대로 사용하지만 내부 의미는 다른 목적으로 사용하도록 확장한다.
<< >> : 길러멧 ( Gullemet ) 기호를 사용한다.
<< include >> : 하나의 유스케이스가 어떤 시점에서 다른 유스케이스를 실행하는 포함관계
<< extend >> : 하나의 유스케이스가 어떤 시점에서 다른 유스케이스를 실행할 수도 있고, 그렇지 않을 수도 있는 확장관계
<< interface >> : 모든 메서드가 추상 메서드이며 바로 인스턴스를 만들 수 없는 클래스로 추상메서드와 상수만으로 구성된 클래스
<< entity >> :
- 일반적을 정보 도는 오래 지속되는 연관된 행위를 형상화하는 클래스
- 유스케이스 처리 흐름이 수행되는 과정에서 기억 장치에 저장되어야 할 정보를 표현하는 클래스
<< boundary >> : 시스템과 외부 액터와의 상호작용을 담당하는 클래스
<< control >> : 시스템이 제공하는 기능의 로직 및 제어를 담당하는 클래스
🔷 UML 유형 🔔
◼ 클래스 다이어그램 ( Class Diagram )
(네모)
❐ 구성요소
- 클래스 ( Class )
- 속성 ( Attribute )
- 연산 ( Operation ) , 메서드
- 접근 제어자 ( Access Modifier )
－ : 클래스 내부 접근만 허용 ( private )
＋ : 클래스 외부 접근 허용 ( public )
# : 동일 패키지/파생 클래스에서 접근 가능 ( protected )
~ : 동일 패키지 크랠스에서 접근 가능 ( default )
❐ 클래스 간의 관계( Relationships )
| 관계 | 설명 | 기호 |
|---|---|---|
| 연관 관계 | 클래스가 개념적으로 연결 |  |
| 집합 관계 | 하나의 사물에 다른 사물이 포함 |  |
| 복합 관계 | 영구적, 집합보다 강한 관계 |  |
| 일반화 관계 | 사물이 다른 사물에 비해 일반적 |  |
| 의존 관계 | 하나의 클래스가 다른 클래스 사용 |  |
| 실체화 관계 | 추상 클래스를 상속받아 구현 |  |
◼ 유스케이스 다이어그램 ( Usecase Diagram )
(졸라맨)
❐ 구성요소
- 유스케이스 ( Usecase ) : 시스템이 제공해야하는 서비스 / 기능
- 액터 ( Actor ) : 사용자가 시스템에 수행하는 역할
- 시스템 ( System ) : 전체 시스템의 영역을 표현
- 시나리오 : 방생되는 이벤트의 흐름
- 이벤트의 흐름 : 사람, 시스템, 하드웨어, 시간의 흐름에 의해 시작
❐ 유스케이스 다이어그램의 관계( Relationships )
| 관계 | 설명 |
|---|---|
| 포함( include ) 관계 | 유스케이스 수행 시 반드시 다른 유스케이스 수행 |
| 확장( Extend ) 관계 | 포함관계처럼 여러 유스케이스에 걸쳐 중복적으로 사용되지 않고, 특정 조건에서 한 유스케이스로만 확장하는 관계 |
| 일반화( Generalization ) 관계 | 추상적인 액터와 좀더 구체적인 액터 사이에 맺어주는 관계 |
◼ 시퀀스 다이어그램 ( Sequence Diagram )
(세로선)
❐ 구성요소
- 객체 ( Object ) : 사각형 안에 밑줄 친 이름
- 생명선 ( Lifeline ) : 점선
- 실행 ( Activation ) : 직사각형 ( 함수가 실행되는 시간 )
- 메시지 ( Message ) : 객체 간의 상호작용 수단
◼ 패키지 다이어그램 ( Package Diagram )
(사각형 굴뚝)
❐ 구성요소
- 패키지
- 의존관계
◼ 활동 다이어그램 ( Activity Diagram )
(순서도)
❐ 구성요소
- 시작점 : 검은 원
- 전이 : 화살표
- 액션 / 액티비티 : 둥근 사각형
- 종료점 : 이중 원
- 조건 노드 : 마름모 ( 화살표 방향은 밖으로 )
- 병합노드 : 마름모 ( 화살표 방향은 안으로 )
- 포크 노드 : 들어오는 흐름은 1개 , 나가는 흐름은 여러 개
- 조인 노드 : 들어노는 흐름은 여러 개, 나가는 흐름은 1개
- 구획면 : 사각면 ( 가로 또는 세로 실선으로 구분 )
◼ 상태 다이어그램 ( State Diagram )
(검은 점 & 라운드 사각형)
❐ 구성요소
- 상태 : 둥근 사각형
- 시작 상태 : 속이 채워진 원
- 종료 상태 : 이중 원
- 전이 : 화살표
- 이벤트 : 화살표 위에 이름
- 전이 조건 : 속성값의 불리언 식 / 화살표 위에
[ 전이 조건 ]
◼ 커뮤니케이션 다이어그램 ( Communication Diagram )
(화살표 메시지)
❐ 구성요소
- 액터 : 졸라맨
- 객체 : 사각형 안에
객체명 : 클래스명 - 링크 : 객체 간 실선으로 연결
- 메시지 : 객체 간 상호작용 수단 / 화살표 방향은 메시지를 받는 쪽으로 향하도록 표현
◼ 컴포넌트 다이어그램 ( Component Diagram )
(레고 블록)
❐ 구성요소
- 컴포넌트
- 인터페이스
- 의존관계
🔷 UI 설계 도구
사용자와 시스템 사이에 의사소통할 수 있도록 일시적 또는 영구적인 접근을 목적으로 만들어진 물리적, 가상적 매개체인 UI의 설계를 지원하는 도구
◼ 유형
❐ 화면 설계 도구
- 파워 목업 ( Power Mockup )
- 발사믹 목업 ( Balsamiq Mockups )
- 카카오 오븐 ( Oven )
❐ 프로토타이핑 도구
- UX핀 ( UXPin )
- 액슈어 ( AXURE )
- 네이버 프로토나우 ( ProtoNOW )
❐ UI 디자인 도구
- 스케치 ( Sketch )
- 어도비 익스피리언스 디자인 CC ( Adobe XD )
❐ UI 디자인 산출물로 작업하는 프로토타이핑 도구
- 인비전 ( Invision )
- 픽사에이트 ( Pixate )
- 프레이며 ( Framer )
