[정보처리기사 실기] 2장 화면 설계 - UI 요구사항 확인

UI 요구사항 확인

 

UI 개념

- 사용자와 시스템 사이에서 의사소통 가능하도록 물리적, 가상의 매개체

 

- UX = 사용과 맥락 & UI(사용자 & 컴퓨터)

• 사용과 맥락 : 사회적 구조 및 과업, 앱 영역, 사용자와 기계 사이 적응성
• 사용자 : 정보처리 과정, 사회적 구조 및 과업, 인간공학적 요소
• 컴퓨터 : 입출력 장치, 상호작용 기술, 컴퓨터 그래픽스, 상호작용 구조

 

UI 유형

- CLI, GUI, NUI, OUI

 

UI 분야

• 물리적 제어 분야 : 정보 제공과 기능 전달 HW 기반
• 디자인적 분야 : 정확하고 상세한 표현과 전체적 구성
• 기능적 분야 : 편의성에 맞춰 쉽고 간편하게 사용

UI 설계 원칙

- 직관성, 유효성, 학습성, 유연성

 

UI 설계 지침

• 사용자 중심, 일관성, 단순성, 결과 예측 가능, 가시성, 표준화, 접근성, 명확성, 오류 발생 해결

UI 요구사항 확인

 

(1) 요구사항 개요

- 사용자가 정보시스템 구축 얻고자 하는 목적 기준, 개발 전체에 대한 기준이며, 종료 및 검수의 기준이다.

 

(2) 요구사항 구분

- 기능적 사항과 개발과정에서 지킬 비기능적 요구로 나뉨

• 기능적 요구사항 : 시스템이 제공하는 기능, 입출력, 데이터, 연산에 관한 요구사항
• 비기능적 요구사항 : 사용성, 효율성, 신뢰성, 유지보수성, 재사용성 품질에 관한 요구사항, 플랫폼 등 시스템 환경에 관한 요구사항, 프로젝트 계획에 관한 요구사항

(3) 요구사항 확인

- UI 표준에 따라, 기능 비기능 도출을 통해 개발하고자 하는 것을 확인 가능

 

(4) 품질 요구사항 (ISO/IEC 9126 기반)

• 기능성 : 수행 결과와 품질 요구사항의 차이 분석, 정확하지 않은 결과가 발생할 확률과 동작을 관찰하기 위한 품질 기준
  • 적절성, 정밀성, 상호 운용성, 보안성, 호환성
• 신뢰성 : 일정 시간 또는 작동 시간 의도하는 기능 수행 보증
  • 성숙성, 고장 허용성, 회복성
• 사용성 : 어던 행위를 정확하고 쉽게 인지하는 품질 기준
  • 이해성, 학습성, 운용성
• 효율성 : 얼마나 빨리 처리하는지
  • 시간 효율성, 자원 효율성
• 유지보수성 : 개선하고 확장하는데 얼마나 용이한지 판단
  • 분석성, 변경성, 안정성, 시험성
• 이식성 : 다른 플랫폼에서 많은 추가 작업 없이 쉽게 적용 가능한지
  • 적용성, 설치성, 대체성

 

UI 표준

UI 표준 개념

- 디자인 철학과 원칙 기반하에 전체 시스템에 공통 적용

 

UI 표준 구성

- UX 원칙, 정책 및 철학, UI 스타일 가이드, 패턴 모델 정의 표준 수립을 위한 조직 구성으로 됨

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

UI 표준 수립 시 고려 사항

• 불쾌하지 않아야한다. 
• 많은 업무 케이스 포함해라
• 다양한 상황 대처하자
• 표준 적용이 쉽도록 가이드와 수단 제공 필요
• 상황에 맞게 변경할 수 있는 조직 수반이 필요

UI 스타일 가이드 구성

- 통일과 일관적인 화면 구성을 위해 지켜야 할 설계 원칙

 

(1) 구동 환경 정의

