2020 정보처리기사 실기 6. UI 설계

1 UI 요구사항 확인

1 UI 요구사항 확인

1 UI 개념

사람이 접하게 되는 화면

* UX는 UI 포함

2 UI 유형

• CLI: 정적 텍스트 기반 인터페이스
• GUI: 그래픽 반응 기반 인터페이스
• NUI: 직관적 사용자 반응 기반 인터페이스
• OUI: 유기적 상호작용 기반 인터페이스

3 UI 분야

• 물리적 제어 분야: 하드웨어 기반
• 디자인적 분야: 전체적인 구성
• 기능적 분야: 사용자 편의성 고려

4 UI 설계 원칙

• 직관성
• 유효성
• 학습성
• 유연성

5 UI 설계 지침

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

6 UI 요구사항

1 개요

사용자가 정보시스템을 구축하여 얻고자 하는 최종 목적

2 구분

• 기능적 요구사항: 시스템의 입출력, 데이터, 연산에 관한 요구사항
• 비기능적 요구사항: 품질, 시스템 환경, 프로젝트 계획에 관한 요구사항

3 확인

UI 표준 지침에 따른 요구사항 확인

2 UI 표준

1 개념

디자인 철학과 원칙 기반 하에 전체 시스템에 공통적으로 적용되는 화면에 대한 규약

2 구성

• 전체적인 UX 원칙: 사용자 관점
• 정책 및 철학
• UI 스타일 가이드: 환경 및 레이아웃
• UI 패턴 모델 정의: CRUD 방식 기반
• UI 표준 수립을 위한 조직 구성

3 고려사항

• 사용자 편의
• 많은 업무 케이스 포함
• 다양한 사용 상황 대처
• 충분한 가이드와 활용 수단 제공
• 관리 조직 수반

4 UI 스타일 가이드 구성

• UI 구동 환경 정의
  • OS
  • 웹 브라우저
  • 모니터 해상도
  • 프레임세트
• 레이아웃 정의
  • 화면 구조 정의
  • 상단 메뉴 구성 정의
  • 좌측 메뉴 구성 정의
  • 내용 구성 정의
  • 하단 메뉴 구성 정의
  • 사용자 환경에 맞춰 페이지 폭 정의
• 메뉴 네비게이션 정의
• 공통표준화면 정의
• 기능 정의
• 구성 요소 정의
  • 그리드
  • 버튼/컨트롤 타입
  • Page 요소
  • 팝업 요소
  • Alert 요소

5 UI 패턴 모델 정의

• 업무 화면 클라이언트 정의
• 서버 컨트롤러 정의
• 서버 메시지 및 예외 처리 정의
• 클라이언트-서버 간 데이터 변환 정의
• 기업 포털 연계 정의
• 보고서 정의
• 외부 컴포넌트 연계 정의

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

• 조직 구성 및 역할 정의
• 커뮤니케이션 방안 수립

3 UI 지침

1 개념

UI 표준에 따라 사용자 인터페이스 설계, 개발 시 지켜야할 가이드라인

1. 목표 정의
2. 프로젝트 계획
3. 요구사항 정의
4. 설계 및 구현
5. 테스트
6. 배포 및 관리

2 환경 분석

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

3 UI 개발 목표 및 범위

• 3C 분석: 고객, 자사, 경쟁사
• SWOT 분석: 각점, 약점, 기회, 위협
• 시나리오 플래닝
• 사용성 테스트
• 워크숍

4 사용자 분석 및 니즈 조사

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

5 사용자 요구사항 도출

• 페르소나 정의: 가상의 사용자
• 콘셉트 모델 정의
• 사용자 요구사항 정의
• UI 컨셉션

6 UI 상세 설계

UI 시나리오 문서 작성

7 UI 화면 디자인

UI 가이드 문서 작성

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

지속적인 UI 사용에 대한 평가와 UI 디자인 평가를 통한 개선사항 반영

9 테스트, 배포 및 관리

사용자 중심 소프트웨어 매뉴얼 작성

4 스토리보드

1 개념

• 와이어 프레임: 화면 단위의 레이아웃 설계
• 스토리보드: 서비스 구축을 위한 모든 정보가 담겨 있는 설계 산출물
• 프로토타입: 정적인 화면으로 설계된 와이어 프레임 / 스토리보드에 동적 효과를 적용하여 시뮬레이션할 수 있는 모형

