UI 표준

사용자 인터페이스 (UI : User Interface)

UI의 개요

• 주로 사용자나 컴퓨터 간의 상호작용이 원활하도록 도와주는 하드웨어 및 소프트웨어
• UI에 따라서 사용자 소프트웨어 이용방식이 결정된다.
• 사용자가 시스템을 조작하는 입력 수단과 시스템이 정보를 표시하는 출력 수단으로 나뉜다.
• 물리적 제어, 기능적 제어, 전체 구성의 제어등으로 나뉜다.

 

UI의 특징

• 사용자의 소프트웨어 만족도에 가장 큰 영향을 준다.
• 편리성과 가독성 향상에 의해 작업 시간을 단축시킨다.
• 수행결과의 오류를 줄이고 기능 수행에 대한 방법을 제시한다.
• 소프트웨어 아키텍처를 기반으로 설계되며, 가장 빈번하게 수정된다.

 

UI의 종류

• CLI
  • 명령 문자열을 통해 시스템과 상호작용하는 UI이다.
  • DOS, Linux, 명령 프롬프트등에서 사용된다.
• GUI
  • 메뉴, 아이콘 등의 그래픽 요소를 통해 시스템과 상호작용하는 UI이다.
  • windows, mac OS등에서 사용된다.
• NUI
  • 사람의 음성, 온도, 터치 등을 통해 시스템과 상호작용하는 UI이다.
  • 스마트폰, 지문 인식등에서 사용된다.

 

UI 설계 기본 원칙

• 직관성 - 가급적 별 다른 이해 없이 즉시 사용할 수 있어야 한다.
• 일관성 - 기능 및 시각적 요소의 일치로 학습하기 용이해야 한다.
• 효율성 - 사용자의 목적을 정확하고 빠르게 달성할 수 있어야 한다.
• 유연성 - 사용자의 요구를 수용하고 실수를 수정할 수 있어야 한다.

 

UI 설계 시 고려사항

1. 표준화
   • 기능 구조를 단순화하여 쉽게 조작하고 누구나 명확히 이해할 수 있어야 한다.
   • 폰트, 색상, 용어 선택에 일관성이 있도록 한다.
2. 호환성
   • 다양한 플랫폼과 브라우저에서 동등한 서비스를 제공하도록 설계한다.
3. 접근성
   • 다양한 계층에서 접근할 수 있도록 설계한다.
4. 사용자 중심
   • 실 사용자가 쉽게 이해하고 사용할 수 있는 환경을 제공하도록 설계한다.
5. 결과 예측
   • 특정 기능에 대한 결과를 미리 예측할 수 있도록 설계한다.
6. 오류 해결
   • 오류에 대한 내용을 사용자가 쉽게 인지할 수 있고 해결할 수 있도록 설계한다.

 

UI 표준

UI 표준의 정의

화면 구성, 화면 이동 등의 UI에 공통적으로 적용되는 내용을 의미한다.

 

웹 스타일 가이드 구성

Instruction : 웹 스타일 가이드의 기본 활용 및 적용 범위 등을 정한다.

Basic Rules : 색상, 폰트, 아이콘 등을 정한다.

Layout : 작업 유형이나 목적별로 시안을 정한다. 주 메뉴와 서브 메뉴 위치, 고정 영역과 가변 영역등을 구체적으로 정한다.

Element : 텍스트, 아이콘, 내비게이션, 메뉴, 버튼 등을 정한다

• Command 버튼 - 특정 명령을 실행
• Toggle 버튼 - 하나의 버튼으로 T, F 결정
• Radio 버튼 - 다중 항목 중 하나의 값만 선택
• Check 버튼 - 다중 항목 중 여러 값을 중복 선택
• Text 박스 - 사용자 입력 문자열을 입력, 표시
• Combo 박스 - 드롭 다운 리스트 중 하나의 항목을 선택 

 

레이아웃 구성요소

1. Indicator - 서비스 상태 알림 및 각종 상태를 아이콘과 기호로 제공한다.
2. Header - 회사 로고, 사이트명 등을 제공한다.
3. Navigation - 웹 페이지에서 자신의 경로 위치를 제공한다.
4. Contents Area - 정보를 제공한다.
5. Footer - 저작권 정보, 전화번호, E-메일 등을 제공한다.

 

UI 지침

UI 지침의 정의

UI개발 과정에서 꼭 지켜야 할 공통의 조건이나 세부 사항을 규정하는 것이다.

 

한국형 웹 콘텐츠 접근성 지침

1. 인식의 용이성
   • 텍스트가 아닌 콘텐츠에서는 그 의미를 인식할 수 있는 대체 텍스트를 제공한다.
   • 멀티미디어 콘텐츠에 대한 대체 수단을 제공해야 한다.
   • 콘텐츠는 데이터 종류에 상관없이 명료하게 전달되어야 한다.
2. 운용의 용이성
   • 콘텐츠는 키보드만으로도 접근할 수 있어야 한다.
   • 콘텐츠를 이용할 수 있는 충분한 시간을 제공해야한다.
   • 광과민성 발작을 일으킬 수 있는 콘텐츠는 제공하지 말아야 한다.
   • 쉽고 편리하게 콘텐츠에 접근할 수 있는 수단을 제공해야 한다.
3. 이해의 용이성
   • 콘텐츠는 읽고 이해하기 쉬워야 한다.
   • 콘텐츠의 기능과 실행 결과는 예측이 가능해야 한다.
   • 콘텐츠는 선행구조로 논리적인 순서를 제공해야 한다.
   • 입력 오류를 방지하고나 정정할 수 있어야 한다.
4. 견고성
   • 웹 콘텐츠는 마크업 언어의 문법을 준수해야 한다.
   • 다양한 계층이 이용할 수 있도록 접근성을 제공해야 한다.

 

전자정부 웹 표준 준수 지침

1. 내용의 문법 준수
   • 모든 웹 문서는 적절한 문서 타입을 명시해야 한다.
   • 명시한 문서 타입에 맞는 문법을 준수해야 한다.
   • 모든 페이지는 사용할 인코딩 방식을 표기해야 한다.
2. 내용과 표현의 분리
   • 논리적인 마크업 언어를 사용하여 웹 문서를 구조화해야 한다.
   • 사용된 스타일 언어는 표준적인 문법을 준수해야 한다.
3. 동작의 기술 중립성 보장
   • 스크립트의 비표준 문법을 확장하는 것은 배제해야 한다.
   • 스크립트 비사용자를 위해 대체 텍스트나 정보를 적용해야 한다.
4. 플러그인의 호환성
   • 플러그인은 다양한 웹 브라우저에서 호환되는 것을 사용해야 한다.
5. 콘텐츠의 보편적 표현
   • 메뉴는 다양한 브라우저에서 접근할 수 있어야 한다.
   • 웹 사이트를 다양한 인터페이스로 이용할 수 있어야 한다.
6. 운영체제에 독립적인 콘텐츠 제공
   • 제공되는 미디어는 운영체제에 종속되지 않은 범용적인 포맷을 사용해야 한다.
7. 부가 기능의 호환성 확보 
   • 실명인증, 전자인증 등의 부가 기능은 다양한 브라우저에서 사용할 수 있어야 한다.
8. 다양한 프로그램 제공
   • 정보를 열람하는 기능은 다양한 브라우저에서 사용할 수 있어야 한다.
   • 별도의 다운로드가 필요한 프로그램은 윈도우, 리눅스., 매킨토시중 2개의 운영체제를 지원해야 한다.