2장 화면 설계

1. UI 요구사항 확인

UI(User Interface)

사용자와 시스템 사이에서 의사소통할 수 있도록 고안된 물리적, 가상의 매개체
ex. 디스플레이 화면, 아이콘, 검색창, 키보드, 문자, 색상, 폰트 등
UX(User Experience)는 UI를 초함하고 있다

UX : 사용자가 컴퓨터, 웹사이트, 시스템 등 정보기기의 UI를 직/간접적으로 이용해 경험한 모든 것

CLI(Command Line Interface)
명령어를 텍스트로 입력하여 조작하는 사용자 인터페이스
(git bash, powershell 등)
GUI(Graphical User Interface)
그래픽 환경을 기반으로 한 마우스나 전자펜을 이용하는 사용자 인터페이스 (sourcetree)
NUI(Natural User Interface)
신체 부위를 이용하는 사용자 인터페이스(터치, 음성 포함) 특별한 하드웨어 없이 인간의 자연스러운 움직임을 인식하여 정보를 제공
OUI(Organic User Interface)
현실에 존재하는 모든 사물이 입출력장치로 변화할 수 있는 사용자 인터페이스(…?)

UI 설계 원칙

직관성
Intuitiveness
누구나 쉽게 이해하고, 쉽게 사용할 수 있어야 한다
-> UI를 보자마자 어떻게 사용하는 것인지 파악이 가능해야 함(로그인 버튼, 햄버거 메뉴 등)
유효성
Efficiency
사용자의 목적을 정확하게 달성해야 한다
-> 아무리 이해하기 쉽게 설계된 UI라도, 사용자가 이용하고자 하는 목적과 동떨어지면 잘 만든 UI가 아니다
(송금 버튼 대신 대표 캐릭터가 대문짝만하게 들어가 있는 은행 앱)
학습성
Learnability
누구나 쉽게 배우고 익힐 수 있어야 한다
-> 하나의 목적을 달성하기 위해 지나치게 많은 절차가 필요하거나, 번거로워서는 안된다
유연성
Flexibility
사용자의 요구사항을 최대한 수용하며, 오류를 최소화해야 한다
-> 결과적으로 유효성과 함께 한다. 잘 만든 UI라도 제대로 동작하지 않으면 목적 달성이 불가능하다

직유학유

UI 설계 지침

사용자 중심
일관성
단순성
결과 예측 가능
가시성
표준화
컴포넌트 재사용의 느낌…? 버튼 디자인이 뒤죽박죽이면 뭐가 버튼이고 뭐가 태그인지 분간이 어려우니까
접근성
명확성
오류 발생 해결

요구사항 구분

기능적 요구사항
시스템이 무엇을 해야하는지 설명
입력, 출력, 데이터, 연산에 관한 요구사항
비기능적 요구사항
개발과정에서 지켜져야 할 제약 조건
품질, 시스템 환경, 프로젝트 계획 등

UI 품질 요구사항

기능성
신뢰성
사용성
효율성
유지보수성
이식성

UI 지침

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

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

UI 개발을 위한 주요기법

3C 분석
고객, 경쟁사, 자사를 비교 및 분석 -> 자사를 어떻게 차별화하여 경쟁에 이길 것인지 분석
SWOT 분석
강점/약점/기회/위협
시나리오 플래닝
다양한 시나리오를 설계함으로써 불확실성 제거
사용성 테스트
시나리오에 맞춰 사용자가 제품을 사용하고, 질문에 답함
워크숍
적은 인원이 의견을 교환하고 검토하는 세미나

사용자 요구사항 도출

페르소나 정의
콘셉트 모델 정의
사용자 요구사항 정의

요구사항 매트릭스 : 다양한 경로를 통해 수집된 요구사항 검토, 페르소나의 목적을 기준으로 만든 요구사항 표
정황 시나리오 : 요구사항 정의에 사용되는 초기 시나리오, 이상적인 시스템 동작에 초점
UI 컨셉션

스토리보드

개발 후 완성된 콘텐츠의 최종 결과를 예상할 수 있는 기초 문서

와이어프레임 : 대충 레이아웃 그린 것
스토리보드 : 실제 서비스와 흡사한 모형

