웹접근성 개선 프로젝트

1. 웹접근성 개선 프로젝트 고스트코어웹접근성인터랙티브UI연구소2013. 01. 10

2. Contents 사업개요 구현방안 실행방안

3. Ⅰ. 사업개요 추진배경 및 필요성 추진 배경 및 필요성 • 2013년 4월 장애인 차별 금지법에 대응하여 웹 접근성 준수 및 개선 필요 • 홈페이지 및 모바일 웹 환경 개선을 통하여 웹 접근성 준수 및 사용자 편의성 향상 필요 사업 목적 • 웹 접근성을 준수하여 장애인, 고령자에게도 정보와 서비스 접근의 이용, 편의를 제공하는 것에 큰 목적을 둡니다. • 웹 및 모바일 웹 환경을 개선하여 어떠한 환경에서도 안정적으로 서비스를 제공하는 것에 목적을 둡니다. • 웹 표준 및 웹 접근성에 기준하여 UX/UI 를 개선하여 쉽고 편리한 고객 서비스를 제공하는 것에 목적을 둡니다. Target Spec. • 웹 표준 및 웹접근성 준수 • 웹접근성 개선 및 유지보수가 원활한 효과적인 운영체계 구성 방안 • IE 및 기타 디바이스를 고려한 크로스 브라우징을 통한 웹 호환성 향상

4. Ⅰ. 사업개요 사업 범위 UX/UI 개선 사용 편의성 향상 웹 및 모바일 웹 환경 개선 고객 서비스 안정화 웹 접근성 개선 장애인 차별 금지법 통과 웹 접근성 개선 및 웹 호환성 향상 웹 접근성 개선 UX/UI 개선 크로스 브라우징 • 크로스플랫폼 기반의 환경개발 • ( IE, 사파리, 크롬 등 ) • 각종 Device 에 대한 최적의 환경 설정 • KWCAG 2.0의 모든 내용포함 • 인식, 운용의 용이성 확보 • 이해의 용이성, 견고성 확보 • Creative UI 개선 • 각종 플랫폼 환경에 최적화 된 UX 환경 제공 • 웹접근성을준수한 UX환경 제공

5. Ⅰ. 사업개요 제안 적합성 - 전문 협력 업체 구성 • 신뢰성, 투입 인력 적절성, 가격 적절성을 바탕으로 프로젝트수행에 최적화 • 해당 기술력의 보유 및 상용화 적용 경험 다수 보유 • 전문적인 프로젝트 관리 기법을 적용하여 산출 결과물의 품질 보장 • 10년 차 웹/모바일 솔루션 전문업체 • UI/UX개발 및 상용화 결과물 다수로 품질신뢰 • 롯데닷컴, Cjmall, 공공기관 외 다양한 프로젝트 수행 신뢰성 • 모바일관련컨텐츠 개발 및 문제 해결 능력 보유 • 대형 쇼핑몰 사업자 경험 및 노하우 축적 • SW QA전문 인력을 통한 자체 검증 수행 능력 보유 투입 인력 적절성 • 보유 기술 및 유사 프로젝트 경험으로 빠른 시간 내 개발 • 안정적인 프로젝트 운영 (Testing 기반) • 개발된 제품에 대한 빠르고 안정적인 서비스 제공 가격 및 인력 적절성 Android System App. 개발 IOS App. 개발 크로스 브라우징 및 웹표준 모바일웹 시스템 개발

6. Ⅰ. 사업개요 제안 적합성 – 유사 프로젝트 개발 경험 Web 2012년 웹 어워드종합쇼핑몰부문 대상수상 (Dual Main) 혁신UI와 효율성 웹 접근성 관련 적용을 고려하여 진행한 상태. 현재, 웹 접근성 지침 적용 중

7. Ⅰ. 사업개요 제안 적합성 – 유사 프로젝트 개발 경험 Mobile Web

8. Ⅰ. 사업개요 제안 적합성 – 유사 프로젝트 개발 경험 Web & RIA

9. Ⅰ. 사업개요 제안 적합성 – 프레임웍 개발 Hybrid App

