Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Mobile web me2day_seminar

551 views

Published on

mobile dev

  • Be the first to comment

  • Be the first to like this

Mobile web me2day_seminar

  1. 1. 미투데이서비스개발팀
  2. 2.  정상일
  3. 3. It’s
  4. 4.  about
  5. 5.  usage,
  6. 6.   not
  7. 7.  units. @2010 NHN CORPORATION
  8. 8. Mobile
  9. 9.  Web
  10. 10.  개발시
  11. 11.  고려사항들
  12. 12.  
  13. 13. Device Detection @2010 NHN CORPORATION
  14. 14. Device Detection Device Device Device Device Device User-Agent X-Wap-Profile AcceptServer Level1 Level2 Level3 DDR (Device Description Repository) @2010 NHN CORPORATION
  15. 15. Device Detection Wireless
  16. 16.  Universal
  17. 17.   Resource
  18. 18.  File• Device
  19. 19.  Description
  20. 20.  Repository (화면크기,
  21. 21.  JS지원범위,
  22. 22.  Cookie지원범위)• API
  23. 23.  (Java,
  24. 24.  .Net,
  25. 25.  PHP)• 7000+
  26. 26.  device
  27. 27.  info• Google,
  28. 28.  Facebook
  29. 29.  support• Opensource @2010 NHN CORPORATION
  30. 30. Device Targeting Grouping WAP 기타
  31. 31.  모든
  32. 32.  모바일Desktop
  33. 33.  Web 데스크탑,
  34. 34.  태블릿 •Ajax
  35. 35.  지원여부 •화면
  36. 36.  너비(Portrait
  37. 37.  -
  38. 38.  landscape) •Webkit
  39. 39.  렌더링
  40. 40.  엔진을
  41. 41.  사용하는지
  42. 42.   •터치스크린인지 Mobile
  43. 43.  Web 스마트폰 •...
  44. 44. 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 -
  45. 45. 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
  46. 46. Loading Time affects your Bottom Line Desktop VS Mobile @2010 NHN CORPORATION
  47. 47. FrontEnd웹서비스의
  48. 48.  성능의
  49. 49.  90%는
  50. 50.  Frontend에서
  51. 51.  결정된다. Mobile도.
  52. 52. iOS Webkit의 제약사항 • GIF,
  53. 53.  PNG,
  54. 54.  TIFF
  55. 55.  최대크기는
  56. 56.  3MB(Decoded) • JPEG의
  57. 57.  최대
  58. 58.  크기는
  59. 59.  32MB
  60. 60.  (Decoded) • JS,
  61. 61.  HTML,
  62. 62.  CSS의
  63. 63.  최대
  64. 64.  크기는
  65. 65.  각
  66. 66.  10MB • JS
  67. 67.  런타임아웃은
  68. 68.  10초
  69. 69.   @2010 NHN CORPORATION
  70. 70. HTTP 동시 Connection 도메인당 최대클라이언트 Connection 수 {
  71. 71.  
  72. 72.  
  73. 73.  } (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
  74. 74. 데이터 최적화{
  75. 75.  
  76. 76.  
  77. 77.  
  78. 78.  
  79. 79.  
  80. 80.  } 이미지는
  81. 81.  PNG multi-size
  82. 82.  이미지
  83. 83.  지원 “static”
  84. 84.  or
  85. 85.  “on
  86. 86.  the
  87. 87.  fly” JS
  88. 88.  CSS
  89. 89.  minify
  90. 90.  
  91. 91.  compressing img
  92. 92.  alt=
  93. 93.  src=data:image/png;base64,iVBORw0K...ggg==
  94. 94.  / @2010 NHN CORPORATION
  95. 95. 요청수의 최소화 MSS(Maximum
  96. 96.  Segment
  97. 97.  Size)
  98. 98.  :1360byte{
  99. 99.  
  100. 100.  
  101. 101.  
  102. 102.  
  103. 103.  
  104. 104.  
  105. 105.  
  106. 106.  
  107. 107.  
  108. 108.  
  109. 109.  
  110. 110.  
  111. 111.  
  112. 112.  
  113. 113.  
  114. 114.  
  115. 115.  
  116. 116.  
  117. 117.  
  118. 118.  
  119. 119.  
  120. 120.  
  121. 121.  
  122. 122.  
  123. 123.  
  124. 124.  } HTTP
  125. 125.  GET요청
  126. 126.  한개에
  127. 127.  0.6초 Naver
  128. 128.  로그인
  129. 129.  쿠키,
  130. 130.  2Kbyte
  131. 131.  이상.
  132. 132.   Cookieless
  133. 133.  domain
  134. 134.  사용(e.g.
  135. 135.  static.naver.net) GET-if-not-modified
  136. 136.  신중하게.
  137. 137.   @2010 NHN CORPORATION
  138. 138. 요청수의 최소화 Piggyback전송하는
  139. 139.  김에
  140. 140.  함께... @2010 NHN CORPORATION
  141. 141. 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
  142. 142. HTTP Pipeliningeliminate RTT !! @2010 NHN CORPORATION
  143. 143. User eXperienceButton
  144. 144.  size
  145. 145.  44
  146. 146.  x
  147. 147.  44(iOS
  148. 148.  HIG)Touch
  149. 149.  based
  150. 150.  Interface
  151. 151.  minimize
  152. 152.  input
  153. 153.  action e.g.
  154. 154.  URL,
  155. 155.  Pagination
  156. 156.   •mouse
  157. 157.  over/enter/out •팝업 •지나친
  158. 158.  Ajax •자동새로고침 •자동리다이렉트 •수직스크롤 •프레임
  159. 159. FrontEnd 점진적
  160. 160.  개발 Contents 중심 개발 점진적
  161. 161.  개발의
  162. 162.  긍정적인
  163. 163.  효과
  164. 164.  -
  165. 165.  Fallback처리 하지만,
  166. 166.  대부분
  167. 167.  큰
  168. 168.  레거시를
  169. 169.  가진다. 프레젠테이션 개선(CSS) 따라서,
  170. 170.  현재
  171. 171.  레거시에서의
  172. 172.  Defect가
  173. 173.  우선적 으로
  174. 174.  진행되면서
  175. 175.  점진적으로
  176. 176.  개선해나간다.UX개선(JavaScript, Ajax)
  177. 177. Backend{
  178. 178.  
  179. 179.  
  180. 180.  
  181. 181.  
  182. 182.  
  183. 183.  } Backend에서 Mobile만을 위한 특별한 기술은 없다. Back to basics @2010 NHN CORPORATION
  184. 184. Backend{
  185. 185.  
  186. 186.  
  187. 187.  
  188. 188.  
  189. 189.  
  190. 190.  } Accept-Encoding : gzip, deflate Content-Encoding : gzip me2day
  191. 191.  Nginx
  192. 192.  gzip설정
  193. 193.   gzip
  194. 194.  
  195. 195.  
  196. 196.  
  197. 197.  
  198. 198.  
  199. 199.  
  200. 200.  
  201. 201.  
  202. 202.  
  203. 203.  
  204. 204.  
  205. 205.  
  206. 206.  
  207. 207.  on; gzip_min_length
  208. 208.  
  209. 209.  
  210. 210.  1000; gzip_buffers
  211. 211.  
  212. 212.  
  213. 213.  
  214. 214.  
  215. 215.  
  216. 216.  128
  217. 217.  64k; gzip_vary
  218. 218.  
  219. 219.  
  220. 220.  
  221. 221.  
  222. 222.  
  223. 223.  
  224. 224.  
  225. 225.  
  226. 226.  off; gzip_types
  227. 227.  
  228. 228.  
  229. 229.  
  230. 230.  
  231. 231.  
  232. 232.  
  233. 233.  
  234. 234.  text/plain
  235. 235.  text/html
  236. 236.  text/css
  237. 237.  text/xml
  238. 238.   application/xml
  239. 239.  application/xml+rss
  240. 240.  text/javascript
  241. 241.   application/x-javascript
  242. 242.  application/json; gzip_disable
  243. 243.  
  244. 244.  
  245. 245.  
  246. 246.  
  247. 247.  
  248. 248.  MSIE
  249. 249.  [1-6].; gzip_http_version
  250. 250.  1.0; @2010 NHN CORPORATION
  251. 251. Backend{
  252. 252.  
  253. 253.  
  254. 254.  
  255. 255.  
  256. 256.  
  257. 257.  } Cache!
  258. 258.  Cache!
  259. 259.  Cache!
  260. 260.   Date
  261. 261.  :
  262. 262.  응답시간(GMT) Last-Modified
  263. 263.  :
  264. 264.  없을경우
  265. 265.  GET-if-Modified-Since
  266. 266.  발생 Expire
  267. 267.  :
  268. 268.  오래
  269. 269.  캐시를
  270. 270.  유지하려면
  271. 271.  이
  272. 272.  값이
  273. 273.  클수록
  274. 274.  유리
  275. 275.   Cache-Control
  276. 276.  :
  277. 277.  e.g.
  278. 278.  no-cache,no-transform Pragma
  279. 279.  :
  280. 280.  optional,
  281. 281.  사용안함.
  282. 282.  cache-control:no-cache사용 Vary
  283. 283.  :
  284. 284.  캐시정책
  285. 285.  그루핑
  286. 286.  e.g.
  287. 287.  user-agent,
  288. 288.  accept Etag
  289. 289.  :
  290. 290.  없을경우
  291. 291.  GET-if-Modified-Since
  292. 292.  발생 명확한
  293. 293.  캐시
  294. 294.  파기는
  295. 295.  URL
  296. 296.  변경하기 @2010 NHN CORPORATION
  297. 297. Test Env. 원격지
  298. 298.  모바일
  299. 299.  테스팅 Connection관련
  300. 300.  테스트 http://perfectomobile.com 데스크탑
  301. 301.  브라우저에서의
  302. 302.  테스트 -
  303. 303.  User-Agent
  304. 304.  switcher -
  305. 305.  window
  306. 306.  resizer
  307. 307.   -
  308. 308.  header
  309. 309.  modifier
  310. 310.  http://cloudfour.com/mobile @2010 NHN CORPORATION
  311. 311. All
  312. 312.  10
  313. 313.  mobile
  314. 314.  WebKits
  315. 315.  I’ve
  316. 316.  identified
  317. 317.  so
  318. 318.  far
  319. 319.  are
  320. 320.   subtly
  321. 321.  or
  322. 322.  wildly
  323. 323.  different. http://www.quirksmode.org/blog/archives/2009/10/there_is_no_web.html
  324. 324. ST B E{
  325. 325.  
  326. 326.  
  327. 327.  실기기에서의
  328. 328.  
  329. 329.  테스트가
  330. 330.  
  331. 331.  가장
  332. 332.  
  333. 333.  
  334. 334.  정확
  335. 335.  
  336. 336.  
  337. 337.  }
  338. 338.  
  339. 339.  
  340. 340.  
  341. 341.  
  342. 342.  
  343. 343.  
  344. 344.  
  345. 345.  
  346. 346.  
  347. 347.  
  348. 348.  
  349. 349.  
  350. 350.  
  351. 351.  
  352. 352.  
  353. 353.  
  354. 354.  
  355. 355.  
  356. 356.  
  357. 357.  
  358. 358.  
  359. 359.  
  360. 360.  
  361. 361.  
  362. 362.  
  363. 363.  
  364. 364.  
  365. 365.  
  366. 366.  
  367. 367.  
  368. 368.  
  369. 369.  
  370. 370.  
  371. 371.  
  372. 372.  
  373. 373.  
  374. 374.  
  375. 375.  
  376. 376.  
  377. 377.  
  378. 378.  
  379. 379.  
  380. 380.  
  381. 381.  
  382. 382.  
  383. 383.  
  384. 384.  
  385. 385.  
  386. 386.  
  387. 387.  
  388. 388.  
  389. 389.  
  390. 390.  
  391. 391.   @2010 NHN CORPORATION
  392. 392. weinre(WEb
  393. 393.  INspector
  394. 394.  REmote)Inspector
  395. 395.  서버
  396. 396.  띄우기 git
  397. 397.  clone
  398. 398.  https://github.com/callback/callback-weinre.git java
  399. 399.  -jar
  400. 400.  weinre.jar
  401. 401.  --httpPort
  402. 402.  8000
  403. 403.  --boundHost
  404. 404.  ***.***.***.*** http://***.***.***.***:8000/clinent/#anonymousInspector
  405. 405.  연결하기(웹페이지
  406. 406.  내에)
  407. 407.   script
  408. 408.  src=”http://xxx.xxx.xxx.xxx:8000/target/target-script- min.js#anonymous”/script
  409. 409. {
  410. 410.  
  411. 411.  
  412. 412.  
  413. 413.  
  414. 414.  
  415. 415.  } Proxy(CAProxy, Fiddler, Scoop) Console.log Document.title @2010 NHN CORPORATION
  416. 416. 7.5억
  417. 417.  Active
  418. 418.  Users2006(WAP)
  419. 419.  
  420. 420.  2006(iPhone)
  421. 421.  
  422. 422.  2007(FB
  423. 423.  API)
  424. 424.  
  425. 425.  2008(iPhone
  426. 426.  Appstore)
  427. 427.  
  428. 428.  2009(Android) OTL touch.facebook.com
  429. 429.  /
  430. 430.  m.facebook.com
  431. 431.  
  432. 432.  
  433. 433.  
  434. 434.  
  435. 435.  
  436. 436.  ...
  437. 437.  not
  438. 438.  good Device
  439. 439.  Detecting(WURF),
  440. 440.  Progressive
  441. 441.  enhancement Project
  442. 442.  FaceWeb m:button
  443. 443.  / Scroll,
  444. 444.  Speed News
  445. 445.  Feed,
  446. 446.  Profile
  447. 447.  Time
  448. 448.  Line,
  449. 449.  requests,
  450. 450.  notifications...
  451. 451.  =
  452. 452.  FaceWeb
  453. 453.   HTML5
  454. 454. The End @2010 NHN CORPORATION

×