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

Mobile web me2day_seminar

Embed Size (px)

Citation preview

Page 1: Mobile web me2day_seminar

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

Page 2: Mobile web me2day_seminar

@2010 NHN CORPORATION

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

Page 3: Mobile web me2day_seminar

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

Page 4: Mobile web me2day_seminar

@2010 NHN CORPORATION

Device Detection

Page 5: Mobile web me2day_seminar

Server

@2010 NHN CORPORATION

Device Detection

DeviceDevice

DDR(Device Description Repository)

DeviceDeviceDevice

Level1 Level2 Level3

User-Agent X-Wap-ProfileAccept

Page 6: Mobile web me2day_seminar

@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

Page 7: Mobile web me2day_seminar

Device Targeting & Grouping

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

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

WAP

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

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

스마트폰

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

Page 8: Mobile web me2day_seminar

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 -

Page 9: Mobile web me2day_seminar

@2010 NHN CORPORATION

Hybrid Architecture

Server

Synchronizer

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

Native(Hybrid)Mobile Web

DB

Data Aggregator

DBDBDBDB

Web Application

versioned HTML

Page 10: Mobile web me2day_seminar

@2010 NHN CORPORATION

Loading Time affects your Bottom Line Desktop VS Mobile

Page 11: Mobile web me2day_seminar

FrontEnd

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

Mobile도.

Page 12: Mobile web me2day_seminar

@2010 NHN CORPORATION

iOS Webkit의 제약사항

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

Page 13: Mobile web me2day_seminar

@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

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

Page 14: Mobile web me2day_seminar

@2010 NHN CORPORATION

데이터 최적화

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

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

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

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

Page 15: Mobile web me2day_seminar

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

@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����������� ������������������  신중하게.����������� ������������������  

Page 16: Mobile web me2day_seminar

@2010 NHN CORPORATION

요청수의 최소화Piggyback

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

Page 17: Mobile web me2day_seminar

@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

Page 18: Mobile web me2day_seminar

@2010 NHN CORPORATION

HTTP Pipelining

eliminate RTT !!

Page 19: Mobile web me2day_seminar
Page 20: Mobile web me2day_seminar

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

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

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

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

Page 21: Mobile web me2day_seminar

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

Contents 중심 개발

UX개선(JavaScript, Ajax)

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

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

Page 22: Mobile web me2day_seminar

@2010 NHN CORPORATION

Backend

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

Back to basics

Page 23: Mobile web me2day_seminar

@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;

Page 24: Mobile web me2day_seminar

@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����������� ������������������  변경하기

Page 25: Mobile web me2day_seminar

@2010 NHN CORPORATION

Test Env.

http://cloudfour.com/mobile

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

http://perfectomobile.com

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

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

Page 26: Mobile web me2day_seminar

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

Page 27: Mobile web me2day_seminar

@2010 NHN CORPORATION

BEST

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

Page 28: Mobile web me2day_seminar

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>

Page 29: Mobile web me2day_seminar

@2010 NHN CORPORATION

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

Proxy(CAProxy, Fiddler, Scoop)

Page 30: Mobile web me2day_seminar

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

Page 31: Mobile web me2day_seminar

@2010 NHN CORPORATION

The End