[2012널리세미나] 태블릿pc를 위한 마크업

35
태블릿PC 를 위한 마크업 노찬현 | 웹표준개발2팀 | 2012.2.25 12년 3월 6일 화요일

Upload: nts-nuli

Post on 02-Jul-2015

313 views

Category:

Technology


2 download

TRANSCRIPT

태블릿PC를����������� ������������������  위한����������� ������������������  마크업노찬현����������� ������������������  ����������� ������������������  ����������� ������������������  |����������� ������������������  ����������� ������������������  ����������� ������������������  웹표준개발2팀����������� ������������������  ����������� ������������������  ����������� ������������������  |����������� ������������������  ����������� ������������������  ����������� ������������������  2012.2.25

12년 3월 6일 화요일

과거

1-1

2

12년 3월 6일 화요일

1-1

3

현재

12년 3월 6일 화요일

미래인터넷����������� ������������������  =����������� ������������������  Mobile

1-2

4

12년 3월 6일 화요일

미래

1-2

5

12년 3월 6일 화요일

미래 인터넷����������� ������������������  =����������� ������������������  Mobile

1-2

5

12년 3월 6일 화요일

미래 인터넷����������� ������������������  =����������� ������������������  Mobile

1-2

5

• Apple iPad 의 등장과 함께 태블릿PC가 대중화되고 있다.

12년 3월 6일 화요일

미래 인터넷����������� ������������������  =����������� ������������������  Mobile

1-2

5

• Apple iPad 의 등장과 함께 태블릿PC가 대중화되고 있다.• 모바일 프로세서(AP)의 성능이 점점 높아지고 있다.

12년 3월 6일 화요일

미래 인터넷����������� ������������������  =����������� ������������������  Mobile

1-2

5

• Apple iPad 의 등장과 함께 태블릿PC가 대중화되고 있다.• 모바일 프로세서(AP)의 성능이 점점 높아지고 있다.• 웹 제작자의 성숙해진 웹표준 의식

12년 3월 6일 화요일

미래 인터넷����������� ������������������  =����������� ������������������  Mobile

1-2

5

• Apple iPad 의 등장과 함께 태블릿PC가 대중화되고 있다.• 모바일 프로세서(AP)의 성능이 점점 높아지고 있다.• 웹 제작자의 성숙해진 웹표준 의식• 속도가 느리고 무거운 플래시와 플러그인 대신에 HTML5/Javascript 를 사용한 개발이 주목받고 있다.

12년 3월 6일 화요일

태블릿����������� ������������������  PC Apple iPad, Samsung Galaxy Tab 10.1, ...• 데스크탑 PC, 노트북 PC 에 비해 크기가 매우 작고 무게가 가볍다.• 키보드/마우스를 사용하지 않고 화면을 손가락으로 터치하여 조작한다.• 모바일 전용 운영체제를 사용한다. (iOS, Android)• Webkit 렌더링 엔진을 사용하는 웹브라우저를 내장하고 있다.

1-3

6

12년 3월 6일 화요일

http://yugop.com

의문 iPad에서����������� ������������������  우리����������� ������������������  홈페이지가����������� ������������������  왜����������� ������������������  이상하게����������� ������������������  보이죠?

• 우리나라의 대부분의 웹사이트는 Internet Explorer, Firefox 기준으로 제작한다.• 태블릿 PC에 내장된 웹브라우저는 Webkit렌더링 엔진을 사용하므로 레이아웃이 틀어질 수 있다.• 태블릿 PC 특성상 지원되지 않는 기능과 제약이 있을 수 있다.• FLASH, ActiveX 등의 플러그인이 작동하지 않는다.

1-4

7

http://www.jnu.ac.kr

http://banking.shinhan.com

최적화가 필요합니다!

12년 3월 6일 화요일

좋은����������� ������������������  소식,

나쁜����������� ������������������  소식

1-5

8

가벼운����������� ������������������  단말기웹표준����������� ������������������  지원

세련된����������� ������������������  한글����������� ������������������  폰트Webkit

HTML5/CSS3PNG24

작은����������� ������������������  화면NO����������� ������������������  키보드/마우스

느린����������� ������������������  속도제약되는����������� ������������������  태그NO����������� ������������������  Plug-In크로스����������� ������������������  브라우징브라우저����������� ������������������  버그

