[정보처리기사] UI 표준 ( 정리, 공부 )

UI 표준

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

1) UI의 개요

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

2) UI의 특징

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

3) UI의 종류

① CLI(Command Line Interface)

• 명령 문자열을 통해 시스템과 상호작용하는 UI
• DOS, Linux, 명령 프롬프트 등에서 사용

② GUI(Graphic User Interface)

• 메뉴, 아이콘 등의 그래픽 요소를 통해 시스템과 상호작용하는 UI
• windows, mac OS 등에서 사용

③ NUI(Natural User Interface)

• 사람의 음성, 온도, 터치 등을 통해 시스템과 상호작용하는 UI
• 스마트폰, 지문 인식 등에서 사용

4) UI 설계 기본 원칙

① 직관성 : 가급적 별다른 이해 없이 즉시 사용할 수 있어야 한다.

② 일관성(학습성) : 기능 및 시각적 요소의 일치로 학습하기 용이해야 한다.

③ 효율성(유효성) : 사용자의 목적을 정확하고 빠르게 달성할 수 있어야 한다.

④ 유연성 : 사용자의 요구를 수용하고 실수를 수정할 수 있어야 한다.

5) UI 설계 시 고려사항

① 표준화

기능 구조를 단순화하여 쉽게 조작하고 누구나 명확히 이해할 수 있도록 한다.

폰트, 색상, 용어 선택에 일관성이 있도록 한다.

② 호환성 : 다양한 플랫폼과 브라우저에서 동등한 서비스를 제공하도록 설계한다.

③ 접근성 : 다양한 계층에서 접근할 수 있도록 설계한다.

④ 결과 예측 : 특정 기능에 대한 결과를 미리 예측할 수 있도록 설계한다.

⑤ 오류 해결 : 오류에 대한 내용을 사용자가 쉽게 인지할 수 있고 해결할 수 있도록 설계한다.

---

UI 표준

1) UI 표준의 정의

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

2) 웹 스타일 가이드 구성

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

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

③ Layout

작업 유형이나 목적별로 시안을 정한다.

주 메뉴와 서브 메뉴 위치, 고정 영역과 가변 영역 등을 구체적으로 정한다.

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

• 명령(Command) 버튼 : 특정 명령(페이지 이동, 양식 전송 등)을 실행
• 토클(Toggle) 버튼 : 하나의 버튼으로 두 상태(on/off 등)을 번갈아가며 선택
• 라디오(Radio) 버튼 : 다중 항목 중 하나의 값만 선택
• 체크(Check) 박스 : 다중 항목 중 여러 값을 중복 선택
• 텍스트(Text) 박스 : 사용자 입력 문자열을 입력, 표시
• 콤보(Combo) 박스 : 드롭다운 리스트 중 하나의 항목을 선택

3) 레이아웃의 구성 요소

① Indicator : 서비스 상태 알림 및 각종 상태를 아이콘과 기호로 제공한다.

② Header : 회사 로고, 사이트명 등을 제공한다.

③ Navigation : 웹 페이지에서 자신의 경로 위치를 제공한다.

④ Contents Area : 정보를 제공한다.

⑤ Footer : 저작권 정보, 전화번호, E-메일 등을 제공한다.

---

UI 지침

1) UI 지침의 정의

• UI 개발 과정에서 꼭 지켜야 할 공통의 조건이나 세부 샇아을 규정하는 것

2) 한국형 웹 콘텐츠 접근성 지침 (KWCAG : Korea Web Content Accessibility Guidelines)

① 인식의 용이성

• 텍스트가 아닌 콘텐츠에는 그 의미를 인식할 수 있는 대체 텍스트를 제공해야한다.
• 멀티미디어 콘텐츠에 대한 대체 수단을 제공해야 한다.
• 콘텐츠는 데이터 종류에 상관없이 명료하게 전달되어야 한다.

② 운용의 용이성

• 콘텐츠는 키보드만으로도 접근할 수 있어야 한다.
• 콘텐츠를 이용할 수 있는 충분한 시간을 제공해야 한다.
• 광과민성 발작을 일으킬 수 있는 콘텐츠는 제공하지 말아야 한다.
• 쉽고 편리하게 콘텐츠에 접근할 수 있는 수단을 제공해야 한다.

③ 이해의 용이성

• 콘텐츠는 읽고 이해하기 쉬워야 한다.
• 콘텐츠의 기능과 실행 결과는 예측이 가능해야 한다.
• 콘텐츠는 선행 구조로 논리적인 순서를 제공해야 한다.
• 입력 오류를 방지하거나 정정할 수 있어야 한다.

④ 견고성

• 웹 콘텐츠는 마크업 언어의 문법을 준수해야 한다.
• 다양한 계층이 이용할 수 있도록 접근성을 제공해야 한다.

3) 전자정보 웹 표준 준수 지침

① 내용의 문법 준수

• 모든 웹 문서는 적절한 문서 타입을 명시해야 한다.
• 명시한 문서 타입에 맞는 문법을 준수해야 한다.
• 모든 페이지는 사용할 인코딩 방식을 표기해야 한다.

② 내용과 표현의 분리

• 논리적인 마크업 언어를 사용하여 웹 문서를 구조화해야 한다.
• 사용된 스타일 언어는 표준적인 문법을 준수해야 한다.

③ 동작의 기술 중립성 보장

• 스크립트의 비표준 문법을 확장하는 것은 배제해야 한다.
• 스크립트 비사용자를 위해 대체 텍스트나 정보를 적용해야 한다.

④ 플러그인의 호환성 : 플러그인은 다양한 웹 브라우저에서 호환되는 것을 사용해야 한다.

⑤ 콘텐츠의 보편적 표현

• 메뉴는 다양한 브라우저에서 접근할 수 있어야 한다.
• 웹 사이트를 다양한 인터페이스로 이용할 수 있어야 한다.

⑥ 운영체제에 독립적인 콘텐츠 제공 : 제공되는 미디어는 운영체제에 종속적이지 않은 범용적인 포맷을 사용해야 한다.

⑦ 부가 기능의 호환성 확보 : 실명인증, 전자인증 등의 부가 기능은 다양한 브라우저에서 사용할 수 있어야 한다.

⑧ 다양한 프로그램 제공

• 정보를 열람하는 기능은 다양한 브라우저에서 사용할 수 있어야 한다.
• 별도의 다운로드가 필요한 프로그램은 윈도우, 리눅스, 매킨토시 중 2개 이상의 운영체제를 지원해야 한다.

---

※ <이기적> 환상의 콤비 정보처리기사 책으로 공부하며 정리한 내용입니다.