brunch

You can make anything
by writing

C.S.Lewis

by 김센잉 Oct 19. 2022

다양한 앱 형태는 어떻게 다른 걸까?

과거에는 웹과 앱이 분리된 형태의 서비스로 되어 있어서 각각의 서비스에서만 경험할 수 있는 부분들이 있었습니다. 하지만 최근에는 웹 서비스와 앱 서비스를 동일하게 하는 통합 환경 구현 서비스들이 대부분입니다. 지금 우리가 보고 있는 서비스들은 예산, 시간, 인력 등 실제로 많은 것들을 고려한 후 지금의 서비스가 되었다고 할 수 있습니다.


앱 개발은 개발 방법이나 실행 방법에 따라 크게 네 가지 종류로 구분할 수 있습니다. 네이티브 앱, 모바일 웹, 모바일 웹앱, 하이브리드 앱으로 나뉘는데 각각 어떤 특징을 가지고 있는지와 장단점이 무엇인지 비교해봅시다.



네이티브앱

네이티브 앱

모바일 기기에 최적화된 앱을 의미

: 안드로이드 또는 ios 같은 구체적인 플랫폼만을 위해 만들어진 응용 프로그램



장점

1. 각 플랫폼의 API를 호출하여 사용하기 때문에 기기마다 최적화가 가능하다.

2. 기기의 전체에 접근할 수 있기 때문에 갤러리, 캘린더, 주소록 등 고유 정보를 사용할 수 있다.

3. 구동 속도가 빠르다.



단점

1. ios와 안드로이드로 플랫폼이 제한된다.

2. 각각의 운영체제에 따라 앱을 개발해야 하기 때문에 그만큼 많은 비용과 시간이 필요해진다.



네이티브 앱 예시  

편의성, 기능이 중요한 앱: 게임 앱 / 지도, 교통 앱(카카오 맵, 네이버 지도, 지하철 종결자) / 카메라 기능 위주 앱(인스타그램, 틱톡, 스노우)

편의성, 보안이 중요한 앱: 은행, 카드 앱

잦은 업데이트가 필요하지 않은 앱: 멤버십 앱(스타벅스, T멤버십)




모바일 웹

모바일 웹

모바일 기기에 맞게 구성된 웹 화면

: 현재 모바일 기기의 브라우저에서 볼 수 있는 대부분의 웹 화면은 모바일 웹 형식



장점

1. 직접성: 앱은 기본적으로 '설치'가 먼저인 반면에 모바일 웹은 모든 모바일 기기에서 빠르게 접근이 가능하다.

2. 호환성: 하나의 모바일 웹 사이트는 수많은 종류의 모바일 기기와 유저가 접속할 수 있다.

3. 투입 리소스: 모바일 웹은 모바일 앱 보다 더 적은 비용과 시간으로 개발이 가능하다. 또한, 상대적으로 유지 보수가 수월하다.



단점

1. 화면 전체 내용을 서버에서 새로 받아 현재 화면을 갱신하는 풀 브라우징 방식이기에 앱에 비해 접속 속도가 느리다.

2. 모바일 기기 특성상 서버 접속 장애가 발생할 수 있기에 불안정하다.



모바일 웹 예시  

m.naver.com이라는 URL




모바일 웹앱

모바일 웹앱

모바일 웹과 네이티브 앱의 장점만을 모은 것

: 모바일 웹과 근본적인 차이는 없지만 출력되는 화면과 구동 방식을 앱과 동일하게 보이도록 만든 것

: 웹 기술로 네이티브 앱처럼 보이도록 구현했지만 실질적으로는 웹이다.



장점  

1. 웹 사이트의 크기를 단순히 줄이는 것이기 때문에 복잡한 개발 과정이 필요하지 않아 비용을 축소할 수 있다.

2. 네이티브 앱과 달리 설치할 필요가 없어서 브라우저로 접근이 가능하다.

3. 업데이트가 빨라 항상 최신 상태이다.

4. 별도 설치 및 승인과정이 필요하지 않아 유지보수가 용이하다.



단점  

1. 네이티브 앱 보다 기능이 제한적이어서 성능이 떨어진다.

2. 카메라, 센서 등 모바일 기기의 하드웨어적 기능을 사용할 수 없다.

3. 브라우저를 열고 검색하여 들어가야 하기 때문에 네이티브, 하이브리드 앱 보다 실행이 까다롭다.



모바일 웹앱 예시

네이버 블로그

좌: 웹앱 / 우: 네이티브 앱


네 가지 형태 중 모바일 웹과 모바일 웹앱은 어떻게 구현하냐에 따라서 반응형과 적응형으로 나뉜다.

반응형은 물이기에 담는 그릇에 따라 크기가 달라지지만 적응형은 얼음이라 그릇의 크기에 맞춰 각각 크게 또는 작게 잘라져서 나오는 것이라고 생각하면 쉽다.