12년 3월 6일 화요일

좋은����������� ������������������  소식

2-1

9

• 적극적인 웹표준 지원 - Webkit은 가장 적극적으로 웹표준을 지원하는 렌더링 엔진 중 하나이다.

• HTML5/CSS3 사용 가능 - HTML5로 동적인 기능을 외부 플러그인 없이 표준 기술로 구현할 수 있다. - CSS3로 대부분의 디자인 요소를 이미지 대신 마크업으로 처리할 수 있다. - 이미지를 최소한으로 줄여 트래픽을 절감할 수 있다.

• AppleGothic 폰트 지원 - PC에서 사용하는 “돋움, 굴림” 대신 세련된 애플고딕 폰트를 지원한다. ( iOS 5.1 베타에 애플SD네오고딕 폰트가 추가되었음)

• PNG24 지원 - IE6 때문에 자유롭게 사용할 수 없었던 Png24 이미지를 사용할 수 있다. - 반투명을 지원하므로 더 자유로운 디자인을 표현할 수 있다.

가볍고,����������� ������������������  편리한����������� ������������������  터치스크린!����������� ������������������  거기에����������� ������������������  웹표준까지~

12년 3월 6일 화요일

HTML5����������� ������������������  &����������� ������������������  IE

2-2

10

• HTML5 는 하위 호환성을 보장함• Internet Explorer 는 HTML5의 새로운 태그를 인식할 수 없다. ( IE9 제외 )• DOM 구조가 제대로 만들어지지 않고, CSS도 적용되지 않는다.• HTML5 태그를 사용하려면 새로운 요소를 IE에서 인식할 수 있도록 해야 한다.

• IE 구버전에서 HTML5를 인식시키기 위한 스크립트가 많이 공개되어 있는데, 가장 잘 알려진 것은 레미 샤프의 html5shiv 이다.

스크립트����������� ������������������  사용

<script>document.createElement("header");</script>

http://code.google.com/p/html5shiv/

<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

12년 3월 6일 화요일

폰트

2-3

11

• PC에서는 기본으로 내장된 폰트가 부족하여 가독성이 좋지 않은 “굴림, 돋움” 폰트를 사용하지만, 모바일의 기본 폰트는 세련되고 읽기 편한 폰트가 제공된다.• iOS는 AppleGothic 이 제공되고, Android는 DroidSans 계열 이외에 제조사의 추가 폰트가 지원된다.• iOS 5.1 베타에 애플SD네오고딕 이 추가되었으며 정식에 추가될 예정이다.

12년 3월 6일 화요일

폰트

2-3

12

• iOS는 기본적으로 AppleGothic 으로 한글을 표시하지만, 영어/숫자/특수문자는 Times New Roman 으로 표시하므로 한글과 어울리지 않는다.• PC에서 자주 사용하는 Tahoma 는 iOS, Android 에 내장되어 있지 않으므로, Helvetica, Verdana 로 대체해야 한다.• iOS font list : http://iosfonts.com/

• 기본 폰트에 상관없이 레이아웃 문제가 없도록 유연한 디자인이 필요하다.

유의할����������� ������������������  점

body{font-family:Helvetica}

12년 3월 6일 화요일

나쁜����������� ������������������  소식

3-1

13

• 좁은 화면 - 1024*768 로 제한된 화면 크기, 가로/세로 전환 가능, 창모드 지원안함 - 특정 해상도가 아닌 width 100% 가변 화면에 대응하도록 제작해야 한다.

• 키보드와 마우스의 부재 - 터치스크린으로 조작하며 필요할 때에만 가상 키보드를 사용한다.

• Webkit 렌더링 엔진을 사용한 웹브라우저 - PC 웹사이트는 대부분 IE, FF를 기준으로 제작하고 있다. - 렌더링엔진이 달라 크로스 브라우징 이슈, 레이아웃 오류가 생길 수 있다.

• Plug-In 미지원 - 플래시, 실버라이트, ActiveX 등의 플러그인을 사용할 수 없다.

• 웹브라우저의 제한과 각종 버그 - 태블릿 PC의 특성 때문에 지원되지 않는 기능과 태그가 존재한다. - 모바일 웹브라우저도 버그가 없을 수 없다.

