웹접근성 개선 프로젝트

Copyright GhostCorps Co., Ltd. All rights reserved.ⓒ

고스트코어 웹접근성 인터랙티브 UI 연구소2013. 01. 10

웹접근성 개선 프로젝트

/ 32Enabling Smart Mobile Life with Innovative Technologies

Contents

I. 사업개요

II. 구현방안

III. 실행방안

2


Ⅰ. 사업개요

3

추진배경 및 필요성

추진 배경 및 필요성

사업 목적

Target Spec.

2013 년 4 월 장애인 차별 금지법에 대응하여 웹 접근성 준수 및 개선 필요

홈페이지 및 모바일 웹 환경 개선을 통하여 웹 접근성 준수 및 사용자 편의성 향상 필요

웹 접근성을 준수하여 장애인 , 고령자에게도 정보와 서비스 접근의 이용 , 편의를 제공하는 것에 큰 목적을 둡니다 . 웹 및 모바일 웹 환경을 개선하여 어떠한 환경에서도 안정적으로 서비스를 제공하는 것에 목적을 둡니다 . 웹 표준 및 웹 접근성에 기준하여 UX/UI 를 개선하여 쉽고 편리한 고객 서비스를 제공하는 것에 목적을 둡니다 .

웹 표준 및 웹 접근성 준수 웹 접근성 개선 및 유지보수가 원활한 효과적인 운영체계 구성 방안 IE 및 기타 디바이스를 고려한 크로스 브라우징을 통한 웹 호환성 향상


Ⅰ. 사업개요

사업 범위

웹 접근성 개선 및 웹 호환성 향상

웹 접근성 개선장애인 차별 금지법 통과

웹 및 모바일 웹 환경 개선고객 서비스 안정화

UX/UI 개선사용 편의성 향상

웹 접근성 개선 크로스 브라우징 UX/UI 개선

크로스 플랫폼 기반의 환경 개발 ( IE, 사파리 , 크롬 등 )

각종 Device 에 대한 최적의 환경 설정

KWCAG 2.0 의 모든 내용포함 인식 , 운용의 용이성 확보 이해의 용이성 , 견고성 확보

Creative UI 개선 각종 플랫폼 환경에 최적화 된 UX 환경

제공 웹 접근성을 준수한 UX 환경 제공

4


Ⅰ. 사업개요

제안 적합성 - 전문 협력 업체 구성

신뢰성 , 투입 인력 적절성 , 가격 적절성을 바탕으로 프로젝트 수행에 최적화

해당 기술력의 보유 및 상용화 적용 경험 다수 보유

전문적인 프로젝트 관리 기법을 적용하여 산출 결과물의 품질 보장

10 년 차 웹 / 모바일

솔루션 전문업체

UI/UX 개발 및 상용화

결과물 다수로 품질신뢰

롯데닷컴 , Cjmall,

공공기관 외 다양한

프로젝트 수행

신뢰성

모바일관련 컨텐츠 개발 및 문제 해결 능력 보유

대형 쇼핑몰 사업자 경험 및 노하우 축적

SW QA 전문 인력을 통한 자체 검증 수행 능력 보유

투입 인력 적절성보유 기술 및 유사

프로젝트 경험으로 빠른 시간 내 개발

안정적인 프로젝트 운영 (Testing 기반 )

개발된 제품에 대한 빠르고 안정적인 서비스 제공

가격 및 인력 적절성

크로스 브라우징 및 웹표준

모바일웹 시스템 개발

IOS App. 개발

Android System App. 개발

5


Ⅰ. 사업개요

[ 자체개발 ] Cjmall 웹표준 개발

경량화되고 최적화된 웹표준 UI 개발 HTML ( HTML5 )+ JS + CSS ( CSS3 )

모바일 환경과 부합하는 웹표준 개발로서 , 플래시를 활용한 것과 같은 최적의 동적 UI 개발

Web

제안 적합성 – 유사 프로젝트 개발 경험

2012 년 웹 어워드 종합쇼핑몰부문 대상수상(Dual Main) 혁신 UI 와 효율성

웹 접근성 관련 적용을 고려하여 진행한 상태 .현재 , 웹 접근성 지침 적용 중

6


Ⅰ. 사업개요


모바일 웹 개발

롯데닷컴 모바일 웹 리뉴얼 & 하이브리드 앱 개발

롯데마트 모바일 웹 리뉴얼 & 하이브리드 앱 개발

롯데홈쇼핑 FCC 모바일 웹 신규개발 & 하이브리드 앱 개발

Mobile Web

7


Ⅰ. 사업개요


CJ ticket Mall 웹 사이트 & RIA 예매 서비스 개발

티켓몰 웹 사이트 개발

사용자 중심의 UX/UI 설계 및 개발

쉽고 편리하게 단계별로 진행되는 RIA 예매 서비스 개발

Web & RIA

8


Ⅰ. 사업개요

[ UMIX + 고스트코어 공동개발 ] 웹표준 / 모바일 웹 및 하이브리드 앱 프레임웍

