1 / 29

모바 일 웹 세미나

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

liesel
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. 모바일 웹 세미나 #1.모바일 웹 및 콘텐츠

  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: 안구에 습기 • 모두 상용 브라우저

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

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

  14. 정상적인 모바일 브라우저 • 즐겨찾기 목록에서 시작 • 찾기 쉬운 주소 표시줄 • 데이터 전송량 표시 • 기타등등

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

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

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

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

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

  20. 크기 • 170x226, 240x320, 320x480, 360x640 • 480x800, 480x848, 480x960, 540x960 • 여기다가 각각 회전한 것까지 치면 • 아이고 머리야

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

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

  23. Case study: 노아모바일 • 2008년 9월부터 기획 • 해상도와 관계 없는 화면 • 기능 차별 없는 모바일 사이트 • 개인 맞춤형 페이지 제공

  24. 해상도와 관계 없는 화면 • 픽셀 하드코딩 최소화 • 요소 너비는 배율, 높이는 em • 너비 지정도 최소화 • 버튼은 텍스트,CSS3으로 둥근 사각형 • 특정 장치에 최적화시키지 않음 • 여러 장치로 테스트 • 다른 해상도, 글꼴, 플랫폼

  25. 기능 차별 최소화 • 단일 프론트엔드, 다중 테마 • 같은 기능에 대한 페이지가 둘 다 필요 • 우선 순위가 높은 것은 모바일 최적화 • 우선 순위가 낮은 것은 데스크톱 복사

  26. 개인 맞춤 • 즐겨찾기및 새글읽기를 별도 메뉴로 • 로그인 시 새글읽기로 점프 • 원하는 글을 더 빨리 보도록 함

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

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

  29. 다음 시간 예고 • 모바일 브라우저의 기술적 한계 • CSS, AJAX, etc. • 모바일을 위한 웹 기술 • HTML5 • 기술적 한계를 고려한 페이지 만들기

More Related