웹월드컨퍼런스2012 마크업개발...

57
마크업개발을 이용한 기업의 이윤창출 121126월요일

description

2012 웹월드 컨퍼런스에서 발표한 웹표준 마크업기술을 이용한 기업의 이윤창출이란 제목의 발표자료 입니다.

Transcript of 웹월드컨퍼런스2012 마크업개발...

Page 1: 웹월드컨퍼런스2012 마크업개발 공개용

마크업개발을����������� ������������������  이용한����������� ������������������  기업의����������� ������������������  이윤창출

12년 11월 26일 월요일

Page 2: 웹월드컨퍼런스2012 마크업개발 공개용

마크업개발을����������� ������������������  이용한����������� ������������������  기업의����������� ������������������  이윤창출

溫古知新

12년 11월 26일 월요일

Page 3: 웹월드컨퍼런스2012 마크업개발 공개용

1.����������� ������������������  웹을����������� ������������������  바라보는����������� ������������������  새로운����������� ������������������  관점

12년 11월 26일 월요일

Page 4: 웹월드컨퍼런스2012 마크업개발 공개용

1.����������� ������������������  웹을����������� ������������������  바라보는����������� ������������������  새로운관점

전사대응����������� ������������������  과제 대외����������� ������������������  사업 고도화

12년 11월 26일 월요일

Page 5: 웹월드컨퍼런스2012 마크업개발 공개용

1.����������� ������������������  웹을����������� ������������������  바라보는����������� ������������������  새로운관점

전사대응����������� ������������������  과제 대외����������� ������������������  사업 고도화

웹접근성 모바일 최적화 자동화 프로세스

12년 11월 26일 월요일

Page 6: 웹월드컨퍼런스2012 마크업개발 공개용

1.����������� ������������������  웹을����������� ������������������  바라보는����������� ������������������  새로운관점

전사대응����������� ������������������  과제 대외����������� ������������������  사업 고도화

웹접근성 모바일 최적화 자동화 프로세스

12년 11월 26일 월요일

Page 7: 웹월드컨퍼런스2012 마크업개발 공개용

1.����������� ������������������  웹을����������� ������������������  바라보는����������� ������������������  새로운관점

전사대응����������� ������������������  과제 대외����������� ������������������  사업 고도화

웹접근성 모바일 최적화 자동화 프로세스

규제대응 효율 속도

12년 11월 26일 월요일

Page 8: 웹월드컨퍼런스2012 마크업개발 공개용

1.����������� ������������������  웹을����������� ������������������  바라보는����������� ������������������  새로운관점

전사대응����������� ������������������  과제 대외����������� ������������������  사업 고도화

웹접근성 모바일 최적화 자동화 프로세스

규제대응 효율 속도

12년 11월 26일 월요일

Page 9: 웹월드컨퍼런스2012 마크업개발 공개용

1.����������� ������������������  웹을����������� ������������������  바라보는����������� ������������������  새로운관점

전사대응����������� ������������������  과제 대외����������� ������������������  사업 고도화

웹접근성 모바일 최적화 자동화 프로세스

규제대응 효율 속도

1 2 3

12년 11월 26일 월요일

Page 10: 웹월드컨퍼런스2012 마크업개발 공개용

1.����������� ������������������  웹을����������� ������������������  바라보는����������� ������������������  새로운관점

Back 2 Basic

12년 11월 26일 월요일

Page 11: 웹월드컨퍼런스2012 마크업개발 공개용

1.����������� ������������������  웹을����������� ������������������  바라보는����������� ������������������  새로운관점

속도

1.즉시성����������� ������������������  (3초����������� ������������������  이내)

2.글로벌����������� ������������������  /����������� ������������������  모바일

3.개선될����������� ������������������  여지가����������� ������������������  있는����������� ������������������  Front-end����������� ������������������  최적화

12년 11월 26일 월요일

Page 12: 웹월드컨퍼런스2012 마크업개발 공개용

무조건����������� ������������������  빨라야����������� ������������������  합니다.

12년 11월 26일 월요일

Page 13: 웹월드컨퍼런스2012 마크업개발 공개용

1.����������� ������������������  웹을����������� ������������������  바라보는����������� ������������������  새로운관점

속도����������� ������������������  -����������� ������������������  즉시성����������� ������������������  (3초����������� ������������������  이내)

1.시간은����������� ������������������  돈����������� ������������������  이다

��

���

����

����

����

����

����

�� �� �� �� �� �� � � �� ���

로딩속도%(초)%

1인당%PV%vs.%로딩속도%

1 2 3 4 5 6 7 8 9 10

0

50

100

150

200

250

300NHN����������� ������������������  데이터정보센터

Hight����������� ������������������  End

Hight����������� ������������������  Mid

Low����������� ������������������  Mid

Low����������� ������������������  End

12년 11월 26일 월요일

Page 14: 웹월드컨퍼런스2012 마크업개발 공개용

1.����������� ������������������  웹을����������� ������������������  바라보는����������� ������������������  새로운관점

속도����������� ������������������  -����������� ������������������  즉시성����������� ������������������  (3초����������� ������������������  이내)

1.시간은����������� ������������������  돈����������� ������������������  이다