10. II. 구현방안 • 표준화 요건 • 주요 기능 목록 • 주요 기능 구현 방안 • 표준 프레임워크 및 공통컴포넌트

11. Ⅱ. 구현방안 표준화 요건 – KWCAG2.0 (한국형 웹 컨텐츠접근성 지침) 기준 누구나, 어디에서나, 어느 기기에서나 정보제공자가 의도하는 정보를 전달할 수있고, 전달받을 수 있어야 한다. 정보통신의 장애환경 보완 시각장애 청각장애 지체장애 언어장애 다양한 환경 보완 ActiveX 미사용 마우스를 활용하지 못하는 경우 스마트폰 환경

12. Ⅱ. 구현방안 표준화 요건 – 장애환경 고려사항 목록 • 시각장애 • 1. 전맹: 모니터 사용 불가, 마우스 • 활용이 어려움 -> 스크린리더를 • 활용해야 함 • 2. 약시 : 모니터 사용이 일부 가능 • -> 화면확대, 고대비 활용 • 3. 색맹 : 색구분 불가 -> 색상에만 의존할 수 없다. 고대비 활용 • 청각장애 • 사운드, 오디오 등 청취불가 • -> 수화, 시각정보 제공 • 시각 • 장애 • 청각 • 장애 웹 접근성 장애환경 대응 • 언어장애 • 복잡하거나 어려운 용어 • 이해 불가능 -> 쉬운 용어 • 활용 • 지체장애 • 1. 상지장애: 손 사용 불가 • -> 마우스 대체 방법 • 2. 기타 : 움직임이 어려움 • -> 충분한 시간을 제공 • 지체 • 장애 • 언어 • 장애

13. Ⅱ. 구현방안 장애환경구현 핵심내용 콘텐츠의 인식(대체 텍스트) 멀티미디어 대체 수단 (영상매체의 인식) 명료성 (색상에 무관한 인식) 키보드 접근성(키보드만으로도 운용가능) 충분한 시간의 제공 (반응시간의 조절 기능) 광과민성 발작 예방 (깜박거리는 객체 사용제한) 쉬운 네비게이션 가독성 예측가능성 콘텐츠의 논리성 (데이터 테이블등의 논리적 구성) 입력도움 (온라인 서식 구성) 문법 준수 웹 어플리케이션 접근성

14. Ⅱ. 구현방안 최종구현환경에 대한 논리 정의

15. Ⅱ. 구현방안 최종구현환경에 대한 논리 정의 인식의 용이성 대표 예시) Image 1-1. 대체텍스트 1-2. 멀티미디어 대체 수단 1-3. 명료성 텍스트가 아닌 요소도 텍스트로 인식할 수 있도록 만들어야 한다 Alt 태그의 활용 멀티미디어 자막의 제공

16. Ⅱ. 구현방안 최종구현환경에 대한 논리 정의 대표 예시) 2-1. 키보드 접근성 2-2. 충분한 시간의 제공 2-3. 광과민성 발작 예방 2-4. 쉬운 네비게이션 운용의 용이성 탭키의 흐름도가 정확해야 한다. Tap 키의 활용

17. Ⅱ. 구현방안 최종구현환경에 대한 논리 정의 이해의 용이성 대표 예시) 3-1. 가독성 3-2. 예측 가능성 3-3. 컨텐츠의 논리성 3-4. 입력 도움 정확한 언어의 명시 화면낭독기(스크린리더) 등이 정확하게 읽어줄 수 있도록 선언한다.

