1-8강. 화면 설계-UI 요구사항 확인(1)

과목1. 소프트웨어 설계, 8강. 화면 설계-UI 요구사항 확인(1)

 

[ 목차 ]

1. UI의 개념

2. UI의 종류

3. UI의 세 분야

4. UI의 설계 원칙

5. UI 표준

6. UI 표준 - 웹 스타일 가이드

7. UI 표준 - 웹스타일 가이드 구성

8. UI 표준 - 정책

9. UI 지침

10 UI 지침 - 사용자 경험(UX)의 고려사항

13. UI 지침 - 정보소외계층의 접근성

14. UI 지침 - 일관성

15. UI 지침 - 이미지

16. UI 지침 - 기타 설계 지침

 

1. UI의 개념

1) 사람(사용자)과 사물, 시스템, 기계, 컴퓨터 프로그램 등 사이에서 의사소통을 할 수 있도록 일시적 또는 영구적인 접근

    을 목적으로 만들어진 물리적, 가상적 매개체

2) 운영체제, 모니터, 키보드, 마우스, 문자, 아이콘 등

3) 컴퓨터와 인간의 상호작용(HCI)에서 프로그램이 사용자에게 보여주는 화상, 문자, 소리 정보와 프로ㅡ램을 조작하기

    위한 수단(입력, 출력)을 의미

4) 입력 : 사용자가 시스템을 조작할 수 있게 함

5) 출력 : 시스템이 사용가자 이용한 것에 대한 결과를 표시

HCI : 인간과 컴퓨터간의 상호작용에 관한 연구

2. UI의 종류

1) 그래픽 사용자 인터페이스 GUI

  1] 그래픽과 텍스트로 이루어져 있음

  2] 객체지향 인터페이스와 응용 프로그램지향 인터페이스가 공존

2) 웹 기반 인터페이스 WUI

  1] 인터넷과 웹 브라우저를 통해 웹 페이지를 열람하고 조작하는 인터페이스

  2] 사용자가 원하는 정보를 목적에 맞게 보기 편하고 쉽게 사용할 수 있도록 편리성을 제공

3) 명령 줄 인터페이스 CLI

  1] 사용자가 컴퓨터 자판 등을 이용해 명령 문자열을 입력하여 체계를 조작하는 인터페이스

  2] 사용자는 키보드로 문자열을 입력하고 컴퓨터는 물자열로 출력

4) 텍스트 사용자 인터페이스 TUI

  1] 문자열 기반 사용자 인터페이스와 구분하기 위해 그래픽 사용자 인터페이스가 발명된 뒤 만들어진 용어

  2] 명령 줄 인터페이스처럼 문자열을 입력하나 GUI처럼 화면 단위로 출력

5) 터치 사용자 인터페이스

 

3. UI의 세 분야

1) 정보 제공과 기능 전달을 위한 물리적 제어 분야

2) 콘텐츠의 상세적 표현과 전체적 구성에 관한 분야

3) 사용자의 편의성에 맞춰 쉽고 간편하게 사용 가능하게 하는 기능적 분야

 

4. UI의 설계 원칙

1) 직관성 : 누구나 쉽게 이해할 수 있어야 함

2) 유효성 : 사용자의 목적을 정확하게 달성해야 함

3) 학습성 : 누구나 쉽게 배우고 익힐 수 있어야 함

4) 유연성 : 사용자의 요구사항을 최대한 수용하며 오류의 최소화

 

5. UI 표준

1) 조직의 브랜드나 정체성과 일치되는 디자인 철학과 원칙이 기술되어 UI 표준이 정리되고 공통으로 사용하는 UI/GUI

    요소 및 배치규칙 등이 정의

 

6. UI 표준 - 웹 스타일 가이드

1) 웹사이트 개발의 형식적인 표준을 제시하고 있는 지침서

2) 일반적으로 웹 페이지의 형태로 구현되며 대내적으로 개발과 운영을 담당하는 팀에 의해 작성, 보완

3) 목적

  1] 웹사이트 개발 시 비용 감소

  2] 웹사이트 아이덴티티 유지

  3] 사용자 경험과 습관을 보존

4) 필요성

  1] 조직 내 다양한 부서에서 각자의 필요성과 목적에 따라 만들어지는 웹사이트들의 통일성 있는 개발

  2] 웹을 통한 일관된 브랜드 이미지의 구축

  3] 일관된 사용자의 경험 구현

  4] 사이트 유지관리 보수의 편리성

스타일가이드 : 사용자 인터페이스를 만들 때 각종 규칙들의 기준이 되는 집합

 

7. UI 표준 - 웹스타일 가이드 구성

1) Introduction : 웹 스타일 가이드의 기본 활용 및 적용 범위 등 규정

2) Basic Rules : 기본 폰트, 이미지 폰트, 컬러 등을 정의

3) Layout : 각 구성요소를 공간에 효과적으로 배열하는 것으로 업무 유형 및 목적별로 시안을 정의하며 pc, 모바일, 테블

               릿 등 기기의 유형에 따라 주메뉴, 서브메뉴, 고정영역, 가변영역 등으로 구분하여 구체적으로 제시

  1] Indicator : 각종 서비스의 알림 및 수신, 네트워크, 배터리 상태 등을 아이콘화 하여 제공

  2] Header : 기관의로고, 사이트 명을 제공하여 사이트의 정체성을 제공

  3] Navigation : 주로 홈이나 이전 또는 최상위 메뉴 같은 주요 이동만 제공

  4] Footer : 저작권 ,연락처, pc웹으로의 링크 등의 내용이 제공