��

���

����

����

����

����

����

�� �� �� �� �� �� � � �� ���

로딩속도%(초)%

1인당%PV%vs.%로딩속도%

1 2 3 4 5 6 7 8 9 10

0

50

100

150

200

250

300NHN����������� ������������������  데이터정보센터

Hight����������� ������������������  End

Hight����������� ������������������  Mid

Low����������� ������������������  Mid

Low����������� ������������������  End

1초����������� ������������������  딜레이����������� ������������������  =����������� ������������������  매출����������� ������������������  3%����������� ������������������  하락Eric Schurman, Principal Development Lead, Bing; Jake Brutlag Decision Support Engineering Analyst, Google

12년 11월 26일 월요일

Page 15: 웹월드컨퍼런스2012 마크업개발 공개용

1.����������� ������������������  웹을����������� ������������������  바라보는����������� ������������������  새로운관점

속도����������� ������������������  -����������� ������������������  즉시성����������� ������������������  (3초����������� ������������������  이내)

1.시간은����������� ������������������  돈����������� ������������������  이다����������� ������������������  왜?

2.느린����������� ������������������  경우는����������� ������������������  만족도저하➟����������� ������������������  재방문기피➟����������� ������������������  PV하락➟����������� ������������������  매출저하

3.빠른����������� ������������������  경우는����������� ������������������  만족도증가➟����������� ������������������  재방문기피➟����������� ������������������  PV증가➟����������� ������������������  매출상승

���������

��� ��� ����

��

�������

�����

� ����

��

������

��

��

��

������

12년 11월 26일 월요일

Page 16: 웹월드컨퍼런스2012 마크업개발 공개용

1.����������� ������������������  웹을����������� ������������������  바라보는����������� ������������������  새로운관점

속도����������� ������������������  -����������� ������������������  글로벌/모바일

1.이제는����������� ������������������  세계시장이다.

1.저역대����������� ������������������  네트웍

2.저사양����������� ������������������  기기

2.이제는����������� ������������������  모바일����������� ������������������  세상이다.

1.런던올림픽����������� ������������������  -����������� ������������������  네이버����������� ������������������  스포츠����������� ������������������  모바일����������� ������������������  PV����������� ������������������  1억����������� ������������������  돌파

2.7월����������� ������������������  -����������� ������������������  PC웹����������� ������������������  대비����������� ������������������  PV����������� ������������������  4배����������� ������������������  이상����������� ������������������  증가����������� ������������������  -����������� ������������������  최고치와����������� ������������������  최저치����������� ������������������  비교시����������� ������������������  16배

12년 11월 26일 월요일

Page 17: 웹월드컨퍼런스2012 마크업개발 공개용

1.����������� ������������������  웹을����������� ������������������  바라보는����������� ������������������  새로운관점

속도����������� ������������������  -����������� ������������������  개선����������� ������������������  여지가����������� ������������������  많은����������� ������������������  Front-End

1.웹����������� ������������������  페이지����������� ������������������  로딩시간의����������� ������������������  80~90%가����������� ������������������  Front-end����������� ������������������  구간

2.S����������� ������������������  =����������� ������������������  P����������� ������������������  -����������� ������������������  E����������� ������������������  (The����������� ������������������  Psychology����������� ������������������  of����������� ������������������  Waiting����������� ������������������  Lines����������� ������������������  byDavid����������� ������������������  Maister)

Satisfaction = Perception - Expectation만족도����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  =����������� ������������������  ����������� ������������������  ����������� ������������������  체감수준����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  -����������� ������������������  ����������� ������������������  ����������� ������������������  기대수준

�����

����

����

����� ����

�����

���������

����

����

����������

���� �� �� �� �� �� ���

������

� ���

Source : NHN UX Lab.

만족률����������� ������������������  =����������� ������������������  50%

12년 11월 26일 월요일

Page 18: 웹월드컨퍼런스2012 마크업개발 공개용

1.����������� ������������������  웹을����������� ������������������  바라보는����������� ������������������  새로운관점

속도����������� ������������������  -����������� ������������������  개선����������� ������������������  여지가����������� ������������������  많은����������� ������������������  Front-End

1.웹����������� ������������������  페이지����������� ������������������  로딩시간의����������� ������������������  80~90%가����������� ������������������  Front-end����������� ������������������  구간

2.S����������� ������������������  =����������� ������������������  P����������� ������������������  -����������� ������������������  E����������� ������������������  (The����������� ������������������  Psychology����������� ������������������  of����������� ������������������  Waiting����������� ������������������  Lines����������� ������������������  byDavid����������� ������������������  Maister)

Satisfaction = Perception - Expectation만족도����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  =����������� ������������������  ����������� ������������������  ����������� ������������������  체감수준����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  -����������� ������������������  ����������� ������������������  ����������� ������������������  기대수준

�����

����

����

����� ����

�����

���������

����

����

����������

���� �� �� �� �� �� ���

������

� ���

Source : NHN UX Lab.

만족률����������� ������������������  =����������� ������������������  50%

12년 11월 26일 월요일

Page 19: 웹월드컨퍼런스2012 마크업개발 공개용

12년 11월 26일 월요일

