Transcript 주요 기능 구현 방안 - 고스트-코어

웹접근성 개선 프로젝트
고스트코어 웹접근성 인터랙티브 UI연구소
2013. 01. 10
Copyright ⓒ GhostCorps Co., Ltd. All rights reserved.
Contents
I.
사
업
개
요
II. 구
현
방
안
III. 실
행
방
안
Enabling Smart Mobile Life with Innovative Technologies
2 / 32
Ⅰ. 사업개요
추진배경 및 필요성
추진 배경 및 필요성
 2013년 4월 장애인 차별 금지법에 대응하여 웹 접근성 준수 및 개선 필요
 홈페이지 및 모바일 웹 환경 개선을 통하여 웹 접근성 준수 및 사용자 편의성 향상 필요
사업 목적



웹 접근성을 준수하여 장애인, 고령자에게도 정보와 서비스 접근의 이용, 편의를 제공하는 것에 큰 목적을
둡니다.
웹 및 모바일 웹 환경을 개선하여 어떠한 환경에서도 안정적으로 서비스를 제공하는 것에 목적을 둡니다.
웹 표준 및 웹 접근성에 기준하여 UX/UI 를 개선하여 쉽고 편리한 고객 서비스를 제공하는 것에 목적을
둡니다.
Target Spec.



웹 표준 및 웹 접근성 준수
웹 접근성 개선 및 유지보수가 원활한 효과적인 운영체계 구성 방안
IE 및 기타 디바이스를 고려한 크로스 브라우징을 통한 웹 호환성 향상
Enabling Smart Mobile Life with Innovative Technologies
3 / 32
Ⅰ. 사업개요
사업 범위
웹 접근성 개선
웹 및 모바일 웹 환경 개선
UX/UI 개선
장애인 차별 금지법 통과
고객 서비스 안정화
사용 편의성 향상
웹 접근성 개선
 KWCAG 2.0의 모든 내용포함
 인식, 운용의 용이성 확보
 이해의 용이성, 견고성 확보
크로스 브라우징
 크로스 플랫폼 기반의 환경 개발
( IE, 사파리, 크롬 등 )
 각종 Device 에 대한 최적의 환경
설정
UX/UI 개선
 Creative UI 개선
 각종 플랫폼 환경에 최적화 된 UX
환경 제공
 웹 접근성을 준수한 UX 환경 제공
Enabling Smart Mobile Life with Innovative Technologies
4 / 32
Ⅰ. 사업개요
제안 적합성 - 전문 협력 업체 구성
 신뢰성, 투입 인력 적절성, 가격 적절성을 바탕으로 프로젝트 수행에 최적화
 해당 기술력의 보유 및 상용화 적용 경험 다수 보유
 전문적인 프로젝트 관리 기법을 적용하여 산출 결과물의 품질 보장
신뢰성
투입 인력 적절성
10년 차 웹/모바일
솔루션 전문업체
UI/UX개발 및 상용화
결과물 다수로 품질신뢰
 롯데닷컴, Cjmall, 공공
기관 외 다양한 프로젝
트 수행
모바일관련 컨텐츠 개발 및
문제 해결 능력 보유
대형 쇼핑몰 사업자 경험
및 노하우 축적
SW QA전문 인력을 통한
자체 검증 수행 능력 보유
가격 및 인력 적절성
보유 기술 및 유사
프로젝트 경험으로 빠른
시간 내 개발
 안정적인 프로젝트
운영 (Testing 기반)
개발된 제품에 대한
빠르고 안정적인 서비스
제공
Android System App. 개발
IOS App. 개발
크로스 브라우징 및 웹표준
모바일웹 시스템 개발
Enabling Smart Mobile Life with Innovative Technologies
5 / 32
Ⅰ. 사업개요
제안 적합성 – 유사 프로젝트 개발 경험
Web
[ 자체개발 ] Cjmall 웹표준 개발
2012년 웹 어워드 종합쇼핑몰부문 대상수상
(Dual Main) 혁신UI와 효율성
웹 접근성 관련 적용을 고려하여 진행한 상태.
현재, 웹 접근성 지침 적용 중
 경량화되고 최적화된 웹표준 UI 개발
 HTML ( HTML5 )+ JS + CSS ( CSS3 )
 모바일 환경과 부합하는 웹표준 개발로서, 플래시를 활용한 것과 같은 최적의 동적UI 개발
