UI 설계 및 구현

UI설계

1-1.UI 요구사항 확인

가) UI의 활용

1. UI 흐름 이해

- UI 상세 내역 이전에 큰 흐름 살펴보기

- 목적, 용도, 개발 배경 등의 사항을 확인 및 서로 다른 부서 또는 조직 간 관계와 역할에 대한 명확한 이해

2. UI 상세

- UI는 사용자와 컴퓨터 상호 간의 소통을 원활하게 도와주는 연계 작업(원활한 의사소통이 가능하도록 고안된 물리,가상의 매개체)

- 1990년대 초창기 : 사용자와 컴퓨터의 단순한 상호작용에 국한한 연구

- 업무의 복잡화와 다양화로 인해서(원인) 기존의 단순한 방법으로 인해 발생하는 오류를 줄이기 위한 방법으로의 변화

- 작업 수행 내역 작성 기능 위주  -> 기능 전달을 넘어 내용과 그 안에 포함된 뜻을 전달하는 표현 방법으로의 변화

(1) UI의 세가지 분야

- 정보 제공과 기능 전달을 위한 물리적 제어 분야

- 콘텐츠의 상세적 표현과 전체적 구성에 대한 디자인적 분야

- 사용자의 편의성에 맞게 쉽고 간편하게 사용 가능하게 하는 기능적 분야

(2) UI의 설계 원칙 : 직유학유

-직관성 : 누구나 쉽게 이해하고 사용가능해야

-유효성 : 사용자의 목적을 정확하게 달성해야

-학습성 : 누구나 쉽게 배우고 익힐 수 있어야

-유연성 : 사용자의 요구사항을 최대한 수용하며, 오류를 최소화해야

(3) UI의 설계 지침 : 사일단결 가표접명오

- 사용자 중심 : 사용자가 이해하기 편하고 쉽게 사용할 수 있는 환경 제공, 사용자에 대한 이해 바탕

- 일관성 : 버튼이나 조작 방법을 사용자가 기억하기 쉽고 빠른 습득이 가능하게 설계

- 단순성 : 조작방법은 가장 간단하게 작동이 가능하도록 하여 인지적 부담 감소

- 결과 예측 가능성 : 작동시킬 기능만 보고도 결과 예측이 가능해야

- 가시성 : 주요 기능을 메인 화면에 노출하여 조작이 쉽도록

- 표준화 : 디자인을 표준화하여 기능 구조의 선행 학습 이후 쉽게 사용할 수 있도록

- 접근성 : 사용자의 직무,연령,성별 등의 다양한 계층 수용

- 명확성 : 사용자가 개념적으로 쉽게 인지

- 오류 발생 해결 : 사용자가 오류에 대한 상황을 정확히 인지할 수 있어야

(4) UI가 필요한 이유

- 구현하고자 하는 결과 오류 최소화, 적은 노력으로 결과 구현

- 막연한 작업 기능에 대한 구체적 방법 제시

- 사용자의 편의성을 높여 작업 시간 단축과 업무에 대한 이해도 증진

- 정보 제공자와 공급자의 원활하고 쉬운 매개 역할 수행

나) UI 요구사항 정의

기술의 발전과 기업 환경의 변화로 업무용 소프트웨어 변화 

- 체계적, 구조화된 기능 중심, 획일화된 UI 공급 - 시스템을 주로 이용하는 사용자 요구와 필요 기능 중심 UI 공급

- 실제적이고 효과적인 사용자 요구 기능에 맞는 서비스를 제공하는 형태로 진화

 

1. 품질 요구사항

소프트웨어 아키텍처 품질 특성 도출은 아키텍처 방법론에 정의된 항목 중심으로 작성

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

 

2. 품질 요구사항 특성 : 기신사효유이

(1) 기능성(Functionality) : 실제 수행 결과와 품질 요구사항의 차이를 분석하고, 실제 사용 시 정확하지 않은 결과가 발생할 확률 등과 관련하여 시스템의 동작을 관찰하기 위한 품질 기준 ( 적절성, 정밀성, 상호 운용성, 보안성, 호환성 )

