웹 기획 VS 앱 기획

기획자 혹은 PM은 서비스의 종류와 목적, 자원 등을 고려하여 서비스 형식을 결정하게 된다. 기획자/PM으로서 서비스 기능 구현에 대한 이해가 필수적이기에 웹과 앱 서비스의 4가지 유형, 각 유형별 장단점, 어떤 상황에서 어떤 형태를 선택하는 게 좋은지 정리해보고자 한다.

 

웹/앱 서비스 유형

Native APP : 네이티브 앱(앱 100%)

네이티브라는 말의 뜻 그대로 스마트폰의 가장 원시적인, 원초적인 형태의 앱을 의미한다. 네이티브 앱의 가장 큰 특징은 스마트폰의 운영체제별 개발 방식이 완전히 다르다는 점이다.(운영체제 즉 OS는 소프트웨어의 하위 개념으로, 우리가 사용하는 모든 앱/웹 프로그램은 OS 위에 깔리게 된다.)

 

안드로이드와 iOS는 다른 OS, 다른 개발 방식을 지니고 있다. 때문에 안드로이드 앱은 Java/Kotlin으로 iOS 앱은 Objective-C/Swift로, 모바일 OS에 최적화된 언어(SDK : Software Development Kit)를 사용해 개발을 한다.

 

 

1. 네이티브 앱의 장점

• 네이티브 앱은 특정 운영체제 전용으로 개발되는 것이기에, 해당 플랫폼의 성능과 기능(카메라, 센서, 파일 시스템 등)을 모두 사용할 수 있다. 또한 운영체제가 업데이트될 때마다 그 최신 기능들도 바로 앱에 탑재가 가능하다.
• 앱의 퍼포먼스를 최대치로 끌어올릴 수 있다. 다른 방식에 비해 고성능 그래픽 처리 등의 고퀄리티 서비스를 개발할 수 있다는 말이다.
• 대용량 데이터 처리가 용이하며 정보 보안에 뛰어나다.
• 안드로이드라면 구글 Play 스토어, iOS라면 App 스토어에 올려지기에 사용자가 앱을 설치한 후 홈 화면 원하는 위치에 아이콘을 추가하여 접근성을 높일 수도 있다.
• 오프라인에서도 사용 가능한 부분이 존재한다.

 

2. 네이티브 앱의 단점

• 운영체제별로 각각 만들기 때문에 서비스 개발 및 유지보수에 인력, 시간, 비용 소모가 크다.(참고한 문헌에서는 하이브리드 앱 대비 인력/시간/비용이 4-5배 이상 소모된다고 한다.)
• 안드로이드에서는 가능한 기능이 iOS에서는 불가능해 내부 로직이 서로 달라질 수 있다.
• 각 운영체제(플랫폼)의 디자인 시스템이 다를 경우, 서로 다른 디자인이 나올 수도 있다.
• 앱을 배포할 때 스토어의 검수를 맡아야 하는데, 구글 Play 스토어의 검수는 몇 시간인 반면 App 스토어의 검수는 며칠이 소요되기에 동일한 시기에 릴리즈하는 것이 쉽지 않다.(검수 중 둘 다 통과되지 않을 수도 있다.)
• 수정이나 업데이트 시에도 각 앱스토어에서 승인이 필요해 배포 및 적용 속도가 느리다.(모든 사용자들은 빠르게 앱 업데이트를 하지 않는다.)
• 다른 앱 대비 용량이 가장 크다.

 

Cross-Platform APP : 크로스 플랫폼 앱

크로스 플랫폼 앱은 각 운영체제를 신경 쓰지 않고 하나의 언어로 개발할 수 있는 네이티브 앱이다. 즉 네이티브 앱을 개발할 때의 안드로이드와 iOS 개발 언어가 달랐다면, 크로스 플랫폼 앱은 JavaScript/Dart/C# 등으로 개발한 뒤 각 운영체제에서 이해할 수 있는 언어로 자동 변환되는 식이다. 또한 크로스 플랫폼은 여러 운영체제들이 공통으로 제공하는 기능의 활용이 가능하기에 웹 앱보다 활용할 수 있는 기능이 많다.

 

코드 1개로 2개의 플랫폼에서 모두 사용할 수 있기에 유지보수가 쉽다는 장점이 있지만, 네이티브가 아니기에 각 플랫폼에서 독점적으로 사용하는 기능을 모두 사용할 수는 없고 퍼포먼스 이슈(ex. 高그래픽의 변환이 느리다거나.)가 생길 수 있다는 단점이 있다.

 

Hybrid APP : 하이브리드 앱(일부는 앱 + 일부는 웹)

하이브리드 앱은 네이티브 앱의 구조를 가지고 있으나 일부 기능들을 웹으로 구현해 개발한 것으로 네이티브 앱과 웹 앱의 절충안이다. 스토어에 올릴 수 있는 앱이지만 앱을 실행하면 자동으로 그 사이트로 접속하게 된다. 웬만한 기능들은 웹사이트의 형태로 만들고 웹뷰(Webview) 안에서 활용하게끔 한 앱이기에 웹 앱보다 구현할 수 있는 기능이 많다.

 

