UI 구현 표준 검토하기

UI 표준 관련 기준 파악

고객 요구사항, 접근성 기준, 플랫폼에 대한 UI표준 관련 기준을 파악할 수 있다.

UI 구현 표준의 정의

UI 구현 표준은 사용자의 사용성 향상과 개발자의 개발 효율성을 높이기 위하여 프로젝트 초기에 정의한다. 화면 간에 공통으로 구성되는 화면구성(예: 내비게이션, 고정영역, 가변 영역) 및 화면요소(예: 버튼, 폰트 등의 크기 및 색상)에 대하여 최소한으로 정의해 두는 공통 규격이다.

UI 구현 표준의 구성 요소

1. UX 원칙

시스템 및 제품의 UX는 사용자 제어가 가능하고, 사용자와 편리한 상호작용이 가능하며, 사용자의 시행착오를 최소화할 수 있는 원활한 사용성을 제공하고, 일관성 높은 인터페이 스를 제공 시 직관적이고 예측 가능한 기능 및 서비스 제공이 가능해야 한다.

사용자 제어 가능한 인터페이스

사용자 제어 가능한 인터페이스 원칙의 항목

항목	내용
작업 취소	사용자가 기능의 취소와 실행을 빠르게 수행할 수 있어야 함. - 오류로 인해 빠른 실행이 원활하지 않으면, 사용자는 기능 실행에 대 한 부담을 느끼게 됨.
간편한 인터페이스 구현	- 시각적인 정보를 제공하여서 사용자가 시스템 내 이동을 원활하게 할 수 있어야 함. - 예측 가능한 정보를 제공해서 원하는 버튼과 기능을 쉽게 알 수 있어 야 함
시스템 상태에 대한 표시	- 사용자가 현재 상태에 대한 정보를 주기적으로 제공 받아야 함. - 진행 상태 표시를 통해 사용자에게 편의성을 제공해야 함.

편리한 상호작용

편리한 상호작용 원칙의 항목

항목	내용
불필요한 요소 제거	연관성 없는 정보나 불필요한 정보를 포함하면 안 됨. - 효과적이고 연관성 높은 UI를 제공하기 위해 가급적 많은 정보가 화면 에 표시되어야 함.
데이터 최소화	- 이미 입력한 데이터는 다시 입력하도록 요청하도록 해야 함.
전문 용어 자제	- 쉽게 읽고 이해 가능한 언어 사용함. - 시스템 기반 용어 사용을 자제하고 사용자에게 익숙한 단어 사용함.

사용자의 원활한 사용성

사용자의 원활한 사용성 원칙의 항목

항목	내용
정보 분할	- 디자인 시 항목을 구성하고 그룹화하여 정보를 구성해야 함. - 한번에 인지하는 단위로 정보를 분할해야 함.
동작 수 최소화	사용자 목표를 달성하는 데 필요한 동작의 수를 최소화함. - 사용자가 정보 검색 시 버튼을 3번 이상 클릭하게 하면 안 됨
인식 강화	- 정보와 기능성을 가시화하고 간편한 액세스를 제공 - 툴팁이나 컨텍스트 정보의 사용자 정보 인식을 강화

일관성 높은 인터페이스

일관성 높은 인터페이스 원칙의 항목

항목	내용
시각적 일관성	- 제품에 대한 신뢰를 갖고 사용할 수 있어야 함. - 글꼴, 아이콘 등은 제품 전체에 일관적으로 적용되어야 함. - 특별한 이유 없이 제품 내 스타일을 변경하면 안 됨.
기능적 일관성	- 인터페이스 전체에 동일한 방식으로 기능이 작동해야 함. - 사용자는 예상되지 않은 기능의 작동에 불편함을 느낌.
지속적 사용자 기대	- 플랫폼 표준을 준수해서 개별 인터페이스 요소를 이해할 수 있어야 함. - 디자인 규범을 지키지 않은 경우, 사용자 경험 제공 시 사용성에 문제 직면 가능화

2. 화면 구성

정보와 서비스를 제공하는 콘텐츠 영역을 명확히 구분한다. header영역/contents영역 /footer영역으로 구분하여 화면을 구성한다.

3. 업무별 구성

여러 화면에서 공통적으로 나타나는 입력, 검색, 목록, 페이징, 내비게이션 등의 작동 방 식 및 경로를 정의하여 패턴으로 구성한다.

4. 화면 레이아웃 정의