2. UI 설계

UML(Unified Modeling Language)

객체 지향 소프트웨어 개발 과정에서 산출물을 명세화, 시각화, 문서화할 때 사용되는 모델링 기술과 방법론을 통합해서 만든 표준화된 범용 모델링 언어
-> 프로그램 설계를 표현하기 위해 사용하는 기호와 도식을 사용한 표기법

가시화
결과물이 있으므로 오류가 적고 의사소통이 쉽다
시각적인 그래픽 형태로 작성
구축
다양한 프로그래밍 언어로 결과물 구축이 가능
명세화
정확하고 완전한 모델 작성 가능
문서화
평가 및 의사소통 수단으로 사용가능한 문서
일련의 과정을 문서로 남겨 계속 유지보수한다

구성요소로 사물, 관계, 다이어그램이 있다.

사물
관계
- 일반화 관계(Generalization)
  한 클래스가 다른 클래스를 포함하는 상위 개념
- 연관관계(Association)
  2개 이상의 사물이 서로 관련됨
  한 클래스가 다른 클래스에서 제공하는 기능을 사용
- 의존관계(Dependency)
  한 클래스가 다른 클래스에서 제공하는 기능을 사용(관계가 매우 짧은 시간만 유지)
- 실체화 관계(Realization)
  인터페이스를 구현 받아 추상 메서드를 오버라이딩
- 집합 관계 - 집약관계(Aggregation)
  한 객체가 다른 객체를 소유(has a)
- 집합 관계 - 합성관계(Composition)
  부분 객체가 전체 객체에 속하는 관계로 긴밀한 필수적 관계

UML 다이어그램

구조적 다이어그램/정적 다이어그램

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

행위적 다이어그램/동적 다이어그램

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

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

include
하나의 유스케이스가 어떤 시점에 반드시 다른 유스케이스를 포함
extend
하나의 유스케이스가 어떤 시점에 다른 유스케이스를 실행할 수도, 그렇지 않을 수도 있음
interface
추상 메서드와 상수만으로 구성된 클래스
entity
일반적으로 정보 또는 오래 지속되는 연관된 행위를 형상화
boundary
시스템과 외부 액터와의 상호작용 담당
control
시스템이 제공하는 기능의 로직 및 제어를 담당

UML 유형

클래스 다이어그램
자기만의 속성과 일정한 행동으로 구성
여러 개의 클래스들은 서로 연관이나 상속, 의존 관계 등으로 서로 간의 상호작용을 표현

접근 제한자
- : private
# : protected
+ : public
유스케이스 다이어그램
시스템과 사용자의 상호작용을 다이어그램으로 표현
구성요소
- 시스템 : 만들고자 하는 프로그램 명칭
- 액터 : 시스템과 상호작용을 하는 사람, 시스템
- 유스케이스 : 사용자 입장에서 바라본 시스템의 기능
- 관계 : 액터와 유스케이스 간의 의미 있는 관계
관계
- 연관관계 : 상호작용
- 포함관계 : 유스케이스 수행 시 반드시 실행
- 확장관계 : 유스케이스 수행 시 특정 조건에 따라 확장 기능 유스케이스 수행
- 일반화관계 : 유사한 유스케이스 또는 액터를 모아 추상화
시퀀스 다이어그램
객체 간의 상호작용 메시지 시퀀스를 시간의 흐름에 따라 나타내는 다이어그램
구성요소
- 객체
- 생명선
- 실행
- 메시지
패키지 다이어그램
시스템의 서로 다른 패키지들 사이의 의존 관계를 표현
구성요소
- 패키지 : 요소들을 그룸으로 조직
- 의존관계 : 하나의 패키지가 다른 패키지를 사용하는 관계
활동 다이어그램
시스템이 어떤 기능을 수행하는지를 처리의 흐름 순서대로 표현
상태 다이어그램
한 객체의 상태 변화를 나타냄
커뮤니케이션 다이어그램
동작에 참여하는 객체 간 메시지뿐 아니라 연관까지 표현
컴포넌트 다이어그램
시스템을 구성하는 물리적인 컴포넌트와 그들 사이의 의존 관계를 나타냄

정보처리기사 2장 화면설계