1. 하이브리드 앱의 장점

• 앱 자체의 업데이트를 할 때만 스토어의 검수가 필요하고, 앱 내 웹뷰에 나타나는 컨텐츠는 웹 사이트만 업데이트(수정)하면 되기에 네이티브 앱보다 개발 및 유지보수 비용이 적다.
• 네이티브 API와 웹 API를 모두 활용해 다양한 개발이 가능하다.
• 네이티브 앱처럼 APK 응용 어플리케이션으로 동작하고 스마트폰에 설치가 가능하다. 때문에 OS 플랫폼 고유의 기능(카메라, GPS 등)을 활용할 수 있다.

 

2. 하이브리드 앱의 단점

• 웹과 네이티브 앱의 개발 지식이 모두 필요하다.(유지보수 과정이 복잡할 수 있다.)
• 네이티브 앱에 비해 편리성과 디자인에 취약하며 고유 기능 권한이 제한적이다.
• 별도의 하이브리드 앱 개발 프레임워크가 필요하며, 복잡한 기능 구현에 제한이 있다.
• 웹뷰 콘텐츠가 있기에 네트워크 환경에 영향을 받는다.

 

WEB APP : 웹 앱(웹 100% + 포장지만 앱)

웹 앱부터는 앱이 아니다. 웹이다!(나도 지인을 통해 알았는데, 웹 앱과 모바일 웹은 모바일에서 보는 웹사이트라고 한다.) 웹 앱은 앱의 형태를 가지고 있지만 실제 내용은 웹에서 구현한다. 모바일 웹과 큰 차이는 없지만 모바일 웹과 네이티브 앱을 결합한, 조금 더 네이티브 앱에 가까운 형태 정도로 생각하면 된다. 웹과 동일하게 HTML로 개발하지만 모든 UX/UI가 보다 모바일을 중점적으로 개발했기에 모바일에 더 최적화되어 있다. 웹 앱의 대표적인 예시인 마켓컬리는 URL을 통해 접속해도 앱 화면과 똑같은 UX임을 확인할 수 있다.

 

1. 웹 앱의 장점

• 웹 기반 개발이기에 네이티브 앱에 비해 비용과 시간 소모가 적다.
• 앱을 따로 설치하지 않아도 되기에 구글 Play 스토어나 App 스토어의 검수도 필요 없다.
• 웹 브라우저처럼 주소창이 존재하게 할 수도, 네이티브 앱처럼 모바일 기기에 아이콘을 생성시킬 수도 있다.
• URL을 통해 접속할 수 있기에 모든 기기와 브라우저에서 접근할 수 있다.

 

2. 웹 앱의 단점

• 기능과 성능에 한계가 있다. 네이티브 앱의 장점이었던 플랫폼의 성능과 기능 사용에 제한이 있고 각 브라우저들에서 공통으로 제공하는 기능들까지만 활용이 가능하다.
• URL을 통해 접근하는 구조이기 때문에 인터넷 상태에 영향을 받는다.

 

PWA(Progressive Web App)

PWA 역시 앱과 웹의 장점을 합친 것인데, 하이브리드 앱은 ‘앱’에 웹의 장점을 더했다면 PWA는 ‘웹’에 앱의 장점을 더한 방식이다. 나는 PC에 설치하는 앱 중 일부를 PWA로 이해하고 있다. (간략하게, 웹의 장점은 URL만으로 접근이 가능하여 신규 사용자의 유입이 많다는 것이고 앱의 장점은 푸시 알림 등의 기능이 제공되는 것이다.)

 

문헌에서 PWA의 핵심 기술 두 가지를 소개하는데, 바로 manifest.json 파일과 서비스 워커이다. 요약하자면 manifest.json 파일은 PWA가 어떻게 동작해야 하는지에 대한 정보를 알려주고 서비스 워커는 모바일 앱의 핵심 기능인 푸시 알림, 오프라인 동작 등을 가능하게 한다.

 

Mobile WEB : 모바일 웹(웹 100%)

모바일 웹은 스마트폰 사용자를 고려하여 개발한 웹 페이지 기반 서비스를 의미한다. 즉 PC에서 실행되는 웹 사이트를 모바일 스크린 크기로 줄여 놓은 것이라고 생각하면 될 듯하다. 기기에 도메인 주소(URL)를 입력해 모바일 웹이 접속할 수 있다. 모바일 웹은 반응형 혹은 적응형 방식을 통해 구현이 가능하다. PC용 웹페이지의 주소와 다르게 모바일용 URL을 따로 둔다는 점이 반응형 웹과의 차이라 할 수 있다. 앱스토어에는 따로 출시되지 않으며 웹 앱이 조금 더 앱에 가까운 UX를 제공한다.

 

1. 모바일 웹의 장점(웹 앱과 유사)