Enabling Smart Mobile Life with Innovative Technologies
6 / 32
Ⅰ. 사업개요
제안 적합성 – 유사 프로젝트 개발 경험
Mobile Web
모바일 웹 개발
 롯데닷컴 모바일 웹 리뉴얼 & 하이브리드 앱 개발
 롯데마트 모바일 웹 리뉴얼 & 하이브리드 앱 개발
 롯데홈쇼핑 FCC 모바일 웹 신규개발 & 하이브리드 앱 개발
Enabling Smart Mobile Life with Innovative Technologies
7 / 32
Ⅰ. 사업개요
제안 적합성 – 유사 프로젝트 개발 경험
Web & RIA
CJ ticket Mall 웹 사이트 & RIA 예매 서비스 개발
 티켓몰 웹 사이트 개발
 사용자 중심의 UX/UI 설계 및 개발
 쉽고 편리하게 단계별로 진행되는 RIA 예매 서비스 개발
Enabling Smart Mobile Life with Innovative Technologies
8 / 32
Ⅰ. 사업개요
제안 적합성 – 프레임웍 개발
Hybrid App
[ UMIX + 고스트코어 공동개발 ]웹표준/모바일 웹 및 하이브리드 앱 프레임웍
 경량화되고 최적화된 컴포넌트들을 제공하는 웹표준/Mobile Hybrid Platform Framework
 HTML ( HTML5 )+ JS + CSS ( CSS3 )
 디바이스 매니저, 네트워크 매니저, 브라우저 컨트롤러, 푸시 서비스, UI 컴포넌트 등 다양한 기능 제공