경량화되고 최적화된 컴포넌트들을 제공하는 웹표준 /Mobile Hybrid Platform Framework

HTML ( HTML5 )+ JS + CSS ( CSS3 )

디바이스 매니저 , 네트워크 매니저 , 브라우저 컨트롤러 , 푸시 서비스 , UI 컴포넌트 등 다양한 기능 제공

Hybrid App

제안 적합성 – 프레임웍 개발

9

[ ]II. 구현방안

표준화 요건

주요 기능 목록

주요 기능 구현 방안

표준 프레임워크 및 공통컴포넌트


표준화 요건 – KWCAG2.0 ( 한국형 웹 컨텐츠 접근성 지침 ) 기준

Ⅱ. 구현방안

정보통신의 장애환경 보완1. 시각장애2. 청각장애3. 지체장애4. 언어장애

다양한 환경 보완1. ActiveX 미사용2. 마우스를 활용하지 못하는 경우3. 스마트폰 환경

누구나 , 어디에서나 , 어느 기기에서나 정보제공자가 의도하는 정보를 전달할 수 있고 ,

전달받을 수 있어야 한다 .

11


Ⅱ. 구현방안

표준화 요건 – 장애환경 고려사항 목록

시각장애

지체장애

지체장애1. 상지장애 : 손 사용 불가 -> 마우스 대체 방법2. 기타 : 움직임이 어려움 -> 충분한 시간을 제공

청각장애 사운드 , 오디오 등 청취불가 -> 수화 , 시각정보 제공

언어장애 복잡하거나 어려운 용어 이해 불가능 -> 쉬운 용어 활용

웹 접근성 장애환경 대응

청각장애

언어장애

시각장애1. 전맹 : 모니터 사용 불가 , 마우스 활용이 어려움 -> 스크린리더를 활용해야 함2. 약시 : 모니터 사용이 일부 가능 -> 화면확대 , 고대비 활용3. 색맹 : 색구분 불가 -> 색상에만

의존할 수 없다 . 고대비 활용

12


장애환경구현 핵심내용

Ⅱ. 구현방안

1. 콘텐츠의 인식 ( 대체 텍스트 )

2. 멀티미디어 대체 수단 ( 영상매체의 인식 )

3. 명료성 ( 색상에 무관한 인식 )

4. 키보드 접근성 ( 키보드만으로도 운용가능 )

5. 충분한 시간의 제공 ( 반응시간의 조절 기능 )

6. 광과민성 발작 예방 ( 깜박거리는 객체 사용제한 )

7. 쉬운 네비게이션8. 가독성9. 예측가능성10.콘텐츠의 논리성 ( 데이터 테이블등의 논리적 구성 )

11.입력도움 ( 온라인 서식 구성 )

12.문법 준수13.웹 어플리케이션 접근성

13


최종구현환경에 대한 논리 정의

Ⅱ. 구현방안

14



Ⅱ. 구현방안

1-1. 대체텍스트 1-2. 멀티미디어 대체 수단1-3. 명료성

인식의 용이성

텍스트가 아닌 요소도 텍스트로 인식할 수 있도록

만들어야 한다

Image

Alt 태그의 활용

멀티미디어 자막의 제공

대표 예시 )

15



Ⅱ. 구현방안

2-1. 키보드 접근성 2-2. 충분한 시간의 제공2-3. 광과민성 발작 예방2-4. 쉬운 네비게이션

운용의 용이성

탭키의 흐름도가 정확해야한다 .

Tap 키의 활용

대표 예시 )

16



Ⅱ. 구현방안

3-1. 가독성3-2. 예측 가능성3-3. 컨텐츠의 논리성3-4. 입력 도움

이해의 용이성 대표 예시 )

정확한 언어의 명시

화면낭독기 ( 스크린리더 ) 등이정확하게 읽어줄 수 있도록 선언한다 .

17



Ⅱ. 구현방안

4-1. 문법 준수4-2. 웹 어플리케이션 접근성

견고성

1. 웹 어플리케이션 - 적용범위 : 웹컨텐츠에 내장되어 복수의 웹브라우져에 공통적으로 사용할 수 있는것으로 한정 - 적용대상 : 플러그인 컨텐츠와 자바스크립트로 제작된 프로그램 (Ajax 외 )

2. 플러그인 - 웹컨텐츠 내에 삽입되는 별도의 프로그램 - 플래시 , 플랙스 , 실버라이드 등

3. 구현방법 - 접근성 API 사용 : 플래시 메뉴 사용의 경우 , 탭키를 이용하여 논리적 순서대로 초점이 이동하고 대체 텍스트 제공 .

대표 예시 )