18. Ⅱ. 구현방안 최종구현환경에 대한 논리 정의 4-1. 문법 준수 4-2. 웹 어플리케이션 접근성 견고성 대표 예시) 1. 웹 어플리케이션 - 적용범위 : 웹컨텐츠에 내장되어 복수의 웹브라우져에 공통적으로 사용할 수 있는것으로 한정 - 적용대상 : 플러그인 컨텐츠와 자바스크립트로 제작된 프로그램(Ajax 외) 2. 플러그인 - 웹컨텐츠 내에 삽입되는 별도의 프로그램 - 플래시, 플랙스, 실버라이드 등 3. 구현방법 - 접근성API 사용 : 플래시 메뉴 사용의 경우, 탭키를 이용하여 논리적 순서대로 초점이 이동하고 대체 텍스트 제공. 위와 같은 플래시 메뉴라면 아래와 같은 별도의 컨텐츠를 제공하여야 한다. 대체 컨텐츠 제공 (즉, 꼭 필요한 경우가 아니라면 플래시 컨텐츠를 되도록 활용하지 않는것이 좋다.

19. Ⅱ. 구현방안 주요 기능 목록 공통 적용 • 사용 편의성 증진을 위한 UX/UI 개선 • 웹 접근성 개선 및 웹 호환성( Cross Browsing ) 향상 서비스 별 적용 • 홈 페이지 • 성능 및 속도 개선 • 서비스 • 기존 플래시 RIA 서비스 대체 • 다국어 서비스 지원 • 모바일 웹 • 타블렛PC를 포함하는 멀티 디바이스에 대한 안정적인 지원 • 홈페이지 서비스와 Sync

20. Ⅱ. 구현방안 주요 기능 구현 방안 – 홈 페이지 UX/UI 개선 Window Style UI 와 같이 TILE 기반의 그룹화되어 있는 영역 분배로 효과적인 콘텐츠에 접근할 수 있도록 UX 개선. 웹접근성 개선 및 웹 호환성 향상 • Ajax기술을 활용한 비동기 백그라운드 컨텐츠 로딩을 통해서 로딩 체감 속도 개선 • 레이아웃 로직과XHTML 규격의 데이터 구조를 완벽히 분리하여 웹 접근성에 문제가 발생하지 • 않도록 설계 • XHTML 1.0규격과 CSS 를 사용하여 여러 브라우저에서 거의 동일하게 볼 수 있도록 크로스브라우징 • 이슈 해결 • 동적인 움직임이 자주 발생하는 애니메이션의 경우 Jquery 기반 플러그인을 활용하여 처리하여 • 플래시와 같은 플러그인 기반의 콘텐츠 지양

21. Ⅱ. 구현방안 주요 기능 구현 방안 – 예매 UX/UI 개선 현재 웹 상태를 명확히 확인할 수 있는 UI / UX 제공 웹 접근성 개선 및 보안 강화 • 플래시를 사용하지 않고 Ajax 기술과 Jquery를 통해 리치 인터넷 애플리케이션 기능 구현 • 서버 측 메시지 딕셔너리 구조와 템플릿 구조 설계를 통한 다국어 서비스 지원 • JSON기반의 통신 프로토콜을 사용하여 네트워크 트래픽 절감 • SSL통신을 통한 보안 통신 • 서버 측 로직을 통해 클라이언트의 Javascript파일 로딩을 제어하여 소스가 노출되지 않도록 설계 • (Fake URI 방식을 활용 ) • HEX 로 인코딩된JS URL 주소 핸들링( http://ostermiller.org/calc/encode.html ) • 기존 플래시등에서 결제 처리를 수행하던 프로세스는웹표준 클라이언트로 대체하여 빌링 서버와 • 통신을 수행하고 결과를 처리

22. Ⅱ. 구현방안 주요 기능 구현 방안 – 모바일 웹 :: 빠른 이미지 로딩 • 상품 상세에 표시될 다량의 이미지를 성능 저하 없이 불러오기 위해, • 웹페이지단에서Background 로 예측 가능한 이미지를 순차적으로 미리 로딩하여 Web View 에 전달 • Web View 에서 다음에 표시될 이미지 요청시( 스크롤 혹은 다음 페이지 로딩 시 ) 페이지단에서 • 미리 로딩해 두었던 데이터를 전달 활용 사례 ex> Cjmall.com Web View 다음에 표시될 이미지 요청 로딩된 이미지 데이터 전달 다음에 표시될 예측 가능한 이미지 순차적으로 미리 로딩 Background

23. Ⅲ. 인원현황

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

25. Thank you. | ㈜고스트코어 본사 : 서울시 강남구 역삼동 828-5 청원빌딩 2층 모바일 연구소 : 서울시 영등포구 여의도동 44-1 대영빌딩 1111호 Tel. 02-548-9556 | Fax. 02-548-9526