1 / 61

모바 일 웹 세미나

모바 일 웹 세미나. #4. 합본 + 좀 더. 들어가기 전에. 들어가기 전에. 지금은 ?. 달라진 점. 강력해진 프로세서 멀티미디어 높은 버전의 CSS, HTML 유연해진 레이아웃 CDMA, GSM/GPRS -> WCDMA, Wi-Fi 차별성이 적어진 콘텐츠. Before iPhone. 통신사는 그 때나 지금이나 甲 심비안 , 윈도 모바일을 빼면 플랫폼이 없음 예나 지금이나 한국은 노키아를 깝니다 비싼 단말기 가격과 통신 요금 PDA 는 부자들의 전유물

tiger
Download Presentation

모바 일 웹 세미나

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 모바일 웹 세미나 #4. 합본 + 좀 더

  2. 들어가기 전에

  3. 들어가기 전에

  4. 지금은?

  5. 달라진 점 • 강력해진 프로세서 • 멀티미디어 • 높은 버전의 CSS, HTML • 유연해진 레이아웃 • CDMA, GSM/GPRS -> WCDMA, Wi-Fi • 차별성이 적어진 콘텐츠

  6. Before iPhone • 통신사는 그 때나 지금이나 甲 • 심비안, 윈도 모바일을 빼면 플랫폼이 없음 • 예나 지금이나 한국은 노키아를 깝니다 • 비싼 단말기 가격과 통신 요금 • PDA는 부자들의 전유물 • 데이터 요금제 그거 먹는건가여 • 모바일 웹에 대해서 상당히 소극적

  7. After iPhone • WIPI 의무화 폐지, WCDMA 도입 • 노키아의재진출, 하지만 한국 지사는 개호구 • 돈이 되니 너도나도 모바일로 몰림 • 통신사도 고객 유치를 위해 요금제 정비 • 좀 늦은 감이 있는 모바일 붐 • 거품은 곧 꺼지고 현실은 시궁창 • 거품 꺼지기 전에 돈 벌어봅시다 헤헤헤

  8. 모바일 브라우저 • 브라우저: HTML을 직접 해석함 • 모바일 장치 성능은 웹 브라우저 성능 • 렌더링 엔진은 데스크톱보다 많음 • 주로 고성능 휴대폰에 사용 • 뷰어: HTML을 서버를 거쳐서 해석함 • 웹 브라우저 제조사를 거쳐서 나옴 • 이 과정에서 압축이 들어가지만 한계는 있음 • 주로 저성능 휴대폰에 사용

  9. 과거의 모바일 브라우저 • 멀티미디어 먹는건가여 • CSS는 가비압게 무시해 주소서 • 텍스트 위주의 브라우징 • 이런 걸로 데스크톱 사이트는 못 봄 • 표준 먹는건가여 • i-mode, HDML, WML, 그리고… • 이통사와 제조사의 진흙탕 싸움 • 콘텐츠 제작사만 죽어나감

  10. WebKit • KHTML • 애플이 IE를 쓰다가 자체 엔진으로 선회 • KDE에만 쓰이는 부분을 새로 구현 • 초반에 라이선스 분쟁 이후 KDE와 화해함 • LGPL/BSD는 날개를 달고 퍼짐 • 세계 3대 모바일 플랫폼의 주 웹 브라우저

  11. 다른 모바일 브라우저 • NetFront: 일본에서 개발된 브라우저 • Opera: WebKit등장 이전의 본좌 • IE Mobile: 렌더링 엔진이 가장 안 좋음 • 모두 상용 브라우저 • 한 때 시장을 가지고 있었으나 • Opera 제외하면 모두 사망

  12. 기능에 따른 구분 • Low-End • 텍스트 위주, 간단한 그림과 표 • CSS/JS지원 수준은 낮음 • High-End • CSS와 JS를 볼 수 있음 • 장치 속도 == 웹 브라우징 속도 • 플러그인:핫 이슈

  13. 특성 • 마우스와 키보드 바이바이 • D-pad 탐색, 터치 스크린 • QWERTY 키보드도 사치 • 작은 화면, 높은 픽셀 밀도 • PC 96dpi vs모바일최소 150dpi • PC에서 생각하던 글씨나 그림 크기가 작아짐 • 기본적으로 확대해 볼 필요가 있음

  14. 특성 • PC와는 완전히 다른 유저 스토리 • 공포의 무선 인터넷 버튼 • PC보다 불편한 URL 입력 • 모바일 포탈의 중요성 • 사용자들의 기대치 • 손 안의 비서 vs. 바보상자 • 속도, 패킷값

  15. UI 구성 요소 • 즐겨찾기 목록에서 시작 • 찾기 쉬운 주소 표시줄 • 기본적으로 숨어 있는 도구모음 • 기타 편의 기능 • 데이터 전송량표시 • 장치 API와 통합

  16. 기대치 • PC보다 느린 전송속도, 작은 화면 • 더 빠르게, 더 직관적으로 • 데이터 요금 안 나가게 • 짜증나는 절차 생략

  17. 기대치를 위해서 • 너무 많은 내용은 기획자나 사용자나 부담 • 잘 드러나지 않는 브라우저 인터페이스 • 콘텐츠 탐색을 위한 메뉴 • 즐겨찾기에도접근이 힘들기도 함 • 개인 맞춤 사이트 • 광고 떡칠은어그로 확정

  18. 생각해 볼 것 • 어떤 내용을 배치할 것인가? • 어떤 식으로 배치할 것인가? • 어떤 크기에 맞출 것인가? • 색 배열은? 그림은?

  19. 배치 • 두괄식 구성 • 메뉴를 뒤로, 내용을 앞으로 • 좀 더 빠른 탐색 • 미괄식 구성 • 메뉴를 앞으로, 내용을 뒤로 • 한 화면에 메뉴만 있으면 시망 • 모바일에서는 지양해야 할 방식

  20. 내용 • 본문 위주 • 관련없는 링크는 적게 • 필요없다 싶은 것은 과감히 생략 • 뒤로/앞으로 안 누르고도 탐색 가능하게

  21. 크기 • 170x226, 240x320, 320x480, 360x640 • 480x800, 480x848, 480x960, 540x960 • 정해진 해상도가 없음 • 모바일장치 제조사 마음 • 대세는 있어도 ‘이것이 표준이다’는 없음

  22. 크기 • 픽셀 하드코딩은 경계합시다 • 이미지 사용은 필요한 곳만 • 버튼 등은 가급적 텍스트로 • 뭉개지거나 깨지지 않도록 • 내용은 최대한 빨리 나오게 • 시스템이 사용하는 영역: 높이를 줄임 • 특히 가로 화면에서 타격이 큼

  23. 색 배열 • AMOLED, LCD의 특성은 반대 • 양쪽 다 제공하면 좋겠지만… • 세밀한 그라데이션은 구분 불가 • 모바일디스플레이는 다름 • 색 조정 개념이 없음 • 눈에 띄면서도 피로하지 않은 • 그러면서도 종류는 많지 않은 • 색 구분이 필요함

  24. Web vs. App • 관건: 하드웨어를 얼마나 사용하는가? • WebGL, HTML5? 아직은 시기상조 • HTTP 요청만 보내는 App? 자원낭비 • 전화번호부, 가속도를 웹에서? 표준이 없음 • 하드웨어나 플랫폼과 통신한다면 App • 단순한 정보만 보여 준다면 웹

  25. Web-App • 단순한 웹보다는 플랫폼에 가깝고 • 단순한 앱보다는 웹에 가까움 • 정보성 이상의 기능 제공 • AJAX와 웹 브라우저의 발전 • URL과 콘텐츠는 따로 놈 • 노키아WRT • 정보성 페이지를 이렇게 구현해도 낭비

  26. 고려 대상 • 누구에게 보여 주냐에 따라 달라짐 • Low-End: WAP 페이지와 큰 차이가 없음 • 대부분 모바일 브라우저가 이 정도는 가능 • Too High: 보기는 좋음 • 연산은 곧 배터리 소모 • PC보다 더 심한 렌더링 엔진간의 차이 • 아오 깨져 안 볼래

  27. 고려 대상 • Low-End • 자바스크립트/CSS는 포기할 것 • 텍스트 브라우저로도 잘 보여야 할 것 • 데스크톱이 아님을 잊지 말 것 • 시뮬레이션은 해 보고 게시할 것

  28. 브라우저 차별 • User-Agent 필터링 • 어이없지만 많은 국내 모바일 사이트 • 리다이렉션과필터링은다름 • 별도의 모바일 페이지 URL이 없음 • 자바스크립트를 통한 모바일 감지+Location • 제로보드 XE • 실제로 당해 보면 엄청 짜증남 • 예시: 대전 모바일BIS

  29. 테스트 • Wi-Fi없으면 안 됨 • Wi-Fi가 있으면 무료로 쉽게 테스트 가능 • 로컬에 서버 열기 • 호스팅서비스 • 브라우저 에뮬레이터 • Opera Mini/Mobile • http://www.opera.com/developer/tools/

  30. 공통 사항 • 글꼴에 대해서는 잊어버려라 • 산세리프와세리프 구분도 없음 • 웹폰트? 그런 거 아직 표준화 안 되었음 • 마우스 이벤트에 대해서는 잊어버려라 • iOS/안드로이드는 터치 이벤트를 제공함 • 다른 브라우저는 마우스 이벤트를 흉내냄 • 마우스 이벤트 지원도 부분적

  31. 공통 사항 • 글씨 크기 100%도 부족할 때가 있다 • 기본적으로 살짝 크게 디자인됨 • 데스크톱에서 보면 좀 다름 • 모든 휴대폰이 같은 OS는 아니다 • 특정 OS 최적화는 피해야 할 것 • 데스크톱에 비해 낮은 표준 구현 정도 • 대부분 브라우저는 플랫폼에 강하게 결합됨 • 서드파티브라우저? 수가 거의 없음

  32. 내용 맞추기 • CSS 픽셀 vs. 브라우저 픽셀 • 100%에서 1 CSS 픽셀 =1 브라우저 픽셀 • 웹 브라우저의 크기 조정은 CSS:브라우저 • 모바일장치의 width? • 데스크톱 웹 사이트가 깨지지 않도록 넉넉히 • iPhone 980/Opera 850/안드로이드800 • S60/블랙베리: 특이한 경우

  33. meta name="viewport" • 원래는 애플의 확장 중 하나 • 많은 모바일 브라우저가 지원 • Opera Mobile: 과거에는 XHTML Mobile로 DOCTYPE을 지정해야 했으나 현재는 무관 • 너비, 높이, 배율, 해상도를 지정할 수 있음 • CSS 픽셀과 브라우저 픽셀의 매핑 조정

  34. 폭 지정하기 • <meta name="viewport" content="width=device-width" /> • 지정하지 않으면 브라우저가 폭을 결정 • 지정하면 현재 장치의 폭을 width로 사용 • 하드코딩하는나쁜 버릇도 있음 (특히 320px) • 높이는 대개 브라우저에게 맡김

  35. 크기 조정 • <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로 바꾸면 크기 고정 • 안타깝지만 많은 모바일 사이트 • 접근성 기능으로 끌 수 있음

  36. 해상도 • <meta name="viewport" content="target-densitydpi=device-dpi"> • high-dpi, medium-dpi, low-dpi • 픽셀 단위 디자인이 필요할 때 사용 • 대부분 필요하지 않음 • 디자이너가 DPI 최적화를 맡게 됨

  37. 기껏 이렇게 해 놓고도 • 픽셀 하드코딩해 놓으면 말짱 도루묵 • 모바일코레일 웹 사이트 • 상대 크기 레이아웃을 쓰기 전에 필요함 • 폭이 뒤틀리면 사용자가 크기를 조정함 • 모바일의가장 중요한 요소

  38. viewport가 안 통하는 경우 • <meta name="HandheldFriendly" content="true"/> • <meta name="MobileOptimized" content="0"/> • 마소 모바일IE용 태그 • 화면 크기가 지정한 숫자보다 크면 모바일로 인식 • http://msdn.microsoft.com/en-us/library/ms890014.aspx

  39. HTML 5/CSS 3 • HTML 5 • 비디오와 오디오 • 로컬 저장소 • 새로운 input 태그,API • CSS 3 • 새로운 선택자, 효과 • border-radius, 그라데이션,투명도 • 미디어 쿼리: 상황에 따른 CSS

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

  41. HTML 5 지원 • 비디오/오디오 • Ogg/Theora가 표준에서 밀려남 • 구글은WebM을 들고옴 • iPhone이 H.264지원, 그것뿐 • 로컬 저장소 • Web-App에 중요하게 사용됨 • 새로운 입력 태그 • 많은 브라우저가 아직 지원하지 않음

  42. HTML 5 위치 정보 • navigator.geolocation • HTML API는 인터페이스만 제공 • 구현 세부 사항은 브라우저의 몫 • 표준에서는 좌표만 가져올 수 있음 • Wi-Fi, GPS, … • Location-Aware JS를 짤 수 있음

  43. HTML 페이지 만들기 • 파일 이름 + 쿼리 스트링은 과거의 유물 • 비즈니스 로직과HTML의 잡탕 • 불편한 코드 재사용 • 많은 근대 웹 프레임워크는 템플릿 기반 • 모바일사이트를 위한 템플릿? • 어디서부터 시작해야지?

  44. 그래서 고민했습니다

  45. 이런 게 있습니다

  46. 특징 • ‘다’ 보인다 • 특정 장치나 OS에 최적화되어 있지 않다 • 기본만 정의되어 있으므로 고치기 쉽다 • 배우기에 적당한 시작 지점

  47. 차이점 • HTML5 vs Mobile XHTML • 사실상 DOCTYPE 문제 • CSS와 자바스크립트 적용 단계 • 피처폰용: 간단한 CSS, No JS • 스마트폰용:CSS와 JS의 본격적 활용 • http://www.forum.nokia.com/Develop/Web/Mobile_web_browsing/Web_templates/페이지에서 직접 확인해 볼 것

  48. 비교해 보기 • 피처폰:http://tinyurl.com/mwtmpe • 스마트폰:http://tinyurl.com/mwtse • 다운로드: 앞서 링크한 페이지에서 • BSD 라이선스 • 출처만 명시하면 자유롭게 사용 가능

  49. 분석 • HTML5, viewport 태그로 장치 폭에 맞춤 • header, footer, section, nav, aside -> div • User-Agent를 검사하여 트윅 적용 • CSS/JS의 전방위적 사용 • 처음에 분리하기 살짝 귀찮은 구조 • 일부 효과는 jQuery등으로도 구현 가능

  50. CSS • 화면을 좀 더 넓게 쓰기 위하여 • 기본적으로 여백 삭제 • 필요한 경우 여백은 따로 줌 • 화면을 더 효율적으로 쓰기 위하여 • 메뉴 링크에는 display: block 속성 사용 • 클릭을 쉽게 하기 위하여 폭을 100%로 지정 • Web-App에 사용하기 위한 별도의 스타일 • 이외 기본적으로 제공하는 스타일

More Related