하이브리드 앱

하이브리드 앱

웹과 네이티브 앱이 합쳐진 형태

: 네이티브 앱을 구동시키면 특정 웹 페이지를 불러오는 방식



장점

1. 네이티브 앱의 형태를 띠고 있어 앱스토어나 마켓에서 다운로드하여 모바일에 설치가 가능하다.

2. 카메라나 센서 같은 폰의 하드웨어 기능도 사용 가능하다.

3. 장점만으로 만들어졌기 때문에 많은 부분을 해소하고 있다.



단점

1. 네이티브 자체 앱보다는 퍼포먼스가 떨어진다.

2. 웹앱 보다 비싸다.

3. 기본 앱 보다 상호 작용이 적다.



 하이브리드 앱 예시

신규 콘텐츠를 노출해야 하는 앱: 포털 사이트(네이버, 다음, 구글) / 쇼핑몰 앱(11번가, 쿠팡, 개인 쇼핑몰 등)



지금까지 내용을 한 표로 요약할 수 있다.

출처: codef blog




내가 만약 PM이라면?

제가 만약 한 프로덕트의 PM이라면 기획하는 과정에서 각 앱의 형태를 어떻게 선정할까요? 그리고 개발 단계에 어떤 사항을 적용해야 하는 것이 좋을까요? 앱의 형태를 선정할 때는 회사의 방향성, 프로덕트의 특성, MVP 등 고려해야 할 것이 많습니다. 하지만 앞서 설명한 것을 토대로 어떻게 선정할지 생각해볼 수는 있습니다.



네이티브 앱

네이티브 앱은 ios와 안드로이드 버전을 둘 다 만들어야 하기 때문에 아무 자본이 없는 초기 프로덕트라면 선택하지 않을 것입니다. 하지만 시간이 지나고 고객 니즈가 다양해지며 유저 수가 급증하면 네이티브 앱으로의 전환을 고민할 것입니다. 또한, 게임과 같이 퍼포먼스가 중요하거나 카메라 등과 같은 하드웨어의 기능이 필요할 경우 네이티브 앱을 선정할 것입니다.

개발 단계에서 적용할 사항: 안드로이드, ios 등 각각의 모바일 운영체제에 따라 별도로 개발 / 통합 개발하는 것이 가능한 프레임워크인 React Native 사용



모바일 웹앱

모바일 웹앱은 모바일에 설치하는 앱이 아니므로 카메라나 음성 등 디바이스 자체 기능에 접근을 하지 않아도 되는 프로덕트의 경우 선정할 것입니다. 처음부터 모바일을 기준으로 제작된 웹앱은 제작 비용이 저렴하고 개발 기간도 짧고 스마트폰 이용자에게 편안한 환경을 제공하기 때문에 일석이조의 효과를 고려해서 선정할 것입니다.

개발 단계에서 적용할 사항: 웹 기반의 HTML, CSS, Javascript 등을 활용



하이브리드 앱

하이브리드 앱은 서비스 초기에 시작하려는 앱 형태로 고려할 것입니다. 큰 퍼포먼스가 필요하지 않고 신규 콘텐츠를 노출해야 하는 앱이라면 하이브리드 앱이 적합하기 때문입니다.

개발 단계에서 적용할 사항: 패키징에 모바일 운영체제 별 네이티브 개발 언어를 활용 → 각 기술에 대한 전문지식이 있는 인력 필요




출처 및 자료

스타트앱 (https://startapp.kr/%EC%95%B1-%EC%A2%85%EB%A5%98-%EB%B3%84-%EB%B9%84%EA%B5%90-%EB%B6%84%EC%84%9D-%EB%84%A4%EC%9D%B4%ED%8B%B0%EB%B8%8C-%EC%95%B1-%ED%95%98%EC%9D%B4%EB%B8%8C%EB%A6%AC%EB%93%9C-%EC%95%B1-%EC%9B%B9/)

open.ads ( http://www.openads.co.kr/content/contentDetail?contsId=4451)

하늘네트 (https://www.hanl.tech/blog/native-vs-hybrid-vs-pwa/)

pCloudy.com (https://www.pcloudy.com/blogs/types-of-mobile-apps-native-hybrid-web-and-progressive-web-apps/)

nogomin.log (https://velog.io/@nogomin/%EB%84%A4%EC%9D%B4%ED%8B%B0%EB%B8%8C-%EC%95%B1-%EC%9B%B9%EC%95%B1-%ED%95%98%EC%9D%B4%EB%B8%8C%EB%A6%AC%EB%93%9C-%EC%95%B1)

WISETRACKER (https://www.wisetracker.co.kr/blog/mobile-vs-app/)

매거진의 이전글 인체에 비유한 잔디 프론트엔드 뜯어보기
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari