UIpac (Show me the what to do!)

네이티브 앱 vs 모바일 웹 vs 웹 앱 vs 하이브리드 앱 vs 반응형 웹 vs 적응형 웹 본문

Planning/UI | UX | Design

네이티브 앱 vs 모바일 웹 vs 웹 앱 vs 하이브리드 앱 vs 반응형 웹 vs 적응형 웹

David.Cheon 2014.06.23 20:47

 네이티브 앱 

  • 흔히 말하는 어플리케이션으로 현재 사용자들이 말하는 앱은 대부분은 네이티브 앱

  • 모바일 기기에 최적화된 언어로 개발, 안드로이드 SDK를 이용해 java 언어로 만드는 안드로이드 앱과 iOS SDK를 이용해 Objective-C 언어로 개발된 아이폰 앱들이 여기에 속함

  • 앱스토어, 마켓에서 판매, 사용자는 앱을 다운받아 모바일에 설치 및 실행

  • 모바일에 저장된 주소록, 파일 등의 고유정보를 변경 가능하며 카메라, 후레시 등의 각종 센서 제어 가능

  • 모바일 운영체제에 있는 커널과 UI 프레임 워크가 제공하는 서비스를 직접 호출, 실행하므로 실행속도가 매우 빠르고 안정적

  • 고성능의 그래픽 처리가 가능해서  2D 및 3D 게임이나 증강현실과 같은 앱을 개발할 수 있음.

  • 특정 플랫폼에서만 동작하여 앱스토어를 통해 업데이트가 가능하기 때문에 업데이트가 느린 단점.

  • 해당 운영체재나 플랫폼이 다르면 많은 시간과 비용을 감수하여 새롭게 개발해야하는 단점.

 

  

 모바일 웹      

  • 모바일 웹사이트라고도 함.

  • 데스크 탑 브라우저에서 실행되는 웹 애플리케이션을 모바일 스크린 크기로 줄여 놓은 것.

  • 모바일 기기의 화면에 최적화된 UI와 UX를 염두에 두고 제작.

  • HTML, CSS, Javascript, JSP, PHP, ASP, ASP NET등 일반적인 웹 기술로 개발

  • 모바일 브라우저에서 실행

  • 풀 브라우징 방식으로 페이지를 이동해 앱에 비해 접속속도가 느림

  • 풀 브라우징 방식 : next화면 전체 내용을 서버에서 새로 받아 현재 화면을 갱신하는 기법

  • 모바일 기기의 특성상 이동 중에 서버 접속 장애가 발생할 수 있어 불안정한 앱

  • 현재 모바일 브라우저에서 볼 수 있는 대부분의 앱이 모바일 웹


  

 웹 앱

  • 모바일 웹과 네이티브 앱을 결합한 것, 웹+앱

  • 모바일웹의 특징을 가지면서 네이티브앱의 장점도 갖는다.

  • 모바일웹 보다는 조금 더 모바일에 최적화된 앱

  • 모바일웹처럼 HTML, CSS, Javascript, JSP, PHP, ASP, ASP NET 등 일반적인 웹 기술로 개발

  • 웹 개발 기술을 사용하되 모든 UI와 UX를 앱과 유사하게 제작

  • 모바일 브라우저에서 실행

  • 풀 브라우징 방식이 아닌 단일페이지 형식으로 화면을 전환해 속도가 빠름.

  • 모바일 웹보다 실행 속도가 빠름

  • 네이티브 앱처럼 설치형이 아니기 때문에 웹앱을 실행하기 위해서 사용자가 브라우저를 열고  URL로 접근

  • 첫 페이지는 웹으로부터 풀 브라우징으로 받고, 그 이후부터 AJAX 통신으로 모든 것 처리, 화면 전환시 애니- 메이션 효과, 사용자 터치 이벤트 처리, AJAX 통신, HTML5 로컬 저장소 이용하여 네이티브 앱과 유사한 실행 환경 제공

  • 모바일의 고유정보를 사용할 수 없고 하드웨어를 제어할 수 없음

  • 애플 앱스토어, 안드로이드 마켓에서 등록, 판매할 수 없다.

 

  

 하이브리드 앱

  • 웹 앱의 단점을 보안한 것

  • 웹 앱을 네이티브 앱으로 포장한 것

  • 웹 기술로 개발되었지만 모바일에 최적화된 언어로 만드는 네이티브 앱처럼 보이게 하는 것

  • 앱의 기반이 되는 콘텐츠 영역은 html 기반의 웹 앱으로 제작, 최종 앱 배포네 필요한 패키징 처리만 아이폰, 안드로이드 플랫폼 안에서 처리

  • 네이티브 앱의 형태를 띄고 있어 앱스토어나 마켓에서 다운받아 모바일에 설치

  • 모바일의 고유정보를 이용하고 하드웨어 제어

  • 외부 형태는 네이티브 앱이지만 실제 내부는 모바일 웹앱으로 실행

  • 애플 앱스토어나 안드로이드 마켓에 등록해서 판매할 수 있다

  • 별도의 하이브리드 앱 프레임워크 필요. 폰갭(PhoneGap), 티타니옴(Titanium), 앱스프레소(Appspresso)
    ex) 네이트 앱, daum 앱, 네이버 앱, 구글 앱

   

 

 반응형 웹

  • N-Screen 시대에 맞추어 화면이 자동으로 리사이징

  • 모바일과 PC의 홈페이지를 하나로 운영하여 제작/관리비가 저렴

  • 다양한 디바이스에 최적화 된 화면 제공

  • 하나의 URL을 가져 검색엔진의 인덱싱과 노출에 유리.

  • 로딩속도 지연을 발생시키는 리디렉션이 발생하지 않아 로딩시간이 줄어 사용자들이 더 쾌적한 사이트 방문경험

 


 

 적응형 웹

  • 기준이 되는 스크린 사이즈에 미디어 쿼리나 스크립트를 활용해서 레이아웃을 변형, 화면을 구성

  • 반응형 웹과 비슷한 개념이지만, 반응형 웹이 유동적인 그리드를 기준으로 화면을 구성하는 것과 달리 적응형 웹은 미리 정해진 몇 개의 스크린 사이즈를 기준으로 화면 구성

  • 반응형 웹 에 비해 적은 기획과 소스가 필요한 반면 모든 스크린 사이즈에 최적화 시키기에는 정교함이 덜함





[출처] 네이티브 앱 vs 모바일 웹 vs 웹 앱 vs 하이브리드 앱 vs 반응형 웹 vs 적응형 웹|작성자 아네모네



0 Comments
댓글쓰기 폼