2.1 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 사용

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