링크����������� ������������������  누르기����������� ������������������  힘들어...����������� ������������������  화면이����������� ������������������  작아!����������� ������������������  플짤도����������� ������������������  안보여..

12년 3월 6일 화요일

작은����������� ������������������  화면

3-2

14

• iPad : 1024*768 | Android 3.x : 1280*800 (갤럭시탭10.1)• 창 모드를 지원하지 않으며, 가로/세로 orientation 을 전환할 수 있다.• 자체적으로 확대/축소를 지원한다.• 웹사이트 초기 화면은 좌우에 여백을 남기지 않는 형태로 resize 한다.

12년 3월 6일 화요일

작은����������� ������������������  화면

3-2

15

•����������� ������������������  viewport를����������� ������������������  사용한다.

•����������� ������������������  다양한����������� ������������������  레이아웃을����������� ������������������  제공하기����������� ������������������  위해����������� ������������������  CSS3����������� ������������������  media-query����������� ������������������  를����������� ������������������  이용한����������� ������������������  반응형����������� ������������������  웹을

����������� ������������������  ����������� ������������������  구현할����������� ������������������  수도����������� ������������������  있다.

����������� ������������������  ����������� ������������������  ����������� ������������������  -����������� ������������������  http://www.smashingmagazine.com/

����������� ������������������  ����������� ������������������  ����������� ������������������  -����������� ������������������  http://www.w3conf.org/

����������� ������������������  ����������� ������������������  ����������� ������������������  -����������� ������������������  http://unmatchedstyle.com/cssoff/

해결방법

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi”>

12년 3월 6일 화요일

터치스크린

3-3

16

• 태블릿 PC는 마우스/키보드를 사용하지 않으며 터치스크린의 터치를 이용한다.• PC에서 사용되는 마우스 관련 이벤트를 일부 사용할 수 없다. - 마우스 오른쪽 버튼, 마우스 오버, 툴팁을 사용할 수 없다. - 마우스오버를 사용할 경우 터치를 두번 해야 onclick 이벤트가 발생한다.• PC의 마우스 기준으로 만든 링크/버튼은 너무 작아 터치하기 어렵다.

• 링크 영역을 크게 하고 주변 링크와의 거리를 띄운다.• 마우스 오른쪽버튼, 마우스오버, 마우스휠 이벤트를 피한다.• 자바스크립트에서 마우스 관련 이벤트 처리에는 터치 이벤트도 추가하여 태블릿에도 대응할 수 있도록 제작한다.

해결방법

12년 3월 6일 화요일

터치스크린

3-3

17

• 터치 제스쳐는 태블릿 PC에서만 추가로 지원하는 이벤트이므로 좌표 관련 이벤트는 다음 속성을 추가해야 한다.

• iPad 는 멀티터치를 지원하며 이벤트의 좌표정보는 touches[] 배열로 반환한다.

마우스����������� ������������������  입력방식 터치����������� ������������������  입력방식

시작 onmousedown ontouchstart

이동

onmousemove

ondragstart

onselectstart

ontouchmove

종료 onmouseup ontouchend

AS-IS TO-BE

this.style.top����������� ������������������  =����������� ������������������  event.clientY;

this.style.left����������� ������������������  =����������� ������������������  event.clientX;

this.style.top����������� ������������������  =����������� ������������������  event.touches[0].clientY;

this.style.left����������� ������������������  =����������� ������������������  event.touches[0].clientX;

12년 3월 6일 화요일

iOS����������� ������������������  자원����������� ������������������  제약

3-4

18

• Apple iOS의 사파리 웹브라우저는 시스템 퍼포먼스를 위해 자원을 제한한다.• 페이지 당 최대 다운로드사이즈 : 10MB (html, css, js, image, …)• GIF, PNG, TIFF 이미지 최대 해상도 : 5megapixel (RAM 256MB 이상)• JPG 이미지 최대 해상도 : 32megapixel. 하지만, 2megapixel을 넘을 때마다 크기를 ½로 줄이는 Subsampling이 적용된다.• Animation GIF 이미지 최대 용량 : 2MB, 그 이상일 때 첫 프레임만 표시한다.• HTML5 <canvas> 요소의 최대 해상도 : 5megapixel (RAM 256MB 이상)• 자바스크립트는 10초 내에 모두 실행되어야 하며 그 이상일 경우 실행을 중지하고 javascript Exception 이 발생한다.• 새 탭의 개수 제한 : iPhone/iPod 8개, iPad 9개

