* UI
☞ 사람과 사물 또는 시스템 사이에서 의사소통 할 수 있도록 일시적 또는 영구적인 접근 목적으로 만들어진 물리적, 가상적 매개체
▶ UI 종류
▷ 그래픽 사용자 인터페이스 (GUI)
- 그래픽과 텍스트로 이루어져 있으며 객체지향 인터페이스와 응용 프로그램지향 인터페이스 공존
▷ 웹 기반 인터페이스 (웹 사용자 인터페이스, WUI)
- 인터넷과 웹 브라우저 통해 웹 페이지 열람하고 조작하는 인터페이스
▷ 명령 줄 인터페이스 (CLI)
- 사용자가 컴퓨터 자판 등을 이용해 명령 문자열 입력하여 체계 조작하는 인터페이스
▷ 텍스트 사용자 인터페이스 (TUI)
- 문자열 기반 사용자 인터페이스와 구분 위해 그래픽 사용자 인터페이스 발명된 뒤에 만들어진 용어
▷ 터치 사용자 인터페이스
▶ UI 세 분야
- 정보 제공과 기능 전달 위한 물리적 제어 분야
- 콘텐츠 상세적 표현과 전체적 구성에 관한 분야
- 사용자 편의성에 맞춰 쉽고 간편하게 사용 가능하게 하는 기능적 분야
▶ UI 설계 원칙
▷ 직관성
- 누구나 쉽게 이해하고 사용 가능해야 함
▷ 유효성
- 사용자 목적을 정확하게 달성해야 함
▷ 학습성
- 누구나 쉽게 배우고 익힐 수 있어야 함
▷ 유연성
- 사용자 요구사항 최대한 수용하며, 오류 최소화하여야 함
* UI 표준
☞ 조직 브랜드나 정체성과 일치되는 디자인 철학과 원칙 기술되어 UI 표준이 정리되고 공통으로 사용하는 UI/GUI 요소 및 배치 규칙 등 정의
1. 웹 스타일 가이드 구성(사례)
- 스타일 가이드는 사용자 인터페이스 만들 때 각종 규칙들 기준이 되는 집합 의미
▶ 스타일 가이드
▷ Introduction
- 웹 스타일 가이드 기본 활용 및 적용 범위 등 규정
▷ Basic Rules
- 폰트 컬러 등
▷ Layout
- 업무 유형 및 목적별로 시안 정의
▷ Elements
- 텍스트, 아이콘, 네비게이션, 탭메뉴/페이지 네비게이션, 버튼, 테이블, 블릿, 툴팁/폼 등
▶ Elements 가이드
▷ 텍스트
- 기본 텍스트는 모드 나눔바른고딕 사용
- 이미지 텍스트 사용도 가능
▷ 아이콘
- 당사 고유 아이콘 사용
▷ 네비게이션
- Type1 : 서브메뉴 닫힘
- Type2 : 서브메뉴 열림
▷ 탭메뉴/페이지 네비게이션
- 탭메뉴
- 페이지 네비게이션
▷ 버튼
- 강조 색만 다른 기본 버튼, 이미지 BG가 있는 버튼
▷ 테이블
- 가이드 그대로 사용하거나 응용하여 사용 가능
▷ 블릿
- 대분류 (13px * 13px), 중분류(7px * 3px), 소분류(2px * 2px)
▷ 툴팁/폼
- 툴팁
- 폼
2. 정책
▶ 웹 스타일 가이드 운영 정책
- 사례) 본 스타일 가이드는 계속적으로 업그레이드되어야 하며 디자인 개편 시 버전별로 관리함
▶ 조직 Identity
- 사례) 디자인 스타일은 각 컨텐츠와 서비스 성격에 맞게 디자인 하는 것 원칙으로 하나 본 웹 스타일 가이드에서 규정하고 있는 디자인 원칙과 컨셉, Look & Feel에 적합하도록 디자인하는 것 전제로 함
2. 기본 환경
▶ 용량 규정
- 메인화면 전체 페이지 용량은 1M 이내
- 메인화면 이미지 사이즈 용량은 500K 이내
- 서브화면 전체 페이지 용량은 200K 이내
- 서브화면 이미지 사이즈 용량은 100K 이내
- 공통 아이콘 이미지 사이즈 용량은 30K 이내
▶ 유형별 브라우저 규정
▷ PC
- 1280 x 1024 해상도 기준
- 메인 페이지 경우 가로 1100px 이내, 세로 가변으로 함
- Internet Explorer 8.0 이상 지원
- 화면 정렬은 중앙 정렬 기본
- 가로 스크롤바는 지양 / 세로 스크롤바 사용 가능. (단 스크롤을 메인 경우 2번 이하, 서브 경우 3번 이하)
- Frame 사용 지양
▷ 모바일
- 640 x 480 해상도 기준
- 메인 페이지 경우 가로 600px 이내
- 화면 정렬은 중앙 정렬 기본
- 가로 스크롤바 금지
- Frame 사용 지양
▷ 테블릿
- 1024 x 768 해상도 기준
- 메인 페이지 경우 가로 825px 이내
- 화면 정렬ㄹ은 중앙 정렬 기본
- 가로 스크롤바 금지
- Frame 사용 지양
* UI 지침
☞ 웹/모바일 서비스 구축 시 효율적인 정보 전달 가능케 하기 위해 사용자 인터페이스 설계에서 지켜야 할 세부 사항 규정 하는 것 의미
1. 사용자 경험 고려사항
- 사용 대상, 사용 환경, 사용 목적, 사용 빈도
- 직관적으로 서비스 이용 방법 파악 가능한 쉬운 사용 방법
- 모바일 서비스 특성에 적합한 디자인
- 사용자 입력 최소화하고 자동 완성 기능 제공
- 사용자 입력 실수 되돌릴 수 있는 기능 등
2. 핵심 기능 고려사항
- 모바일 기기 화면 크기 고려하여 메뉴 구조 단순화하고 간결한 정보 제공
- 모바일 환경에서 활용성 높은 기능 중심으로 서비스 제공
- 서비스 목적에 부합하는 기능 중심 서비스 제공
3. 호환성과 확장성 고려사항
- 모바일 웹 경우 기술적 제약 없는 한 3개 이상 브라우저에서 동등한 서비스 제공하도록 설계
- 모바일 기기 화면 해상도에 따라 호환성 고려하여 사용자 인터페이스 설계
- 특정 모바일 운영체제에서만 동작하는 기능 지양
4. 정보소외계층 접근성
- 모바일 서비스 구축 시 장애인,고령자 등 모바일 서비스에 쉽게 접근하고 이용 가능토록
[장애인 고령자 등 정보 접근 및 이용 편의 증진을 위한 지침] 준수하여야 함
5. 일관성
- 모바일 서비스 구축 시 색상, 글자체, 용어 사용 등에 있어서 일관성 유지하여야 함
6. 이미지
- 모바일 서비스 구축 시 전송 속도, 전송량 등 고려하여 경량화 된 이미지 제공하여야 함
- 성적 표현, 특정 종교나 인종, 여성 비하 등 사회적 갈등 유발 가능한 이미지 사용 금지
- 단순히 색상과 그래픽에 의존한 서비스 제공 지양하여야 함
- 모바일 서비스 구축 시 사용되는 모든 이미지 저작권 확보하여야 함
7. 기타 설계 지침
ㄱ. 사용자 중심
- 사용자가 이해하기 편하고 쉽게 사용 가능한 환경 제공하며 실사용자에 대한 이해 바탕 되어야 함
ㄴ. 단순성
- 조작 방법은 가장 간단하게 작동 가능토록 하여 인지적 부담 감소시켜야 함
ㄷ. 결과 예측 가능
- 작동시킬 기능만 보고도 결과 예측 가능해야 함
ㄹ. 가시성
- 주요 기능을 메인 화면에 노출하여 조작 쉽도록 하여야 함
ㅁ. 표준화
- 디자인 표준화하여 기능 구조 선행 학습 이후 쉽게 사용 가능해야 함
ㅂ. 접근성
- 사용자 직무, 연령, 성별 등 다양한 계층 수용해야 함
ㅅ. 명확성
- 사용자가 개념적으로 쉽게 인지해야 함
ㅇ. 오류 발생 해결
- 사용자가 오류에 대한 상황 정확히 인지 가능해야 함
* 스토리보드
☞ 디저이너와 개발자가 최종적으로 참고하는 설계 산출 문서
☞ 정책, 프로세스 및 콘텐츠 구성, 와이어 프레임, 기능 정의, DB 연동 등 서비스 구축 위한 대부분 정보 수록
▶ UI 화면 설계 구분
▷ 스토리보드
- 정책, 프로세스 및 콘텐츠 구성, 와이어 프레임, 기능 정의, DB 연동 등이 수록된 설계 산출물
- 도구 : 파워포인트, 키노트, 스케치 등
▷ 와이어프레임
- 이해관계자들과 의사소통 또는 서비스의 간략한 흐름 위해 화면 단위 레이아웃 설계하는 작업
- 도구 : 손그림, 파워포인트, 키노트, 스케치, 일러스트, 포토샵 등
▷ 프로토타입
- 와이어프레임 또는 스토리보드의 정적 화면에 동적 효과 적용하여 실제 구현된 것처럼 테스트 가능
- 도구 : HTML/CSS, 네이버, 프로토나우, 카카오 오븐 등
▶ 스토리보드 작성 절차
1. 메뉴 구성도 만들기 (스토리보드 작성 1단계)
- 전체적인 메뉴 구성도이며, 어떤 것을 보여주고 결정된 사항 표현 위한 메뉴 순서와 구성 단계, 용어 정의
2. 스타일 확정 (스토리보드 작성 2단계)
- 레이아웃이나 글자 모양, 색상, 그래픽에서의 일관성 유지
3. 설계하기 (스토리보드 작성 3단계)
- 화면에 보여지는 시각적인 디자인 콘셉트 잡기
'정보처리기사 > 필기' 카테고리의 다른 글
| [정보처리기사] Part01-03-1. 공통 모듈 설계 (0) | 2022.02.25 |
|---|---|
| [정보처리기사] Part01-02-2. UI 설계 (0) | 2022.02.24 |
| [정보처리기사] Part01-01-3. 분석모델 확인 (2) (0) | 2022.02.24 |
| [정보처리기사] Part01-01-3. 분석모델 확인 (1) (0) | 2022.02.24 |
| [정보처리기사] Part01-01-2. 요구사항 확인 (2) (0) | 2022.02.24 |
댓글