Mobile web me2day_seminar

Preview:

Citation preview

미투데이서비스개발팀����������� ������������������  정상일

@2010 NHN CORPORATION

It’s����������� ������������������  about����������� ������������������  usage,����������� ������������������  not����������� ������������������  units.

Mobile����������� ������������������  Web����������� ������������������  개발시����������� ������������������  고려사항들����������� ������������������  

@2010 NHN CORPORATION

Device Detection

Server

@2010 NHN CORPORATION

Device Detection

DeviceDevice

DDR(Device Description Repository)

DeviceDeviceDevice

Level1 Level2 Level3

User-Agent X-Wap-ProfileAccept

@2010 NHN CORPORATION

Device Detection

Wireless����������� ������������������  Universal����������� ������������������  Resource����������� ������������������  File

•Device����������� ������������������  Description����������� ������������������  Repository(화면크기,����������� ������������������  JS지원범위,����������� ������������������  Cookie지원범위)

•API����������� ������������������  (Java,����������� ������������������  .Net,����������� ������������������  PHP)•7000+����������� ������������������  device����������� ������������������  info•Google,����������� ������������������  Facebook����������� ������������������  support•Opensource

Device Targeting & Grouping

•Ajax����������� ������������������  지원여부•화면����������� ������������������  너비(Portrait����������� ������������������  <->����������� ������������������  landscape)•Webkit����������� ������������������  렌더링����������� ������������������  엔진을����������� ������������������  사용하는지����������� ������������������  •터치스크린인지•...

Mobile����������� ������������������  Web

WAP

Desktop����������� ������������������  Web

기타����������� ������������������  모든����������� ������������������  모바일

스마트폰

데스크탑,����������� ������������������  태블릿

Even Google was not rich enough to support all of the different

mobile platforms from Apple’s AppStore to those of the BlackBerry, Window Mobile,

Android and the many variations of the Nokia platform. - Vic Gundotra, Google Engineering VP -

@2010 NHN CORPORATION

Hybrid Architecture

Server

Synchronizer

Static resources(CSS, JS, Image...)

Native(Hybrid)Mobile Web

DB

Data Aggregator

DBDBDBDB

Web Application

versioned HTML

@2010 NHN CORPORATION

Loading Time affects your Bottom Line Desktop VS Mobile

FrontEnd

웹서비스의����������� ������������������  성능의����������� ������������������  90%는����������� ������������������  Frontend에서����������� ������������������  결정된다.

Mobile도.

@2010 NHN CORPORATION

iOS Webkit의 제약사항

•GIF,����������� ������������������  PNG,����������� ������������������  TIFF����������� ������������������  최대크기는����������� ������������������  3MB(Decoded)• JPEG의����������� ������������������  최대����������� ������������������  크기는����������� ������������������  32MB����������� ������������������  (Decoded)• JS,����������� ������������������  HTML,����������� ������������������  CSS의����������� ������������������  최대����������� ������������������  크기는����������� ������������������  각����������� ������������������  10MB• JS����������� ������������������  런타임아웃은����������� ������������������  10초����������� ������������������  

@2010 NHN CORPORATION

HTTP 동시 Connection

클라이언트도메인당 최대 Connection 수

(HTTP/1.1)

IE6, 7 2

IE8, 9 6

Firefox 5 6

Safari 6

Chrome 12 6

Android 4~12

Galaxy S 6~12

iPhone 4~6

{����������� ������������������  ����������� ������������������  ����������� ������������������  }3G 1Mbyte bandwidth

적절한 커넥션 활용 데이터 양의 최소화

@2010 NHN CORPORATION

데이터 최적화

{����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  }이미지는����������� ������������������  PNG

multi-size����������� ������������������  이미지����������� ������������������  지원“static”����������� ������������������  or����������� ������������������  “on����������� ������������������  the����������� ������������������  fly”

JS����������� ������������������  CSS����������� ������������������  minify����������� ������������������  &����������� ������������������  compressing