Apple����������� ������������������  iOS����������� ������������������  Resource����������� ������������������  Limit����������� ������������������  (iPhone,����������� ������������������  iPod,����������� ������������������  iPad)

12년 3월 6일 화요일

iOS����������� ������������������  자원����������� ������������������  제약

3-4

19

• 네이버 웹툰 이미지는 width가 대부분 600px 이지만, 마우스 휠로 스크롤하여 열람하는 특성상 height 가 매우 길다.• 웹툰 이미지는 jpg 포맷을 주로 사용하는데, 심할 경우 height 가 10000px 를 넘는 이미지를 사용하여 2megapixel 을 넘을 때도 있다.• JPG 이미지 최대 해상도 : 32megapixel. 하지만, 2megapixel을 넘을 때마다 크기를 ½로 줄이는 Subsampling이 적용된다.

• 이 문제는 iPad의 자원 제한이 원인이므로 마크업이나 개발에서 해결할 수 없었고, 현재는 웹툰 이미지를 jpg의 2megapixel 제한에 문제가 생기지 않는 크기로 컷팅 후 바둑판 형식으로 보여주고 있다.

네이버����������� ������������������  웹툰����������� ������������������  이슈

12년 3월 6일 화요일

HTML/CSS����������� ������������������  제약

3-5

20

• <input type=”file”> 지원하지 않음 (Android는 지원함)• <label for=””> 를 통해 폼의 선택을 할 수 없음• <select> 요소의 UX가 다르며 size 속성을 지원하지 않음

• CSS의 overflow:auto, <textarea>, <iframe>, <frame>에서 스크롤바 미지원

• <iframe>은 크기 지정을 무시하고 콘텐츠가 표시되는 크기로 자동 조정됨• position:fixed를 지원하지 않음 (android 및 iOS 5.0부터 지원함)• 이미지나 기타 요소의 툴팁, CSS의 :hover 선택자를 지원하지 않음

12년 3월 6일 화요일

HTML/CSS����������� ������������������  제약

3-5

21

• iOS 사파리는 팝업 대신 새창을 띄우며, Android 3.x는 크기가 고정된 크기의 팝업을 한개만 지원한다.

• 자바스크립트 중 일부 팝업이나 창에 관련된 명령을 지원하지 않는다. ex) showModalDialog()• 플래시, 실버라이트, ActiveX 등의 플러그인을 지원하지 않는다.

12년 3월 6일 화요일

특이사항����������� ������������������  및����������� ������������������  버그

3-6

22

• 애플고딕 폰트는 한글의 BOLD체를 지원하지 않는다. - -webkit-text-stroke를 사용하여 해결할 수 있다 (cf. 아이폰 3.x는 사용불가)

• 폼 디자인의 차이 - 웹킷의 폼 디자인은 IE / FF와 달라 의도치 않은 디자인 오류가 생길 수 있음 - -webkit-appearance:none 과 CSS를 통해 해결할 수 있음

• 전화번호 링크 - 전화번호 포맷이 발견될 경우 기본적으로 전화번호 링크가 생성된다. - iPhone은 통화 대화상자가 뜨고, iPad는 연락처 등록 레이어가 나타난다.

• 팝업에 제한이 있다. - iPad는 팝업을 사용할 수 없고 항상 새창으로 뜬다. - PC에서 사용하는 팝업은 대부분 고정사이즈인데, 빈 공간이 커보일 수 있다.

• 스크롤바의 제한 - <textarea>, <iframe>, <frame> 등에서 스크롤바를 표시하지 않는다. - <iframe>은 크기를 지정할 수 없고 콘텐츠의 크기에 맞게 조정된다.

12년 3월 6일 화요일

특이사항����������� ������������������  및����������� ������������������  버그

3-6

23

• CSS sprite를 적용할 때 해당 이미지 요소의 주변이 보이는 버그

• 특정 폰트 사이즈와 inline 태그 사용시 간헐적으로 생성되는 여백

