모바일 웹 세미나#1. 모바일 웹 및 콘텐츠

들어가기 전에

들어가기 전에

지금은 ?

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

Before iPhone 통신사는 그 때나 지금이나 甲 심비안 , 윈도 모바일을 빼면 플랫폼이 없음

예나 지금이나 한국은 노키아를 깝니다 비싼 단말기 가격과 통신 요금

PDA 는 부자들의 전유물 데이터 요금제 그거 먹는건가여

모바일 웹에 대해서 상당히 소극적

After iPhone WIPI 의무화 폐지 , WCDMA 도입

노키아의 재진출 , 하지만 한국 지사는 개호구 돈이 되니 너도나도 모바일로 몰림 통신사도 고객 유치를 위해 요금제 정비 좀 늦은 감이 있는 모바일 붐

거품은 곧 꺼지고 현실은 시궁창 거품 꺼지기 전에 돈 벌어봅시다 헤헤헤

모바일 브라우저 브라우저 : HTML 을 직접 해석함

모바일 장치 성능은 웹 브라우저 성능 렌더링 엔진은 데스크톱보다 많음 주로 고성능 휴대폰에 사용

뷰어 : HTML 을 서버를 거쳐서 해석함 웹 브라우저 제조사를 거쳐서 나옴 이 과정에서 압축이 들어가지만 한계는 있음 주로 저성능 휴대폰에 사용

과거의 모바일 브라우저 멀티미디어 먹는건가여

CSS 는 가비압게 무시해 주소서 텍스트 위주의 브라우징 이런 걸로 데스크톱 사이트는 못 봄

표준 먹는건가여 i-mode, HDML, WML, 그리고… 이통사와 제조사의 진흙탕 싸움 콘텐츠 제작사만 죽어나감

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

다른 모바일 브라우저 NetFront: 일본에서 개발된 브라우저 Opera: WebKit 등장 이전의 본좌 IE Mobile: 안구에 습기 모두 상용 브라우저

특성 마우스와 키보드 바이바이

D-pad 탐색 , 터치 스크린 QWERTY 키보드도 사치

작은 화면 , 높은 픽셀 밀도 PC 96dpi vs 모바일 >100dpi PC 에서 생각하던 글씨나 그림 크기가 작아짐 기본적으로 확대해 볼 필요가 있음

특성 PC 와는 완전히 다른 유저 스토리

공포의 무선 인터넷 버튼 PC 보다 불편한 URL 입력 모바일 포탈의 중요성

사용자들의 기대치 손 안의 비서 vs. 바보상자 속도 , 패킷값

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

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

기대치를 위해서 너무 많은 내용은 기획자나 사용자나 부담 잘 드러나지 않는 브라우저 인터페이스

콘텐츠 탐색을 위한 메뉴 즐겨찾기에도 접근이 힘들기도 함

개인 맞춤 사이트 광고 떡칠은 어그로 확정

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

배치 두괄식 구성

메뉴를 뒤로 , 내용을 앞으로 좀 더 빠른 탐색

미괄식 구성 메뉴를 앞으로 , 내용을 뒤로 한 화면에 메뉴만 있으면 시망 모바일에서는 지양해야 할 방식

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

크기 170x226, 240x320, 320x480,

360x640 480x800, 480x848, 480x960,

540x960 여기다가 각각 회전한 것까지 치면 아이고 머리야

크기 픽셀 하드코딩은 경계합시다 이미지 사용은 필요한 곳만

버튼 등은 가급적 텍스트로 뭉개지거나 깨지지 않도록

내용은 최대한 빨리 나오게 시스템이 사용하는 영역 : 높이를 줄임 특히 가로 화면에서 타격이 큼

색 배열 AMOLED, LCD 의 특성은 반대

양쪽 다 제공하면 좋겠지만… 세밀한 그라데이션은 구분 불가

모바일 디스플레이는 다름 색 조정 개념이 없음

눈에 띄면서도 피로하지 않은 그러면서도 종류는 많지 않은 색 구분이 필요함

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

해상도와 관계 없는 화면 픽셀 하드코딩 최소화 요소 너비는 배율 , 높이는 em

너비 지정도 최소화 버튼은 텍스트 , CSS3 으로 둥근 사각형

특정 장치에 최적화시키지 않음 여러 장치로 테스트 다른 해상도 , 글꼴 , 플랫폼

기능 차별 최소화 단일 프론트엔드 , 다중 테마 같은 기능에 대한 페이지가 둘 다 필요

우선 순위가 높은 것은 모바일 최적화 우선 순위가 낮은 것은 데스크톱 복사

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

Web vs. App 관건 : 하드웨어를 얼마나 사용하는가 ?

WebGL, HTML5? 아직은 시기상조 HTTP 요청만 보내는 App? 자원낭비 전화번호부 , 가속도를 웹에서 ? 표준이 없음

하드웨어나 플랫폼과 통신한다면 App 단순한 정보만 보여 준다면 웹

Web-App 단순한 웹보다는 플랫폼에 가깝고 단순한 앱보다는 웹에 가까움 정보성 이상의 기능 제공 AJAX 와 웹 브라우저의 발전

URL 과 콘텐츠는 따로 놈 노키아 WRT

정보성 페이지를 이렇게 구현해도 낭비

다음 시간 예고 모바일 브라우저의 기술적 한계

CSS, AJAX, etc. 모바일을 위한 웹 기술

HTML5 기술적 한계를 고려한 페이지 만들기