$\require{mediawiki-texvc}$

연합인증

연합인증 가입 기관의 연구자들은 소속기관의 인증정보(ID와 암호)를 이용해 다른 대학, 연구기관, 서비스 공급자의 다양한 온라인 자원과 연구 데이터를 이용할 수 있습니다.

이는 여행자가 자국에서 발행 받은 여권으로 세계 각국을 자유롭게 여행할 수 있는 것과 같습니다.

연합인증으로 이용이 가능한 서비스는 NTIS, DataON, Edison, Kafe, Webinar 등이 있습니다.

한번의 인증절차만으로 연합인증 가입 서비스에 추가 로그인 없이 이용이 가능합니다.

다만, 연합인증을 위해서는 최초 1회만 인증 절차가 필요합니다. (회원이 아닐 경우 회원 가입이 필요합니다.)

연합인증 절차는 다음과 같습니다.

최초이용시에는
ScienceON에 로그인 → 연합인증 서비스 접속 → 로그인 (본인 확인 또는 회원가입) → 서비스 이용

그 이후에는
ScienceON 로그인 → 연합인증 서비스 접속 → 서비스 이용

연합인증을 활용하시면 KISTI가 제공하는 다양한 서비스를 편리하게 이용하실 수 있습니다.

Open Source기반 HTML5 Mobile Web Application Platform 구조 분석 및 성능 최적화 방법 원문보기

정보와 통신 : 한국통신학회지 = Information & communications magazine, v.29 no.9, 2012년, pp.10 - 17  

임상석 (SK 플래닛)

초록
AI-Helper 아이콘AI-Helper

본고는 크게 두가지 주제로 구성이된다. 첫번째로는 HTML5 기반의 mobile Web application platform 구조에 대해서 상세히 소개한다. Web application platform은 기술 구조상 mobile OS에 내재되어 native형태로 배포되는 Browser engine을 포함한 platform 부분과 native Web platform 상에서 구동되는 HTML5 application framework 부분으로 구성된다. HTML5 application framework 구축을 위해 시장에서 널리쓰이는 open source로서 jQuery Mobile framework을 소개한다. 두번째로 해당 Web platform상에서 동작하는 Web application 개발시 부디칠 각종 성능 이슈 및 그것을 해결하기 위한 접근법을 다섯가지 기술 영역으로 나누어, 각 영역별로 적용 가능한 실기를 다룬다. 마지막으로 최적화시 사용가능한 각종 open source profiling 및 성능 최적화 tool에 대해서 소개한다.

AI 본문요약
AI-Helper 아이콘 AI-Helper

* AI 자동 식별 결과로 적합하지 않은 문장이 있을 수 있으니, 이용에 유의하시기 바랍니다.