• 한글과 영문을 섞어서 쓸 때 글자의 높이가 달라서 float 된 객체가 깨짐

• 테이블의 경계선, 또는 border가 두께가 달라지는 현상

iOS����������� ������������������  4.x에서����������� ������������������  발생하였으나����������� ������������������  5.0에서����������� ������������������  수정된����������� ������������������  버그

12년 3월 6일 화요일

태블릿PC����������� ������������������  최적화

4-1

24

• viewport 속성을 적용하여 해상도와 pixel 1:1 매칭되도록 최적화• 가로/세로에 최적화된 탭검색 디자인과 검색결과 화면• 글자크기와 행간을 태블릿PC에 맞게 최적화• 검색옵션의 크기를 확대하여 터치가 쉬움• 실시간검색어를 가로/세로 시 노출 여부를 달리하여 화면 공간 확보• http://naver_diary.blog.me/150128960174

통합검색����������� ������������������  태블릿PC����������� ������������������  대응

12년 3월 6일 화요일

단계적����������� ������������������  향상

4-2

25

• 어떤 웹브라우저라도 웹표준을 지원한다면 웹표준으로 개발된 사이트는 같은 동작을 하는 것을 보장하기에, 웹 환경에 있어서 상호 호환성을 확보할 수 있다.• 웹표준을 잘 지원하는 웹브라우저에서 잘 동작한다면, 다른 웹표준 지원 브라우저에서도 제대로 동작한다는 보장을 할 수 있으므로 개발 시간이 단축되고 개발 품질을 높일 수 있으며 지원 범위를 제한할 필요도 없다.

웹표준

• Internet Explorer 6 의 점유율이 높아 이를 무시할 수 없기 때문에 새로운 기술을 적용할 수 없고 스펙이 가장 낮은 사양의 웹브라우저에 맞춰 개발하게 되었다.• 웹표준 스펙도 브라우저에 따라 지원 범위가 다르기 때문에 서비스 대상이 되는 모든 브라우저에서 지원하는 속성 위주로 활용되었다.

현실적인����������� ������������������  웹표준의����������� ������������������  문제점

12년 3월 6일 화요일

단계적����������� ������������������  향상

4-2

26

• IE 같은 구형 웹브라우저에서도 기본 기능은 이용할 수 있도록 하되, 최신 웹브라우저를 사용할 때 더 좋은 기능을 사용할 수 있도록 개발한다.• 성능이 가장 낮은 웹브라우저를 기준으로 모든 웹브라우저에서 똑같이 보이도록 개발하지 않고, 모든 사용자에게 제공되어야 할 필수 정보는 모두 제공하되 최신 웹브라우저를 쓰는 사람에게 더욱 좋은 화면 효과와 추가 기능을 제공한다.

개념

• 필수 기능은 모든 사용자에게 제공하되 최신 웹브라우저에서 더 나은 화면과 효과, 추가된 부가기능을 사용할 수 있게 개발한다.• 신기술 도입에 장벽이 사라지고, 하위 호환을 위한 소요시간이 줄어들어 생산성을 높일 수 있다. 또한 구형 웹브라우저를 사용하는 사람에게 자연스럽게 웹브라우저의 업그레이드를 유도할 수 있다.

단계적����������� ������������������  향상의����������� ������������������  적용

12년 3월 6일 화요일

적용����������� ������������������  예

네이버����������� ������������������  SE����������� ������������������  검색

단계적����������� ������������������  향상

4-3

27

모바일통검����������� ������������������  이미지뷰어

12년 3월 6일 화요일

TODO����������� ������������������  LIST

4-2

28

• HTML5 DTD 사용

• viewport 사용

• 다양한 해상도 / 다양한 폰트를 고려한 디자인

• 마우스 없이 터치스크린 사용을 고려한 디자인• 플러그인의 사용을 줄이고 자바스크립트를 통한 개발• HTML5 / CSS3 / 웹표준을 준수한 개발• 단계적 향상 개념의 적용

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi”>

<!DOCTYPE html>

body{font-family:helvetica}

12년 3월 6일 화요일

감사합니다.

me2day����������� ������������������  :����������� ������������������  http://me2day.net/amatiemail����������� ������������������  :����������� ������������������  [email protected]

12년 3월 6일 화요일

12년 3월 6일 화요일