대체 컨텐츠 제공(즉 , 꼭 필요한 경우가 아니라면 플래시 컨텐츠를 되도록 활용하지 않는것이 좋다 .

위와 같은 플래시 메뉴라면 아래와 같은 별도의 컨텐츠를 제공하여야 한다 .

18


주요 기능 목록

Ⅱ. 구현방안

공통 적용

서비스 별 적용

사용 편의성 증진을 위한 UX/UI 개선 웹 접근성 개선 및 웹 호환성 ( Cross Browsing ) 향상

홈 페이지

성능 및 속도 개선

서비스 기존 플래시 RIA 서비스 대체 다국어 서비스 지원

모바일 웹 타블렛 PC 를 포함하는 멀티 디바이스에 대한 안정적인 지원 홈페이지 서비스와 Sync

19


주요 기능 구현 방안 – 홈 페이지

Ⅱ. 구현방안

UX/UI 개선

웹 접근성 개선 및 웹 호환성 향상

Window Style UI 와 같이 TILE 기반의 그룹화되어 있는 영역 분배로 효과적인 콘텐츠에 접근할 수 있도록 UX 개선 .

Ajax 기술을 활용한 비동기 백그라운드 컨텐츠 로딩을 통해서 로딩 체감 속도 개선 레이아웃 로직과 XHTML 규격의 데이터 구조를 완벽히 분리하여 웹 접근성에 문제가 발생하지 않도록 설계 XHTML 1.0 규격과 CSS 를 사용하여 여러 브라우저에서 거의 동일하게 볼 수 있도록 크로스브라우징 이슈 해결 동적인 움직임이 자주 발생하는 애니메이션의 경우 Jquery 기반 플러그인을 활용하여 처리하여 플래시와 같은 플러그인 기반의 콘텐츠 지양

20


주요 기능 구현 방안 – 예매

Ⅱ. 구현방안

UX/UI 개선

웹 접근성 개선 및 보안 강화

현재 웹 상태를 명확히 확인할 수 있는 UI / UX 제공

플래시를 사용하지 않고 Ajax 기술과 Jquery 를 통해 리치 인터넷 애플리케이션 기능 구현 서버 측 메시지 딕셔너리 구조와 템플릿 구조 설계를 통한 다국어 서비스 지원 JSON 기반의 통신 프로토콜을 사용하여 네트워크 트래픽 절감 SSL 통신을 통한 보안 통신 서버 측 로직을 통해 클라이언트의 Javascript 파일 로딩을 제어하여 소스가 노출되지 않도록 설계 ( Fake URI 방식을 활용 )

HEX 로 인코딩된 JS URL 주소 핸들링 ( http://ostermiller.org/calc/encode.html )

기존 플래시등에서 결제 처리를 수행하던 프로세스는 웹표준 클라이언트로 대체하여 빌링 서버와 통신을 수행하고 결과를 처리

21

http://ostermiller.org/calc/encode.html


주요 기능 구현 방안 – 모바일 웹 :: 빠른 이미지 로딩

Ⅱ. 구현방안

다음에 표시될 예측 가능한 이미지 순차적으로 미리 로딩

Web View

로딩된 이미지 데이터 전달

상품 상세에 표시될 다량의 이미지를 성능 저하 없이 불러오기 위해 ,

웹페이지단에서 Background 로 예측 가능한 이미지를 순차적으로 미리 로딩하여 Web View 에 전달 Web View 에서 다음에 표시될 이미지 요청시 ( 스크롤 혹은 다음 페이지 로딩 시 ) 페이지 단에서 미리 로딩해 두었던 데이터를 전달

다음에 표시될 이미지 요청

활용 사례 ex> Cjmall.com

Background

22

[ ]Ⅲ. 인원현황


투입인력 총괄

Ⅲ. 실행방안

구분 분야별 성명 기술등급 담당업무

총괄 PM 안진연 특급 PM , 총괄 기획

기획 기획 , UI/UX 설계 이연선 고급 PL , UX/UI 기획

디자인 , 기획 김회광 고급 PL , 디자인 기획

UI 개발

HTML 퍼블리셔 고영우 고급 PL , HTML 설계 , 웹 표준

HTML 퍼블리셔 한상훈 고급 UI 개발

HTML 퍼블리셔 송은미 중급 UI 개발

HTML 퍼블리셔 이현정 중급 UI 개발

HTML 퍼블리셔 노경민 고급 UI 개발

HTML 퍼블리셔 이윤범 중급 UI 개발

HTML 퍼블리셔 이유란 초급 UI 개발

서버사이드 개발

Serverside 개발자 한재준 고급 PL , Serverside 외

Serverside 개발자 김현태 중급 Serverside 외

디자인

디자이너 윤지애 중급 디자인

디자이너 유경숙 중급 디자인

디자이너 최정은 초급 디자인

QA QA 표종락 고급 QA

각 분야별 다수의 경험을 보유한 전문 인력을 투입하여 프로젝트 수행에 최적화 하였습니다 .

24

[ ]Thank you.

| ㈜고스트코어

본사 : 서울시 강남구 역삼동 828-5 청원빌딩 2 층

모바일 연구소 : 서울시 영등포구 여의도동 44-1 대영빌딩 1111 호

Tel. 02-548-9556 | Fax. 02-548-9526

Documents

웹접근성 개선 프로젝트