[코드스테이츠 PMB 7기] 네이티브 앱? 하이브리드 앱? 웹 앱? 도대체 뭐가 다른건데?

apple software applications (출처: 구글)

 

 

휴대폰을 쓸때마다 궁금한 점이 있었다. 어떤 App은 빠르게 작동하고, 어떤 앱은 되게 많이 버벅였다. 예전에는 내가 가지고 있는 휴대폰의 성능이 모자라서 생기는 경우들이었는데, 이제는 휴대폰의 성능이 너무 좋아져서 원인이 기기에 있지 않다는 것을 거의 모든 사람들이 알고 있다. 그럴때마다 친구들과 이런 대화를 나누곤 했다. 

 

"아 이 앱(App)너무 구려. 로딩이 진짜 느리잖아. 답답해." 

 

그렇지만 정확한 원인이 무엇인지는 알 방법이 없었다. 그저 인터넷 속도가 느려서 그런건지, 아니면 내 휴대폰이 낡은 것이어서 그랬는지, 혹은 서비스를 만든사람이 잘 못만들었던지. 

 

시간이 조금 흐르고, 학교생활을 하면서 주변에 개발을 전공하는 친구들이 과제하던 이야기를 주워듣다보면 생소한 단어들이 들리곤 했다. 

 

"이걸 네이티브로 개발하려면 작업할게 너무 많아서 안좋을 것 같은데? 우리는 IOS개발자도 없고..." 
"그냥 심플하게 웹앱으로 하는게 어때? 우리 프론트도 두명이나 있고 훨씬 쉬울 것 같아."

"아 그래도 완성도가 너무 떨어지지 않을까? 하이브리드로 가야되지 않나?" 

 

네이티브는 뭐고, 웹앱은 뭐고, 하이브리드는 또 뭐야....? 대화의 흐름을 애써 따라가 보지만 명확한 구분이나 이해를 하는데에는 어려움이 컸다. 나는 분명 휴대폰에서 App을 눌러서 서비스를 이용하고 있는데, 이게 다 다른거라고? 도대체 뭐가 다른거야? 

 

이번 시간에는 앱의 대표적인 형태인 웹 앱, 하이브리드 앱, 네이티브 앱 그리고 모바일 웹 까지 포함하여 각각의 차이점은 무엇이고, 어떤 장단점을 가지는지 알아 보도록 하자. 

 

 

 

 

 

---

 

 

1. 일반 WEB과 모바일 WEB

 

 

출처: 직접캡쳐

 

 

이 화면은 누구에게나 익숙한 화면일 것이다. 데스크탑이나 노트북과 같이 일반적으로 PC를 켜서 웹브라우저에 접속하게 되면 볼 수 있는 화면이다. 상단에는 주소를 입력할 수 있는 창이 있고, 하단에는 본문 내용이 위치해 있다. 

 

지금 보여지는 화면을 모바일 브라우저에서 열게 되면 어떻게 될까? 우리가 보통 사용하는 익스플로러(MS Internet Explorer)나 크롬(crome), 사파리(safari), 파이어폭스(firefox) 같은 브라우저들을 모바일에서 사용하게 되더라도 기본적으로 큰 차이가 없다. 내가가진 하드웨어에 따라서 화면의 크기가 달라질 뿐, 상단에 주소창이 있고 내용이 보이는 기본 구조는 바뀌지 않는다. 

 

그런데 문제는 여기서 발생한다. 같은 WEB인데 화면의 크기가 달라서 같은 화면을 띄워 놓으면 환경에 따라서 가시성이 떨어진다는 것이다. 화소가 안좋은 사진 크기를 억지로 키우면 사진이 깨져서 보이는 것처럼, 또 너무 큰 사진을 억지로 줄여 놓으면 사진이 뭉개지는 것처럼 말이다. 이미 일반적인 모니터 환경에 맞추어서 개발되어진 웹사이트들을 모바일에서 확인하려고 하니 이와같이 불편한 점이 발생했다. 

 

개발자들은 이것을 어떻게 해결했을까? 바로 모바일 웹이다. 모바일 웹은 웹 사이트를 모바일 환경에 맞게 템플릿을 변경한 것이라고 볼 수 있다. 세로보다 가로가 긴 일반 웹사이트와 달리 모바일의 경우 가로보다 세로가 더 길다. 이러한 모바일 환경에서 더 보기좋고 사용하기 좋도록 웹사이트를 구성한 것이 모바일 웹이다. 쉽게 말해 PC용 홈페이지를 모바일 스크린의 크기에 맞춰 줄여 놓은 것이 모바일 웹이라고 생각하면 된다. 'm.'으로 시작하는 웹 주소들이 바로 모바일 환경에 맞게 구성된 모바일 웹이라고 보면 된다.

 

 

출처 : 좌(구글), 우(직접캡쳐)

 

장점

• 기본적으로 가지고 있는 백엔드 데이터(DB)를 활용하여 제작할 수 있다. 
• 제작에 오랜 비교적 적은 시간이 소요된다. 

