[정보처리기사 실기] 6. 화면 설계-Chapter 1. UI 요구사항 확인

정리 내용은 [수제비 2020 정보처리기사 실기]책을 기반으로 작성하였습니다.

2020 수제비 정보처리기사 실기(1권+2권 합본세트)

---

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

개념
넓은 의미에서 사용자와 시스템 사이에서 의사소통 할 수 있도록 고안된 물리적, 가상의 매개체
좁은 의미에서 정보 기기나 소프트웨어의 화면 등에서 사람이 접하게 되는 화면
UX(사용자 경험)은 UI(사용자 인터페이스)를 포함하고 있다.

 

유형

CLI(Command Line Interface): 정적인 텍스트 기반 인터페이스. 명령어를 텍스트로 입력하여 조작

GUI(Graphical User Interface): 그래픽 반응 기반 인터페이스. 그래픽 환경 기반으로 한 마우스나 전자펜을 이용

NUI(Natural User Interface): 직관적 사용자 반응 인터페이스. 신체부위를 이용(터치,음성 등)

OUI(Organic User Interface): 유기적 상호작용 기반 인터페이스. 현실에 존재하는 모든 사물이 입출력장치로 변화할 수 있는 사용자 인터페이스

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

 

설계 원칙

설계원칙	설명	부특성
직관성	누구나 쉽게 이해하고, 쉽게 사용할 수 있어야 함	쉬운 검색 / 쉬운 사용성 / 일관성
유효성	정확하고 완벽하게 사용자의 목표를 달성될 수 있도록 제작	쉬운 오류 처리 및 복구
학습성	초보와 숙련자 모두가 쉽게 배우고 사용할 수 있게 제작	쉽게 학습 / 쉬운 접근 / 쉽게 기억
유연성	사용자의 인터랙션을 최대한 포용하고 실수를 방지할 수 있도록 제작	오류 예방 / 실수포용 / 오류 감지

* 인터랙션: 입출력장치를 매개로 디지털 시스템과 사람이 주고받는 일련의 의사소통 과정

 

설계 지침

설계지침	설명
사용자 중심	사용자가 이해하기 쉽고 편하게 사용할 수 있는 환경을 제공, 실사용자에 대한 이해가 바탕이 되어야 함
일관성	버튼이나 조작방법이 사용자가 기억하기 빠르고 쉽게 습득할 수 있도록 설계해야 함
단순성	조작 방법은 가장 간단하게 작동되도록 하여 인지적 부담 최소화
결과 예측 가능	작동시킬 기능 마 보고도 결과 예측이 가능해야 함
가시성	주요 기능을 메인 화면에 노출하여 쉬운 조작이 가능해야 함
표준화	디자인을 표준화하여 기능 구조의 선행 학습 이후 쉽게 사용 가능해야 함
접근성	사용자의 직무, 연령, 성별 등이 고려된 다양한 계층이 수용해야 함
명확성	사용자가 개념적으로 쉽게 인지해야 함
오류 발생 해결	사용자가 오류에 대한 상황을 정확하게 인지할 수 있어야 함

2. UI 요구사항 확인

개요
사용자가 정보 시스템을 구축하여 얻고자 하는 최종 목적의 기준
요구사항은 시스템 개발과정 전체에 대한 기준이 되며 시스템 개발 종료 및 검수의 기준

 

구분

기능적 요구사항: 시스템이 제공하는 기능,서비스에 대한 요구사항 / 시스템의 입출력,데이터,연산에 관한 요구사항

비기능적 요구사항: 사용성, 효율성, 신뢰성, 유지보수성, 재사용성 등 품질에 관한 요구사항플랫폼, 사용 기술 등 시스템 환경에 관한 요구사항비용, 일정 등 프로젝트 계획에 관한 요구사항

 

3. UI 표준

개념
디자인 철학과 원칙 기반 하에 전체 시스템에 공통으로 적용되는 화면간 이동, 화면 구성에 대한 규약

 

표준 구성
전체적인 UX 원칙: 사용자 관점에서 사용자 업무를 효율적으로 수행할 수 있는 UX 원칙 정의
정책 및 철학: 조직의 목표나 정체성을 포함하는 정책 및 철학 설정
UI 스타일 가이드: UI에 대한 구동 환경 및 레이아웃 등 정의
UI 패턴 모델 정의: CRUD 방식을 기반으로 데이터 입력, 출력 패턴 모델 정의
UI 표준 수립을 위한 조직 구성: UI 팀 및 표준 개발팀을 주축으로 추진 조직 구성
* CRUD 방식: 대부분의 컴퓨터 소프트웨어가 가지는 기본적인 데이터 처리 기능인 Create, Read, Update, Delete 를 묶어서 일컫는 말

 

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

 