(2) 신뢰성(Reliability) : 시스템이 일정한 시간 또는 작동되는 시간 동안 의도되는 기능을 수행함을 보증( 성숙성, 고장허용성, 회복성 )

(3) 사용성(Usability) : 사용자와 컴퓨터 사이에 발생하는 어떤 행위를 정확하고 쉽게 인지 가능함을 의미( 이해성,학습성,운용성 )

(4) 효율성(Efficiency) : 할당된 시간에 한정된 자원으로 얼마나 빨리 처리하는가를 의미( 시간 효율성, 자원 효율성 )

(5) 유지 보수성(Maintainability) : 요구사항을 개선하고 확장하는 데 있어 얼마나 용이한가를 의미 ( 분석성, 변경성, 안정성, 시험성 )

(6) 이식성(Portability) : 다른 플랫폼(운영 체제)에서도 많은 추가 작업 없이 얼마나 쉽게 적용이 가능한가를 의미 ( 적용성, 설치성, 대체성 )

 

다. UI 요구사항 확인

1. UI 요구사항 확인

크게 시스템이 무엇을 하여야 하는지를 설명하는 기능적 요구사항과 개발 과정에서 지켜야 할 제약조건을 설명하는 비기능적 요구사항

(1) 기능적 요구사항

- 시스템이 제공하는 기능, 서비스에 대한 요구사항

- 시스템의 입출력, 데이터, 연산에 대한 요구사항

(2) 비기능적 요구사항

- 사용성, 효율성, 신뢰성, 유지보수성, 재사용성 등 품질에 대한 요구사항(기신사효유이)

- 플랫폼, 사용 기술 등 시스템 환경에 대한 요구사항

- 비용, 일정 등 프로젝트 계획에 대한 요구사항

 

1-2.UI프로토 타입 제작, 검토

가. UI 설계서 구성에 따른 작성 방법

UI 설계서 구성 : UI 설계서 표지, UI 설계서 개정 이력, UI 요구사항 정의, 시스템 구조, 사이트맵, 프로세스 정의, 화면 설계 등

나. UI 요구사항과 UI 표준 및 지침에 따라, 화면과 폼의 흐름 설계

1. 화면에 표시되는 기능 작성

(1) 기능적 요구사항 검토 

- 구축할 시스템에서 각각의 기능적 요구사항 정리

- 기능적 요구사항의 설명 정리

(2) 비기능적 요구사항 검토

- 구축할 시스템에서 각각 비기능적 요구사항 정리

- 비기능적 요구사항 설명 정리

 

2-1.UI설계

가.UI흐름설계

1. UI 프로토타입 전략 

확정된 요구사항 기반으로 UI전략을 실체화하는 과정, UI 디자인 작성 이전에 미리 화면 설계

아날로그적 방법으로 스케치,그림,글 등 페이퍼 프로토타입 작성 및 컴퓨터 등의 디지털 프로토타입 존재

 

나. 유스케이스 다이어그램

유스케이스 다이어그램 

- 시스템과 사용자의 상호작용을 다이어그램으로 표현, 사용자의 관점에서 시스템의 서비스, 기능, 외부요소를 보여준다.

-  사용자가 시스템 내부에 있는 기능 중에 어떤 기능을 사용 할 수 있는지 나타내며 유스케이스 다이어그램을 사용함으로써 고객과 개발자가 요구사항에 대한 의견을 조율할 수 있다. (사용자와 시스템의 관계)

- 유스케이스 다이어그램은 프로젝트에 대한 요구사항 정의, 세부기능을 분석하여 개발 범위를 정할 때 작성

 

1.구성요소 : 시스템, 액터, 유스케이스, 관계

1-1) 시스템 : 만들고자 하는 프로그램