단점

• 모바일, 태블릿 등 각각의 기기마다 템플릿을 제작해줘야 한다는 번거로움이 있다. 

Language : HTML, CSS, JS

 

 

 

 

---

2. 웹 앱 (WEB APP)

 

그렇다면 웹 앱은 무엇일까? 웹 앱은 기본적으로 모바일 웹과 큰 차이가 없다. 모바일 웹과 동일하게 웹 사이트 주소를 입력해서 들어가야 하고, HTML을 기반으로 작동한다는 것이 동일하다고 볼 수 있다.  

 

그렇다면 모바일웹과 웹 앱은 어떤 차이점이 있는 걸까?

 

이 화면은 네이버의 웹 앱의 모습이다. UI디자인은 일반적인 앱인 것처럼 보여진다. 상하로 스크롤 되어 노출되는 싱글페이지 형태로 UI가 구성되어 있으며, 각각의 아이콘들이 자리잡고 있어서 사용자로 하여금 앱처럼 느껴지게 한다. 

 

하지만 상단에 주소창이 그대로 있고, 언제든지 다른 웹사이트로 넘어갈 수 있다. 모바일 웹과 동일하게 클라이언트 하드웨어가 가지고 있는 카메라나 녹음 등의 센서와 같은 기본적인 기능을 활용할 수 없다. 근본적으로 웹 기술로 개발되었기 때문이다.

 

웹 앱은 '모바일에 최적화된 웹' 이라는 표현이 더 잘 어울린다고 생각한다. 앱이라는 이름이 있지만, 구동되는 방식이나 기술적인 시각에서 보면 '앱(App)'에 강조가 있기보다는, '웹(WEB)'에 더 초점이 맞춰진 것이라고 생각된다. 

 

 

 

 

 

 

장점

• 비교적 저렴한 비용으로 개발이 가능하다
• 앱(App)을 따로 설치할 필요가 없다. 
• 모든 기기와 브라우저에서 접근할 수 있다. 
• 따로 업데이트를 할 필요가 없다. (서버에서 실시간 정보를 가져오면 되니까) 

단점

• 카메라, 음성검색 등 휴대폰이 가지고 있는 하드웨어 기능을 활용할 수 없다. 
• 클라이언트에 설치하는 형태가 아니기 때문에 상대적으로 반응속도가 느리다.
• 인터넷 상태에 따라 접속장애가 일어날 수 있다. 

Language : HTML, CSS, JS, PHP, ASP 

 

 

 

 

---

3. 네이티브 앱(Native APP)

 

네이티브 앱은 모바일 기기에 최적화 된 언어로 개발된 앱이다. 우리가 흔히 말하는 '어플리케이션(Application)'의 정확한 의미는 이 네이티브 앱을 뜻한다. 각각의 클라이언트(사용자) 기기에 완성된 소프트웨어를 설치하여 구동하도록 하는 것이다. 

 

네이티브 앱은 클라이언트 기기가 가지고 있는 기능과 성능을 적극적으로 활용할 수 있다는 장점이 있다. 따라서 하드웨어에 들어있는 카메라 촬영, 블루투스 기능, GPS 기능 등 특별한 기능들을 사용하고 싶을때 네이티브 앱으로 제작을 하게 된다. 뿐만 아니라 고품질의 애니메이션 기능이나 클라이언트 기기의 CPU를 적극적으로 사용해야 하는 3D 게임과 같은 앱들은 전부 네이티브로 제작을 하게 된다. 

 

네이티브 앱을 사용하기 위해서는 보이는 것처럼 IOS 휴대폰의 경우 '앱스토어(App store)'에서, 안드로이드 휴대폰의 경우 '구글 플레이스토어(Google Play stre)에서 해당 소프트웨어를 다운 받아야만 사용이 가능하다. 

 

이전에 즐겨하는 게임을 아주 오랫만에 다운 받아 봤는데, 시즌이 업데이트 되어 추가적으로 서버에서부터 패치된 정보를 불러오고 소프트웨어에 새롭게 패치를 하는 과정을 필요로 했다. 이처럼 네이티브 앱의 경우는 클라이언트 기기에 설치되어 작동되기 때문에 기능성이 훌륭하다는 장점이 있지만, 업데이트나 개선되는 사항에 대해서는 일일이 패치하여 업데이트를 진행해 주어야 한다는 점이 번거롭게 다가올 수 있다. 

 

 

장점

• 클라이언트에 소프트웨어를 설치하여 웹 앱, 하이브리드 앱에 비하여 성능이 안정적이며 빠르다.
• 네이티브 API를 호출하여 사용함으로 다양한 기능에 대한 접근이 자유롭다.
• 고성능 그래픽 처리가 가능하다 (2D, 3D, 증강현실 등)
  
  

단점