Page 20: 웹월드컨퍼런스2012 마크업개발 공개용

단가를����������� ������������������  낮춰야����������� ������������������  합니다.����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  단,����������� ������������������  문제없이...

12년 11월 26일 월요일

Page 21: 웹월드컨퍼런스2012 마크업개발 공개용

1.����������� ������������������  웹을����������� ������������������  바라보는����������� ������������������  새로운관점

효율

1.비용을����������� ������������������  줄여라.����������� ������������������  (단����������� ������������������  이상없이...)

1.정해진����������� ������������������  기한����������� ������������������  <����������� ������������������  스펙오버,����������� ������������������  잦은수정,����������� ������������������  

2.되도록����������� ������������������  초급인력으로����������� ������������������  혹은����������� ������������������  적은����������� ������������������  인력으로...

2.시간을����������� ������������������  줄여라.����������� ������������������  (단����������� ������������������  이상없이...)

1.반복요소����������� ������������������  제거

2.품질과����������� ������������������  생산성의����������� ������������������  최적점

12년 11월 26일 월요일

Page 22: 웹월드컨퍼런스2012 마크업개발 공개용

1.����������� ������������������  웹을����������� ������������������  바라보는����������� ������������������  새로운관점

효율

1.비용을����������� ������������������  줄여라.����������� ������������������  (단����������� ������������������  이상없이...)

1.정해진����������� ������������������  기한����������� ������������������  <����������� ������������������  스펙오버,����������� ������������������  잦은수정,����������� ������������������  

2.되도록����������� ������������������  초급인력으로����������� ������������������  혹은����������� ������������������  적은����������� ������������������  인력으로...

2.시간을����������� ������������������  줄여라.����������� ������������������  (단����������� ������������������  이상없이...)

1.반복요소����������� ������������������  제거

2.품질과����������� ������������������  생산성의����������� ������������������  최적점

<12년 11월 26일 월요일

Page 23: 웹월드컨퍼런스2012 마크업개발 공개용

1.����������� ������������������  웹을����������� ������������������  바라보는����������� ������������������  새로운관점

효율

1.비용을����������� ������������������  줄여라.����������� ������������������  (단����������� ������������������  이상없이...)

1.정해진����������� ������������������  기한����������� ������������������  <����������� ������������������  스펙오버,����������� ������������������  잦은수정,����������� ������������������  

2.되도록����������� ������������������  초급인력으로����������� ������������������  혹은����������� ������������������  적은����������� ������������������  인력으로...

2.시간을����������� ������������������  줄여라.����������� ������������������  (단����������� ������������������  이상없이...)

1.반복요소����������� ������������������  제거

2.품질과����������� ������������������  생산성의����������� ������������������  최적점

<최소의����������� ������������������  적응(교육)시간

12년 11월 26일 월요일

Page 24: 웹월드컨퍼런스2012 마크업개발 공개용

1.����������� ������������������  웹을����������� ������������������  바라보는����������� ������������������  새로운관점

효율

1.비용을����������� ������������������  줄여라.����������� ������������������  (단����������� ������������������  이상없이...)

1.정해진����������� ������������������  기한����������� ������������������  <����������� ������������������  스펙오버,����������� ������������������  잦은수정,����������� ������������������  

2.되도록����������� ������������������  초급인력으로����������� ������������������  혹은����������� ������������������  적은����������� ������������������  인력으로...

2.시간을����������� ������������������  줄여라.����������� ������������������  (단����������� ������������������  이상없이...)

1.반복요소����������� ������������������  제거

2.품질과����������� ������������������  생산성의����������� ������������������  최적점

<최소의����������� ������������������  적응(교육)시간

12년 11월 26일 월요일

Page 25: 웹월드컨퍼런스2012 마크업개발 공개용

1.����������� ������������������  웹을����������� ������������������  바라보는����������� ������������������  새로운관점

효율

1.비용을����������� ������������������  줄여라.����������� ������������������  (단����������� ������������������  이상없이...)

1.정해진����������� ������������������  기한����������� ������������������  <����������� ������������������  스펙오버,����������� ������������������  잦은수정,����������� ������������������  

2.되도록����������� ������������������  초급인력으로����������� ������������������  혹은����������� ������������������  적은����������� ������������������  인력으로...

2.시간을����������� ������������������  줄여라.����������� ������������������  (단����������� ������������������  이상없이...)

1.반복요소����������� ������������������  제거

2.품질과����������� ������������������  생산성의����������� ������������������  최적점

<최소의����������� ������������������  적응(교육)시간

정교한����������� ������������������  분업화예측����������� ������������������  가능하도록오차율����������� ������������������  최소화프리셋/템플릿

12년 11월 26일 월요일

Page 26: 웹월드컨퍼런스2012 마크업개발 공개용

1.����������� ������������������  웹을����������� ������������������  바라보는����������� ������������������  새로운관점

효율

1.비용을����������� ������������������  줄여라.����������� ������������������  (단����������� ������������������  이상없이...)

1.정해진����������� ������������������  기한����������� ������������������  <����������� ������������������  스펙오버,����������� ������������������  잦은수정,����������� ������������������  

2.되도록����������� ������������������  초급인력으로����������� ������������������  혹은����������� ������������������  적은����������� ������������������  인력으로...