1-2) 액터 : 시스템의 외부에 있고 시스템과 상호작용 하는 사람이나 시스템(시스템에 정보를 제공하는 시스템)

1-3) 유스케이스 : 사용자 입장에서 바라본 시스템의 기능,  시스템이 액터에게 제공해야 하는 기능(시스템의 요구사항)

1-4) 관계 : 액터와 유스케이스 사이의 의미있는 관계

- 연관관계 : 유스케이스와 액터간의 상호작용 (실선으로 연결)

- 포함관계 :  하나의 유스케이스가 다른 유스케이스의 실행을 전제로 할 때 형성되는 관계

포함되는 유스케이스는 포함하는 유스케이스를 실행하기 위해서 반드시 실행되어야 하는 경우에 적용된다.

포함하는 유스케이스 - - <<include>> - - > 포함되는 유스케이스 방향으로 

- 확장 관계 : 확장 기능 유스케이스와 확장 대상 유스케이스 사이에 형성되는 관계

확장 대상 유스케이스를 수행 시에 특정 조건에 따라 확장 기능 유스케이스를 수행하는 경우 적용

확장 기능 유스케이스 - - <<extend>> - - > 확장 대상 유스케이스

글 등록 수행 시 파일 첨부 기능 선택적 수행

- 일반화, 상속 관계 :

유사한 유스케이스 또는 액터를 모아 추상화한 유스케이스 또는 액터와 연결시켜 그룹을 만들어 이해도를 높이기 위한 관계

2. 작성순서

시스템 만들기 -> 액터 식별 -> 유스케이스 식별 -> 관계 정의

2-1) 액터 식별 : 시스템에 관련이 있는 사용자의 역할과 외부 시스템으로 식별

2-2) 유스케이스 식별 : 액터가 요구하는 서비스, 정보를 유스케이스로 식별 할 수 있고 액터가 시스템과 상호작용하는 행위를 유스케이스로 나타낼 수 있다.

2-3) 관계 정의 : 액터 간, 유스케이스 간의 일반화,연관,포함,확장 관계 정의 

 

 

 

 

 

 

다. UI 상세 설계

UI 설계서 - - > 각 화면별로 필요한 화면 내용 설계

(1) 화면에 표현되어야 할 기능 확인

(2) 화면의 입력요소 확인
(3) 추가적 필요한 화면 요소 확인

(4) 기능 표현을 위해 필요한 페이지 확인

(5) 각 화면 간 이동과 흐름 확인

 

라. UI 검토(Iteration) 수행하고 보완

1. UI 검토를 수행한다.

2. UI 검토를 보완한다.

3. UI 시연을 통해 사용성에 대한 검토 및 검증을 수행한다.

 

2-2.UI 구현

가. 화면 설계서와 사이트 메뉴 구조도를 참조하여 웹 페이지 구현하는 절차 확인

(화면 설계서 ->페이지 구조화 -> 코딩 -> 프로그래밍 ->테스트 ->화면구성 완성)

나. 주어진 웹 페이지 화면 설계 예시 자료를 기준으로 전체적 구조 파악

- 웹 페이지의 레이아웃 확인

- 구성 내용 중심으로 공간 분할 작업 수행

다. 파악된 구조 전체에 대한 전체적 레이아웃 구현 위해 공간 분할방식이나 시맨틱 태그 방식 확인

라. 영역 세분화 결과 예시 자료를 기준으로 페이지 공간 분할하고 구현

 

2-3.UI 테스트

1. 목적 - 사용성 테스트 : UI테스트에 대한 보편적 방법, 사용성 테스트에 대한 계획 수립, 테스트 설계 및 수행과 결과 검토로 진행- 사용자의 제품 만족도 제고, 노력 대비 높은 효율성, 개발 생산 대비 낮은 에러, 쉬운 학습 이해도, 완성도 상승, 사용자 실수 최소화 등의 효과 달성2. 유효성 검사- HTML 문서 작성 후 문법 등의 규칙을 검사검증사이트) http://validator.w3.org/