<img����������� ������������������  alt=""����������� ������������������  src="data:image/png;base64,iVBORw0K...ggg=="����������� ������������������  />

{����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  }

@2010 NHN CORPORATION

요청수의 최소화MSS(Maximum����������� ������������������  Segment����������� ������������������  Size)����������� ������������������  :1360byte

Naver����������� ������������������  로그인����������� ������������������  쿠키,����������� ������������������  2Kbyte����������� ������������������  이상.����������� ������������������  

Cookieless����������� ������������������  domain����������� ������������������  사용(e.g.����������� ������������������  static.naver.net)

HTTP����������� ������������������  GET요청����������� ������������������  한개에����������� ������������������  0.6초

GET-if-not-modified����������� ������������������  신중하게.����������� ������������������  

@2010 NHN CORPORATION

요청수의 최소화Piggyback

전송하는����������� ������������������  김에����������� ������������������  함께...

@2010 NHN CORPORATION

Piggybackif first_access? 이 글과 함께 전, 후 글을 가져온다. end if swipe_direction == “left” 이전 글을 보여줌과 함께 그 전 글 N개를 함께 가져온다. else # swipe_direction == “right” 다음 글을 보여줌과 함께 그 다음 글 N개를 함께 가져온다.end

me2day 모바일 웹 개별글 페이지 사례

O V O

O O O V O O

O O O O V O

O O O O O V O O O

@2010 NHN CORPORATION

HTTP Pipelining

eliminate RTT !!

User eXperienceButton����������� ������������������  size����������� ������������������  44����������� ������������������  x����������� ������������������  44(iOS����������� ������������������  HIG)

Touch����������� ������������������  based����������� ������������������  Interface����������� ������������������  

•mouse����������� ������������������  over/enter/out•팝업•지나친����������� ������������������  Ajax•자동새로고침•자동리다이렉트•수직스크롤•프레임

minimize����������� ������������������  input����������� ������������������  actione.g.����������� ������������������  URL,����������� ������������������  Pagination����������� ������������������  

FrontEnd점진적����������� ������������������  개발

Contents 중심 개발

UX개선(JavaScript, Ajax)

프레젠테이션 개선(CSS)하지만,����������� ������������������  대부분����������� ������������������  큰����������� ������������������  레거시를����������� ������������������  가진다.따라서,����������� ������������������  현재����������� ������������������  레거시에서의����������� ������������������  Defect가����������� ������������������  우선적으로����������� ������������������  진행되면서����������� ������������������  점진적으로����������� ������������������  개선해나간다.

점진적����������� ������������������  개발의����������� ������������������  긍정적인����������� ������������������  효과����������� ������������������  -����������� ������������������  Fallback처리

@2010 NHN CORPORATION

Backend

{����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  }Backend에서 Mobile만을 위한 특별한 기술은 없다.

Back to basics

@2010 NHN CORPORATION

Backend

{����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  }Accept-Encoding : gzip, deflate

Content-Encoding : gzip

me2day����������� ������������������  Nginx����������� ������������������  gzip설정����������� ������������������  

gzip����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  on;gzip_min_length����������� ������������������  ����������� ������������������  ����������� ������������������  1000;gzip_buffers����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  128����������� ������������������  64k;gzip_vary����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  off;gzip_types����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  text/plain����������� ������������������  text/html����������� ������������������  text/css����������� ������������������  text/xml����������� ������������������  application/xml����������� ������������������  application/xml+rss����������� ������������������  text/javascript����������� ������������������  application/x-javascript����������� ������������������  application/json;gzip_disable����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  "MSIE����������� ������������������  [1-6]\.";gzip_http_version����������� ������������������  1.0;

@2010 NHN CORPORATION

Backend

{����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  }Cache!����������� ������������������  Cache!����������� ������������������  Cache!����������� ������������������  

