The document discusses considerations for developing mobile web applications. It covers device detection, which involves identifying devices through information like the user agent and profile. It also discusses grouping devices by characteristics like screen size and capabilities. Optimization techniques are presented like minimizing data size through image compression, and reducing page load time by minimizing requests.

1. 미투데이서비스개발팀

2. 정상일

3. It’s

4. about

5. usage,

6.
not

7. units.
@2010 NHN CORPORATION

8. Mobile

9. Web

10. 개발시

11. 고려사항들

13. Device Detection
@2010 NHN CORPORATION

14. Device Detection
Device
Device
Device
Device
Device
User-Agent
X-Wap-Profile
Accept
Server Level1 Level2 Level3
DDR
(Device Description Repository)
@2010 NHN CORPORATION

15. Device Detection
Wireless

16. Universal

17.
Resource

18. File
• Device

19. Description

20. Repository
(화면크기,

21. JS지원범위,

22. Cookie지원범위)
• API

23. (Java,

24. .Net,

25. PHP)
• 7000+

26. device

27. info
• Google,

28. Facebook

29. support
• Opensource
@2010 NHN CORPORATION

30. Device Targeting Grouping
WAP 기타

31. 모든

32. 모바일
Desktop

33. Web 데스크탑,

34. 태블릿
•Ajax

35. 지원여부
•화면

36. 너비(Portrait

37. -

38. landscape)
•Webkit

39. 렌더링

40. 엔진을

41. 사용하는지

42.
•터치스크린인지 Mobile

43. Web 스마트폰
•...

44. 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 -

45. Hybrid Architecture
Static resources DB
DB
(CSS, JS, Image...) DB
DBDB
Server
Web Application
Data Aggregator
Synchronizer
versioned HTML
Mobile Web Native(Hybrid)
@2010 NHN CORPORATION

46. Loading Time affects your Bottom Line
Desktop VS Mobile
@2010 NHN CORPORATION

47. FrontEnd
웹서비스의

48. 성능의

49. 90%는

50. Frontend에서

51. 결정된다.
Mobile도.

52. iOS Webkit의 제약사항
• GIF,

53. PNG,

54. TIFF

55. 최대크기는

56. 3MB(Decoded)
• JPEG의

57. 최대

58. 크기는

59. 32MB

60. (Decoded)
• JS,

61. HTML,

62. CSS의

63. 최대

64. 크기는

65. 각

66. 10MB
• JS

67. 런타임아웃은

68. 10초

69.
@2010 NHN CORPORATION

70. HTTP 동시 Connection
도메인당 최대
클라이언트 Connection 수
{

73. }
(HTTP/1.1)
IE6, 7 2
IE8, 9 6
Firefox 5 6 3G 1Mbyte bandwidth
Safari 6
Chrome 12 6
적절한 커넥션 활용
데이터 양의 최소화
Android 4~12
Galaxy S 6~12
iPhone 4~6
@2010 NHN CORPORATION

74. 데이터 최적화
{

80. }
이미지는

81. PNG
multi-size

82. 이미지

83. 지원
“static”

84. or

85. “on

86. the

87. fly”
JS

88. CSS

89. minify

91. compressing
img

92. alt=

93. src=data:image/png;base64,iVBORw0K...ggg==

94. /
@2010 NHN CORPORATION

95. 요청수의 최소화
MSS(Maximum

96. Segment

97. Size)

98. :1360byte
{

124. }
HTTP

125. GET요청

126. 한개에

127. 0.6초
Naver

128. 로그인

129. 쿠키,

130. 2Kbyte

131. 이상.

132.
Cookieless

133. domain

134. 사용(e.g.

135. static.naver.net)
GET-if-not-modified

136. 신중하게.

137.
@2010 NHN CORPORATION

138. 요청수의 최소화
Piggyback
전송하는

139. 김에

140. 함께...
@2010 NHN CORPORATION

141. me2day 모바일 웹 개별글 페이지 사례
Piggyback
if first_access?
이 글과 함께 전, 후 글을 가져온다.
end
if 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. HTTP Pipelining
eliminate RTT !!
@2010 NHN CORPORATION

144. User eXperience
Button

145. size

146. 44

147. x

148. 44(iOS

149. HIG)
Touch

150. based

151. Interface

152.
minimize

153. input

154. action
e.g.

