Mobile web me2day_seminar
Upcoming SlideShare
Loading in...5
×
 

Mobile web me2day_seminar

on

  • 455 views

mobile dev

mobile dev

Statistics

Views

Total Views
455
Views on SlideShare
454
Embed Views
1

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 1

https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Mobile web me2day_seminar Mobile web me2day_seminar Presentation Transcript

  • 미투데이서비스개발팀
  •   정상일
  • It’s
  •   about
  •   usage,
  •    not
  •   units. @2010 NHN CORPORATION
  • Mobile
  •   Web
  •   개발시
  •   고려사항들
  •   
  • Device Detection @2010 NHN CORPORATION
  • Device Detection Device Device Device Device Device User-Agent X-Wap-Profile AcceptServer Level1 Level2 Level3 DDR (Device Description Repository) @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 @2010 NHN CORPORATION
  • Device Targeting & Grouping WAP 기타
  •   모든
  •   모바일Desktop
  •   Web 데스크탑,
  •   태블릿 •Ajax
  •   지원여부 •화면
  •   너비(Portrait
  •   <->
  •   landscape) •Webkit
  •   렌더링
  •   엔진을
  •   사용하는지
  •    •터치스크린인지 Mobile
  •   Web 스마트폰 •...
  • Even Google wasnot rich enough to support all of the different mobile platformsfrom Apple’s AppStore to those of the BlackBerry, Window Mobile, Android and the many variations of the Nokia platform. - Vic Gundotra, Google Engineering VP -
  • Hybrid Architecture Static resources DB DB (CSS, JS, Image...) DB DBDB Server Web Application Data Aggregator Synchronizer versioned HTMLMobile Web Native(Hybrid) @2010 NHN CORPORATION
  • Loading Time affects your Bottom Line Desktop VS Mobile @2010 NHN CORPORATION
  • FrontEnd웹서비스의
  •   성능의
  •   90%는
  •   Frontend에서
  •   결정된다. Mobile도.
  • 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 3G 1Mbyte bandwidth Safari 6Chrome 12 6 적절한 커넥션 활용 데이터 양의 최소화 Android 4~12 Galaxy S 6~12 iPhone 4~6 @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{
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   } HTTP
  •   GET요청
  •   한개에
  •   0.6초 Naver
  •   로그인
  •   쿠키,
  •   2Kbyte
  •   이상.
  •    Cookieless
  •   domain
  •   사용(e.g.
  •   static.naver.net) GET-if-not-modified
  •   신중하게.
  •    @2010 NHN CORPORATION
  • 요청수의 최소화 Piggyback전송하는
  •   김에
  •   함께... @2010 NHN CORPORATION
  • me2day 모바일 웹 개별글 페이지 사례 Piggybackif first_access? 이 글과 함께 전, 후 글을 가져온다.endif swipe_direction == “left” 이전 글을 보여줌과 함께 그 전 글 N개를 함께 가져온다.else # swipe_direction == “right” 다음 글을 보여줌과 함께 그 다음 글 N개를 함께 가져온다.end 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 Pipeliningeliminate RTT !! @2010 NHN CORPORATION
  • User eXperienceButton
  •   size
  •   44
  •   x
  •   44(iOS
  •   HIG)Touch
  •   based
  •   Interface
  •   minimize
  •   input
  •   action e.g.
  •   URL,
  •   Pagination
  •    •mouse
  •   over/enter/out •팝업 •지나친
  •   Ajax •자동새로고침 •자동리다이렉트 •수직스크롤 •프레임
  • FrontEnd 점진적
  •   개발 Contents 중심 개발 점진적
  •   개발의
  •   긍정적인
  •   효과
  •   -
  •   Fallback처리 하지만,
  •   대부분
  •   큰
  •   레거시를
  •   가진다. 프레젠테이션 개선(CSS) 따라서,
  •   현재
  •   레거시에서의
  •   Defect가
  •   우선적 으로
  •   진행되면서
  •   점진적으로
  •   개선해나간다.UX개선(JavaScript, Ajax)
  • 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-transform Pragma
  •   :
  •   optional,
  •   사용안함.
  •   cache-control:no-cache사용 Vary
  •   :
  •   캐시정책
  •   그루핑
  •   e.g.
  •   user-agent,
  •   accept Etag
  •   :
  •   없을경우
  •   GET-if-Modified-Since
  •   발생 명확한
  •   캐시
  •   파기는
  •   URL
  •   변경하기 @2010 NHN CORPORATION
  • Test Env. 원격지
  •   모바일
  •   테스팅 Connection관련
  •   테스트 http://perfectomobile.com 데스크탑
  •   브라우저에서의
  •   테스트 -
  •   User-Agent
  •   switcher -
  •   window
  •   resizer
  •    -
  •   header
  •   modifier
  •   http://cloudfour.com/mobile @2010 NHN CORPORATION
  • 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
  • ST B E{
  •   
  •   
  •   실기기에서의
  •   
  •   테스트가
  •   
  •   가장
  •   
  •   
  •   정확
  •   
  •   
  •   } 
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •    
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •   
  •    
  •   
  •   
  •   
  •   
  •   
  •   
  •    
  •   
  •   
  •   
  •   
  •   
  •   
  •    @2010 NHN CORPORATION
  • weinre(WEb
  •   INspector
  •   REmote)Inspector
  •   서버
  •   띄우기 git
  •   clone
  •   https://github.com/callback/callback-weinre.git java
  •   -jar
  •   weinre.jar
  •   --httpPort
  •   8000
  •   --boundHost
  •   ***.***.***.*** http://***.***.***.***:8000/clinent/#anonymousInspector
  •   연결하기(웹페이지
  •   내에)
  •    <script
  •   src=”http://xxx.xxx.xxx.xxx:8000/target/target-script- min.js#anonymous”></script>
  • {
  •   
  •   
  •   
  •   
  •   
  •   } Proxy(CAProxy, Fiddler, Scoop) Console.log Document.title @2010 NHN CORPORATION
  • 7.5억
  •   Active
  •   Users2006(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
  • The End @2010 NHN CORPORATION