- 컴퓨터 운영체제 확인, 웹 브라우저 확인, 모니터 해상도 확인, 프레임세트 확인

 

(2) 레이아웃 정의

- 크게 상단, 왼쪽, 콘텐츠 영역으로 3개 설계, 하단은 상황에 맞게 추가 및 제외

• 상단 메뉴 구성 : 필수적으로 적용, 로그인, 로고, 바로가기 같은 메뉴, 전체 동일 적용
• 좌측 메뉴 구성 : 선택적 적용 사항, 서브 메뉴나 배너
• 내용 구성 : 필수적으로 적용하는 사항, 메인 이미지, 구성 콘텐츠 존재
• 하단 메뉴 구성 : 선택적 적용 사항, 회사 CI, 저작권등 존재

(3) 기능 정의

- 개념 모델을 논리적 모델로 상세화하여 기능 정의

 

(4) 구성요소 정의

 

구성요소

• 그리드 : UI 구성하는 방법 중 테이블 형태로 구성
• 버튼 컨트롤 타입 : 기능, 검색, 그리드, 기타 관련 버튼
• 페이지 요소 : 폰트 규정, 아이콘 요소, 체크박스, 라디오 버튼, 말풍선, 이미지표시, 탭 표시, 스텝 표시, 페이지 이동, 상하 스크롤, 정보 입력등 구성
• 팝업 요소 : 윈도, 레이어 팝업
• Alert 요소 : 정보 누락, 오류 시 Alert, 업무 처리 완료, 삭제, 수정 시, 업무 안내 Alert

버튼 컨트롤 타입

- 업무 처리 버튼, 이동 버튼, 링크 & 팝업 버튼, 테이블 내 기능 버튼

 

구성요소 정의 문제

- 입력 데이터 오류 체크, 날짜 입력, 이메일 입력, 주소 입력, Select 박스

페이지 요소

- 폰트 규정, 아이콘 요소, 체크박스, 라디오 박스, 말풍선

- 이미지 표시, 탭 표시, 스텝 표시

- 페이지 이동, 상하 스크롤, 정보 입력

 

UI 패턴 모델 정의

- CRUD 방식 기반 입력과 출력 처리 오퍼레이션 방식에 대한 표준 절차 표시, UI ㅠㅐ턴 모델 개발

 

패턴별 개표준 개발 방법 정의

• 업무 화면 클라이언트 정의 : 설계자는 개발 시 필요한 공통 요소 식별, 디렉토리 구성, 개발 환경 구축 부분 도출
  • UI는 X-Internet과 같은 리치 클라이언트 도우과 일반 JSP, HTML 기반 씬 클라이언트 방식
• 서버 컨트롤러 정의 : 프레임워크 도입 시 제공하는 방식, 별도의 클라 동비 경우 서버 컨트롤러와 연동 방식 결정
• 서버 메시지 및 예외 처리 정의
  • S(System) : 오류 발생 메시지, 예외 전달시 모든 트랜잭션 자동 복원
  • E(Error) : 업무 처리 로직의 일환 앱 예외 전달, 모든 트랜잭션 자동 복원
  • I(Information) : 확인 메시지 사용자에게 알려주고자 할 때 사용, 모든 트랜잭션 커밋
• 클라이언트 - 서버 간 데이터 변환 정의 : 오브젝트를 사용할지 먼저 결정, 클라와 서버 간의 데이터 형태 변환 처리할지 방안 마련
• 기업 포털 연계 정의 : RP-SSO-사용자간 연계 방안을 URL 연계시 고려
• 보고서 정의 : 클라와 솔루션 간의 연계 방식
• 외부 컴포넌트 연계 정의 : 외부 UI 컴포넌트 도입시, 서버와 연계 방식으로 결정

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

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

 

UI 지침

UI 지침 개념

- 사용자 인터페이스 설계, 개발 시 지켜야 할 세부 사항 가이드라인

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

 

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