Date����������� ������������������  :����������� ������������������  응답시간(GMT)Last-Modified����������� ������������������  :����������� ������������������  없을경우����������� ������������������  GET-if-Modified-Since����������� ������������������  발생Expire����������� ������������������  :����������� ������������������  오래����������� ������������������  캐시를����������� ������������������  유지하려면����������� ������������������  이����������� ������������������  값이����������� ������������������  클수록����������� ������������������  유리����������� ������������������  Cache-Control����������� ������������������  :����������� ������������������  e.g.����������� ������������������  no-cache,no-transformPragma����������� ������������������  :����������� ������������������  optional,����������� ������������������  사용안함.����������� ������������������  cache-control:no-cache사용Vary����������� ������������������  :����������� ������������������  캐시정책����������� ������������������  그루핑����������� ������������������  e.g.����������� ������������������  user-agent,����������� ������������������  acceptEtag����������� ������������������  :����������� ������������������  없을경우����������� ������������������  GET-if-Modified-Since����������� ������������������  발생명확한����������� ������������������  캐시����������� ������������������  파기는����������� ������������������  URL����������� ������������������  변경하기

@2010 NHN CORPORATION

Test Env.

http://cloudfour.com/mobile

Connection관련����������� ������������������  테스트원격지����������� ������������������  모바일����������� ������������������  테스팅

http://perfectomobile.com

데스크탑����������� ������������������  브라우저에서의����������� ������������������  테스트

-����������� ������������������  User-Agent����������� ������������������  switcher-����������� ������������������  window����������� ������������������  resizer����������� ������������������  -����������� ������������������  header����������� ������������������  modifier����������� ������������������  

All����������� ������������������  10����������� ������������������  mobile����������� ������������������  WebKits����������� ������������������  I’ve����������� ������������������  identified����������� ������������������  so����������� ������������������  far����������� ������������������  are����������� ������������������  

subtly����������� ������������������  or����������� ������������������  wildly����������� ������������������  different.

http://www.quirksmode.org/blog/archives/2009/10/there_is_no_web.html

@2010 NHN CORPORATION

BEST

{����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  }실기기에서의 테스트가 가장 정확

weinre(WEb����������� ������������������  INspector����������� ������������������  REmote)

Inspector����������� ������������������  서버����������� ������������������  띄우기git����������� ������������������  clone����������� ������������������  https://github.com/callback/callback-weinre.gitjava����������� ������������������  -jar����������� ������������������  weinre.jar����������� ������������������  --httpPort����������� ������������������  8000����������� ������������������  --boundHost����������� ������������������  ***.***.***.***

http://***.***.***.***:8000/clinent/#anonymous

Inspector����������� ������������������  연결하기(웹페이지����������� ������������������  내에)����������� ������������������  <script����������� ������������������  src=”http://xxx.xxx.xxx.xxx:8000/target/target-script-

min.js#anonymous”></script>

@2010 NHN CORPORATION

{����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  }Console.logDocument.title

Proxy(CAProxy, Fiddler, Scoop)

7.5억����������� ������������������  Active����������� ������������������  Users

2006(WAP)����������� ������������������  >����������� ������������������  2006(iPhone)����������� ������������������  >����������� ������������������  2007(FB����������� ������������������  API)����������� ������������������  >����������� ������������������  2008(iPhone����������� ������������������  Appstore)����������� ������������������  >����������� ������������������  2009(Android)

OTL

touch.facebook.com����������� ������������������  /����������� ������������������  m.facebook.com����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ...����������� ������������������  not����������� ������������������  good

Device����������� ������������������  Detecting(WURF),����������� ������������������  Progressive����������� ������������������  enhancement

Project����������� ������������������  FaceWeb

<m:button����������� ������������������  />

Scroll,����������� ������������������  Speed

News����������� ������������������  Feed,����������� ������������������  Profile����������� ������������������  Time����������� ������������������  Line,����������� ������������������  requests,����������� ������������������  notifications...����������� ������������������  =>����������� ������������������  FaceWeb����������� ������������������  

HTML5

@2010 NHN CORPORATION

The End