2 절차

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

3 유의사항

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

5 UI 프로토타입 제작 및 검토

1 프로토타입

1 개념

전체적인 기능을 간략한 형태로 구현한 시제품

2 의의

• 추후 발생 가능한 오류를 사전에 방지
• 비용 절감

3 유형

• 아날로그: 펜을 활용한 스케치, 적은 비용
• 디지털: 프로토타이핑 도구를 활용, 재사용

2 UI 프로토타입 고려 사항

• 계획 시 고려사항
  • 목표 확인
  • 환경 확인
  • 일정 확인
  • 범위 확인
  • 인원 확인
  • 아키텍처 검증 확인
  • 이슈 및 해결
  • 가이드 확정
  • 개발 생산성 확인
  • 결과 시연
• 작성 시 고려사항
  • 계획 작성
  • 범위 확인
  • 목표 확인
  • 기간 및 비용 확인
  • 산출물 확인
  • 유의사항 확인

3 제작 및 검토 프로세스

1. 소프트웨어 아키텍처 설계 원리 확인
   • UI 표준 및 지침에 따라 소프트웨어 아키텍처 설계 원리 확인
   • 프로토타입 방식 결정
2. 프로토타입 유스케이스 작성
   • UI 설계 원리를 바탕으로 프로토타입 유스케이스 작성
3. UI 요구사항을 반영한 프로토타입 제작
   • 실직적인 제작에 앞서 UI 프로토타입 제작 단계 숙지
   • 프로토타이핑 초기 작성
   • 프로토타이핑 상세 수행
4. UI 적정성 검토
   • 실행 차를 줄이기 위한 UI 적정성 확인
   • 평가 차를 줄이기 위한 UI 적정성 확인

---

2 UI 설계

1 UI 흐름 설계

1 UI 설계서 구성

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

2 UI 설계 원리

• 실행 차를 줄이기 위한 UI 설계
  • 사용 의도 파악
  • 행위 순서 규정
  • 행위의 순서대로 실행
• 평가 차를 줄이기 위한 UI 설계
  • 수행한 키 조작 결과를 사용자가 빠르게 지각하도록 유도
  • 키 조작으로 변화된 시스템의 상태를 사용자가 쉽게 인지하도록 유도
  • 사용자가 가진 원래 의도와 시스템 결고 간의 유사 정도를 사용자가 쉽게 파악하도록 유도

3 UI 흐름 설계 수행 절차

1. UI 설계안의 적정성 확인
   • 실행 차를 줄이기 위한 UI 설계 원리
     • 사용 의도 파악
     • 행위 순서 규정
     • 행위의 순서대로 실행
   • 평가 차를 줄이기 위한 UI 설계 원리
     • 수행한 키 조작 결과를 사용자가 빠르게 지각하도록 유도
     • 키 조작으로 변화된 시스템의 상태를 사용자가 쉽게 인지하도록 유도
     • 사용자가 가진 원래 의도와 시스템 결과 간의 유사 정도를 사용자가 쉽게 파악하도록 유도
2. 화면과 폼의 흐름 설계
   • 화면에 표현되어야 할 기능 및 비기능적 요구사항 검토
   • 화면의 입력 요소 및 유스케이스를 통한 UI 요구사항 확인
   • 유스케이스 설계
   • 기능 및 양식 확인

2 UI 상세 설계

1 UI 상세설계 절차

1. UI 요구사항 최종 확인
2. UI 구조 설계
3. 사용자 기반 메뉴 구조 설계
4. 화면 설계
5. 하위 시스템 단위의 내외부 상세 화면과 폼 설계

2 UI 검토 및 보안

• UI 검토 수행
• UI 검토 보완
• 사용성 검토 및 검증 수행

3 UI 설계 도구

1 개념

UI 설계 지원 도구

2 UI 개발 단계별 활용 가능한 설계 도구

• 분석: UI 패턴, UI 모델링
• 설계: UI 설계
• 구현: 프로토타이핑 툴

3 유형

• 화면 설계 도구
  • 파워 목업
  • 발사믹 목업
  • 카카오 오븐
• 프로토타이핑 도구
  • UX핀
  • 액슈어
  • 네이버 프로토나우
• UI 디자인 도구
  • 스케치
  • 어도비 XD
• UI 디자인 산출물로 작업하는 프로토타이핑 도구
  • 인비전
  • 픽사에이트
  • 프레이머