[정보처리기사] UI 요구사항 확인 (2)

[2] UI 표준

1. UI 표준 개념

- UI 표준은 디자인 철학과 원칙 기반하에 전체 시스템에 공통으로 적용되는 화면 간 이동, 화면구성 등에 관한 규약이다.

2. UI 표준 구성

UI 표준 구성	설명
전체적인 UX 원칙	- 사용자의 관점에서 사용자 업무를 효율적으로 수행할 수 있는 UX 원칙 정의
정책 및 철학	- 조직의 목표나 정체성을 포함하는 정책 및 철학 설정
UI 스타일 가이드	- UI에 대한 구동 환경 및 레이아웃 등을 정의
UI 패턴 모델 정의	- CRUD 방식을 기반으로 데이터 입력, 출력 패턴 모델 정의
UI 표준 수립을 위한 조직 구성	- UI 팀 및 표준 개발 팀을 주축으로 추진 조직 구성

*CRUD 방식이란?

- 대부분의 컴퓨터 소프트웨어가 가지는 기본적인 데이터 처리 기능인 Create(생성), Read(읽기), Update(갱신), Delete(삭제)를 묶어서 일컫는 말이다.

 

3. UI 표준 수립 시 고려사항

• 사용자가 불편해하지 않아야 한다
• 많은 업무 케이스를 포함해야 한다
• 다양한 사용상황에 대처할 수 있어야 한다.
• 표준 적요잉 쉽도록 충분한 가이드와 활용 수단 제공이 필요하다
• 변화하는 상황에 맞게 빠르게 변경할 수 있는 관리조직 수반이 필요하다

4. UI 스타일 

1. UI 구동 환경의 정의
2. 레이아웃 정의
3. 메뉴 네비게이션 정의
4. 기능 정의

5. UI 패턴 모델 정의

• CRUD 방식을 기반으로 하여 데이터의 입력과 출력을 처리하는 화면 흐름을 포함하여 오퍼레이션 방식에 대한 표준 절차를 표시하고, UI 패턴 모델을 개발
• 표준 프레임워크로 개발하고, 유스케이스를 이용하여 패턴별 표준 개발 방법 촐 7가지 영역을 정의
  1. 업무 화면 클라이언트 정의
  2. 서버 컨트롤러 정의
  3. 서버 메시지 및 예외처리 정의
  4. 클라이언트-서버 간 데이터 변환 정의
  5. 기업 포털 연계 정의
  6. 보고서 정의
  7. 외부 컴포넌트 연계 정의

6. UI 표준 수립을 위한 조직의 구성

구성	설명
조직 구성 및 역할 정의	- 효과적인 프로젝트 추진을 위하여 UI 팀 및 표준 개발 팀을 주축으로 한 추진 조직 구성을 확정
커뮤니케이션 방안 수립	- UI 개발이 원활히 수행되도록 정식 보고 및 정기적인 회의 뿐 아니라 이슈 회의 등 다양한 방식의 커뮤니케이션 방안을 마련

[3] UI 지침

1. UI 지침 (Guideline) 개념

- UI 지침은 UI 표준에 따라 사용자 인터페이스 설계, 개발 시 지켜야할 세부 사항이다.

2. UI 표준 적용을 위한 환경 분석

구분	설명
사용자 트렌드 분석	- 현재 UI의 단점 파악 및 트렌드 숙지 - 사용자가 필요로 하는 핵심 요구사항 파악 - 사용자가 쉽게 이해 가능한 기능을 위주로 기술 영역 정의
기능 및 설계 분석	기능 조작성 분석	- 사용자 편의성 확대를 위한 조작 기능 확인 - 스크롤 바 지원 가능 여부 확인 - 마우스 조작 및 업무 처리 시 동선 확인
	오류 방지 분석	- 사용자 조작 시 오류에 대해 예상 가능한지 확인 - 사용자 의도와 관계없는 페이지 이동이 있는지 확인 - 기능 버튼은 사용자가 명확한 구분이 가능한지 확인
	최소한의 조작으로 업무 처리 가능여부 확인	- 작업 흐름에 가장 적합한 레이아웃 확인 - 기능 특성에 맞는 UI 확인 - 조작 단계를 최소화하고 동선은 단순한지 확인
	UI의 정보 전달력 확인	- 중요 정보에 대해 사용자가 인지하기 쉽도록 전달 가능한지 확인 - 정보 제공 방식이 일관적이며 사용자가 쉽게 이해 가능한지 확인 - 사용자 정보 제공이 간결하고 명확한지 확인

