웹과 앱 개발 방식 종류

웹, 반응형 웹, 적응형 웹 / 
웹앱, 모바일 웹, 네이티브 앱, 하이브리드 앱이란?

 

Photo by Maxim Ilyahov on Unsplash

 

웹 Web

웹 기반 서비스는 우리가 인터넷을 할 때 흔히 사용하는 크롬, 인터넷 익스플로러, 사파리, 파이어폭스, 엣지 등의 웹 브라우저를 통해 이용하는 것을 말한다. 서버에 저장되기 때문에 iOS나 안드로이드 등 운영체제에 따라 달라지지 않지만, 사파리인지 크롬인지에 따라 달라질 수는 있다. 유저가 별도의 다운로드나 업데이트를 하지 않아도 개발자가 웹 서버에 업데이트를 하면, 유저는 항상 최신 버전을 접할 수 있다.

 

HTML5, CSS, JavaScript 등을 활용하여 제작한다. 웹 개발은 공수가 일반적으로 네이티브에 비해 적게 들지만, 디바이스의 기능 및 정보 접근에 대한 제한이 있으며, 네이티브 앱에 비해 인터렉션이 제한되고 웹브라우저 주소창과 내비게이션이 차지하는 공간 때문에 표현상 제약이 있다. 웹브라우저를 열고 탐색 과정을 거쳐서 들어가야 하기 때문에 접근성이 떨어지며, 유저 데이터 수집에 대한 한계가 존재한다.

 

+ 반응형 웹 / 적응형 웹

반응형 웹은 1개의 웹사이트에 명령어를 입력하여 브라우저의 크기에 맞게 홈페이지의 크기가 변경되는 방식이다. 간단한 유지보수는 적응형에 비해 매우 편리하며, 1개의 웹사이트만 사용하기 때문에 1번만 수정하면 된다. 1개의 디자인으로 PC 화면과 모바일 화면에 맞는 디자인을 해야 하기 때문에 디자인에 대한 제약이 있다. 제작비용이 적응형에 비해 비싸며, 유지보수 비용도 비싸다. 한 페이지에 PC, (태블릿,) 모바일이 함께 들어가 있어서 이를 처리하기 위한 미디어 쿼리 작업이 들어가기 때문에 유지보수 비용도 비싸다.

 

적응형 웹은 PC 웹사이트와 모바일 웹사이트를 따로 제작하는 방식이다. 2개 혹은 태블릿 PC까지 3개의 홈페이지를 따로 만들다 보니 홈페이지를 수정할 때 모두 수정해야 하는 불편함이 있다.

 

---

 

웹 앱 Web App

모바일 웹이라고 나처럼 혼동할 수 있지만, 웹앱과 모바일 웹은 차이가 있다. 모바일 웹은 단순히 PC 상에서 보이는 브라우저 창을 모바일에 맞게 줄여놓은 것이라면, 웹 앱은 PC가 아닌 모바일을 기준으로 하여 모바일에 중점을 두고 개발하는 방식이기 때문에 더 모바일에 최적화시킨 것이 웹앱이다. 모바일 웹의 풀 브라우저 방식에서 웹앱의 단일 페이지 방식을 사용하여 속도를 높였다.

 

모바일 웹과의 차이점은 많지 않지만, 겉으로 보이는 모습이나 구동방식을 앱처럼 보이도록 만들어둔 것이기 때문에 모바일로 사이트를 이용하는 사용자는 더욱 익숙하게 사용할 수 있다. 하지만 겉모습만 앱일 뿐 브라우저를 통해 들어가는 웹이기 때문에 사용자가 검색과 URL 등을 통해 들어와야 하고, 모바일 운영체제에서 제공하는 기능들을 활용할 수 없다는 단점도 가지고 있다.

 

 

모바일 웹 Mobile Web

데스크 탑 브라우저에 실행되는 웹 애플리케이션을 모바일 스크린 크기로 줄여 놓은 것을 말한다. 일반적인 url 앞에 m을 붙이면 나오는 모바일 버전의 웹사이트라고 보면 된다. 스마트폰에 내장된 웹 브라우저를 통해 접속하는 형태로, 일반적인 웹 기술로 개발할 수 있다. 하지만, 단말기의 화면을 고려하여 제작해야 하며 앱에 비해 접속 속도가 느리다.

 

 

네이티브 앱 Native App

디바이스가 지원하는 스토어(e.g. 구글 플레이스토어, 애플 앱스토어)에서 앱을 다운로드하여야 서비스를 이용할 수 있다. 각 스토어에 올라와 있는 앱은 해당 운영체제에 최적화되어 있는 개발 도구로 제작이 되기 때문에 높은 퍼포먼스를 낼 수 있다. 그렇기 때문에 PC에서 접속이 불가능하며, 매번 스토어에서 업데이트를 해줘야 하는 불편함이 있다. 네이티브 앱은 유저가 사용하기에 가장 편하고 빠르며 디자인 측면에서도 웹이나 하이브리드 앱이 도달하기 힘든 수준을 쉽게 만들 수 있다.

 