2.시간을����������� ������������������  줄여라.����������� ������������������  (단����������� ������������������  이상없이...)

1.반복요소����������� ������������������  제거

2.품질과����������� ������������������  생산성의����������� ������������������  최적점

<최소의����������� ������������������  적응(교육)시간

정교한����������� ������������������  분업화예측����������� ������������������  가능하도록오차율����������� ������������������  최소화프리셋/템플릿

12년 11월 26일 월요일

Page 27: 웹월드컨퍼런스2012 마크업개발 공개용

1.����������� ������������������  웹을����������� ������������������  바라보는����������� ������������������  새로운관점

효율

1.비용을����������� ������������������  줄여라.����������� ������������������  (단����������� ������������������  이상없이...)

1.정해진����������� ������������������  기한����������� ������������������  <����������� ������������������  스펙오버,����������� ������������������  잦은수정,����������� ������������������  

2.되도록����������� ������������������  초급인력으로����������� ������������������  혹은����������� ������������������  적은����������� ������������������  인력으로...

2.시간을����������� ������������������  줄여라.����������� ������������������  (단����������� ������������������  이상없이...)

1.반복요소����������� ������������������  제거

2.품질과����������� ������������������  생산성의����������� ������������������  최적점

<최소의����������� ������������������  적응(교육)시간

정교한����������� ������������������  분업화예측����������� ������������������  가능하도록오차율����������� ������������������  최소화프리셋/템플릿

가이드(컨벤션),����������� ������������������  ����������� ������������������  스펙정의서,����������� ������������������  모듈라이브러리,����������� ������������������  프로세스,����������� ������������������  개발방법론,����������� ������������������  자동화����������� ������������������  도구

12년 11월 26일 월요일

Page 28: 웹월드컨퍼런스2012 마크업개발 공개용

12년 11월 26일 월요일

Page 29: 웹월드컨퍼런스2012 마크업개발 공개용

필수!

12년 11월 26일 월요일

Page 30: 웹월드컨퍼런스2012 마크업개발 공개용

1.����������� ������������������  웹을����������� ������������������  바라보는����������� ������������������  새로운관점

규제대응

1.‘웹����������� ������������������  접근성’����������� ������������������  이제는����������� ������������������  하지����������� ������������������  않으면����������� ������������������  안된다.

1.막연한����������� ������������������  선의나����������� ������������������  도의적����������� ������������������  책임이����������� ������������������  아닌����������� ������������������  필수����������� ������������������  사항(법적리스크)

2.웹����������� ������������������  서비스의����������� ������������������  경쟁력

3.시장의����������� ������������������  필요성

2.CSR,����������� ������������������  CSV

1. Corporate Social Responsibility 기업의 사회적 책임

2. Creating Shared Value 공유가치창출 (비지니스 연계)

3. 경쟁을 통한 쟁취의 제로섬 게임이 아닌 새로운 파이를 개척하거나 선점하는 과정

4. 기업의 일반적인 노력이 사회적 책임으로 자연스럽게 연결

12년 11월 26일 월요일

Page 31: 웹월드컨퍼런스2012 마크업개발 공개용

2.����������� ������������������  마크업����������� ������������������  기술의����������� ������������������  활용과����������� ������������������  가치

12년 11월 26일 월요일

Page 32: 웹월드컨퍼런스2012 마크업개발 공개용

2.����������� ������������������  마크업����������� ������������������  기술의����������� ������������������  활용과����������� ������������������  가치

속도

1.기존에����������� ������������������  다루어����������� ������������������  지지����������� ������������������  않던����������� ������������������  영역의����������� ������������������  개선

1.복잡도

2.이미지����������� ������������������  리퀘스트����������� ������������������  최소화����������� ������������������  -����������� ������������������  CSM

12년 11월 26일 월요일

Page 33: 웹월드컨퍼런스2012 마크업개발 공개용

2.����������� ������������������  마크업����������� ������������������  기술의����������� ������������������  활용과����������� ������������������  가치

속도����������� ������������������  -����������� ������������������  복잡도Markup Complexity

����IL,�>4CH�63�@0�

�����8?E������ �!�"%(�IL2�A7�=G0(�J(Q+�>4CH�63�@0(�.5K�

평균#중첩수# PC#1#(IE9)# PC#2#(IE9)# PC#1(Chrome14)# PC#1(Firefox5)#

7.5# 668# 3354# 745# 485#

��� �� �� � ���� ����

12.5# 712# 3683# 760# 495#

PC#1#:�������"%� ���������� ���'����������PC#2#:#������"%� ��#$������������'�����������1F)A���&�ILD�������S�9=��ILBN/�:;D�<*BM�P-�IL�A�<RBO�

HTML����������� ������������������  문서의����������� ������������������  DOM����������� ������������������  엘리먼트는����������� ������������������  중첩될수록����������� ������������������  복잡도가����������� ������������������  증가하고����������� ������������������  성능에����������� ������������������  영향을����������� ������������������  미친다.����������� ������������������  