• Android와 IOS가 호환되지 않아 플랫폼별로 앱을 만들어야 한다.
• 해당 플랫폼에서 요구하는 언어와 API를 사용해야 해서 다른 방식들보다 높은 수준의 기술력이 필요하다.
• 개발기간이나 비용이 많이 든다.
• 특정 플랫폼 별로 앱스토어의 심사를 통과해야 되기때문에 업데이트가 늦게 반영된다.
• 업데이트를 실행할 때마다 Android와 IOS를 각각 진행해야 하며, 앱스토어를 통해 배포해야 하는 불편함이 있다. 
• PC로 접속이 불가능하다. 
  
  

Language 

• Aandroid : JAVA, Kotlin
• IOS : Object-C, Swift

 

 

 

 

---

4. 하이브리드 앱(Hybrid APP)

 

하이브리드 앱은 말 그대로 네이티브 앱과 웹 앱을 합쳐놓은 것을 뜻한다. 클라이언트쪽에 소프트웨어를 설치하여 웹 앱보다 빠르게 작동하고, 더 많은 기능을 사용할 수 있도록 하는 장점을 취하면서 안드로이드와 IOS를 각각 업데이트 해야하는 단점을 없애 효율적으로 앱이 구동하도록 한 것이라고 보면 된다. 

 

외부 형태(껍데기)는 네이티브처럼 작동하지만, 실제 내부는 HTML 기반의 웹 앱의 형식으로 구성되어 있다. 따라서 유저에게 노출되는 데이터는 실시간으로 서버에서 가져와 업데이트 되기 때문에 부담이 덜하다. 또한 네이티브와 웹 양쪽의 API를 모두 사용할 수 있다는 것이 큰 장점이다. 

 

이러한 하이브리드 앱은 요즘 정말 많은 곳에서 사용되는데, 수 많은 데이터가 실시간 계속해서 변동어야 하는 쿠팡, 마켓컬리와 같은 커머스 앱들에서 많이 사용되고, 카카오톡이나 네이버와 같이 텍스트가 주로 많이 노출되며 데이터를 백엔드의 서버에 많이 저장해야 하는 앱들에서도 사용이 된다. 

 

 

웹앱 네이티브 비교 (좌측부터 1.네이버홈 웹앱, 2. 네이버홈 네이티브, 3. 네이버페이 웹앱, 4. 네이버페이 네이티브

 

 

보이는 것처럼 웹앱에서 열리는 네이버 홈(1)의 경우는 서버에서 웹페이지를 불러오는 시간이 필요하여 상단에 로딩바가 보인다. 그에 비해 네이티브에서 열리는 네이버 홈은 속도면은 비교할 수 없이 빨랐고, 설정되어있는 UI가 달라 중앙에 있는 아이콘이 빠지고, 하단의 네비게이션 기능이 있는 아이콘으로 집어넣어 놓은것을 알 수 있다.

네이버페이 앱의 경우에는 UI상의 차이는 없었지만 브라우저에서 열리는것과 클라이언트 로컬환경에서 열리는 것의 차이가 분명히 있다. 

 

 

 

 

네이버의 하이브리드 앱의 경우는 고도화 되어있어서 그런지 네이티브와 같은 수준으로 작동하여 로딩의 불편함을 거의 느끼지 못했지만, 오늘회의 하이브리드 앱의 경우는 하단 메뉴를 옮겨다니거나 메뉴들을 선택해 들어갈 때마다 짧지만 브라우저에서 불러오는 시간동안의 로딩시간이 필요로 했다. 크게 불편을 느낄 수준은 아니었지만, 매번 모든 정보를 웹 앱과 같이 불러와야 하는 하이브리드 앱의 단점을 보여주는 예시라고 할 수 있겠다. 

 

장점

• 네이티브 API와 브라우저 API를 이용한 다양한 개발이 가능하다.
• 네이티브에서 가능한 카메라, 음성검색 및 인식 등의 스마트폰 기능을 사용할 수 있다.
• 웹개발 기술을 사용해 앱 개발이 가능하다.
• 한번의 개발로 다수의 플랫폼에 대응이 가능하다. (개발 비용이 다소 저렴하다)
• 웹 기술만으로 개발해서 앱스토어에 배포 할 수 있다.
  
  

단점

• 네이티브 기능에 접근하기 위해서는 네이티브 개발지식이 필요하다.
• 웹뷰에서 앱을 실행하는 경우이기 때문에 앱의 성능이 곧 브라우저의 성능이다.
• 네이티브 앱보다 UI를 구성하는 디자인 부분의 속도가 느리고 기능적인 접근 제한이 있다.
• 네이티브 앱 만큼 기능을 제공하진 않는다.
• 결국 앱스토에서 배포를 해야되기 때문에 업데이트 반영이 느리다.
  
  

Language

• React Native, Flutter, PhoneGap, Cordova, Ionic 등
• 하이브리드 앱 프레임워크 : 폰갭 , 앱스프레소 , 티타니움 등

 

 

 

---

 

모바일 웹을 제외한 네이티브 앱과 웹앱, 하이브리드 앱의 차이를 한번에 정리하자면 아래와 같다. 

 

출처: 브런치_김긍정