웹에 비해 더 많은 디바이스 접근 권한을 가질 수 있기 때문에 연락처, 캘린더 등의 정보와 카메라, 자이로센서 등의 하드웨어를 활용하기에 더 용이하다. 단, 각 운영체제마다 개발을 해야 하기 때문에 이에 따른 개발 인력이 별도로 필요하며, 웹에 비해 개발 공수와 비용이 높다.

 

안드로이드 앱: 안드로이드 SDK를 이용하여 Java 언어로 제작
아이폰 앱: iOS SDK를 이용하여 Objective-C 언어로 제작
*SDK: Software Development Kit의 약자로 소프트웨어를 개발하는 도구를 말한다.

유저의 서비스 이용 행태나 취향 등의 데이터를 수집하여 분석하기에 용이하다. 높은 접근성과 퍼포먼스를 제공할 수 있으며, 인터넷이 연결되지 않은 상황에서도 앱 내에 구축되어 있는 서비스의 일부를 사용할 수 있다. 유튜브, 카카오톡, 인스타그램의 네이티브 앱들도 웹에서 콘텐츠를 불러오지만, 콘텐츠를 웹 페이지로 불러오지 않는다. 웹에서 콘텐츠를 불러오지만, 웹페이지를 그대로 보여주지 않는 형태는 모두 네이티브 앱이다.

 

네이티브 앱 예시: 유튜브, 카카오톡, 인스타그램, 페이스북 등

 

 

하이브리드 앱 Hybrid App

네이티브 앱과 웹 앱의 장점만을 모으고 단점들은 보완한 형태의 앱이다. 네이티브 앱처럼 별도의 아이콘이 있고, 전화나 카메라 등의 권한을 가져가 사용할 수 있다. 겉으로 보기에는 앱이지만, 실제로는 웹 기반으로 앱의 기능을 차용한 형태이다. 예를 들어 하이브리드 앱의 예시로 네이버와 같은 경우, 네이버 앱을 깔아서 실행해보면 웹브라우저로 네이버에 접속한 것과 차이가 없어 보인다. 하지만, QR 코드 리더라던지, 음성인식과 같은 일부 기능은 오로지 애플리케이션에서만 지원되는 형태를 띠고 있다.

 

앱의 기반이 되는 콘텐츠 영역은 HTML 기반의 웹 앱으로 개발을 한 이후, 최종 앱 배포에 필요한 패키징 처리만 아이폰, 안드로이드 플랫폼 안에서 처리한 애플리케이션이다. 즉, 내부의 웹 앱을 외부를 네이티브 앱으로 둘러싸고 있는 형태이다. 즉, 주요 화면 부분은 웹 앱의 특성을 살려서 구현하고, 네이티브 앱의 특성을 살려서 하드웨어 접근이 가능하도록 만들어진 형태이다.

 

각 운영체제별로 네이티브 개발이 필요하지만, 순수 네이티브 개발에 비해 공수와 비용이 적게 들어가는 특징을 가지며, 웹을 기반으로 하는 만큼, 인터넷 속도에 영향을 받는다. 게임 및 그래픽, 멀티미디어 성능이 네이티브 앱에 비해 떨어질 수 있다.

 

하이브리드 앱 예시: 네이버, 크롬 다음 등

 

구글의 하이브리드 앱 / 모바일 웹 비교

 

유사한 기능을 하고 있지만, 기능을 살펴보면 하이브리드 앱에는 있는 기능이 모바일 웹에서는 없는 것을 확인할 수 있다. 네이티브 앱과 하이브리드 앱은 잘 구분하기 힘들며, 일반적으로 개발 리소스에 따라 리소스가 부족하면 하이브리드, 리소스가 충분하다면 네이티브로 개발을 한다.

 

---

 

Reference

 

웹, 네이티브 그리고 하이브리드

하이브리드 앱이란? 하이브리드 앱의 정의 및 장/단점

19강 - 하이브리드 앱

[프리모아] 네이티브 앱 , 웹 앱 , 하이브리드앱 차이비교

[코드크레인] 네이티브 앱? 하이브리드 앱? 모바일 웹?

네이티브앱 / 웹앱 / 하이브리드앱을 구별해봅시다.

[앱개발방식] 네이티브앱, 하이브리드앱, 모바일웹, 웹앱 차이점 알아보기

웹 vs 하이브리드 vs 네이티브

적응형 (PC+모바일 홈페이지) 와 반응형 홈페이지의 장단점 : 홈페이지제작 디두