전사����������� ������������������  HTML����������� ������������������  산출물의����������� ������������������  DOM����������� ������������������  엘리먼트의����������� ������������������  평균����������� ������������������  중첩����������� ������������������  수를����������� ������������������  데이터베이스화����������� ������������������  하여����������� ������������������  평균����������� ������������������  값과����������� ������������������  표준편차를����������� ������������������  구한����������� ������������������  후����������� ������������������  

이����������� ������������������  값들을����������� ������������������  기반으로����������� ������������������  트����������� ������������������  평균����������� ������������������  중첩����������� ������������������  수의����������� ������������������  등급을����������� ������������������  산정하며,����������� ������������������  Markup����������� ������������������  Complexity라고����������� ������������������  명명한다.

12년 11월 26일 월요일

Page 34: 웹월드컨퍼런스2012 마크업개발 공개용

2.����������� ������������������  마크업����������� ������������������  기술의����������� ������������������  활용과����������� ������������������  가치

속도����������� ������������������  -����������� ������������������  복잡도����������� ������������������  원인

2&���&�$�36�

�/ ��(���,�1��)�0�%'�

���2&�&��!���5���!��7�+.��2&������#����!����7�+.�

*��3�� ���2&���#�-��4"�

table>tbody>tr>td�

<table>   <tr>     <td  class=“leftmenu”>       <a  href=“#”>Menu1</a><br>       <a  href=“#”>Menu1</a><br>       <a  href=“#”>Menu1</a><br>     </td>     <td  class=“rightcontent”>       <p>title</p>     </td>   </tr></table>

12년 11월 26일 월요일

Page 35: 웹월드컨퍼런스2012 마크업개발 공개용

2.����������� ������������������  마크업����������� ������������������  기술의����������� ������������������  활용과����������� ������������������  가치

속도����������� ������������������  -����������� ������������������  복잡도����������� ������������������  원인

����������������� ��

div>div>div>div�

<div%class=“layout1”>%<div%class=“layout2”>%

<div%class=“layout3”>%<div%class=“layout4”>%

%<a%href=“#”>…</a>%</div>%

</div>%</div>%

</div>%

<div%class=“layout1”>%<a%href=“#”>…</a>%<div%class=“layout2”></div>%<div%class=“layout3”></div>%<div%class=“layout4”></div>%

</div>%

12년 11월 26일 월요일

Page 36: 웹월드컨퍼런스2012 마크업개발 공개용

2.����������� ������������������  마크업����������� ������������������  기술의����������� ������������������  활용과����������� ������������������  가치

속도����������� ������������������  -����������� ������������������  복잡도����������� ������������������  원인

����������� �

dl>dd>ul>li>dl>dd�

���������%�����������"�#�&���-���*���0���#�()$�&!���

� �� �/��+1���-���'���,��.�

<dl>%<dt>item1</dt>%<dd>%

<ul>%<li>%

<a%href=“#”>item151</a>%</li>%<li>%

<a%href=“#”>item152</a>%</li>%

</ul>%</dd>%<dt>item2</dt>%<dd>%

<ul>%% % %.%.%.%%

12년 11월 26일 월요일

Page 37: 웹월드컨퍼런스2012 마크업개발 공개용

2.����������� ������������������  마크업����������� ������������������  기술의����������� ������������������  활용과����������� ������������������  가치

속도����������� ������������������  -����������� ������������������  복잡도

�-���%������'�

�$��&+�������,�#�������� �0��(*����$.�$�2�

0��(*����"��'1 �(*"�)�/��!��

12년 11월 26일 월요일

Page 38: 웹월드컨퍼런스2012 마크업개발 공개용

2.����������� ������������������  마크업����������� ������������������  기술의����������� ������������������  활용과����������� ������������������  가치

속도����������� ������������������  -����������� ������������������  복잡도

�� ���������������������"��$�� -�

����&*��/!��+��.��� -2#��/!��%���$��,'2#��10��(�)�

12년 11월 26일 월요일

Page 39: 웹월드컨퍼런스2012 마크업개발 공개용

2.����������� ������������������  마크업����������� ������������������  기술의����������� ������������������  활용과����������� ������������������  가치

속도����������� ������������������  -����������� ������������������  복잡도

html.nhncorp.com1

2

12년 11월 26일 월요일

Page 40: 웹월드컨퍼런스2012 마크업개발 공개용

2.����������� ������������������  마크업����������� ������������������  기술의����������� ������������������  활용과����������� ������������������  가치

속도����������� ������������������  -����������� ������������������  CSM

CSS Sprites

Legacy Sprites

Images Request Loading Speed

이미지의 양 개수

12년 11월 26일 월요일

Page 41: 웹월드컨퍼런스2012 마크업개발 공개용

2.����������� ������������������  마크업����������� ������������������  기술의����������� ������������������  활용과����������� ������������������  가치

속도����������� ������������������  -����������� ������������������  CSM

CSS Sprites

Legacy Sprites

Images Request Loading Speed

이미지의 양 개수<

12년 11월 26일 월요일

Page 42: 웹월드컨퍼런스2012 마크업개발 공개용

2.����������� ������������������  마크업����������� ������������������  기술의����������� ������������������  활용과����������� ������������������  가치

속도����������� ������������������  -����������� ������������������  CSM�����������$��'�

만들기$어렵다�

•  �/��%��*��!����"+�!�*��•  �(������ ,������•  )-&��!#����.�0������

유지보수가$어렵다$몇$개만$해봤자2�

12년 11월 26일 월요일

Page 43: 웹월드컨퍼런스2012 마크업개발 공개용

2.����������� ������������������  마크업����������� ������������������  기술의����������� ������������������  활용과����������� ������������������  가치

속도����������� ������������������  -����������� ������������������  CSM

�" �����

•  �������" ��$!������� ��!��������������•  ����#�����%������•  ����������

�����������

2개#이하��� ��

���������

3메가픽셀#1024x1024x3#

12년 11월 26일 월요일

Page 44: 웹월드컨퍼런스2012 마크업개발 공개용

2.����������� ������������������  마크업����������� ������������������  기술의����������� ������������������  활용과����������� ������������������  가치

속도����������� ������������������  -����������� ������������������  CSM1=E�30:�A#6&�T2�� Q>N�F7(�G��

•  F7=(@�����6&!�����5��•  ����������������$�U%�RD�N���;������������B-J��9�L5+?)&�6&��4��"�•  B-JRD�M'OB/�PS?)�B-J�FK�RD�=(&��5�� ���=(�I��<T�28�

기존방식% CSM%방식% %%

요청횟수% �� 1% -94%%

전송용량% ��������� 854bytes% -87%%

로딩속도% ������ 0.050s% -36%%