155. URL,

156. Pagination

157.
•mouse

158. over/enter/out
•팝업
•지나친

159. Ajax
•자동새로고침
•자동리다이렉트
•수직스크롤
•프레임

160. FrontEnd
점진적

161. 개발
Contents 중심 개발 점진적

162. 개발의

163. 긍정적인

164. 효과

165. -

166. Fallback처리
하지만,

167. 대부분

168. 큰

169. 레거시를

170. 가진다.
프레젠테이션 개선(CSS) 따라서,

171. 현재

172. 레거시에서의

173. Defect가

174. 우선적
으로

175. 진행되면서

176. 점진적으로

177. 개선해나간다.
UX개선(JavaScript, Ajax)

178. Backend
{

184. }
Backend에서 Mobile만을 위한
특별한 기술은 없다.
Back to basics
@2010 NHN CORPORATION

185. Backend
{

191. }
Accept-Encoding : gzip, deflate
Content-Encoding : gzip
me2day

192. Nginx

193. gzip설정

194.
gzip

208. on;
gzip_min_length

211. 1000;
gzip_buffers

217. 128

218. 64k;
gzip_vary

227. off;
gzip_types

235. text/plain

236. text/html

237. text/css

238. text/xml

239.
application/xml

240. application/xml+rss

241. text/javascript

242.
application/x-javascript

243. application/json;
gzip_disable

249. MSIE

250. [1-6].;
gzip_http_version

251. 1.0;
@2010 NHN CORPORATION

252. Backend
{

258. }
Cache!

259. Cache!

260. Cache!

261.
Date

262. :

263. 응답시간(GMT)
Last-Modified

264. :

265. 없을경우

266. GET-if-Modified-Since

267. 발생
Expire

268. :

269. 오래

270. 캐시를

271. 유지하려면

272. 이

273. 값이

274. 클수록

275. 유리

276.
Cache-Control

277. :

278. e.g.

279. no-cache,no-transform
Pragma

280. :

281. optional,

282. 사용안함.

283. cache-control:no-cache사용
Vary

284. :

285. 캐시정책

286. 그루핑

287. e.g.

288. user-agent,

289. accept
Etag

290. :

291. 없을경우

292. GET-if-Modified-Since

293. 발생
명확한

294. 캐시

295. 파기는

296. URL

297. 변경하기
@2010 NHN CORPORATION

298. Test Env.
원격지

299. 모바일

300. 테스팅
Connection관련

301. 테스트
http://perfectomobile.com
데스크탑

302. 브라우저에서의

303. 테스트
-

304. User-Agent

305. switcher
-

306. window

307. resizer

308.
-

309. header

310. modifier

311.
http://cloudfour.com/mobile
@2010 NHN CORPORATION

312. All

313. 10

314. mobile

315. WebKits

316. I’ve

317. identified

318. so

319. far

320. are

321.
subtly

322. or

323. wildly

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

325. ST
B E
{

328. 실기기에서의

330. 테스트가

332. 가장

335. 정확

338. }

392.
@2010 NHN CORPORATION

393. weinre(WEb

394. INspector

395. REmote)
Inspector

396. 서버

397. 띄우기
git

398. clone

399. https://github.com/callback/callback-weinre.git
java

400. -jar

401. weinre.jar

402. --httpPort

403. 8000

404. --boundHost

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

406. 연결하기(웹페이지

407. 내에)

408.
script

409. src=”http://xxx.xxx.xxx.xxx:8000/target/target-script-
min.js#anonymous”/script

410. {

416. }
Proxy(CAProxy, Fiddler, Scoop)
Console.log
Document.title
@2010 NHN CORPORATION

417. 7.5억

418. Active

419. Users
2006(WAP)

421. 2006(iPhone)

423. 2007(FB

424. API)

426. 2008(iPhone

427. Appstore)

429. 2009(Android)
OTL
touch.facebook.com

430. /

431. m.facebook.com

437. ...

438. not

439. good
Device

440. Detecting(WURF),

441. Progressive

442. enhancement
Project

443. FaceWeb
m:button

444. /
Scroll,

445. Speed
News

446. Feed,

447. Profile

448. Time

449. Line,

450. requests,

451. notifications...

452. =

453. FaceWeb

454.
HTML5

455. The End
@2010 NHN CORPORATION