화면 설계

1. UI 요구사항 확인

 

 

(1) UI(User Interface; 사용자 인터페이스)

- 사용자와 시스템 사이에서 의사소통할 수 있도록 고안된 물리적, 가상의 매개체로 정보 기기나 소프트웨어의 화면

- UX(User eXperience; 사용자 경험): 제품과 시스템, 서비스 등을 사용자가 직/간접적으로 경험하면서 느끼고 생각하는 총체적 경험

- 유형: CLI, GUI, NUI, OUI (CG NO)

- 설계 원칙: 직관성, 유효성, 학습성, 유연성 (직유학유)

- 직관성: 누구나 쉽게 이해하고 사용할 수 있도록 제작

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

- 학습성: 누구나 쉽게 배우고 익힐 수 있도록 제작

- 유연성: 사용자의 요구사항을 최대한 수용하고 오류를 최소화 하도록 제작

- 설계 지침: 사용자 중심, 일관성, 단순성, 결과 예측 가능, 가시성, 표준화, 접근성, 명확성, 오류 발생 해결 (사일단결 가표접명오)

- 요구사항: 기능적 요구사항, 비기능적 요구사항

- 품질 요구사항(ISO/IEC 9126 기반): 기능성, 신뢰성, 사용성, 효율성, 유지보수성, 이식성 (기신사효유이)

 

 

(2) UI 지침(Guideline)

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

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

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

- 3C 분석: 자사(Company), 타사(Competitor), 고객(Customer) 비교 분석 기법

- SWOT 분석: 강점(Strength), 약점(Weakness), 기회(Opportunity), 위협(Threat) 요인 토대로 경영 전략 수립

- 시나리오 플래닝: 불확실성이 높은 상황 변화를 사전에 예측하고 다양한 시나리오를 설계하는 방법으로 불확실성 제거해나가는 경영 전략

- 사용성 테스트: 사용자가 직접 제품을 사용하면서 미리 작성된 시나리오에 맞추어 과제를 수행하고 질문에 답하도록 하는 테스트
- 사용자 요구사항 정의: 요구사항 매트릭스, 정황 시나리오

 

 

(3) 스토리보드(Storyboard)

- 정책, 프로세스, 콘텐츠 구성, 와이어 프레임(UI, UX), 기능 정의, 데이터베이스 연동 등 서비스 구축을 위한 대부분 정보가 수록된 산출 문서

- UI 화면 설계 구분: 와이어프레임, 스토리보드, 프로토타입 (와스프)

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

 

 

2. UI 설계

 

 

(1) UML(Unified Modeling Language)

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

- 특징: 가시화, 구축, 명세화, 문서화 언어 (가구명문)

- 구성요소: 사물, 관계, 다이어그램 (사관다)

- 구조적(정적) 다이어그램: 클래스, 객체, 컴포넌트, 배치, 복합체 구조, 패키지 (클객 컴배 복패)

- 행위적(동적) 다이어그램: 유스케이스, 시퀀스,  커뮤니케이션, 상태, 활동, 타이밍 (유시커 상활타)

- UML 스테레오 타입(길러멧): <<include>>, <<extend>>, <<interface>>, <<entity>>, <<boundary>>, <<control>>

 

 

(2) UML 유형

- 클래스 다이어그램: 클래스, 속성, 연산, 접근 제어자

- 접근 제어자(접근 제한자): private(-), default(~), protected(#), public(+)

- 클래스 간 관계: 연관, 의존, 일반화, 실체화, 포함(복합), 집합 관계

- 유스케이스 다이어그램: 유스케이스, 액터, 시스템, 시나리오, 이벤트의 흐름

- 유스케이스 다이어그램 관계: 포함, 확장, 일반화 관계

- 시퀀스 다이어그램: 객체, 생명선, 활성화, 메시지

- 패키지 다이어그램: 패키지, 의존 관계(<<import>>,  <<access>>)

- 활동 다이어그램: 시작점, 전이, 액션/액티비티, 종료점, 조건(판단) 노드, 병합 노드, 포크 노드, 조인 노드, 구획면

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

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

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

 

 

(3) UI 설계 도구

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

- 화면 설계 도구: 파워 목업, 발사믹 목업, 카카오 오븐(프로토타이핑 도구)

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

- UI 디자인 도구: 스케치, 어도비 익스프리언스 디자인 CC

- UI 디자인 산출물로 작업하는 프로토타이핑 도구: 인비전, 픽사에이트, 프레이머