�H���������� B.�,C�/*�B-J��

응답속도는����������� ������������������  물론,����������� ������������������  네트웍����������� ������������������  트래픽����������� ������������������  감소로����������� ������������������  인한����������� ������������������  서버유지비용����������� ������������������  감소

트래픽당����������� ������������������  과금의����������� ������������������  호스팅,����������� ������������������  아마존����������� ������������������  글라우드����������� ������������������  사용자들이����������� ������������������  CSM을����������� ������������������  주목해야����������� ������������������  하는����������� ������������������  이유

12년 11월 26일 월요일

Page 45: 웹월드컨퍼런스2012 마크업개발 공개용

12년 11월 26일 월요일

Page 46: 웹월드컨퍼런스2012 마크업개발 공개용

�&*�!�%�(�"��5 ���3'2�+#��,��

•  )�-�&��������!� ����•  )�-�61�$����!��� ��

•  4�����"����.�!����.�� ��/���0��

2.8 2.6 2.6

2.8 2.7 2.7 2.9 2.8 2.8 2.8

2.0

1.1 1.0 1.1 1.1 1.1 1.0 1.0 1.0 1.0 1.0 1.1 1.1 1.0 1.0 1.0 1.0 1.0 1.0 1.1 1.1

1 3 5 7 9 11 13 15 17 19 21 23 25 27 29 31

CSM$적용$(2011.$5.$11)$

2.����������� ������������������  마크업����������� ������������������  기술의����������� ������������������  활용과����������� ������������������  가치

속도����������� ������������������  -����������� ������������������  CSM

12년 11월 26일 월요일

Page 47: 웹월드컨퍼런스2012 마크업개발 공개용

�&*�!�%�(�"��5 ���3'2�+#��,��

•  )�-�&��������!� ����•  )�-�61�$����!��� ��

•  4�����"����.�!����.�� ��/���0��

2.8 2.6 2.6

2.8 2.7 2.7 2.9 2.8 2.8 2.8

2.0

1.1 1.0 1.1 1.1 1.1 1.0 1.0 1.0 1.0 1.0 1.1 1.1 1.0 1.0 1.0 1.0 1.0 1.0 1.1 1.1

1 3 5 7 9 11 13 15 17 19 21 23 25 27 29 31

CSM$적용$(2011.$5.$11)$

2.����������� ������������������  마크업����������� ������������������  기술의����������� ������������������  활용과����������� ������������������  가치

속도����������� ������������������  -����������� ������������������  CSM

PV = +10.8%

12년 11월 26일 월요일

Page 48: 웹월드컨퍼런스2012 마크업개발 공개용

2.����������� ������������������  마크업����������� ������������������  기술의����������� ������������������  활용과����������� ������������������  가치

효율

1.기술����������� ������������������  진입����������� ������������������  장벽의����������� ������������������  유연함

1.체계화

1.일정한����������� ������������������  원리에����������� ������������������  따라서����������� ������������������  낱낱의����������� ������������������  부분이����������� ������������������  짜임새����������� ������������������  있게����������� ������������������  조직되어����������� ������������������  통일된����������� ������������������  전체로����������� ������������������  됨

2.난이도별����������� ������������������  설정����������� ������������������  ➟����������� ������������������  개인기����������� ������������������  의존도����������� ������������������  최소화����������� ������������������  ➟����������� ������������������  인력활용성����������� ������������������  증가����������� ������������������  ➟����������� ������������������  다양한����������� ������������������  인력풀����������� ������������������  활용����������� ������������������  ➟����������� ������������������  비용����������� ������������������  감소

2.자동화����������� ������������������  

1.다른����������� ������������������  힘을����������� ������������������  빌리지����������� ������������������  아니하고����������� ������������������  스스로����������� ������������������  움직이거나����������� ������������������  작용하게����������� ������������������  됨.����������� ������������������  또는����������� ������������������  그렇게����������� ������������������  되게����������� ������������������  함.

2.자동화요소����������� ������������������  많음����������� ������������������  ➟����������� ������������������  품질의����������� ������������������  균일성����������� ������������������  ➟����������� ������������������  개발속도는����������� ������������������  증가,����������� ������������������  비용은����������� ������������������  감소

12년 11월 26일 월요일

Page 49: 웹월드컨퍼런스2012 마크업개발 공개용

2.����������� ������������������  마크업����������� ������������������  기술의����������� ������������������  활용과����������� ������������������  가치

효율

1.기술����������� ������������������  진입����������� ������������������  장벽의����������� ������������������  유연함

1.체계화

1.일정한����������� ������������������  원리에����������� ������������������  따라서����������� ������������������  낱낱의����������� ������������������  부분이����������� ������������������  짜임새����������� ������������������  있게����������� ������������������  조직되어����������� ������������������  통일된����������� ������������������  전체로����������� ������������������  됨

2.난이도별����������� ������������������  설정����������� ������������������  ➟����������� ������������������  개인기����������� ������������������  의존도����������� ������������������  최소화����������� ������������������  ➟����������� ������������������  인력활용성����������� ������������������  증가����������� ������������������  ➟����������� ������������������  다양한����������� ������������������  인력풀����������� ������������������  활용����������� ������������������  ➟����������� ������������������  비용����������� ������������������  감소

2.자동화����������� ������������������  

1.다른����������� ������������������  힘을����������� ������������������  빌리지����������� ������������������  아니하고����������� ������������������  스스로����������� ������������������  움직이거나����������� ������������������  작용하게����������� ������������������  됨.����������� ������������������  또는����������� ������������������  그렇게����������� ������������������  되게����������� ������������������  함.

2.자동화요소����������� ������������������  많음����������� ������������������  ➟����������� ������������������  품질의����������� ������������������  균일성����������� ������������������  ➟����������� ������������������  개발속도는����������� ������������������  증가,����������� ������������������  비용은����������� ������������������  감소

마크업����������� ������������������  개발의����������� ������������������  진입장벽은����������� ������������������  높다?����������� ������������������  낮다?

12년 11월 26일 월요일

Page 50: 웹월드컨퍼런스2012 마크업개발 공개용

2.����������� ������������������  마크업����������� ������������������  기술의����������� ������������������  활용과����������� ������������������  가치

효율����������� ������������������  -����������� ������������������  체계화/자동화

12년 11월 26일 월요일

Page 51: 웹월드컨퍼런스2012 마크업개발 공개용

2.����������� ������������������  마크업����������� ������������������  기술의����������� ������������������  활용과����������� ������������������  가치

효율����������� ������������������  -����������� ������������������  체계화/자동화

중고급 초중급 초급

12년 11월 26일 월요일

Page 52: 웹월드컨퍼런스2012 마크업개발 공개용

2.����������� ������������������  마크업����������� ������������������  기술의����������� ������������������  활용과����������� ������������������  가치

효율����������� ������������������  -����������� ������������������  체계화/자동화

중고급 초중급 초급

12년 11월 26일 월요일

Page 53: 웹월드컨퍼런스2012 마크업개발 공개용

2.����������� ������������������  마크업����������� ������������������  기술의����������� ������������������  활용과����������� ������������������  가치

효율����������� ������������������  -����������� ������������������  체계화/자동화

중고급 초중급 초급

자동화 자동화

12년 11월 26일 월요일

Page 54: 웹월드컨퍼런스2012 마크업개발 공개용

12년 11월 26일 월요일

Page 55: 웹월드컨퍼런스2012 마크업개발 공개용

2.����������� ������������������  마크업����������� ������������������  기술의����������� ������������������  활용과����������� ������������������  가치

웹접근성의����������� ������������������  사업성과����������� ������������������  중요성

1.중요성����������� ������������������  /����������� ������������������  필수요소

1.웹접근성����������� ������������������  =����������� ������������������  Front-end����������� ������������������  ➟����������� ������������������  주로����������� ������������������  UX와����������� ������������������  마크업개발����������� ������������������  ➟����������� ������������������  마크업개발����������� ������������������  투입비용����������� ������������������  낮음����������� ������������������  ➟����������� ������������������  마크업개발����������� ������������������  적용����������� ������������������  필수

2.역할의����������� ������������������  중요성

1.UX,����������� ������������������  디자인,����������� ������������������  개발을����������� ������������������  관통해야����������� ������������������  하는����������� ������������������  웹����������� ������������������  접근성����������� ������������������  =����������� ������������������  UX,����������� ������������������  디자인,����������� ������������������  개발의����������� ������������������  접점인����������� ������������������  마크업����������� ������������������  개발

2.마크업����������� ������������������  개발����������� ������������������  +����������� ������������������  α = 웹����������� ������������������  접근성����������� ������������������  구축����������� ������������������  비용����������� ������������������  크게����������� ������������������  감소

3.범위����������� ������������������  확대

1.웹����������� ������������������  접근성����������� ������������������  컨설팅?����������� ������������������  =����������� ������������������  전사지침,����������� ������������������  개발가이드

2.웹����������� ������������������  접근성����������� ������������������  QA����������� ������������������  =����������� ������������������  전����������� ������������������  직군을����������� ������������������  관통하는����������� ������������������  검증작업

12년 11월 26일 월요일

Page 56: 웹월드컨퍼런스2012 마크업개발 공개용

2.����������� ������������������  마크업����������� ������������������  기술의����������� ������������������  활용과����������� ������������������  가치

웹접근성의����������� ������������������  사업성과����������� ������������������  중요성

1.중요성����������� ������������������  /����������� ������������������  필수요소

1.웹접근성����������� ������������������  =����������� ������������������  Front-end����������� ������������������  ➟����������� ������������������  주로����������� ������������������  UX와����������� ������������������  마크업개발����������� ������������������  ➟����������� ������������������  마크업개발����������� ������������������  투입비용����������� ������������������  낮음����������� ������������������  ➟����������� ������������������  마크업개발����������� ������������������  적용����������� ������������������  필수

2.역할의����������� ������������������  중요성

1.UX,����������� ������������������  디자인,����������� ������������������  개발을����������� ������������������  관통해야����������� ������������������  하는����������� ������������������  웹����������� ������������������  접근성����������� ������������������  =����������� ������������������  UX,����������� ������������������  디자인,����������� ������������������  개발의����������� ������������������  접점인����������� ������������������  마크업����������� ������������������  개발

2.마크업����������� ������������������  개발����������� ������������������  +����������� ������������������  α = 웹����������� ������������������  접근성����������� ������������������  구축����������� ������������������  비용����������� ������������������  크게����������� ������������������  감소

3.범위����������� ������������������  확대

1.웹����������� ������������������  접근성����������� ������������������  컨설팅?����������� ������������������  =����������� ������������������  전사지침,����������� ������������������  개발가이드

2.웹����������� ������������������  접근성����������� ������������������  QA����������� ������������������  =����������� ������������������  전����������� ������������������  직군을����������� ������������������  관통하는����������� ������������������  검증작업

마크업기술력이����������� ������������������  우수한����������� ������������������  인력����������� ������������������  또는����������� ������������������  업체의����������� ������������������  필요성

12년 11월 26일 월요일

Page 57: 웹월드컨퍼런스2012 마크업개발 공개용

TECH@NHN

모바일의����������� ������������������  중요성이����������� ������������������  증대되면서����������� ������������������  다양한����������� ������������������  단말기를����������� ������������������  고려해야����������� ������������������  하는����������� ������������������  것이����������� ������������������  웹����������� ������������������  서비스����������� ������������������  제작자의����������� ������������������  현실이����������� ������������������  되었다.����������� ������������������  

기술의����������� ������������������  발달이����������� ������������������  환경적����������� ������������������  제약이나����������� ������������������  장애에����������� ������������������  대한����������� ������������������  접근성을����������� ������������������  더����������� ������������������  부각시키며����������� ������������������  필요로����������� ������������������  하고����������� ������������������  있는����������� ������������������  것이다.����������� ������������������  

문제는����������� ������������������  앞으로����������� ������������������  어떤����������� ������������������  기술이����������� ������������������  어떻게����������� ������������������  다가올지����������� ������������������  모르며����������� ������������������  그����������� ������������������  대응����������� ������������������  속도가����������� ������������������  기업의����������� ������������������  경쟁력을����������� ������������������  좌우하는����������� ������������������  만큼����������� ������������������  

웹����������� ������������������  접근성은����������� ������������������  단순히����������� ������������������  장애����������� ������������������  환경에����������� ������������������  대한����������� ������������������  대응만이����������� ������������������  아닌,����������� ������������������  앞으로����������� ������������������  발전할����������� ������������������  기술에����������� ������������������  대한����������� ������������������  초석으로써����������� ������������������  실효성����������� ������������������  있는����������� ������������������  투자가����������� ������������������  될����������� ������������������  것이다.����������� ������������������  

경쟁을����������� ������������������  통한����������� ������������������  쟁취의����������� ������������������  제로섬����������� ������������������  게임이����������� ������������������  아닌����������� ������������������  새로운����������� ������������������  파이를����������� ������������������  개척하거나����������� ������������������  선점하는����������� ������������������  과정이����������� ������������������  될����������� ������������������  수����������� ������������������  있다.����������� ������������������  

무엇보다����������� ������������������  기존����������� ������������������  사용자에게는����������� ������������������  보다����������� ������������������  나은����������� ������������������  사용성을,����������� ������������������  새로운����������� ������������������  사용자에게는����������� ������������������  매력적인����������� ������������������  특화점을����������� ������������������  줄����������� ������������������  수����������� ������������������  있다.����������� ������������������  

또한����������� ������������������  기업의����������� ������������������  일반적인����������� ������������������  노력이����������� ������������������  사회적����������� ������������������  책임은����������� ������������������  물론����������� ������������������  기업의����������� ������������������  공유가치창출(CSV)까지����������� ������������������  이어지는����������� ������������������  효과를����������� ������������������  준다.

[email protected]://www.facebook.com/bythehuman

12년 11월 26일 월요일