UI 스타일 가이드 구성
UI의 통일과 일관적인 화면 구성을 위해서 시스템이 지켜야 할 UI 요소 정의와 화면 설계 원칙 제시
1. UI 구동 환경 정의: 컴퓨터 운영체제 확인 / 웹 브라우저 확인 / 모니터 해상도 확인 / 프레임 세트 확인

2. 프레임 세트 적용

구분	프레임 구분	단일 프레임	웹 애플리케이션 경우
콘텐츠 구성	프레임별 콘텐츠 구성 각 프레임의 페이지에서 메뉴, 베너 구성 등 일괄 적용됨	전체 페이지에서 영역별 콘텐츠를 자유롭게 구성가능 페이지별 메뉴, 배너 구성, 콘텐츠 변경 관리 편리	페이지 구성 콘텐츠에 구성이 같은 패턴 페이지 별로 특화된 배너를 적용하는 경우는 적음
디자인	프레임 별 이미지 적용 프레임 내에 배경 이미지 적용	배경 이미지 사용시에 전체 페이지 내에서 스크롤 생김	업무 처리가 주목적으로 페이지 전체 이미지 적용하는 경우 적음
속도	변경된 프레임만 새로 로딩됨	페이지 전체 새로 로딩	메뉴 변경시 페이지 로딩이 빨라야 함

3. 레이아웃 정의: 화면구조 정의 / 상단, 좌측, 하단 메뉴 구성 정의 / 내용 구성 정의 / 사용 환경에 맞춰 페이지 폭 정의

4. 메뉴 내비게이션 정의: 메뉴 내비게이션을 애플리케이션의 메뉴 구조에 따라 적당한 타입을 선택하여 적용

5. 공통 표준화면 정의: 검색 영역이나 Tab Menu 등 공통된 표준 화면을 정의

6. 기능 정의: 시스템 요구사항에 대한 개념 모델을 논리적 모델로 상세화 하여 기능 정의

7. 구성요소 정의: 그리드 / 버튼, 컨트롤 타입 / Page 요소 /  팝업 요소 / Alert 요소

 

UI 패턴 모델
CRUD 방식을 기반으로 데이터 입력과 출력을 처리하는 화면 흐름을 포함하여 오퍼레이션 방식에 대한 표준 절차를 표시하고, UI 패턴 모델을 개발
패턴별 표준 개발 방법 정의

영역	설명
업무 화면 클라이언트 정의	제안 단계에서 결정된 클라이언트를 통해 설계자는 개발 시에 필요한 공통 요소 식별, 디렉토리 구성, 개발 환경 구축 부분 도출 리치 클라이언트(X-Internet)와 씬 클라이언트(JSP, HTML)방식 존재
서버 컨트롤러 정의	프레임워크를 도입한다면 해당 프레임워크가 제공하는 방식 채택 별도의 클라이언트 제품을 도입하는 경우 서버 컨트롤러와의 연동 방식 결정
서버 메시지 및 예외 처리 정의	서버의 메시지 및 예외 처리를 클라이언트 UI에 전달하는 방식 S(System): 시스템 오류로 인해 발생하는 메시지. 런타임 예외를 전달할 때 사용되며, 모든 트랜잭션은 자동으로 복원 E(Error): 업무 처리 로직의 일환으로 애플리케이션 예외를 전달할 때 사용. 모든 트랜젝션은 자동으로 복원 I(Information): 정상적인 업무 처리 결과나 관련 정보에 대한 확인 메시지를 사용자에게 알려주고자 할 때 사용. 모든 트랜잭션은 커밋됨
클라이언트-서버 간 데이터 변환 정의	어떤 방식의 오브젝트를 사용할 것인지 먼저 결정 클라이언트와 서버간의 데이터 형태 변환을 어떻게 처리할 것인지 방안 마련
기업 포털 연계 정의	EP-SSO-사용자 간 연계 방안을 URL 연계 시를 고려하여 정의
보고서 정의	클라이언트와 리포트 솔루션 간의 연계 방식 결정
외부 컴포넌트 연계 정의	외부 UI 컴포넌트 도입할 때 서버와의 연계 방식으로 결정

* 리치 클라이언트: SW 실행을 클라이언트에서 책임지는 기술. 서버는 클라이언트에서 요청한 SW의 실행코드를 스트림 형태로 제공하고, 클라이언트는 서버로부터 스트리밍되는 SW 코드를 클라이언트 PC 자원을 이용하여 실행하는 기술
* 씬 클라이언트: 소프트웨어 실행을 전적으로 서버에서 책임지는 기술. 서버에서 가상 머신을 이용하여 클라이언트의 데이터와 소프트웨어를 관리 및 실행하는 기술
* SSO: 한 번 로그인 통해 여러 다른 사이트들을 자동으로 접속하여 이용하는 방법

 

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

 