문제 정의

  • 본장에서는 Web platform의 native단을 구성하는 요소 중 Web application의 성능과 밀접한 연관이 있는 기술에 대해서 살펴 보았다. Web application개발자가 변경할 수 없는 부분이지만 그것의 동작 특성을 충분히 이해하고 code를 개발해야만 성능 좋은 application 을 개발할수 있음을 이해하였을 것이다. 다음장에서는 이러한 native platform 상에서 동작하는 HTML5 application framework 구조에 대해서 설명하겠다.
  • 본고에서는 HTML5 mobile web application platform 구조에 대해서 mobile OS에 포함되어 배포되는 native부분과, HTML5 application framework부분으로 나누어 상세히 살펴보았다. 그리고 이러한 platform에서 동작하는 Web application의 성능 최적화시 활용 가능한 각종 practice 및 open source tool을 소개하였다. 본고는 mobile용 HTML5 application platform 또는 application 개발시 부디칠 각종 기술 이슈에 대해서 폭넓게 이해를 하고 실무 개발에 적용 가능한 reference로 활용되기를 기대한다.
  • JS 기반은 모든 UI component가 JavaScript component를 활용해야하므로 기존 publishing 방식의 프로젝트에 적용이 난 해하고, publisher와 JavaScript 개발자가 같이 개발하거나, JavaScript 개발자가 주도적으로 개발하는 등의 방식으로 진행을 하여야 한다. 본고에서는 license자유도가 높고 좀더 개방적이며, Web publisher친화적인 jQuery Mobile에 대해서 좀더 살펴 보도록 하겠다.
  • 이에 다수의 mobile용 HTML 5 framework이 open source로 활발히 개발되고 있다[7][8][9]. 본고에서는 이중 가장 활발한 개발자 ecosystem을 확보하고, 가장 넓은 단말를 지원하는 jQuery Mobile을 UI framework로서 상세히 소개한다. Desktop환경도 최근 WebKit을 기반으로하는 Google사의 Chrome browser가 시장 점유율 1위를 기록하고, Internet Explorer 10부터는 높은 HTML5 호환성을 지원함으로 조만간 확산의 기반이 다져질 것으로 예상된다.
  • 본장에서는 Web platform의 native단을 구성하는 요소 중 Web application의 성능과 밀접한 연관이 있는 기술에 대해서 살펴 보았다. Web application개발자가 변경할 수 없는 부분이지만 그것의 동작 특성을 충분히 이해하고 code를 개발해야만 성능 좋은 application 을 개발할수 있음을 이해하였을 것이다.
  • Mobile Web application 구동시 서버에서 단말단까지 구성되는 지연 요소는 크게 단말에서의 HTML,CSS,JavaScript처리와 서버에서의 처리 지연 그리고 network 전송 부분으로 구성되고 상세하게 W3C에서 개념화하여 도시하였다[18]. 본장에서는 위세가지 부분을 아우르는 성능 최적화 방법에 대해서 소개하고, 이를 위하여 사용 가능한 open source tool을 소개한다.
  • 예로써, Rendering 성능 관점에서 최적화된 HTML, CSS, JavaScript를 구현하였더라도, network을 통한 배포관점에서 이것들이 변경사항이 없음에도 불구하고 단말에 cache되지 않거나 내재된 파일들이 병렬로 동시에 network 을 통한 download 되지 않는다면 전체 성능 관점에서는 매우 떨어지게 된다. 이에 본고에서는 end-to-end 성능에 영향을 주는 각종 지연 요소를 분류하고 지연 요소별 연관된 근본 기술 원인을 소개한다. 이를 근간으로 최적화 방법론에 대해서 practice 위주로 정리하였다.
본문요약 정보가 도움이 되었나요?

질의응답

핵심어 질문 논문에서 추출한 답변
mobile Web application의 성능 최적화에서 end-to-end 최적화가 필수적인 이유는 무엇 때문인가? 산업 현장에서 HTML5기반 application또는 서비스를 상품화시 native application 대비 경쟁력 있는 SW 품질을 달성하기 위해서는 위 두가지 방식으로 개발된 mobile Web application의 성능 최적화는 단말 부분과 서버와 연동 부분을 모두 아우르는 end-to-end 최적화가 필수적이다. End-to-end를 고려하지 않는 단편적인 성능 개선은 실질적인 application 성능 개선효과가 반감이 되기 때문이다. 예로써, Rendering 성능 관점에서 최적화된 HTML, CSS, JavaScript를 구현하였더라도, network을 통한 배포관점에서 이것들이 변경사항이 없음에도 불구하고 단말에 cache되지 않거나 내재된 파일들이 병렬로 동시에 network 을 통한 download 되지 않는다면 전체 성능 관점에서는 매우 떨어지게 된다.
HTML5기반 UI framework을 활용하여 개발된 mobile Web application의 두 가지 형태는 무엇인가? 첫번째로는 기존의 Web site의 형태로 UI를 포함한 모든 application 요소가 서버에 위치하고 URL을 통하여browser 로 download되어 구동되는 형태이고, 두번째로는 hybrid Web application으로 불리우는 방식으로 일반 native application 개발방식과 동일 방식으로 하나의 application package로 만들어지고, 해당 package내에 HTML, CSS, JavaScript구현부와 native code구현부가 통합되어 포함된 형태로서 application store를 통하여 배포되고 smart phone의 저장공간에 설치되는 방식이다. 두번째 방식에서는 application 구동을 위하여 browser가 활용되지 않고 WebView (WebKit 엔진을 widget 화하여 3rd party API로 제공하는 component)를 활용하여 설치 package에 포함된 HTML, CSS 및 JavaScript를 적재하고 처리한다.
HTML5기반 Web platform은 무엇으로 구성되는가? HTML5는 Web의 content 를 구조화하고 표현하는 markup 언어이지만[4], Web platform 기술 분야에서는 단순히 하나의 표준외에 HTML5와 결합하여 다양한 Web application 을 개발시 필요로하는 SW platform으로서의 모든 관련 기술 표준 명세서[5]를 일반적으로 통칭한다. 즉, HTML5기반 Web platform이란 markup으로서의 HTML5, 콘텐츠 표현 방식의 확장인 CSS3, 그리고 각종 application 구현을 위한 audio, video, sensor, GPS등과 같은 기능 요소 접근을 위한 JavaScript API들로 구성이된다.
질의응답 정보가 도움이 되었나요?

