하이브리드 앱 만들기(1)

하이브리드 앱 만들기(1)

이 글을 읽으면 좋은 분들

  1. 웹 개발은 가능하지만 앱 개발은 가능하지 않는 분
  2. 웹 개발을 이용해 앱 개발까지 확장하고 싶은 분

앱(APP)이란?

앱은 모바일 환경에서 사용되는 소프트웨어를 의미합니다.

웹(Web) vs 앱(App)

간단하게 웹은 컴퓨터, 앱은 핸드폰이라고 생각하면 이해하기 쉽습니다. 더 자세하게 설명하면 웹은 웹 브라우저(크롬, 엣지, 인터넷익스플로러, 사파리 등등)를 이용해 접근할 수 있는 방식을 의미합니다. 반면에 앱은 모바일 기기나 태블릿, 데스크탑 등에 설치된 앱 소프트웨어를 이용해 접근할 수 있는 방식을 의미합니다.

예를 들면 다음과 같습니다. 우리는 컴퓨터를 활용해 네이버에 접속할 수 있습니다. 이때는 크롬, 엣지 등 자신이 컴퓨터에서 사용 중인 웹 브라우저를 통해 접속하게 되고 이 방식이 웹입니다. 만약 우리가 아이폰을 이용해 네이버에 접속한다면 2가지 방법이 있습니다. 네이버 앱을 설치 후 접속하기 혹은 아이폰 웹 브라우저 사파리를 활용해 네이버 접속하기 입니다. 전자의 경우 앱 방식 중 하나인 네이티브 앱이고 후자의 경우 앱 방식 중 하나인 웹 앱입니다.

엡 종류

네이티브 앱(Native APP)

네이티브 앱은 모바일 기기에 최적화된 네이트브 언어로 개발된 앱을 의미합니다. 위에서 설명했듯 아이폰을 이용해 네이버에 접속한다 가정했을 때, 우리는 네이버 앱을 사용할 수도 있지만 아이폰 웹 브라우저 사파리를 이용해 네이버에 접속할 수도 있습니다. 두 방식은 큰 차이가 없어 보이지만 더 세심하게 비교하게 되면 네이티브 방식을 사용한 네이버 자체 앱을 사용하는 것이 사파리 웹 브라우저를 사용하는 방식보다 더 빠르고 최적화된 방식입니다. 즉, 네이티브 앱은 모바일 환경에서 최적의 퍼포먼스를 내고 싶을 때 사용하는 방식입니다.

네이티브 앱
네이티브 앱

장점

  • 해당 환경에서 최적화된 방식으로 빠르게 작동하며 안정적이다
  • 해당 환경에서 더 깔끔하고 높은 사양의 그래픽 작업이 가능하다.
  • 디바이스 전체에 접근 권한이 있기 때문에 기기 자체의 기능을 활용할 수 있다.

단점

  • 여러 환경에 맞춰 따로 개발해야 번거로움이 발생한다.(ios 앱, 안드로이드 앱 따로 개발)
  • 앱 마켓에 공개하는 경우 앱에 대한 수정사항이 생길 때마다 심사를 거쳐야한다.

웹 앱(Web APP)

웹 앱은 모바일 기기의 웹 브라우저를 이용해 접속하는 방식을 의미합니다. 저는 개인적으로 해당 방식이 웹과 다를게 없다고 생각합니다. 약간 다른 이유는 해당 방식은 PC를 기준으로 제작하는 것이 아니라 모바일 기기 화면을 기준으로 제작되어 모바일 기기 사용자들에게 더 편한 환경을 제공한다는 점입니다.

웹 앱
웹 앱

장점

  • 웹 브라우저를 기반으로 동작해 별도의 앱 설치가 필요 없다.
  • 웹 개발자들이 개발할 수 있다.

단점

  • 네이티브 앱에 비해 상대적으로 느리고 안정성이 떨어진다.
  • 디바이스 접근 권한이 없다.
  • 웹 브라우저에서 url을 입력해 들어가는 방식으로 터치 한번에 실행되는 네이티브 앱에 비해 불편하다.

하이브리드 앱(Hybrid APP)

하이브리드 앱은 네이트브 앱과 웹 앱 중간 방식이라고 생각할 수 있습니다. 앱 개발은 웹 개발과 같은 방식으로 개발하지만 해당 앱을 앱 마켓에 등록이 가능한 네이티브 앱 형식으로 포장하는 방식입니다.

하이브리드 앱
하이브리드 앱

장점

  • 웹 개발자들이 개발할 수 있다.
  • 최종적으로 네이티브 앱으로 포장하기 때문에 디바이스 접근 권한이 있어 기기 자체의 기능을 사용할 수 있다.
  • 다양한 플랫폼에 모두 적용 가능한 형태로 개발 가능하다(ios 앱, 안드로이드 앱 따로 개발 불필요)

단점

  • 브라우저 성능에 따라 속도가 결정된다.
  • 네이티브 앱에 비해서는 자유도가 떨어진다.

하이브리드 앱 만들기

저는 앱 개발자가 아니기 때문에 웹 개발 후 이를 네티티브 앱으로 포장해 사용하는 하이브리드 앱이 가장 좋다고 생각했습니다. 이를 사용하기 위한 하이브리드 앱 만들기 방식에 대해 알아보았습니다.

다음글 바로가기

하이브리드 앱 만들기(2)

results matching ""

    No results matching ""