UI(User Interface)
1) 정의
[사시의매]
사용자와 시스템 사이에서 의사소통할 수 있도록 고안된 물리적, 가상의 매개체
2) 유형
[CG NO]
CLI, GUI, NUI, OUI
3) 설계 원칙
[직유학유]
직관성 : [누이사] 누구나 쉽게 이해하고 사용할 수 있어야 함
유효성 : [정완목] 정확하고 완벽하게 사용자의 목표가 달성될 수 있어야 함
학습성 : [누배사] 누구나 쉽게 배우고 사용할 수 있어야 함
유연성 : [요용방] 사용자의 요구사항을 최대한 수용하고, 실수를 방지할 수 있어야 함
4) 설계 지침(설계 원칙과 혼동 주의!!!!)
[사일단예/가접명오]
사용자 중심, 일관성, 단순성, 결과 예측 가능, 가시성, 접근성, 명확성, 오류 발생 해결
5) 요구사항
[사정최기]
사용자가 정보시스템을 구축하여 얻고자 하는 최종 목적의 기준
6) 품질 요구사항
[기신사/효유이]
기능성 : 적절성(필요 적절한 기능을 제공), 정밀성(요구되는 정확도로 올바른 결과를 산출), 상호 운용성(상호작용하여 운영), 보안성(비인가 접근을 차단), 호환성(비슷한 황경에서 연관된 표준, 관례, 규정을 준수)
신뢰성 : 성숙성(결함으로 인한 고장을 회피), 고장 허용성(오류 시에도 특정 수준 이상의 성능 유지), 회복성(다시 확보)
사용성 : 이해성(논리적 개념과 적용 가능성을 구분하는데 필요한 사용자의 노력 정도), 학습성(학습에 필요한 사용자의 노력 정도), 운용성(운용과 운용 통제에 필요한 사용자의 노력 정도)
효율성 : 시간 효율성(기능 수행하는데 있어서 반응 시간 등), 자원 효율성(기능 수행하는데 있어 사용되는 자원 양 등)
유지보수성 : 분석성(소프트웨어 고장 원인이나 결함 진단에 필요한 노력), 변경성(결함 제거에 필요한 노력), 안정성(소프트웨어 변경으로 발생하는 예상치 못한 영향에 의한 위험 요소), 시험성(소프트웨어 변경되어 검증에 필요한 노력)
이식성 : 적용성(고려된 소프트웨어의 목적을 위해 제공된 수단이나 다른 조치 없이 특정 환경으로 전환되는 능력에 따른 소프트웨어 특성), 설치성(특정 환경에 소프트웨어 설치하는 데 필요한 노력 정도), 대체성(특정 환경에서 동일한 목적 달성을 위해 다른 소프트웨어를 대신 사용할 수 있는 능력)
7) 표준
[디전공화규]
디자인 철학과 원칙 기반하에 전체 시스템에 공통으로 적용되는 화면 간 이동, 화면 구성 등에 관한 규약
8) 표준 구성
[액정/스패조]
전체적인 UX 원칙, 정책 및 철학, UI 스타일 가이드, UI 패턴 모델 정의, UI 표준 수립을 위한 조직 구성
* UX(User Experience) : 제품, 시스템, 서비스 등을 사용자가 직·간접적으로 경험하면서 느끼고 생각하는 총체적 경험
9) 패턴 모델 정의
CRUD 방식을 기반으로 데이터 입력, 출력 패턴 모델 정의
10) 지침(Guideline)
[표사인세]
UI 표준에 따라 사용자 인터페이스 설계·개발 시 지켜야할 세부사항을 규정하는 가이드라인
10-1) 지침에 따른 사용자 요구사항 도출 순서
페르소나 정의 -> 콘셉트 모델 정의 -> 사용자 요구사항 정의 -> UI 컨셉션
11) 개발을 위한 주요기법
[3S시사워]
3C 분석(고객, 자사, 경쟁사 분석), SWOT 분석, 시나리오 플래닝(불확실성이 높은 상황 변화를 사전에 예측하여 다양한 시나리오 설계), 사용성 테스트(사용자가 직접 제품을 사용하면서 미리 작성된 시나리오에 맞춰 과제를 수행한 후 질문에 답하는 방식), 워크숍
12) 화면 설계 구분
[와스프]
와이어 프레임 : [이화서레] 이해관계자들과 화면구성을 협의하거나 서비스의 간략한 흐름을 공유하기 위해 화면 단위의 레이아웃을 설계하는 작업
스토리보드 : [설정구정] UI 화면 설계를 위하여 정책이나 프로세스 및 콘텐츠 구성 등 구축하는 서비스를 위한 대부분 정보가 수록된 문서
프로토타입 : 정적인 화면으로 설계된 와이어 프레임 또는 스토리보드에 동적 효과를 적용하여 실제 구현된 것처럼 시뮬레이션할 수 있는 모형
13) 프로토타입
[컴요전간]
컴퓨터 시스템이나 소프트웨어의 설계, 성능, 구현 가능성, 운용 가능성을 평가하거나 요구사항을 더 잘 이해하고 결정하기 위하여 전체적인 기능을 간략한 형태로 구현한 시제품
UI 설계를 위한 UML(Unified Modeling Language)
1) 정의
[객산명모표]
객체지향 소프트웨어 개발 과정에서 산출물을 명세화, 시각화, 문서화할 때 사용되는 모델링 기술과 방법론을 통합해서 만든 표준화된 범용 모델링 언어
2) 특징
[가구명문]
가시화 언어 : 개념 모델 작성 시 오류가 적고 의사소통이 용이
구축 언어 : 다양한 프로그래밍 언어로 실행 시스템의 예측 가능
명세화 언어 : 정확한 모델 제시, 완전한 모델 작성 가능
문서화 언어 : 시스템에 대한 평가 및 의사소통의 문서
3) 구성요소
[사관다]
사물(주제를 나타내는 요소), 관계(사물과 사물을 연결하여 관계를 표현하는 요소), 다이어그램(사물과 관계를 모아 그림으로 표현한 형태)
4) 다이어그램
[클객/컴배/복패] [유시커/상활타]
구조적(정적) 다이어그램 : 클래스, 객체, 컴포넌트, 배치, 복합체 구조, 패키지
행위적(동적) 다이어그램 : 유스케이스, 시퀀스, 커뮤니케이션, 상태, 활동, 타이밍
5) 확장 모델의 스테레오 타입(Stereotype)
UML의 기본적 요소 이외의 새로운 요소를 만들어내기 위한 확장 메커니즘, '<<>>'(길러멧)기호를 사용하여 표현
6) 클래스 다이어그램
객체지향 모델링 시 클래스의 속성 및 연산과 클래스 간 정적인 관계를 표현한 다이어그램
구성요소 : 클래스, 속성, 연산(메소드), 접근 제어자
6-1) 클래스 간 관계
[연집복/일의실]
연관 관계 : 객체들이 서로 개념적으로 연결됨을 의미, 실선으로 연결
집합 관계 : 하나의 사물이 다른 사물에 포함되어 있는 관계, 속이 빈 마름모로 연결
복합 관계 : 집합 관계의 특수한 형태, 포함하는 사물의 변화가 포함되는 사물에게 영향을 미치는 관계, 속이 채워진 마름모로 연결
일반화 관계 : 하나의 사물이 다른 사물에 비해 더 일반적인지 구체적인지 표현, 속이 빈 화살표로 연결
의존 관계 : 사물 사이 연관은 있으나 필요에 따라 서로에게 영향 주는 짧은 시간동안만 연관을 유지, 점선 화살표 연결
실체화 관계 : 추상 클래스나 인터페이스를 상속받아 자식 클래스가 추상 메소드를 구현할 때 사용(?)
7) 컴포넌트 다이어그램
시스템을 구성하는 물리적인 컴포넌트와 그들 사이의 의존 관계를 나타내는 다이어그램, 실질적 프로그래밍 작업에 사용
구성요소 : 컴포넌트, 인터페이스, 의존 관계(점선 화살표)
8) 패키지 다이어그램
시스템의 서로 다른 패키지들 사이의 의존 관계를 표현하기 위한 다이어그램
구성요소 : 패키지(폴더 모양), 의존 관계(점선 화살표)
9) 유스케이스 다이어그램
시스템이 제공하는 기능 및 그와 관련된 외부 요소를 사용자 관점에서 표현하는 다이어그램
구성요소 : 유스케이스(시스템이 제공해야 하는 서비스, 기능), 액터(사용자가 시스템에 대해 수행하는 역할, 시스템과 상호작용하는 사람 또는 사물), 시스템(전체 시스템 영역을 표현), 시나리오, 이벤트의 흐름
9-1) 관계
[포확일]
포함 관계 : 유스케이스를 수행할 때 다른 유스케이스가 반드시 수행되는 관계, <<include>>로 표현
확장 관계 : 특정 조건이 만족되는 상황에서만 확장 유스케이스의 이벤트 흐름이 수행, <<extend>>로 표현
일반화 관계 : 추상적인 액터와 좀 더 구체적인 액터 사이에 맺어주는 관계, 속이 빈 화살표로 연결
10) 시퀀스 다이어그램
객체 간 상호작용을 메시지 흐름으로 표현한 다이어그램
구성요소 : 객체(사각형 안에 밑줄 친 이름으로 명시), 생명선(객체로부터 뻗어 나가는 점선), 실행(직사각형), 메시지
11) 커뮤니케이션 다이어그램 (시퀀스와 혼동 주의)
동작에 참여하는 객체들이 주고받는 메시지를 표현하고, 객체 간의 연관까지 표현하는 다이어그램
구성요소 : 액터, 객체, 링크(객체들 간의 관계를 표현), 메시지
12) 상태 다이어그램 (상태 변화를 표현)
하나의 객체가 자신이 속한 클래스의 상태 변화 또는 다른 객체와의 상호작용에 따라 상태가 어떻게 변화하는지 표현하는 다이어그램
구성요소 : 상태(둥근 사각형), 시작 상태(속이 채워진 원), 종료 상태(원 안에 속이 채워진 원), 전이(화살표), 이벤트, 전이 조건
13) 활동 다이어그램 (흐름을 순서대로 표현)
시스템이 어떤 기능을 수행하는지를 객체의 처리 로직이나 조건에 따른 처리 흐름을 순서대로 표현하는 다이어그램
구성요소 : 시작점, 전이, 액션, 종료점, 조건 노드, 병합 노드, 포크 노드, 조인 노드, 구획면
UI 흐름 설계
1) 정의
[업화흐]
업무 수행과 관련된 화면의 위치와 흐름을 흐름도 형식으로 표현하는 활동
2) 수행 절차
UI 설계안의 적정성 확인 -> 화면에 표현되어야 할 기능 및 비기능적 요구사항 검토 -> 화면의 입력 요소 및 유스케이스를 통한 UI 요구사항 확인 -> UI 유스케이스 설계 -> 기능 및 양식 확인
2-1) 기능 및 양식 확인
Input Box(입력 가능) 확인·규칙 정의, Combo Box(선택 기능으로 스크롤을 통해 선택 가능) 확인·규칙 정의, Radio Box(많은 메뉴들 중 하나만 선택하도록 강제) 확인·규칙 정의, Check Box(많은 메뉴들 중 한 개 또는 여러 개 체크 가능) 확인·규칙 정의
UI 상세 설계
1) 수행 절차
UI 요구사항 최종 확인, UI 구조 설계, 사용자 기반 메뉴 구조 설계, 화면 설계, 하위 시스템 단위의 내외부 상세 화면과 폼 설계
2) UI 시나리오 문서 작성요건
[완일이가/추수]
완전성 : UI 시나리오는 누락이 없어야 하고, 최대한 빠짐없이 가능한 한 상세하게 기술
일관성 : 서비스에 대한 목표, 시스템 및 사용자 요구사항이 일관성 있어야 함
이해성 : 처음 접하는 사람도 이해하기 쉽도록 구성하고 설명
가독성 : 문서를 쉽게 읽을 수 있어야 하고 표준화된 템플릿을 작성하여 적용
추적 용이성 : 쉽게 추적이 가능해야 하고, 변경 사항은 언제 어디서 어떤 부분이 왜 발생하였는지 추적 쉬워야 함
수정 용이성 : 쉽게 변경할 수 있어야 하고, 수정 사항을 쉽게 적용할 수 있어야 함
UI 설계 도구
1) 정의
[사시의매지]
사용자와 시스템 사이에서 의사소통할 수 있도록 고안된 물리적, 가상의 매개체인 UI의 설계를 지원하는 도구
2) 화면 설계 도구
파워 목업 : 파워포인트에 추가 메뉴를 설치해 목업 기능을 사용할 수 있도록 지원하는 도구
발사믹 목업 : 스케치한 느낌으로 빠르고 심플하게 서비스 콘셉트를 전달할 수 있는 목업 도구
카카오 오븐 : 카카오에서 제작한 온라인 프로토타이핑 도구, 직관적인 인터페이스가 장점
3) 프로토타이핑 도구
UX핀(UXPin) : 웹 브라우저를 통해 와이어 프레임과 프로토타이핑 작업을 동시에 할 수 있는 도구
액슈어(AXURE) : UI 설계보다 스토리보드에 포함되는 정책, 플로 차트, 디스크랩션까지 모두 작성 가능한 도구
네이버 프로토나우(ProtoNOW) : 네이버에서 제작한 프로토타이핑 도구, 스토리보드, 플로 차트 등의 기능 지원
4) UI 디자인 도구
스케치(Sketch) : 다양한 목업 및 템플릿을 활용한 레이아웃 중심의 UI 디자인 설계 도구
Adobe XD : UI 디자인에 최적화된 도구, 쉽고 직관적인 인터페이스를 제공, 포토샵 및 일러스트와 연동 지원
5) UI 디자인 산출물로 작업하는 프로토타이핑 도구
인비전(Invision) : 포토샵, 스케치 등으로 디자이너가 작업한 결과를 사이트에 업로드한 다음, UI를 연결해 간단한 인터랙션 적용이 가능한 도구
픽사에이트(Pixate) : 구글이 인수한 프로토타이핑 도구, 현재 아마존, 애플, 페이스북, 구글 등이 사용, 모바일 앱 프로토타이핑에 최적화, 디테일한 인터랙션 설정 가능
프레이머(Framer) : 커피 스크립트라고 하는 개발 언어를 사용하는 코드 기반 프로토타이핑 도구, 실제 작업물과 흡사하게 작동