참고문헌 (23)

  1. ABI Research "2.1 Billion HTML5 Browsers on Mobile Devices by 2016" (http://www.gartner.com/it/page.jsp?id1622614) July 22, 2011. 

  2. Kevin Benedict, "Interview: Sanjay Poonen on SAP's Mobile Strategies", April 2012 (http://wireless.syscon.com/node.2261851). 

  3. Gartner Press Release (http://www.gartner.com/it/page.jsp?id1622614). 

  4. HTML5, W3C Editor's Draft. June 2012 (http://dev. w3.org/html5/spec/). 

  5. Michael Smith. "The Web Platform: Browser technologies" (http://platform.html5.org). 

  6. WebKit, open source Browser 엔진 개발 과제 (http:// www.webkit.org). 

  7. jQuery Mobile (http://www.jquerymobile.com). 

  8. Sehcha (http://www.sencha.com). 

  9. AppMobi (http://www.appmobi.com). 

  10. DOM, Document Object Model (http://www.w3.org/ DOM) W3C 표준 specification. 

  11. Dominique Hazael, "Standards for Web Applications on Mobile: current state and roadmap" (http://www.w3.org/2012/05/mobile-web-app-state). 

  12. jQuery, (http://www.jquery.com). 

  13. jQuery Mobile Theme Roller, (http://www. jquerymobile.com/themeroller). 

  14. jQuery UI, (http://www.jqueryui.com). 

  15. PageSpeed Tools, (http://developers.google.com/speed/pagespeed). 

  16. DOM Monster, (http://miraculo.us/dom-monster) 

  17. Chrome Developer Tools (http://developers.google.com/chrome-developer-tools/docs/overview) Google. 

  18. W3C Navigation Timing specification (http://www.w3.org/TR/navigation-timing) July 16th 2012. 

  19. 허준회, "HW Acceleration in WebKit" (http://www.slideshare.net/joone/hardware-acceleration-inwebkit). 

  20. 임상석, "Mobile Web Application 개발 방법론: Open Source 기반 Web App 개발 Practice",(http://www.slideshare.net/infect2/web-app-201205). 

  21. Speed Tracer (https://developers.google.com/webtoolkit/speedtracer) Google. 

  22. Closure Compiler (https://developers.google.com/closure/compiler/) Google. 

  23. CSS Sprite Generator (http://csssprites.com) Google. 

관련 콘텐츠

저작권 관리 안내
섹션별 컨텐츠 바로가기

AI-Helper ※ AI-Helper는 오픈소스 모델을 사용합니다.

AI-Helper 아이콘
AI-Helper
안녕하세요, AI-Helper입니다. 좌측 "선택된 텍스트"에서 텍스트를 선택하여 요약, 번역, 용어설명을 실행하세요.
※ AI-Helper는 부적절한 답변을 할 수 있습니다.

선택된 텍스트

맨위로