- 사용자 트렌드 분석, 기능 및 설계 분석

 

환경 분석

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

 

UI 개발 목표 및 범위

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

- 필수적으로 수행해 계획 전반에 반영, 필요성 및 목표 공유하고 개발 범위 수립하기 위한 활동한다.

 

범위 정의

• 경영진 UI 관련 개발 요구사항 조사 및 정의
• 자사 - 타사 - 사용자 부석 및 트렌드 분석
• 관계자 간 개발 목표 협의 공유 워크숍

 

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

• 3C 분석 : 고객, 자사, 경쟁사를 비교하고 분석해 차별화해서 경쟁에서 이길지 분석
• SWOT 분석 : 기업의 내부와 외부 환경 분석 Strength, Weakness, Opportunity, Threat 경영전략
• 시나리오 플래닝 : 다양한 시나리오를 설계 불확실성 제거해 나가려는 경영 전략
• 사용성 테스트 : 사용자가 직접 제품을 사용해 작성 시나리오에 맞춰 과제를 수행한 후, 지문에 답하도록 하는 테스트
• 워크숍 : 소집단 과제에 대한 새 지식 기술 서로 교환 및 검토

 

사용자 분석 및 니즈 조사

- 정의된 핵심 기능 관련, 예상 타깃고객층의 프로파일을 기술하고 정의 한다.

• 리서치 대상 선정 및 내용 설계
• 리서치 진행
• 리서치 결과 정의

사용자 요구사항 도출

- 페르소나 정의, 콘셉트 모델 정의, 사용자 요구사항 정의, UI 컨셉션 단계를 통해 사용자 요구사항 도출

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

 

UI 상세 설계 

- 시안 토대로 구현 모든 화면 UI 상세 설계 진행, 효율적인 UI 관리와 원활한 의사소통

 

UI 화면 디자인

- 레이아웃, 컬러 패턴, 타이포 그래픽, 화면 디자인 요소 정의, UI 가이드 문서 작성

 

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

- 고수준의 프로토타입을 개발자나 전문가 통해 지속적인 UI 사용에 대한 평가와 디자인 평가 진행 후 개선

 

테스트, 배포 및 관리

- 사용성 테스트 수행, 객관적이고 정량화 된 값 도출, 사용자 중심 소프트웨어 매뉴얼, 피드백 지속적 수집 후 유형화 체계적 관리

 

 

스토리 보드

스토리 보드 개념

- 화면 설계를 위해 서비스를 위한 정보가 수록된 문서, 최종적으로 참고하는 산출문서

 

설계 구분

• 와이어프레임 : 화면 구성 협의하고나 공유해 화면 단위의 레이아웃을 설계 : 파워포인트, 키노트, 스케치, 일러스트
• 스토리보드 : 모든 정보가 담겨 있는 설계 산출물 : 파워포인트, 키노트, 스케치
• 프로토타입 : 정적 화면에 동적 효과를 적용해 실제 구현된 것처럼 시뮬레이션 모형 : HTML/CSS

스토리보드 작성 절차

순서

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

 

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

- 일관된 기호의 표시, 공통 영역의 정의, 영역별 세부 설계, 버전 업 관리

 

 

UI 프로토타입 제작 및 검토

UI 포로토타입 이해

(1) 개념

- 기능을 간략한 형태로 구현한 시제품, 정확하게 반영될 때까지 지속적 개선하고 보완

 

(2) 프로토타입의 의의

- 적정성 평가, 수정 보완함으로써 추후 발생 가능한 오류 사전에 방지, 총 비용과 노력을 절감 가능

 

(3) 장점 및 단점

• 장점 : 사용자 설득과 이해가 쉬움, 개발 시간 감소, 오류 사전 발견 통한 예방 가능
• 단점 : 수정 과정 증가 시, 작업 시간 증가 위험 존재, 요구사항 타협 필요, 효율성 관점에서는 필요 이상의 많은 자원 소모