Upload
sang-il-jung
View
373
Download
0
Embed Size (px)
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