Enabling Smart Mobile Life with Innovative Technologies
9 / 32
[
II. 구현방안
 표준화 요건
 주요 기능 목록
 주요 기능 구현 방안
 표준 프레임워크 및 공통컴포넌트
]
Ⅱ. 구현방안
표준화 요건 – KWCAG2.0 (한국형 웹 컨텐츠 접근성 지침) 기준
누구나, 어디에서나, 어느 기기에서나 정보제공자가 의도하는 정보를 전달할 수 있고,
전달받을 수 있어야 한다.
정보통신의 장애환경 보완
다양한 환경 보완
1.
시각장애
1.
ActiveX 미사용
2.
청각장애
2.
마우스를 활용하지 못하는 경우
3.
지체장애
3.
스마트폰 환경
4.
언어장애
Enabling Smart Mobile Life with Innovative Technologies
11 / 32
Ⅱ. 구현방안
표준화 요건 – 장애환경 고려사항 목록
Enabling Smart Mobile Life with Innovative Technologies
12 / 32
Ⅱ. 구현방안
장애환경구현 핵심내용
1. 콘텐츠의 인식(대체 텍스트)
2. 멀티미디어 대체 수단 (영상매체의 인식)
3. 명료성 (색상에 무관한 인식)
4. 키보드 접근성 (키보드만으로도 운용가능)
5. 충분한 시간의 제공 (반응시간의 조절 기능)
6. 광과민성 발작 예방 (깜박거리는 객체 사용제한)
7. 쉬운 네비게이션
8. 가독성
9. 예측가능성
10.콘텐츠의 논리성 (데이터 테이블등의 논리적 구성)
11.입력도움 (온라인 서식 구성)
12.문법 준수
13.웹 어플리케이션 접근성
Enabling Smart Mobile Life with Innovative Technologies
13 / 32
Ⅱ. 구현방안
최종구현환경에 대한 논리 정의
Enabling Smart Mobile Life with Innovative Technologies
14 / 32
Ⅱ. 구현방안
최종구현환경에 대한 논리 정의
대표 예시)
인식의
용이성
1-1. 대체텍스트
Image
1-2. 멀티미디어 대체 수단
1-3. 명료성
Alt 태그의 활용
텍스트가 아닌 요소도
텍스트로 인식할 수 있도록
만들어야 한다
멀티미디어 자막의 제공
Enabling Smart Mobile Life with Innovative Technologies
15 / 32
Ⅱ. 구현방안
최종구현환경에 대한 논리 정의
2-1. 키보드 접근성
대표 예시)
2-2. 충분한 시간의 제공
운용의
용이성
2-3. 광과민성 발작 예방
2-4. 쉬운 네비게이션
Tap 키의 활용
탭키의 흐름도가 정확해야
한다.
Enabling Smart Mobile Life with Innovative Technologies
16 / 32
Ⅱ. 구현방안
최종구현환경에 대한 논리 정의
이해의
용이성
대표 예시)
3-1. 가독성
3-2. 예측 가능성
3-3. 컨텐츠의 논리성
3-4. 입력 도움
정확한 언어의 명시
화면낭독기(스크린리더) 등이
정확하게 읽어줄 수 있도록 선언한다.
Enabling Smart Mobile Life with Innovative Technologies
17 / 32
Ⅱ. 구현방안
최종구현환경에 대한 논리 정의
4-1. 문법 준수
4-2. 웹 어플리케이션 접근성
견고성
대표 예시)
1. 웹 어플리케이션
- 적용범위 : 웹컨텐츠에 내장되어 복수의 웹브라우져에 공통적으로 사용할 수 있는것으로 한정
- 적용대상 : 플러그인 컨텐츠와 자바스크립트로 제작된 프로그램(Ajax 외)
2. 플러그인
- 웹컨텐츠 내에 삽입되는 별도의 프로그램
- 플래시, 플랙스, 실버라이드 등
3. 구현방법
- 접근성 API 사용 : 플래시 메뉴 사용의 경우, 탭키를 이용하여 논리적 순서대로 초점이 이동하고 대체 텍스트 제공.
위와 같은 플래시 메뉴라면
아래와 같은 별도의 컨텐츠를
제공하여야 한다.
대체 컨텐츠 제공
(즉, 꼭 필요한 경우가 아니라면 플래시 컨텐츠를 되도
록 활용하지 않는것이 좋다.
Enabling Smart Mobile Life with Innovative Technologies
18 / 32
Ⅱ. 구현방안
주요 기능 목록
공통 적용
 사용 편의성 증진을 위한 UX/UI 개선
 웹 접근성 개선 및 웹 호환성( Cross Browsing ) 향상
서비스 별 적용
홈 페이지
 성능 및 속도 개선
 서비스
 기존 플래시 RIA 서비스 대체
 다국어 서비스 지원
 모바일 웹
 타블렛 PC를 포함하는 멀티 디바이스에 대한 안정적인 지원
 홈페이지 서비스와 Sync
Enabling Smart Mobile Life with Innovative Technologies
19 / 32
Ⅱ. 구현방안
주요 기능 구현 방안 – 홈 페이지
UX/UI 개선
Window Style UI 와 같이 TILE 기반의 그룹화되어 있는 영역 분배로 효과적인 콘텐츠에 접근할 수
있도록 UX 개선.
웹 접근성 개선 및 웹 호환성 향상
 Ajax기술을 활용한 비동기 백그라운드 컨텐츠 로딩을 통해서 로딩 체감 속도 개선
 레이아웃 로직과 XHTML 규격의 데이터 구조를 완벽히 분리하여 웹 접근성에 문제가 발생하지
않도록 설계
 XHTML 1.0규격과 CSS 를 사용하여 여러 브라우저에서 거의 동일하게 볼 수 있도록 크로스브라우징
이슈 해결
 동적인 움직임이 자주 발생하는 애니메이션의 경우 Jquery 기반 플러그인을 활용하여 처리하여
플래시와 같은 플러그인 기반의 콘텐츠 지양
Enabling Smart Mobile Life with Innovative Technologies
20 / 32
Ⅱ. 구현방안
주요 기능 구현 방안 – 예매
UX/UI 개선
현재 웹 상태를 명확히 확인할 수 있는 UI / UX 제공
웹 접근성 개선 및 보안 강화
 플래시를 사용하지 않고 Ajax 기술과 Jquery를 통해 리치 인터넷 애플리케이션 기능 구현
 서버 측 메시지 딕셔너리 구조와 템플릿 구조 설계를 통한 다국어 서비스 지원
 JSON기반의 통신 프로토콜을 사용하여 네트워크 트래픽 절감
 SSL통신을 통한 보안 통신
 서버 측 로직을 통해 클라이언트의 Javascript 파일 로딩을 제어하여 소스가 노출되지 않도록 설계
( Fake URI 방식을 활용 )
 HEX 로 인코딩된 JS URL 주소 핸들링( http://ostermiller.org/calc/encode.html )
 기존 플래시등에서 결제 처리를 수행하던 프로세스는 웹표준 클라이언트로 대체하여 빌링 서버와
통신을 수행하고 결과를 처리
Enabling Smart Mobile Life with Innovative Technologies
21 / 32
Ⅱ. 구현방안
주요 기능 구현 방안 – 모바일 웹 :: 빠른 이미지 로딩
 상품 상세에 표시될 다량의 이미지를 성능 저하 없이 불러오기 위해,
웹페이지단에서 Background 로 예측 가능한 이미지를 순차적으로 미리 로딩하여 Web View 에 전달
 Web View 에서 다음에 표시될 이미지 요청시( 스크롤 혹은 다음 페이지 로딩 시 ) 페이지 단에서
미리 로딩해 두었던 데이터를 전달
활용 사례 ex> Cjmall.com
Web View
다음에 표시될
이미지 요청
로딩된 이미지
데이터 전달
Background
다음에 표시될 예측 가능한
이미지 순차적으로 미리 로딩
Enabling Smart Mobile Life with Innovative Technologies
22 / 32
[
Ⅲ. 인원현황
]
Ⅲ. 실행방안
투입인력 총괄
각 분야별 다수의 경험을 보유한 전문 인력을 투입하여 프로젝트 수행에 최적화 하였습니다.
구분
기획
UI 개발
서버사이드
개발
디자인
QA
분야별
성명
기술등급
담당업무
총괄 PM
안진연
특급
PM , 총괄 기획
기획, UI/UX설계
이연선
고급
PL , UX/UI 기획
디자인, 기획
김회광
고급
PL , 디자인 기획
HTML 퍼블리셔
고영우
고급
PL , HTML 설계, 웹 표준
HTML 퍼블리셔
한상훈
고급
UI 개발
HTML 퍼블리셔
송은미
중급
UI 개발
HTML 퍼블리셔
이현정
중급
UI 개발
HTML 퍼블리셔
노경민
고급
UI 개발
HTML 퍼블리셔
이윤범
중급
UI 개발
HTML 퍼블리셔
이유란
초급
UI 개발
Serverside 개발자
한재준
고급
PL , Serverside 외
Serverside 개발자
김현태
중급
Serverside 외
디자이너
윤지애
중급
디자인
디자이너
유경숙
중급
디자인
디자이너
최정은
초급
디자인
QA
표종락
고급
QA
Enabling Smart Mobile Life with Innovative Technologies
24 / 32
[
]
Thank you.
| ㈜고스트코어
본사 : 서울시 강남구 역삼동 828-5 청원빌딩 2층
모바일 연구소 : 서울시 영등포구 여의도동 44-1 대영빌딩 1111호
Tel. 02-548-9556 | Fax. 02-548-9526