3. UI 개발 목표 및 범위

1) UI 개발 목표 및 범위 정의

• UI 개발 목표 및 범위 정의를 필수적으로 수행하여 프로젝트 계획 전반에 반영한다
• 성공적인 수행을 위해 내부 관계자에게 UI 개발 필요성 및 목표를 공유하고 개발 범위 수립하기 위한 활동을 한다.

2) UI 개발을 위한 주요 기법

기법	설명
3C 분석	- 고객(Customer), 경쟁하고 있는 자사(Company)와 경쟁사(Competitor)를 비교하고 분석하여 자사를 어떻게 차별화해서 경쟁에서 이길 것인가를 분석
SWOT 분석	- 기업의 내부 환경과 외부 환경을 분석하여 Strength(강점), Weakness(약점), Opportunity(기회), Threat(위협) 요인을 규정하고 이를 토대로 경영 전략을 수립하는 방법
시나리오 플래닝	- 불확실성이 높은 상황 변화를 사전에 예측하고 다양한 시나리오를 설계하는 방법으로 불확실성을 제거해나가려는 경영 전략의 한 방법
사용성 테스트	- 사용자가 직접 제품을 사용하면서 미리 작성된 시나리오에 맞추어 과제를 수행한 후, 질문에 답하도록 하는 테스트
워크숍	- 소집단 정도의 인원으로 특정 문제나 과제에 대한 새로운 지식, 기술, 아이디어, 방법들을 서로 교환하고 검토하는 연구회 및 세미나

4. 사용자 분석 및 니즈 조사

세부 수행 활동	목표	활동
리서치 대상 선정 및 내용 설계	- 고품질의 리서치 결과를 얻기 위해 적절한 대상자 선정 및 리서치 설계가 필요 - 대상 선정 및 계획 수립	- 사용자 부류 기준 정의 및 분류 - 사용자 그룹별 매력도 평가 - 리서치 대상 피로파일 선정 및 대상 선정 - 이슈별 내용 상세 설계 - 리서치 방식 정의, 리서치 팀 구성, 스케줄링
리서치 진행	- 사용자의 불편사항과 니즈를 파악하기 위한 단계 - 해당 제품/서비스에 대한 다양한 의견을 수집	- 설문 조사/ 개인/ 그룹 리서치 진행 - 리서치 내용 점검 및 보완
리서치 결과 정리	- 결과 분석을 토대로 핵심 이슈 도출을 통해 UI 개발 목표 설정 - 전략과 디자인 개발의 토대	- 리서치 결과 분석서 작성

5. 사용자 요구사항 도출

세부 수행 활동	개요	세부 수행 활동
페르소나 정의	- 잠재적 사용자의 다양한 목적과 관찰된 행동 패턴을 응집시켜 놓은 가상의 사용자	- 페르소나 분류 및 정의 - 페르소나 작성 - 페르소나 활용
콘셉트 모델 정의	- 여러 가지 추상적인 콘셉트들 사이의 관계를 보여주는 다이어그램 - 다양한 아이디어들을 간편하게 시각화하여 표현할 수 있는 유용한 방법으로 아이디어를 잘 전달하고 생각의 과정을 효율적으로 이끌어 줌	- 콘셉트 모델 정의 - 브레인스토밍 활용
사용자 요구사항 정의	- 리서치 및 페르소나 결과물을 토대로 요구사항을 도출하고 우선순위 정함	- 요구사항 매트릭스 작성 - 정황 시나리오 제작 - 정황 시나리오로부터 요구항 도출
UI 컨셉션	- 정리된 요구사항을 구체화하는 단계로 화면 디자인 단계 전에 대표 화면 설계를 진행하는 단계	- 정보 구조 설계 - 대표 화면 와이어 프레임 스케치 - 페이퍼 프로토타입을 통한 스토리보드 설계