3. UI 지침

개념
UI 표준에 따라 사용자 인터페이스 설계, 개발 시 지켜야 할 세부사항을 규정하는 가이드 라인
1. 목표 정의: 환경 분석 / UI 개발 목표 및 범위 정의
2. 프로젝트 계획: 사용자 분석 및 니즈 조사
3. 요구사항 정의: 사용자 요구사항 도출 / UI 컨셉션 정의
4. 설계 및 구현: UI 상세 설계 / UI 화면 디자인 / UI 검증
5. 테스트: 사용성 테스트 실행 / 결과 분석
6. 배포 및 관리: 매뉴얼 배포 / 관리

 

UI 표준 적용을 위한 환경 분석
1. 사용자 트렌드 분석
2. 기능 및 설계 분석

 

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

 

사용자 분석 및 니즈 조사
리서치 대상 선정 및 내용 설계 -> 리서치 진행 -> 내용 정리

 

사용자 요구사항 도출
페르소나 정의: 잠재적 사용자의 다양한 목적과 관찰된 행동 패턴을 응집시켜 놓은 가상의 사용자
콘셉트 모델 정의: 콘셉트 모델 정의 / 브레인스토밍 활용
사용자 요구사항 정의: 리서치 및 페르소나 결과물을 토대로 요구사항 도출, 우선순위 정함. 요구사항 매트릭스 작성 / 정황 시나리오 제작 / 정황 시나리로부터 요구사항 도출
UI 컨셉션: 정리된 요구사항을 구체화하는 단계. 화면 디자인 단계전에 대표화면 설계를 진행하는 단계. 정보 구조 설계 / 대표화면 와이어 프레임 스케치 / 페이퍼 프로토타입을 통한 스토리 보드 설계
* 요구사항 매트릭스: 다양한 경로를 통해 수집된 직접적인 요구사항을 검토하여, 페르소나의 목적을 기준으로 데이터 요구, 기능 요구, 제품 품질, 제약 요인 기반으로 만든 요구사항 표
* 정황 시나리오: 요구사항 정의에 사용되는 초기 시나리오. 높은 수준, 낙관적이면서도 발생 상황에서의 이상적인 시스템 동작에 초점을 맞추는 시나리오

 

UI 상세설계
UI 설계 시안을 토대로 실제 설계 및 구현을 위해 모든 화면에 대한 UI 상세설계 단계를 진행
UI 시나리오 문서는 사용자 인터페이스의 기능구조, 대표 화면, 화면 간 인터랙션 흐름, 다양한 상황에서의 예외처리 방식 등 문서로 정리한 것. 효율적인 UI 관리와 이해관계자 간의 원활한 의사소통을 할 수 있게 해줌

 

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

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

 

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

 

4. 스토리보드

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

 

UI 화면 설계 구분

와이어프레임: 이해관계자들과의 화면구성의 협의하거나 서비스의 간략한 흐름을 공유하기 위해 화면의 레이아웃을 설계하는 작업

스토리보드: 정책, 프로세스, 콘텐츠 구성, 와이어프레임, 기능 정의, 데이터베이스 연동 등 서비스 구축을 위한 모든 정보가 담겨있는 설계 산출물

프로토타입: 정적 화면으로 설계된 와이어 프레임 또는 스토리보드에 동적 효과를 적용하여 실제 구현된 것처럼 시뮬레이션 할 수 있는 모형

 

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

 

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

 

5. UI 프로토타입

개념
컴퓨터 시스템이나 소프트웨어 설계 또는 성능, 구현 가능성 요구사항을 좀 더 잘 이해하고 결정하기 위하여 전체적인 기능을 간략한 형태로 구현한 시제품
사용자의 요구사항이 정확하게 반영될 때까지 지속적으로 개선하고 보완해서 최종설계 완성

 

의의
사전에 프로토타입을 먼저 제작하고 이를 기반으로 UI 적정성을 평가, 수정 보완함으로써 추후 발생 가능한 오류들을 사전에 방지
시스템 설계 및 개발에 소요되는 총 비용과 노력을 절감

 

UI 프로토타입 계획 시 고려사항

목표확인 / 환경확인 / 일정확인 / 범위확인 / 인원확인 / 아키텍처 검증 확인 / 이슈 및 해결 / 가이드 확정 / 개발생산성확인 / 결과 시연

 

UI 프로토타입 작성 시 고려 사항

계획작성 / 범위확인 / 목표확인/  기간 및 비용 확인 / 산출물 확인 / 유의사항 확인