애플이 새롭게 출시하는 iOS 14에서 페이스북 픽셀 등을 활용한 마케팅에 제한을 걸게 됨에 따라(참고), 필자가 근무하고 있는 회사에서도 하이브리드 앱 개발의 필요성이 수면 위로 떠오르기 시작했다. 원래 순수한 반응형 웹사이트의 형태로 대부분의 서비스를 처리하고 있었기에, 웹에서의 페이스북 마케팅이 어려워진다면 앱에서의 마케팅으로 초점을 바꿔야 한다는 판단 때문이었다. 그런데 필자는 앱 개발 경험이 사실상 없었기에 앱과 관련된 여러 용어들에 대해 정확히 알고 있지 못했다. 그래서 이번 기회에 한 번 정리해보기로 하였다.
본 포스팅의 내용에 직접적인 도움을 준 유튜브 '얄팍한 코딩 사전' 채널에 감사의 마음을 표합니다. (영상 링크는 게시글 하단 참조)
1. 네이티브 앱: Native Application
스마트폰이라는 것이 탄생하면서부터 존재했던 가장 기본적인(원시적인) 형태의 앱을 의미한다. 네이티브 앱의 가장 큰 특징은 스마트폰의 각 운영체제별로 개발하는 방식이 완전히 다르다는 것이다. 즉, 각 운영체제별로 "우리 운영체제에서 돌아가는 앱을 만들고 싶다면 이렇게 만들어라"와 같은 가이드가 존재하고 있다. 실제로, 안드로이드 앱은 Java 혹은 Kotlin으로 개발을 하지만 iOS 앱은 Objective-C 혹은 Swift로 개발을 한다.
이렇듯 네이티브 앱은 특정 운영체제 전용으로 개발되는 것이기 때문에, 해당 운영체제가 허용하는 모든 자원과 기능들을 직접 활용할 수 있다. 즉, 스마트폰의 내장 카메라, 센서, 파일 시스템 등과 같이 깊숙한 부분들도 접근 및 활용이 가능하며, 안드로이드나 iOS의 버전이 업데이트될 때마다 그 최신 기능들도 언제든 바로바로 앱에 탑재가 가능하다. 이는 다른 방식에 비해 매우 고퀄리티인 앱을 개발할 수 있다는 것을 의미한다. 또한 안드로이드라면 Play 스토어, iOS라면 App 스토어에 올려지기 때문에 각각 구글과 애플로부터 검증된 앱들을 쉽게 검색해서 찾아 사용할 수 있으며 이들을 홈 화면의 원하는 위치에 아이콘으로 추가하여 간편하게 사용할 수도 있다.
물론 단점도 존재한다. 각 운영체제별로만 만들 수 있기 때문에 특정 서비스의 개발 및 유지보수에 있어서 다른 종류의 앱보다 훨씬 더 많은 인력, 시간, 비용이 소모된다. 안드로이드 앱과 iOS 앱을 따로 개발하고 유지보수도 따로 해줘야 하기 때문이다. 게다가 배포 과정 자체에도 많은 어려움에 부딪힐 수 있다. 구글의 Play 스토어는 검수에 몇 시간만 소요되는 반면 애플의 App 스토어는 검수에만 며칠이 소요되어 동일한 버전을 동일한 시기에 릴리즈 하는 것이 쉽지 않기 때문이다. 심지어 Play 스토어에서는 통과되고 App 스토어에서는 통과되지 않을 수도 있다. 이처럼, 네이티브 앱은 우수한 성능의 앱을 만들 수 있다는 장점 뒤에 개발 및 유지보수가 매우 까다롭다는 단점을 지닌다.
2. 모바일 웹 (앱): Mobile Web (Application)
모바일 웹은 스마트폰 사용자들을 고려하여 개발한 웹사이트를 의미한다. 즉, 스마트폰과 같은 좁은 화면에서도 보기 좋도록 레이아웃을 구현해 놓은 웹사이트라고 보면 된다. 대표적인 예시가 바로 네이버로, 스마트폰의 브라우저로 접속할 때와 PC의 브라우저로 접속할 때를 비교해 보면 레이아웃이 다르다는 것을 알 수 있다. 모바일 웹은 반응형 혹은 적응형 방식을 이용하여 구현할 수 있다. 참고로 모바일 웹과 모바일 웹 앱의 구분은 명확하지 않은데, 조금 더 앱에 가까운 UX를 제공하도록 만들어진 모바일 웹을 모바일 웹 앱이라고 생각하면 될 듯하다. 이것도 애매하다면 그냥 둘이 같다고 생각해도 크게 문제는 없을 것 같다.
모바일 웹의 가장 큰 장점은 개발 및 유지보수가 매우 간편하다는 것이다. 모바일 용으로 웹사이트를 한 번 만들어 놓기만 하면 어떠한 운영체제의 스마트폰에서도 크롬이나 사파리 등의 브라우저를 이용하여 이용할 수 있기 때문이다. 또한 새로운 버전을 릴리즈 할 때도 웹사이트만 수정하면 되기 때문에 Play 스토어나 App 스토어의 검수도 전혀 필요가 없다.
반면에 모바일 웹의 단점은 바로 기능과 성능의 한계이다. 어쨌든 모바일 웹도 웹이라서, 스마트폰의 각종 브라우저들에서 공통으로 제공하는 기능들까지만 활용이 가능하기 때문이다. 그래서 스마트폰의 깊숙한 곳에 있는 자원과 기능들을 활용하는 고성능 앱이나 그래픽 툴 등의 앱은 개발할 수 없다. 또한, 브라우저를 통해서만 이용할 수 있기 때문에 네이티브 앱처럼 홈 화면에 아이콘으로 추가하거나 주소 창 없이 사용하는 편리함은 누리기 어렵다.
3. 하이브리드 앱: Hybrid Application
하이브리드 앱은 네이티브 앱 형태로 만들되 그 안에 웹사이트를 띄울 수 있는 브라우저 창을 두는 앱을 의미한다. 조금 더 구체적으로는, 안드로이드나 iOS 전용으로 스토어에 올릴 수 있는 네이티브 앱을 만드는데 그 안에 크롬이나 사파리처럼 웹사이트를 보여줄 수 있는 창을 하나 삽입하는 것이다. 이 창을 보통 웹뷰(Webview)라고 부른다. 그래서 사용자는 이러한 앱을 실행하면 자동으로 그 웹뷰를 통해 해당 웹사이트에 접속하게 된다.
하이브리드 앱은 앞서 설명한 두 종류의 앱을 절충한 것이다. 즉, 웬만한 기능들은 웹사이트의 형태로 만들어 두고 이를 웹뷰 안에서 활용할 수 있게 한 다음, 웹사이트로서 구현할 수 없는 기능들은 네이티브 수준으로 구현하는 것이다. 실제로 네이버 앱을 깔아서 사용해 보면, 브라우저를 통해서 네이버에 접속했을 때와 달리 앱을 통해서만 사용할 수 있는(혹은 더 간편하게 사용할 수 있는) 기능들이 존재한다. 그러한 기능들은 네이티브 수준으로 구현된 것들에 해당한다. 나머지는 웹뷰를 쓰기 때문에 브라우저에 접속했을 때와 거의 동일하다. 이러한 종류의 앱들은 네이티브 수준의 구현부를 업데이트할 때만 스토어의 검수가 필요하고, 웹뷰에 나타나는 컨텐츠는 웹사이트만 수정하면 되기 때문에 훨씬 더 유연하게 개발과 유지보수가 가능하다. 이는 개발자의 선택에 따라 순수한 안드로이드 앱 혹은 iOS 앱의 형태로 개발할 수도 있고, Ionic 혹은 PhoneGap 등의 프레임워크를 이용해서 개발할 수도 있다.
4. 크로스-플랫폼 앱: Cross-Platform Application
크로스-플랫폼 앱은 스마트폰의 운영체제를 신경 쓰지 않고 하나의 언어로 개발할 수 있는 네이티브 앱이다. React Native, Flutter, Xamarin 등이 대표적인 크로스-플랫폼 앱 개발 도구이다. React Native라면 JavaScript로, Flutter라면 Dart로, Xamarin이라면 C#으로 개발을 하게 되고, 이는 빌드 타임에 안드로이드와 iOS에서 이해할 수 있는 언어로 자동 변환된다.
모바일 웹은 브라우저나 웹뷰에서 제공하는 기능들까지만 활용이 가능한 반면, 크로스-플랫폼 앱은 여러 운영체제들이 제공하는 공통적인 기능들까지 활용이 가능하다. 운영체제별 네이티브 앱을 만드는 것보다는 아직 활용할 수 있는 기능이나 그 성능에 한계가 없진 않지만, 이미 충분히 좋은 퀄리티의 앱을 개발할 수 있는 정도로 발전했다. 참고로 만약 여기에 웹뷰를 삽입하여 웹사이트를 띄운다면 크로스-플랫폼 앱이자 하이브리드 앱이 되는 것이다. 개발자의 필요에 따라 이렇게 여러 방식을 조합하여 원하는 앱을 만들 수 있다.
5. PWA: Progressive Web Application
PWA(Progressive Web Application)는 웹의 한계를 브라우저의 발전을 통해서 끌어올린 것을 의미한다. 쉽게 말해서 앱의 장점과 웹의 장점을 합친 것인데, 필자의 경우 하이브리드 앱은 앱에 웹의 장점을 끌어다 놓은 것이라면 PWA는 웹에 앱의 장점을 끌어다 놓은 것으로 이해하고 있는 편이다. 어쨌든 하이브리드 앱은 웹이 아닌 앱이고, PWA는 앱이 아닌 웹이기 때문이다.
웹의 장점이라고 하면 설치가 특별히 필요하지 않고 URL만으로 접근이 가능하여 신규 사용자의 유입이 더욱 많다는 것이다. 그리고 앱의 장점이라고 하면 푸시 알림 등의 기능이 제공되고, 홈 화면에 아이콘을 추가하여 간편하게 접근이 가능하며, 데이터의 캐싱을 통해 오프라인에서도 동작할 수 있게 할 수 있다는 것이다. PWA는 이러한 장점들을 합쳐서 탄생한 것이다.
PWA를 구현하는 핵심 기술 두 가지는 바로
manifest.json 파일과 서비스 워커이다. manifest.json 파일은 브라우저에게 해당 PWA에 대한 기본적인 정보를 포함하여 그것이 데스크탑이나 모바일 기기에 설치되었을 때 어떻게 동작해야 하는지에 대한 정보를 알려주는 역할을 수행한다. 예를 들면 아이콘으로 사용할 이미지, 아이콘의 이름, 아이콘을 눌렀을 때 열릴 URL, 그리고 해당 PWA가 실행되었을 때 브라우저의 UI가 어떠해야 하는지 등의 정보를 이 파일에 명시한다. 다음으로, 서비스 워커는 모바일 앱의 핵심 기능인 푸시 알림, 오프라인 동작 등을 가능하게 하는 역할을 수행한다.본 글은 아래 링크의 내용을 참고하여 학습한 내용을 나름대로 정리한 글임을 밝힙니다.
