웹, 네이티브 그리고 하이브리드
author - 흔들리지 않는 편안함 | UX 디자이너
모니터나 스마트폰을 통해 지금 보고 있는 이 화면은 어떻게 만들어지는 걸까?
고객의 니즈에 부합하면서 쿨한 온라인 서비스를 제작하려면 어떤 방식으로 만들어야 할까?
과거 PC에서만 사용되었던 웹 기반 서비스는 스마트폰 및 태블릿PC 등 다양한 디바이스가 등장하면서 애플리케이션(이하 "앱") 등 여러 형태로 확장되었습니다. 이 글에서는 우리가 사용하는 웹/앱 서비스가 만들어지는 방식에는 어떤 종류가 있는지, 각각의 특징과 장단점에 대해 소개해드리고자 합니다.
*애플리케이션의 범주에는 웹브라우저 확장프로그램, 게임 등 여러 응용프로그램이 포함되지만, 이 글에서는 통상적인 이해를 돕기 위해 애플리케이션의 범주를 '웹에서 확장된 모바일 서비스'로 한정하는 부분 참고 부탁드립니다.
첫 번째, 웹(Web)
웹 기반 서비스는 우리가 인터넷을 할 때 흔히 사용하는 크롬, 인터넷 익스플로러, 파이어폭스, 사파리 등 웹 브라우저를 통해 이용하는 것을 말하며, 운영체제[안드로이드, iOS, 윈도우 등]와 디바이스[아이폰, 갤럭시 등]에 영향을 거의 받지 않고 같은 콘텐츠를 볼 수 있는 특징을 가지고 있습니다. 또한, 유저가 별도의 다운로드나 업데이트를 하지 않아도 개발자가 웹 서버에 업데이트를 하면 유저는 항상 최신 버전을 접할 수 있습니다.
웹은 HTML5, CSS 등 웹표준 언어를 활용하여 개발되며, 보편적으로 이를 '웹 개발'이라 칭합니다. 웹 방식은 개발 비용 및 공수가 일반적으로 네이티브에 비해 비교적 적게 들지만, 디바이스의 기능 및 정보 접근에 대한 제한이 있으며 유저의 행위마다 서버로부터 데이터를 불러오는 로딩 시간이 발생하기 때문에 비교적 느리고 인터넷 연결 상태에 따라 끊기는 현상이 발생할 가능성이 상대적으로 높습니다.
웹 장점
+ 모든 디바이스와 웹브라우저로 접근할 수 있기 때문에 범용성이 높습니다. PC, 스마트폰, 태블릿PC 등
+ 웹브라우저를 통해 접근하기 때문에 유저는 별도의 다운로드나 업데이트를 하지 않아도 됩니다.
+ 일반적으로 개발 비용 및 공수가 네이티브 개발에 비해 비교적 적게 듭니다. 콘텐츠 및 기능의 복잡성에 따라 네이티브보다 오히려 비용 및 공수가 많이 발생할 수도 있습니다.
웹 단점
- 디바이스가 가지고 있는 정보 접근[연락처, 캘린더 등]이 제한되며 하드웨어를 비롯한 기능 활용[센서, 카메라, 일부 노티피케이션 등] 효율이 낮습니다.
- 네이티브 앱에 비해 인터랙션이 제한되고 웹브라우저 주소창과 내비게이션이 차지하는 공간 때문에 표현상 제약이 있습니다.
- 웹브라우저를 열고 탐색 과정을 거쳐서 들어가야 하기 때문에 접근성이 떨어집니다.
- 유저 데이터를 수집하는 데 한계가 존재합니다.
두 번째, 네이티브(Native)
네이티브 개발은 앱 특화 서비스를 구축할 때 사용되며, 유저는 디바이스가 지원하는 스토어에서 앱을 다운 및 설치해야 서비스를 이용할 수 있습니다. 주로 애플 앱스토어와 구글 플레이스토어로 나뉘며, 각 스토어에 올라와 있는 앱은 해당 운영체제[iOS, 안드로이드 등]에 최적화 되어 있는 개발 도구로 제작되기 때문에 높은 퍼포먼스를 낼 수 있습니다.
네이티브 기반의 앱은 웹에 비해 더 많은 디바이스 접근 권한을 가질 수 있기 때문에 연락처, 캘린더 등의 정보와 카메라, 자이로센서 등 하드웨어를 활용하기에 용이합니다. 다만, 각 운영체제[iOS, 안드로이드 등]마다 개발을 해야 하기 때문에 iOS, 안드로이드 등 운영체제에 따른 개발 인력이 별도로 필요하며, 웹에 비해 개발 공수와 비용이 높습니다.
네이티브 장점
+ 유저의 서비스 이용 행태 및 취향 등 데이터를 수집하여 분석하기에 용이합니다.
+ 디바이스에 대한 접근 권한으로 정보[연락처, 캘린더 등]와 하드웨어 기능[카메라, 자이로센서 등]을 보다 효율적으로 활용할 수 있습니다.
+ 높은 접근성과 퍼포먼스를 제공할 수 있습니다.
+ 인터넷이 연결되지 않은 상황에서도 앱 내에 구축되어 있는 서비스를 일부 이용할 수 있습니다.
네이티브 단점
- 앱을 설치해야 하는 1차적 허들이 존재합니다.
- 각 운영체제[iOS, 안드로이드 등]마다 별도 제작을 해야 하기 때문에 개발 공수와 비용이 높습니다.
- 디바이스 호환성과 각 운영체제의 버전에 대응해야 합니다.
세 번째, 하이브리드(Hybrid)
하이브리드는 웹으로 개발된 화면을 '알맹이'로 사용하면서 각 운영체제[iOS, 안드로이드 등]에 맞는 '네이티브 껍데기'를 씌워 웹과 네이티브가 가진 장점들을 최대한 활용하는 방법입니다. 따라서, 웹 개발로 제작되는 알맹이는 웹브라우저를 통해 사용 가능하며 약간의 튜닝을 거치면 다양한 운영체제 스토어에서 다운받을 수 있는 앱으로도 제작할 수 있습니다. 결국 각 운영체제별 네이티브 개발이 필요하지만 순수 네이티브 개발에 비해 공수와 비용이 적게 들어가는 특징을 가집니다. 웹을 기반으로 하는 만큼 인터넷 속도에 영향을 받습니다.
*웹을 기반으로 만들어지는 하이브리드 특성상 웹은 웹의 장단점이 그대로 작용하기 때문에 앱인 경우로 한정하여 장단점을 추렸습니다.
하이브리드 장점
+ 한 벌을 개발하여 웹브라우저 및 네이티브 앱 등 다양한 플랫폼에 활용할 수 있기 때문에 개발 공수와 비용이 웹과 순수 네이티브를 모두 개발하는 것보다 적게 듭니다.
+ 유저의 서비스 이용 행태 및 취향 등 데이터를 수집하여 분석하기에 용이합니다.
+ 높은 접근성과 퍼포먼스를 제공할 수 있습니다.
+ 웹) 모든 디바이스와 웹브라우저로 접근할 수 있기 때문에 범용성이 높습니다. PC, 스마트폰, 태블릿PC 등
+ 웹) 웹브라우저를 통해 접근하기 때문에 유저는 별도의 다운로드와 업데이트를 하지 않아도 됩니다.
+ 웹) 일반적으로 개발 비용 및 공수가 네이티브 개발에 비해 비교적 적게 듭니다.
+ 네이티브) 디바이스에 대한 접근 권한으로 정보[연락처, 캘린더 등]와 하드웨어 기능[카메라, 자이로센서 등]을 보다 효율적으로 활용할 수 있습니다.
+ 네이티브) 인터넷이 연결되지 않은 상황에서도 앱 내에 구축되어 있는 서비스를 일부 이용할 수 있습니다.
하이브리드 단점
- 웹을 기반으로 만들어지기 때문에 웹 제한 사항인 '디바이스가 가지고 있는 정보'를 활용하기 위해서는 동일한 화면을 네이티브 환경으로 추가 개발해야 할 수도 있습니다. 서비스의 중요도, 효율, 필요 등 고려
- 앱을 설치해야 하는 1차적 허들이 존재합니다.
- 웹) 디바이스가 가지고 있는 정보 접근이 제한되며 하드웨어를 비롯한 기능 활용 효율이 낮습니다.
- 웹) 네이티브 앱에 비해 인터랙션이 제한되고 웹브라우저 주소창과 내비게이션이 차지하는 공간 때문에 표현상 제약이 있습니다.
- 웹) 웹브라우저를 열고 탐색 과정을 거쳐서 들어가야 하기 때문에 접근성이 떨어집니다.
- 웹) 유저 데이터를 수집하는 데 한계가 존재합니다.
- 네이티브) 각 운영체제마다 별도 제작을 해야 하기 때문에 개발 공수와 비용이 높습니다.
- 네이티브) 디바이스 호환성과 각 운영체제의 버전에 대응해야 합니다.
웹, 네이티브 그리고 하이브리드 개발 방식을 결정하기 위해서는,
- 서비스 성격을 파악해야 합니다.
- 유저 데이터를 축적하여 추적 및 관리하는 것에 대한 필요를 판단해야 합니다.
- 디바이스에 저장된 개인정보 활용에 대한 필요성을 판단해야 합니다.
- 고객의 서비스 몰입도를 좌우하는 인터랙션, 기능 등 퍼포먼스를 고려해야 합니다.
- 서비스 운영상 변동 이슈를 예측 및 산정해봐야 합니다.
이외에도 각 서비스의 특성을 고려하여 1차적으로 웹 및 앱의 지원 범위를 설정하고 UX 기획을 통해 중요도, 효율, 필요를 반영하여 상황에 적합한 개발 방식을 선택해야 합니다. 웹표준 언어와 웹 개발 도구의 발전으로 웹브라우저 환경에서의 퍼포먼스도 많이 향상되고 있습니다. 하지만, 아직 네이티브를 대체하기에는 무리가 있기에 웹과 앱으로 모두 서비스를 해야 하는 경우에는 효율성을 높이고자 하이브리드를 기반으로 전체 스펙을 개발하고, 기능과 퍼포먼스의 중요성 및 필요성을 판단하여 부분 네이티브 개발을 하는 '하이브리드+네이티브' 형태를 많이 취하고 있습니다.
-
플러스엑스의 UXUI 실무 배우러 가기
UX 상위기획 실무 강의 : 플러스엑스 UX 실무 마스터 패키지
UX 디자인 실무 피그마 강의 : Plus X UX디자이너가 피그마로 화면 설계하는 방식
-
UI 디자인 기초 강의 : 플러스엑스 UI 실무 마스터 패키지
UI 디자인 실무 피그마 강의 : Plus X UI팀의 입문자를 위한 피그마 디자인 매뉴얼