6. UI 상세 설계

- UI 설계 시안을 토대로 실제 설계 및 구현을 위해서 모든 화면에 대한 UI 상세 설계 단계를 진행

- UI 시나리오 문서는 사용자 인터페이스의 기능구조, 대표화면, 화면 간 인터랙션 흐름, 다양한 상황에서의 예외 처리방식 등을 문서로 정리한 것으로 효울적인 UI 관리와 여러 이해관계자 간의 원활한 의사소통을 할 수 있게 해준다.

- UI 시나리오 문서의 작성 요건

• 완전성
• 일관성
• 이해성
• 가독성
• 추적 용이성
• 수정 용이성

7. UI 화면 디자인

- UI 화면 디자인에 활용될 레이아웃, 컬러 패턴, 타이포 그래픽, 화면 디자인 요소 등을 정의

 

- 템플릿 제작을 통해 페이지 전체적으로 통일감 있게 구성하고, 화면 디자인에 반복적으로 사용될 요소를 미리 디자인하여 활용함으로써, 팀 작업시 많은 페이지를 디자인하는 환경에서 일관성을 유지한다.

 

- UI 가이드 문서를 작성한다

8. UI 시연을 통한 사용성 검토/검증

- 스크린별 레이아웃과 대부분의 인터랙션이 적용된 고수준의 프로토타입을 이용하여 내부 개발자, 전문가 평가 등을 통해 지속적인 UI 사용에 대한 평가와 UI 디자인 평가를 진행하여 개선사항을 반영한다

9. 테스트, 배포 및 관리

• 테스트 계획 수립 단계를 거쳐서 실제 사용성 테스트를 수행
• 사용성 테스트 결과를 분석하여 객관적이고 정량화된 값을 도출, 개선한다
• 사용자 중심 소프트웨어 매뉴얼을 작성한다
• 사용자 피드백을 지속적으로 수집하고 유형화하여 체계적으로 관리한다.

[4] 스토리보드

1. 스토리보드 개념

• 스토리보드는 UI 화면 설계를 위해서 정핵이나 프로세스 및 콘텐츠의 구성, 와이어 프레임 (UI,UX), 기능에 대한 정의, 데이터베이스의 연동 등 구축하는 서비스를 위한 대부분 정보가 수로된 문서
• 디자이너와 개발자가 최종적으로 참고하는 산출 문서
• UI 화면 설계를 위해서는 스토리보드, 와이어 프레임, 프로토 타입이 활용됨.

구분	설명	도구
와이어 프레임	-이해관계자들과의 화면구성을 협의하거나 서비스의 간략한 흐름을 공유하기 위해 화면 단위의 레이아웃을 설계하는 작업	- 파워포인트 - 키노트 - 스케치 - 일러스트
스토리보드	- 정책, 프로세스, 콘텐츠 구성, 와이어 프레임, 기능 정의, 데이터베이스 연동 등 서비스 구축을 위한 모든 정보가 담겨 있는 설계 산출물	- 파워포인트 - 키노트 - 스케치
프로토타입	- 정적인 화면으로 설계된 와이어 프레임 또는 스토리보드에 동적 효과를 적용함으로써 실제 구현된 것처럼 시뮬레이션할 수 있는 모형	- HTML/ CSS

2. 스토리보드 작성 절차

1. 전체 개요 작성
2. 서비스 흐름 작성
3. 스타일 확정
4. 메뉴별 화면 설계도 작성 및 상세설명
5. 추가 관련 정보 작성

3. 스토리보드 작성 시 유의사항

유의사항	설명
일관된 기호의 표시	- 내용을 작성하는 방법이나 기호, 번호 등에 일관된 방식을 사용하여 내용에 대한 명확한 전달 필요
공통 영역의 정의	- 상단 메뉴나 하단 내용, 퀵 메뉴 등 화면 내의 공통 영역은 페이지마다 같은 형태로 구성
영역별 세부 설계	- 스토리보드의 영역별 세부 설계 시 각각의 영역을 명확히 구분한 다음 세부적인 설명을 기술
버전 업 관리	- 갱신 시 버전과 날짜를 기록하여 효율적인 관리가 되도록 해야 함