4) Elements 

  1] 텍스트 : 기본텍스트는 모두 나눔바른고딕을 사용, 강조새글 컬러 사용 가이드에 따라 색조정

  2] 아이콘

  3] 네비게이션 : 메뉴 닫힘/열림

  4] 탭메뉴/페이지 네비게이션 : 가이드를 그대로 사용하거나 응용하여 사용

  5] 버튼 

  6] 테이블

  7] 블릿 : 대-중-소분류

  8] 툴팁 : 말풍선을 의미하여 커서와 함께 동작하고 항목을 가리키면 조그마한 상자가 보충설명

  9 폼 : 데이터를 입력 가능한 부분

 

8. UI 표준 - 정책

1) 웹 스타일 가이드 운영 정책 : 계속적으로 업그레이드, 디자인 개편 시 버전별로 관리

2) 조직의 아이덴티티 유지 정책 : 각 컨텐츠, 서비스의 성격에 맞게 디자인, Look&Fell에 적합하도록 디자인

3) 기본환경 : 메인화면, 서브화면 등 용량규정

  1] 메인-전체 : 1M

  2] 메인-이미지 : 500K

  3] 서브-전체 : 200K

  4] 서브-이미지 : 100K

  5] 공통 아이콘 이미지 : 30K

4) 브라우저 규정-pc

  1] 1280x1024 해상도

  2] 메인 페이지 가로 1100px, 세로 가변

  3] 인터넷 익스플로러 8.0 이상 지원

  4] 화면정렬 : 중앙정렬을 기본

  5] 스크롤 바 : 가로 스크롤 바는 지양, 메인의 경우 2번 이하, 서브 3번 이하

  6] Frame 사용 지양

5) 브라우저 규정 - 모바일

  1] 640x480 해상도

  2] 메인 페이지 가로 600px

  3] 화면정렬 : 중앙정렬을 기본

  4] 스크롤 바 : 가로 스크롤바 금지

  5] Frame 사용 지양

6) 브라우저 규정 - 테브릿

  1] 1024x768

  2] 메인 페이지 가로 825px

  3] 화면정렬 : 중앙정렬을 기본

  4] 스크롤 바 : 가로 스크롤바 금지

  5] Frame 사용 지양

Look & Feel : 보고 그냥 느껴지는 디자인

프레임 : 하나의 웹 브라우저를 2개 이상으로 분할하여 사용하는 것

9. UI 지침

1) 웹/모바일 서비스의 구축 시 효율적 정보 전달을 위해 사용자 인터페이스 설계에서 지켜야 할 세부 상을 규정하는 것

 

10 UI 지침 - 사용자 경험(UX)의 고려사항

1) 사용자 경험 : 사용자가시스템, 제품, 서비스를 직/간접적으로 이용하며 느끼고 생각하게 되는 자각, 반응, 행동의 총체

                      적 경험

2) 사용 대상, 사용 환경, 사용 모걱, 사용 빈도

3) 직관적으로 서비스 이용 방법을 파악할 수 있는 쉬운 사용 방법

4) 모바일 서비스 특성에 적합한 디자인

5) 사용자 입력을 최소화하고 자동 완성 기능 제공

6) 사용자의 입력 실수를 되돌릴 수 있는 기능

UI : 고속도로, 누구나 쉽고 빠르게

UX : 드라이브 코스, 사용자의 경험과 목표를 이해, 충족

11. UI 지침 - 핵심기능의 고려사항

1) 모바일 기기의 화면 크기를 고려하여 메뉴 구조 단순화, 간결한 정보 제공

2) 모바일 환경에서 활용성 높은 기능 중심으로 서비스 제공

3) 서비스 목적에 부합하는 기능 중심의 서비스를 제공

 

12. UI 지침 - 호환성과 확장성의 고려사항

1) 모바일 웹의 경우 기술적 제약이 없는 3개 이상의 브라우저에서 동등한 서비스를 제공

2) 모바일 기기의 화면 해상도에 따라 호환성을 고려하여 사용자 인터페이스 설계

3) 특정 모바일 운여체계에서만 동작하는 기능 지양

 

13. UI 지침 - 정보소외계층의 접근성

1) 모바일 서비스 구축 시 장애인, 고령자 등이 쉽게 접근할 수 있도록 장애인, 고령자 등의 정보 접근 및 이용 편의 증진을 위한 지침을 준수

 

14. UI 지침 - 일관성

1) 모바일 서비스 구축 시 색상, 글자체, 용어 사용 등에 있어서 일관성 유지

 

15. UI 지침 - 이미지

1) 모바일 서비스 구축 시 전송 속도, 전송량 등을 고려하여 경량화된 이미지 제공

2) 성적 표현, 종교, 인종, 여성의 비하 등 사회적 갈등 유발 이지미 금지

3) 단순히 색상과 그래픽에 의존한 서비스 제공 지양

4) 모바일 서비스 구축 시 사용되는 모든 이미지의 저작권 확보

 

16. UI 지침 - 기타 설계 지침

1) 사용자 중심 : 사용자가 이해하기 편하고 쉽게 사용할 수 잇는 환겨을 제공하며 실사용자에 대한 이해가 바탕

2) 단순성 : 조작 방법은 가장 간단하게 작동이 가능하도록 하여 인지적 부담을 감소

3) 결과 예측 가능 : 작동시킬 기능만 보고도 결과 예측이 가능해야 함

4) 가시성 : 주요 기능을 메인 화면에 노출하여 조작이 쉽도록

5) 표준화 : 디자인을 표준화하여 기능 구조의 선행 학습 이후 쉽게 사용할 수 있어야 함

6) 접근성 : 사용자의 직무, 연령, 성별 등 다양한 계층을 수용해야 함

7) 명확성 : 사용자가 개념적으로 쉽게 인지해야 함

8) 오류 발생 해결 : 사용자가 오류에 대한 상황을 정확히 인지해야 함