모바일 웹 세미나#2. 모바일 웹 브라우저

잠깐 복습 왜 한국에는 모바일 열풍이 늦게 불었는가 모바일 웹 브라우저와 웹 뷰어 콘텐츠 배치에 관한 짧은 설명

모바일 웹 브라우저 WebKit 기반 브라우저 Opera Mini, Mobile 그 외 여러 브라우저

기능에 따른 구분 Low-End

텍스트 위주 , 간단한 그림과 표 CSS/JS 먹는건가여

Mid-End 이제 CSS 와 JS 를 볼 수 있음 하지만 큰 거 불러왔더니 속도가

High-End 종결자

고려 대상 누구에게 보여 주냐에 따라 달라짐 Low-End: WAP 페이지와 큰 차이가 없음

대부분 모바일 브라우저가 이 정도는 가능 Too High: 보기는 좋음

연산은 곧 배터리 소모 PC 보다 더 심한 렌더링 엔진간의 차이 아오 깨져 안 볼래

고려 대상 Low-End

자바스크립트 /CSS 는 포기할 것 텍스트 브라우저로도 잘 보여야 할 것

데스크톱이 아님을 잊지 말 것 시뮬레이션은 해 보고 게시할 것

브라우저 차별 User-Agent 필터링

어이없지만 많은 국내 모바일 사이트 리다이렉션과 필터링은 다름

별도의 모바일 페이지 URL 이 없음 자바스크립트를 통한 모바일 감지 +Location 제로보드 XE

실제로 당해 보면 엄청 짜증남 예시 : 대전 모바일 BIS

테스트 Wi-Fi 없는 휴대폰 앞에서는 묵념 Wi-Fi 가 있으면 무료로 쉽게 테스트 가능

로컬에 서버 열기 호스팅 서비스

브라우저 에뮬레이터 Opera Mini/Mobile http://www.opera.com/developer/tools/

내용 맞추기 CSS 픽셀 vs. 브라우저 픽셀

100% 에서 1 CSS 픽셀 = 1 브라우저 픽셀 웹 브라우저의 크기 조정은 CSS: 브라우저

모바일 장치의 width? 데스크톱 웹 사이트가 깨지지 않도록 넉넉히 iPhone 980/Opera 850/ 안드로이드 800 S60/ 블랙베리 : 특이한 경우

meta name="viewport" 원래는 애플의 확장 중 하나

많은 모바일 브라우저가 지원 Opera Mobile: 과거에는 XHTML Mobile 로

DOCTYPE 을 지정해야 했으나 현재는 무관 너비 , 높이 , 배율 , 해상도를 지정할 수 있음 CSS 픽셀과 브라우저 픽셀의 매핑 조정

폭 지정하기 <meta name="viewport" content="width=device-width"

/>

지정하지 않으면 브라우저가 폭을 결정 지정하면 현재 장치의 폭을 width 로 사용

하드코딩하는 나쁜 버릇도 있음 ( 특히 320px) 높이는 대개 브라우저에게 맡김

크기 조정 <meta name="viewport" content="initial-scale=1.0, minimum-scale=0.25, maximum-scale=2.0, user-scalable=yes" />

100% 를 기본으로 한 화면 확대 / 축소 사용 가능한 값은 0 부터 10 까지 user-scalable 을 no 로 바꾸면 크기

고정 안타깝지만 많은 모바일 사이트 접근성 기능으로 끌 수 있음

해상도 <meta name="viewport" content="target-den-sitydpi=device-dpi">

high-dpi, medium-dpi, low-dpi 픽셀 단위 디자인이 필요할 때 사용

대부분 필요하지 않음 디자이너가 DPI 최적화를 맡게 됨

기껏 이렇게 해 놓고도 픽셀 하드코딩해 놓으면 말짱 도루묵

모바일 코레일 웹 사이트 상대 크기 레이아웃을 쓰기 전에 필요함 폭이 뒤틀리면 사용자가 크기를 조정함

모바일의 가장 중요한 요소

미디어 쿼리 CSS3 장치 속성에 따라서 적용되는 CSS 규칙 모바일과 데스크톱을 한 CSS 로 가능

HTML 5/CSS 3 HTML 5

비디오와 오디오 로컬 저장소 새로운 input 태그 , API

CSS 3 새로운 선택자 , 효과 border-radius, 그라데이션 , 투명도

border-radius 둥근 버튼을 만들기 위한 삽질 CSS 단계에서의 둥근 사각형 지원 -webkit, -moz, -o 접두사 없는 border-radius 는 비교적 최근

HTML 5 지원 비디오 / 오디오

Ogg/Theora 가 표준에서 밀려남 구글은 WebM 을 들고옴 iPhone 이 H.264 지원 , 그것뿐

로컬 저장소 Web-App 에 중요하게 사용됨

새로운 입력 태그 많은 브라우저가 아직 지원하지 않음

HTML 5 위치 정보 navigator.geolocation HTML API 는 인터페이스만 제공

구현 세부 사항은 브라우저의 몫 표준에서는 좌표만 가져올 수 있음 Wi-Fi, GPS, …

Location-Aware JS 를 짤 수 있음

참고 사이트 http://quirksmode.org/mobile/ http://

webdesignerwall.com/tutorials/css3-media-queries

http://merged.ca/iphone/html5-geolocation

다음 시간 예고 모바일 사이트 디자인

실습 예정 , 노트북 지참