서울대학교공과대학 산업안전최고전략과정 · 소비자 심리의 이해, 소비자 통찰의 발견, 브랜드 통찰과 전략, 설득과 홍보 커뮤니케이션
[2014널리세미나] 접근성 빅(?) 데이터, 새로운 법칙의 발견!
-
Upload
nts-nuli -
Category
Technology
-
view
992 -
download
7
Transcript of [2014널리세미나] 접근성 빅(?) 데이터, 새로운 법칙의 발견!
![Page 1: [2014널리세미나] 접근성 빅(?) 데이터, 새로운 법칙의 발견!](https://reader031.fdocuments.net/reader031/viewer/2022012401/555e27efd8b42a384f8b5062/html5/thumbnails/1.jpg)
접근성 빅? 데이터 새로운 법칙의 발견
김용원
![Page 2: [2014널리세미나] 접근성 빅(?) 데이터, 새로운 법칙의 발견!](https://reader031.fdocuments.net/reader031/viewer/2022012401/555e27efd8b42a384f8b5062/html5/thumbnails/2.jpg)
접근성 데이터가 뭔가요?
고대비
![Page 3: [2014널리세미나] 접근성 빅(?) 데이터, 새로운 법칙의 발견!](https://reader031.fdocuments.net/reader031/viewer/2022012401/555e27efd8b42a384f8b5062/html5/thumbnails/3.jpg)
NWCAG 1.0
Automated Manual
ouput
Client-Side Resources Analysis (HTML, CSS, JS, Image… )
Expert Judgment
Web Service URL
Web Service URL
Web Service URL
Sample
NAVER A11Y Tools
DATA
Storage
input
![Page 4: [2014널리세미나] 접근성 빅(?) 데이터, 새로운 법칙의 발견!](https://reader031.fdocuments.net/reader031/viewer/2022012401/555e27efd8b42a384f8b5062/html5/thumbnails/4.jpg)
NWCAG 1.0
Automated Manual
ouput
Client-Side Resources Analysis (HTML, CSS, JS, Image… )
Expert Judgment
Web Service URL
Web Service URL
Web Service URL
Sample
NAVER A11Y Tools
DATA
Storage
input
![Page 5: [2014널리세미나] 접근성 빅(?) 데이터, 새로운 법칙의 발견!](https://reader031.fdocuments.net/reader031/viewer/2022012401/555e27efd8b42a384f8b5062/html5/thumbnails/5.jpg)
NWCAG 1.0
Automated Manual
ouput
Client-Side Resources Analysis (HTML, CSS, JS, Image… )
Expert Judgment
Web Service URL
Web Service URL
Web Service URL
Sample
NAVER A11Y Tools
DATA
Storage
input
![Page 6: [2014널리세미나] 접근성 빅(?) 데이터, 새로운 법칙의 발견!](https://reader031.fdocuments.net/reader031/viewer/2022012401/555e27efd8b42a384f8b5062/html5/thumbnails/6.jpg)
NWCAG 1.0
Automated Manual
ouput
Client-Side Resources Analysis (HTML, CSS, JS, Image… )
Expert Judgment
Web Service URL
Web Service URL
Web Service URL
Sample
NAVER A11Y Tools
DATA
Storage
input
![Page 7: [2014널리세미나] 접근성 빅(?) 데이터, 새로운 법칙의 발견!](https://reader031.fdocuments.net/reader031/viewer/2022012401/555e27efd8b42a384f8b5062/html5/thumbnails/7.jpg)
NWCAG 1.0
Automated Manual
ouput
Client-Side Resources Analysis (HTML, CSS, JS, Image… )
Expert Judgment
Web Service URL
Web Service URL
Web Service URL
Sample
NAVER A11Y Tools
DATA
Storage
input
![Page 8: [2014널리세미나] 접근성 빅(?) 데이터, 새로운 법칙의 발견!](https://reader031.fdocuments.net/reader031/viewer/2022012401/555e27efd8b42a384f8b5062/html5/thumbnails/8.jpg)
NWCAG 1.0
Automated Manual
ouput
Client-Side Resources Analysis (HTML, CSS, JS, Image… )
Expert Judgment
Web Service URL
Web Service URL
Web Service URL
Sample
NAVER A11Y Tools
DATA
Storage
input
![Page 9: [2014널리세미나] 접근성 빅(?) 데이터, 새로운 법칙의 발견!](https://reader031.fdocuments.net/reader031/viewer/2022012401/555e27efd8b42a384f8b5062/html5/thumbnails/9.jpg)
사내용 서비스
![Page 10: [2014널리세미나] 접근성 빅(?) 데이터, 새로운 법칙의 발견!](https://reader031.fdocuments.net/reader031/viewer/2022012401/555e27efd8b42a384f8b5062/html5/thumbnails/10.jpg)
목업용 폰트 사용 출처 : BLOKK - http://blokkfont.com/
사내용 서비스
![Page 11: [2014널리세미나] 접근성 빅(?) 데이터, 새로운 법칙의 발견!](https://reader031.fdocuments.net/reader031/viewer/2022012401/555e27efd8b42a384f8b5062/html5/thumbnails/11.jpg)
데이터에 어떤 것이 담겨 있나요?
![Page 12: [2014널리세미나] 접근성 빅(?) 데이터, 새로운 법칙의 발견!](https://reader031.fdocuments.net/reader031/viewer/2022012401/555e27efd8b42a384f8b5062/html5/thumbnails/12.jpg)
DATA
Storage
Code snippets
HTML
CSS JS
Performance info
Network DOM
Headers
URL
ISSUE
Diagnosis info
…
![Page 13: [2014널리세미나] 접근성 빅(?) 데이터, 새로운 법칙의 발견!](https://reader031.fdocuments.net/reader031/viewer/2022012401/555e27efd8b42a384f8b5062/html5/thumbnails/13.jpg)
DATA
Storage
Code snippets
HTML
CSS JS
Performance info
Network DOM
Headers
URL
ISSUE
Diagnosis info
…
![Page 14: [2014널리세미나] 접근성 빅(?) 데이터, 새로운 법칙의 발견!](https://reader031.fdocuments.net/reader031/viewer/2022012401/555e27efd8b42a384f8b5062/html5/thumbnails/14.jpg)
DATA
Storage
Code snippets
HTML
CSS JS
Performance info
Network DOM
Headers
URL
ISSUE
Diagnosis info
…
![Page 15: [2014널리세미나] 접근성 빅(?) 데이터, 새로운 법칙의 발견!](https://reader031.fdocuments.net/reader031/viewer/2022012401/555e27efd8b42a384f8b5062/html5/thumbnails/15.jpg)
DATA
Storage
Code snippets
HTML
CSS JS
Performance info
Network DOM
Headers
URL
ISSUE
Diagnosis info
…
![Page 16: [2014널리세미나] 접근성 빅(?) 데이터, 새로운 법칙의 발견!](https://reader031.fdocuments.net/reader031/viewer/2022012401/555e27efd8b42a384f8b5062/html5/thumbnails/16.jpg)
어떻게 모니터링하고 통제 하나요?
![Page 17: [2014널리세미나] 접근성 빅(?) 데이터, 새로운 법칙의 발견!](https://reader031.fdocuments.net/reader031/viewer/2022012401/555e27efd8b42a384f8b5062/html5/thumbnails/17.jpg)
PASS FAIL
Guideline Checklist
![Page 18: [2014널리세미나] 접근성 빅(?) 데이터, 새로운 법칙의 발견!](https://reader031.fdocuments.net/reader031/viewer/2022012401/555e27efd8b42a384f8b5062/html5/thumbnails/18.jpg)
특정 주기로 수집된 데이터를 비교분석,
사이트의 접근성 이슈와 현황을 파악
![Page 19: [2014널리세미나] 접근성 빅(?) 데이터, 새로운 법칙의 발견!](https://reader031.fdocuments.net/reader031/viewer/2022012401/555e27efd8b42a384f8b5062/html5/thumbnails/19.jpg)
잘 개선이 잘 진행되고 있는지 이슈 건수 변동이 심하지 않은지
어떤유형의 오류가 가장 많이 발생하는지
![Page 20: [2014널리세미나] 접근성 빅(?) 데이터, 새로운 법칙의 발견!](https://reader031.fdocuments.net/reader031/viewer/2022012401/555e27efd8b42a384f8b5062/html5/thumbnails/20.jpg)
잘 개선이 잘 진행되고 있는지
이슈 건수 변동이 심하지 않은지 어떤유형의 오류가 가장 많이 발생하는지
![Page 21: [2014널리세미나] 접근성 빅(?) 데이터, 새로운 법칙의 발견!](https://reader031.fdocuments.net/reader031/viewer/2022012401/555e27efd8b42a384f8b5062/html5/thumbnails/21.jpg)
잘 개선이 잘 진행되고 있는지
이슈 건수 변동이 심하지 않은지
어떤유형의 오류가 가장 많이 발생하는지
![Page 22: [2014널리세미나] 접근성 빅(?) 데이터, 새로운 법칙의 발견!](https://reader031.fdocuments.net/reader031/viewer/2022012401/555e27efd8b42a384f8b5062/html5/thumbnails/22.jpg)
합당한 솔루션을 제공한다.
리포트를 통한 이슈 인지시키기
좀 더 구체적이고 효율적인 해결책 제시
세분화된 교육 ( UX, UI, FE, BE )
…
![Page 23: [2014널리세미나] 접근성 빅(?) 데이터, 새로운 법칙의 발견!](https://reader031.fdocuments.net/reader031/viewer/2022012401/555e27efd8b42a384f8b5062/html5/thumbnails/23.jpg)
하지만 이렇게만 활용하기에 데이터가 너무 가치있다.
![Page 24: [2014널리세미나] 접근성 빅(?) 데이터, 새로운 법칙의 발견!](https://reader031.fdocuments.net/reader031/viewer/2022012401/555e27efd8b42a384f8b5062/html5/thumbnails/24.jpg)
어떤 다른 분석을 할 수 있나요?
Co
ke
Coke
![Page 25: [2014널리세미나] 접근성 빅(?) 데이터, 새로운 법칙의 발견!](https://reader031.fdocuments.net/reader031/viewer/2022012401/555e27efd8b42a384f8b5062/html5/thumbnails/25.jpg)
키워드 분석을 통한 서비스 분야 파악
Code snippets
HTML
CSS
JS
쇼핑
가격
구매
장바구니
배송
환불
통신판매
HTML Code
Shopping Keyword
네이버 지식쇼핑 캡쳐 (shopping.naver.com)
![Page 26: [2014널리세미나] 접근성 빅(?) 데이터, 새로운 법칙의 발견!](https://reader031.fdocuments.net/reader031/viewer/2022012401/555e27efd8b42a384f8b5062/html5/thumbnails/26.jpg)
CSS 속성을 분석하여 사이트에 사용된 컬러 추출
Colorfy(www.colorflyit.com)로 확인한 m.naver.com
Code snippets
HTML
CSS
JS
분석요소
• 선언빈도
• Color속성
• Background-color속성
![Page 27: [2014널리세미나] 접근성 빅(?) 데이터, 새로운 법칙의 발견!](https://reader031.fdocuments.net/reader031/viewer/2022012401/555e27efd8b42a384f8b5062/html5/thumbnails/27.jpg)
CSS 선언된 @midea Queries 분석 어떤 스크린 사이즈까지 커버하고 있는지 파악
Code snippets
HTML
CSS
JS
크롬 확장 프로그램 (Responsive Inspector) 으로 확인한 m.naver.com
![Page 28: [2014널리세미나] 접근성 빅(?) 데이터, 새로운 법칙의 발견!](https://reader031.fdocuments.net/reader031/viewer/2022012401/555e27efd8b42a384f8b5062/html5/thumbnails/28.jpg)
브라우저 호환성 이슈 검출 Code snippets
HTML
CSS
JS
HTML5 Semantic Tags
CSS Vendor Prefixses
MS extensions Methods
참조 : http://www.w3schools.com/Html/html5_semantic_elements.asp, http://peter.sh/experiments/vendor-prefixed-css-property-overview/, http://quirksmode.org/dom/core/
…
![Page 29: [2014널리세미나] 접근성 빅(?) 데이터, 새로운 법칙의 발견!](https://reader031.fdocuments.net/reader031/viewer/2022012401/555e27efd8b42a384f8b5062/html5/thumbnails/29.jpg)
사이트 전반의 URL 형태를 분석 이해가 쉽고 접근이 용이한지 파악
URL
ISSUE
Diagnosis info
…
http://news.naver.com/main/main.nhn?mode=LSD&mid=shm&sid1=102
네이버 뉴스 메인? 메인? 탬플릿 형태? 탬플릿 형태? 색션 아이디
http://news.naver.com/section/?sid=society
제안
![Page 30: [2014널리세미나] 접근성 빅(?) 데이터, 새로운 법칙의 발견!](https://reader031.fdocuments.net/reader031/viewer/2022012401/555e27efd8b42a384f8b5062/html5/thumbnails/30.jpg)
Navigation Timing API로 Network과 DOM관련 Timing 정보를 측정
Performance info
Network DOM
Headers
크롬 Dev tools Console에서 확인 Processing Model 참조 :
http://www.w3.org/TR/navigation-timing/
![Page 31: [2014널리세미나] 접근성 빅(?) 데이터, 새로운 법칙의 발견!](https://reader031.fdocuments.net/reader031/viewer/2022012401/555e27efd8b42a384f8b5062/html5/thumbnails/31.jpg)
Automated Manual
1
2
3
4
5
R
P R N D S
![Page 32: [2014널리세미나] 접근성 빅(?) 데이터, 새로운 법칙의 발견!](https://reader031.fdocuments.net/reader031/viewer/2022012401/555e27efd8b42a384f8b5062/html5/thumbnails/32.jpg)
이런 분석결과를 어디에 활용할 수 있나요?
![Page 33: [2014널리세미나] 접근성 빅(?) 데이터, 새로운 법칙의 발견!](https://reader031.fdocuments.net/reader031/viewer/2022012401/555e27efd8b42a384f8b5062/html5/thumbnails/33.jpg)
SEO 최적화
브랜드 아이덴티티 강화
코드 리팩토링
성능 최적화
사용성 개선
…
![Page 34: [2014널리세미나] 접근성 빅(?) 데이터, 새로운 법칙의 발견!](https://reader031.fdocuments.net/reader031/viewer/2022012401/555e27efd8b42a384f8b5062/html5/thumbnails/34.jpg)
이런 분석이 접근성과 무슨 관련이 있나요?
![Page 35: [2014널리세미나] 접근성 빅(?) 데이터, 새로운 법칙의 발견!](https://reader031.fdocuments.net/reader031/viewer/2022012401/555e27efd8b42a384f8b5062/html5/thumbnails/35.jpg)
직접적인 관련이 없을 수 있습니다.
![Page 36: [2014널리세미나] 접근성 빅(?) 데이터, 새로운 법칙의 발견!](https://reader031.fdocuments.net/reader031/viewer/2022012401/555e27efd8b42a384f8b5062/html5/thumbnails/36.jpg)
하지만 좀 더 넓은 의미를 생각하면?
![Page 37: [2014널리세미나] 접근성 빅(?) 데이터, 새로운 법칙의 발견!](https://reader031.fdocuments.net/reader031/viewer/2022012401/555e27efd8b42a384f8b5062/html5/thumbnails/37.jpg)
… 모든 사용자는 정보와 기능에 동등하게 접근할 수 있다.
동등하고 + 편리하고 + 빠르게
Universal web Accessibility
웹 접근성의 정의
![Page 38: [2014널리세미나] 접근성 빅(?) 데이터, 새로운 법칙의 발견!](https://reader031.fdocuments.net/reader031/viewer/2022012401/555e27efd8b42a384f8b5062/html5/thumbnails/38.jpg)
Thank You [email protected]
![Page 39: [2014널리세미나] 접근성 빅(?) 데이터, 새로운 법칙의 발견!](https://reader031.fdocuments.net/reader031/viewer/2022012401/555e27efd8b42a384f8b5062/html5/thumbnails/39.jpg)