네이티브앱, 모바일웹, 하이브리드앱

정의

• 네이티브앱 : Object-C등의 언어로 작성된 특정 플랫폼에서만 작동되는 앱
• 모바일웹 : HTML/CSS로 작성된 브라우저에서 작동되는 페이지
• 하이브리드앱 : 네이티브앱의 일부분을 HTML/CSS로 작성한 앱

장점

• 네이티브앱
  • 카메라등 디바이스에서 제공하는 API 사용가능
  • UI 구성요소가 패키지화 되어 사용자 단말에 있어 빠른 로딩 속도

• 모바일웹
  • UI업데이트시 사용자가 앱스토어를 통해 업데이트하지 않아도 접근시 바로 반영
  • 브라우저 기반이기 때문에 별도 작업을 거쳐 다양한 플랫폼에서 사용이 가능

단점

• 네이티브앱
  • UI업데이트시 앱스토어를 통해 업데이트를 받기전까지 적용되지 않음.

• 모바일웹
  • 디바이스API사용 불가능
  • UI구성요소를 실시간으로 로드하므로 상황에 따라 상대적으로 느린 로딩 속도
    • 모바일 디바이스는 유선으로 인터넷에 연결된 것이 아니기 때문에 사용자의 상황에 따라서 로드에 실패하거나 굉장히 오래 걸릴 수 있기 때문에 페이지 최적화가 매우 중요

각 제작방법이 갖는 장점을 최대한 살리고 단점을 최소화하기 위하여 사용되는 방법이 하이브리드앱

질의응답

Q. 모바일웹과 하이브리드앱에 들어가는 HTML 페이지는 어떻게 다른가?

A. 해외 아티클에서 말하는 모바일웹은 피처폰 또는 Windows Mobile 6.X 등 현재 인터넷이 사용 가능한 모든 디바이스를 지원하는 것을 기준으로 하고 있어서 터치에 최적화된 박스형 링크영역, 그리드 아이콘 네비게이션(아이폰의 홈스크린 같은)등을 차이점이라고 설명하지만 국내에서는 최신 스마트폰만 대응하는 것을 기준으로 페이지를 제작하기 때문에 모바일웹에서도 터치 기반 디바이스에서 최적화된 UI를 제공하므로 차이점은 없다.

Q. 모바일웹과 하이브리드앱에 들어가는 HTML 페이지의 제작 기술의 차이점은 무엇인가?

A. 기본적으로 기술의 차이는 없으나 하이브리드앱의 경우 로딩 속도 등의 퍼포먼스를 사용자가 네이티브앱과 같을 것이라 기대 할 것이기 때문에 모바일웹 페이지를 제작하는 것보다 조금 더 퍼포먼스 향상을 위한 노력이 필요하다.

HTML 최적화

• 파일 사이즈 최소화
  • 파일 사이즈는 로딩 속도와 비례하며 모바일과 같은 접속 환경에서는 그 차이가 크게 나타남

• 이미지파일 최적화
  • 별도의 최적화 툴을 이용하여 용량을 최대한으로 줄임

• 이미지파일 최소화
  • IR 기법을 적극 활용하여 리퀘스트 수 최소화
  • CSS3로 대체 가능한 부분은 CSS3 활용

• HTML5 Local Storage 활용
  • 사용자 디바이스에 파일들을 캐시 시켜 재접속시 페이지 로딩 속도 향상

출처 : http://niuu.us/index.php/%EB%84%A4%EC%9D%B4%ED%8B%B0%EB%B8%8C%EC%95%B1,_%EB%AA%A8%EB%B0%94%EC%9D%BC%EC%9B%B9,_%ED%95%98%EC%9D%B4%EB%B8%8C%EB%A6%AC%EB%93%9C%EC%95%B1