화면을 구성하는 레이아웃의 정의는 콘텐츠 운영을 효율적으로 하기 위하여 사용자 중심 의 인터페이스를 구축하는 데 그 목적이 있다.

웹 표준, 웹 접근성, 웹 호환성

1. 웹 표준

웹 기술을 표준화하기 위한 일련의 단계와 요구사항이다. 플러그인 기술(예: 액티브X 등) 과 같은 비표준 기술을 배제하고, W3C(World Wide Web Consortium)에서 나온 권고안을 사용하는 것을 말하며, 웹 문서의 구조와 표현, 동작을 구분해서 사용하는 것을 뜻한다.

웹 표준 검사 항목

검사 항목	내용
코드 품질	1. 올바른 Doctype 사용 여부 2. Character set 포함 여부 3. (X)HTML 사용 여부 4. 표준 준수하는 CSS 사용 여부 5. 불필요한 class, id 사용 여부 6. 사이트 링크 오류 여부 7. javascript 오류 여부.
내용과 정보의 분리	1. 페이지 표현 형식(폰트, 색상 등)을 위한 CSS 사용 여부 2. 표현을 위한 이미지 CSS 정의 여부
사용자 접근 용이성	1. 설명 그림에 ‘alt' 속성 적용 여부 2. 글자 크기의 상대 단위 적용 여부 3. 글꼴 크기에 따른 전체 페이지의 배치 구조 변경 여부 4. 접근 쉬운 table 사용 여부 5. 색상과 밝기의 대비 충분 여부 6. 시각장애인을 위하여 연결될 페이지가 내용을 설명해주는 이름으로 구성되어 있는지 여부
장치 접근 용이성	1. 브라우저의 모든 버전에서의 접근성 여부 2. CSS 미지원되는 상태에서 접근 가능 여부 3. 그림 미표시 상태에서 접근 가능 여부 4. 사이트 내용에 대해 용이한 인쇄 가능 여부 5. 다양한 크기의 브라우저 창에서의 작동 가능 여부
기본적인 접근 용이성	1. 명확하고 가시적인 계층구조 구성 여부 2. 머리말 단계별 구별 가능 여부 3. 쉽게 이해 가능한 이동 수단 보유 여부 4. link 내용에 밑줄 적용 여부 5. 내용의 일관성 있고 적절한 언어 구사 여부 6. 검색 기능 유무 7. 첫 페이지 이동 link 유무 8. 방문 페이지의 독자적인 색상 구별 가능 여부
관리 사항	1. 404 오류 페이지 보유 여부 2. 쉬운 URL 사용 여부 3. “www” 없이 URL의 작동 여부

2. 웹 접근성

장애를 가진 사람과 장애를 갖지 않은 사람 모두가 웹사이트를 이용할 수 있게 하는 방식 을 가리킨다. 사이트가 올바르게 설계되어 개발되고 편집되어 있을 때 모든 사용자는 정 보와 기능에 동등하게 접근할 수 있다. 한국형 웹 콘텐츠 접근성 지침 2.1 문서는 웹 콘텐 츠의 접근성을 향상시키기 위한 기술적 규격을 포함하고 있다.

한국형 웹 콘텐츠 접근성 지침 2.1의 주요 항목

원칙	지침
인식의 용이성	대체 텍스트, 멀티미디어 대체 수단, 명료성
운용의 용이성	입력장치 접근성, 충분한 시간 제공, 광과민성 발작 예방, 쉬운 내비게이션
이해의 용이성	가독성, 예측 가능성, 콘텐츠의 논리성, 입력 도움
견고성	문법 준수, 웹 애플리케이션 접근성

3. 웹 호환성

웹사이트가 작동하는 서비스 이용자 단말기(PC, 모바일기기 등)의 하드웨어 및 소프트웨 어 환경이 다른 경우에도 동등한 서비스를 제공하는 것을 말한다. 전자정부서비스 웹 호 환성 지침은 행정기관 및 공공기관이 전자정부서비스의 호환성 확보를 위해 지켜야 할 사 항을 규정함을 목적으로 한다.

전자정부서비스 웹 호환성 진단표

구분	진단지표
1. 웹 표준 문법 준수	표준(X)HTML 문법 준수 여부, 표준 CSS 문법 준수 여부
2. 웹 호환성 확보	기능 호환성 확보 여부, 화면 표시 호환성 확보 여부
3. 비표준 기술 제거	비표준 기술 제거 여부, 최신 웹 표준기술 사용 여부
견고성	문법 준수, 웹 애플리케이션 접근성