[2012널리세미나] 네이버 모바일의 숨겨진 코드 읽기

네이버 모바일의 코드와 만들어지기까지의 과정을 파헤쳐봅니다

문지애 2012.2.25.웹표준개발2팀 / UIT센터

<!doctype html><html lang=

”ko”><head><meta charset="utf-8"><meta name="viewport" content="width=device-wid

th, initial-scale=1.

네이버 모바일의숨겨진 코드 읽기

2012년 3월 7일 수요일

1. 다양한 단말 해상도2. 새로운 브라우저3. 모바일 접근성

문지애 2012.2.25.웹표준개발2팀 / UIT센터

<!doctype html><html lang=

”ko”><head><meta charset="utf-8"><meta name="viewport" content="width=device-wid

th, initial-scale=1.




아르고폰, 햅틱폰, 아이팟터치, 드로이드, 엑스페리아, 블랙잭, 미라지, ......



다양한 단말

해상도



Safari Web Content Guidehttp://me2.do/F1oxAM


http://me2.do/F1oxAM

http://me2.do/F1oxAM

<head>

<meta name = "viewport" content = "_____________">

</head>


<head>

<meta name = "viewport" content = "_____________">

</head>

width=320


Viewport데스크톱웹 페이지 전체 내용 중

창 안에 들어온 보이는 영역

모바일텍스트 영역이 어디까지이고

내용이 어떻게 놓여지는지 결정한 영역


















































내용이 어떻게 놓여지는지 결정한 영역 width=320, scale=1.0


width=500






width=500






width=500





뷰포트


100%

검색어 입력NAVER

100%


뷰포트NAVER


100%


100%


뷰포트NAVER


100%


100%


뷰포트NAVER


100%


100%


뷰포트NAVER


<meta name = "viewport" content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">











body{ -webkit-text-size-adjust: _____;}



none



none 200%



auto none 200%



iOS에서 제공하는 글자 크기 조절을 원하지 않는다면-webkit-text-size-adjust 속성값을 none으로 설정합니다.

auto none 200%

none





접속한 브라우저 정보를 알려주는,

UserAgent

Android

iOS Safari



UserAgent

Mozilla/5.0 (iPhone; CPU iPhone OS 5_0_1 like Mac OS X)

AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A405

Safari/7534.48.3



UserAgent

Mozilla/5.0 (Linux; U; Android 4.0.1; ko-kr; Galaxy Nexus Build/ITL41F) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/

534.30


UserAgent 바꾸기설정 > 기본 설정 > 고급 > 메뉴 막대에서 개발자용 메뉴 보기

메뉴 > 개발자용 > 사용자 에이전트 > 브라우저 선택 또는 기타 등록













DTD�� viewport�� fileSi

ze�� UI�� ...

google

daum

yahoo

bing

nate

html4.01�� device,1.0

xhtml1.0

‘2009.03.


XHTML 1.0 Transitional

네이버 모바일 마크업 규칙

Doctype


네이버 모바일 마크업 규칙

Doctype

HTML5


네이버 모바일 마크업 규칙 (일부)

Viewport

width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no



CSS

body{ -webkit-text-size-adjust:none}




아이폰3GS 아이폰4


320*480 640*960



320*480 640*9601 < 2x2



320*480 640*9601 < 2x2



320*480 640*9601 < 2x2



320*480 640*9601 < 2x2



320*480 640*9601 < 2x2



320*480 640*9601 < 2x2



320*480 640*9601 < 2x2



320*480 640*9601 < 2x2



이미지 해상도 대응

.myicon{ background-image:url(icon.png);}

@media screen and (-webkit-min-device-pixel-ratio: 2) {.myicon{ background-image:url(icon2.png); -webkit-background-size:57px 57px;}}























다양한 단말

해상도


아르고폰, 햅틱폰, 아이팟터치, 드로이드, 엑스페리아, 블랙잭, 미라지, 아이폰3GS, 아이폰4, 갤럭시S, 갤럭시S2, 갤럭시 넥서스, 갤럭시 노트, ...

다양한 단말

해상도


아르고폰, 햅틱폰, 아이팟터치, 드로이드, 엑스페리아, 블랙잭, 미라지, 아이폰3GS, 아이폰4, 갤럭시S, 갤럭시S2, 갤럭시 넥서스, 갤럭시 노트, ...

다양한 단말

해상도


단말은 바뀌었는데..그럼 브라우저는?


새로운

브라우저


새로운

브라우저


새로운

브라우저


새로운

브라우저


HTML5 Sections모바일 공통 마크업에 HTML5 섹션 요소를 사용해아웃라인을 명확히 함


HTML5 Sections모바일 공통 마크업에 HTML5 섹션 요소를 사용해아웃라인을 명확히 함

<header><nav>

<section>

<aside><section>

<footer>

<!doctype html>


<input type="________">text


<input type="________">email


iOS Android



iOS Android



iOS Android

<input type="________">search


iOS Android

<input type="________">search


<input type="________">tel

iOS Android


<input type="________">tel

iOS Android


<a href="______________"> ...tel:0317236062


http://m.search.naver.com/tel:0317236062


<a href="______________"> ...tel:0317236062




<input type="text"> placeholder="뉴스 검색">

뉴스 검색



뉴스 검색



뉴스 검색



뉴스 검색


:nth-child(n) :disabled






border-radiusbackground: gradient...box-shadow

WS



WS



WSWS



WS



WSWSbackground: #fc913a;background: gradient..



CSS 파일

w.csse.css



CSS 클래스명

<body class="____">



CSS 클래스명

<body class="____">s



CSS 클래스명

<body class="____">

.s .icon {vertical-align:-2px}

s



CSS 클래스명

<body class="____">


a



CSS 클래스명

<body class="____">


a

.a .mypen {text-indent:-1px}


언제 어디서나 휴대할 수 있는모바일 단말기에

접근성이 확보된다면?


모바일 접근성언제 어디서나 휴대할 수 있는

모바일 단말기에 접근성이 확보된다면?


iOS 손쉬운 사용 Android 접근성


모노 오디오청각 장애인을 위한 모노 오디오는한쪽 귀의 청력을 상실한 사람에게 도움을 줍니다.








AssistiveTouch신체 장애인을 위한 AssistiveTouch는










VoiceOveriOS VoiceOver설정 > 일반 > 손쉬운 사용 > VoiceOver

Android TalkBack설정 > 접근성 > TalkBack




VoiceOver

<h1><img alt="네이버" ...

<input type="search">

<nav role="navigation">


VoiceOver





VoiceOver





.hidden {overflow:hidden;position:absolute;top:auto;left:-10000px;width:1px;height:1px;}

VoiceOver


.hidden {overflow:hidden;position:absolute;top:auto;left:-10000px;width:1px;height:1px;}

VoiceOver

.hidden {overflow:hidden;position:absolute;width:1px;height:1px;text-indent:10px;white-space:nowrap; }


네이버 모바일동일한 HTML 구조의 공통 초기파일을 운영하여 일관성 있는 사용 경험 제공다양한 단말, OS 테스트 및 스크린리더 테스트를 진행한 UIO 운영사내 모바일 관련 지식을 공유할 수 있는 커뮤니티 운영


~ 선물번호 ~


~ 선물번호 ~

그냥 제 닉네임이2107이라서...ㅎ

2172012년 3월 7일 수요일


Technology

[2012널리세미나] 네이버 모바일의 숨겨진 코드 읽기