• 개발 및 유지보수가 간편하다. 모바일 용으로 웹 사이트를 만들어두면 어떤 OS에서도 이용할 수 있고, 새로운 버전을 릴리즈할 때에도 웹 사이트만 수정하면 된다.(모바일 앱보다 적은 비용과 시간.)
• PC 웹으로 서비스가 이미 존재한다면 간단한 디자인, 사이즈 조정만으로 쉽게 구현이 가능하다.
• 인터넷 상태만 연결되어 있다면 모든 기기와 브라우저에서 접근할 수 있다.
• 앱을 따로 설치하지 않기에 구글 Play 스토어나 App 스토어의 검수도 필요 없다.
• 검색을 통해 웹 사이트로 접근을 유도하기 쉽다.

 

2. 모바일 웹의 단점(웹 앱과 유사)

• 기능과 성능에 한계가 있다. 네이티브 앱의 장점이었던 플랫폼의 성능과 기능 사용에 제한이 있고 각 브라우저들에서 공통으로 제공하는 기능들까지만 활용이 가능하다.
• URL을 통해 접근하는 구조이기 때문에 인터넷 상태에 영향을 받는다.

 

반응형 웹, 적응형 웹

‘반응형 웹 디자인(RWD)’은 브라우저 창의 폭에 따라 레이아웃을 바꿀 수 있도록 하는 기술이다.

반응형 웹은 N-Screen(하나의 콘텐츠를 여러 디바이스에서 소비할 수 있는 환경) 시대에 맞추어 다양한 디바이스에 최적화된 화면을 제공한다. 또한 모바일과 PC 홈페이지를 하나로 운영해 제작/관리비가 저렴하고 하나의 URL을 가져 검색엔진 인덱싱(크롤러가 찾아 가져온 웹페이지의 정보들을 구글 검색 색인에 저장하는 것. 추가 설명은 출처 4번째 링크.)과 노출에 유리하다. 로딩 속도 지연을 발생시키는 리디렉션이 발생하지 않기에 로딩 시간이 줄어 좋은 방문 경험을 제공하기도 한다.

 

반응형은 변화에 적극적으로 ‘반응’하는 것을 의미한다면 적응형은 새로운 목적이나 상황에 쉽게 ‘변경’되는 것을 의미한다. 즉 반응형 웹에서는 뷰포트 너비와 같은 요인에 유동적으로 변하지만 적응형 웹에서는 미리 정해진 요인(기준이 되는 스크린 사이즈에 맞추어 미디어 쿼리/스크립트 활용.)들에 맞추어 만들어지게 된다. 반응형 웹에 비해 적은 비용이 들지만 모든 스크린에 최적화할 정교함은 떨어진다.

 

어떤 형식을 선택해야 할까?

앞서 말했듯 기획자 및 PM은 서비스의 종류와 목적, 타깃 유저, 비즈니스 상황, 자원 등 많은 요소를 고려하여 서비스 형식을 결정하게 된다. 웹에서 고려해야 할 부분과 앱에서 고려해야 할 요소에는 많은 차이가 있기에 적절한 판단을 내리는 것이 중요할 것이다.

 

네이티브 앱

앱 개발자가 따로 있고, 투자 및 개발 기간이 충분할 경우. / 앱 서비스 만으로 비즈니스를 확장시킬 생각의 경우. / 스마트폰 기능을 많이 활용할 경우.

 

하이브리드 앱

스마트폰 기능과 웹뷰 기능이 필요하고 업데이트를 자주 해야 할 경우.

 

모바일 웹, 웹 앱

별도의 앱 설치 없이 다양한 플랫폼에서 이용할 수 있게 해야 할 경우. / 새로운 정보를 지속적으로 업데이트하는 콘텐츠를 제공하는 경우. / 인적, 물적 자원이 넉넉하지 않은 경우.

 

모바일 웹과 앱의 장점만을 꼽아 비교하자면, 모바일 웹은 직접성(앱 설치) / 호환성(모바일 기기간의 호환) / 업데이트 용이성 / 검색성 / 투입 리소스를 꼽을 수 있고 앱은 상호작용성 / 개인화 / 성능 / 단말기 기능 활용 / 오프라인 등을 꼽을 수 있다.

 

또한 웹과 앱을 비교하자면, 웹은 앱보다 높은 접근성을 가지고 있으며 넓은 화면이기에 다양한 것들을 상하좌우에서 관찰할 수 있다. 앱은 작은 화면에 많은 데이터를 보여줘야 하기에 디테일하고 섬세한 디자인이 필요하다.(가독성을 고려하여 스크롤 형태의 웹 앱 형태를 만들 수도 있다.) 다만 앱에도 위에서 언급한 다양한 장단점이 있기에 충분한 고민 후 결정해야 한다.

 

출처

• https://it-eldorado.tistory.com/132
• https://brunch.co.kr/@carynful/17
• https://webclub.tistory.com/492
• https://hypemarc.com/seo-crawling-indexing/
• https://blog.naver.com/sy_4019/222666939827
• https://www.wisetracker.co.kr/blog/mobile-vs-app/