brunch

매거진 UXUI 스터디

라이킷 17 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 두블링 한윤석 Jul 07. 2023

왜 네이티브와 웹기반이 아닌 하이브리드를 사용하는가?

하이브리드 앱의 장점과 UI 디자인시 고려할 점

한윤석 (두블링 DOBLING, UI/UX 디자이너)

현재 1년차 주니어에서 미래 프로 디자이너를 꿈꾸는 사람으로써 같은 상황의 모든 신입, 주니어, 초보, 입문, 예비 디자이너들을 위해 매주 제가 경험한 디자인 인사이트를 업로드 합니다.

이전 글에서 앱 개발을 할때 네이티브와 웹 앱에 대하여 알아보았습니다. 하이브리드에 대해서는 많이 알아보지 못했는데요, 이번에는 하이브리드 앱의 장점과 왜 요즘 많이 사용되는지에 대해서 알아보겠습니다.

제가 회사에서 프로젝트를 진행하면서 고민했던 문제를 글로 적어봅니다.

하이브리드 앱

왜 요즘 하이브리드 앱을 사용하나?

웹 앱과 네이티브의 장점

우선 웹 앱은 html, css, javascript로 구현하기 때문에 웹 개발 방식과 모바일 개발 구현 방식이 동일합니다. 그렇기에 운영체제별로 구현할 필요가 없어 개발비용이 적게 들게 됩니다.

반면 네이티브는 유지보수 면에서 비용이 더 들기는 하지만 모바일에 최적화되어 높은 퍼포먼스와 더 많은 디바이스 접근권한, 빠른 속도와 안정성이라는 장점이 있습니다. javascript에서 구현되지 않는 퍼포먼스 있는기능들을 구현할 수 있습니다.

이러한 장점만을 합친게 하이브리드 앱

이러한 장점들을 합친게 하이브리드 앱입니다.

대중적으로 널리 알려진 네이버, 다음, 크롬이 대표적인 하이브리드 앱이라고 생각하면 쉬우며 네이티브 개발의 장점인 퍼포먼스 즉 카메라, 음성 검색 등의 스마트폰 기능이 사용 가능하다는 점과 웹 앱의 장점인 HTML로 개발되어 개발 및 유지 보수가 쉽다는 점을 동시에 가져갑니다.

하이브리드 앱 디자인 시 고려할 점

반응형 디자인

하이브리드 앱은 html,css 구조로 디자인되기 때문에 웹과 모바일 각 디바이스별로 컴포넌트를 따로 디자인하게 된다면 유지보수가 유용하다는 하이브리드 앱의 장점을 없애게 됩니다.

예를들어, 제가 현재 회사에서 신규 서비스 디자인을 진행하고 있는데 table(표) UI를 웹에서 디자인을 하였습니다. 하지만 화면 크기가 줄어들어 디바이스가 작아졌을때 그 table ui(표 형태)를 표현하기가 600px이하의 디바이스에서는 아코디언 형태로 디자인을 진행하였습니다.

이럴때 생기는 문제점은 디바이스별로 컴포넌트가 다르게 되어서 유지보수에 비용이 많이 든다는 점 입니다.

애초에 하이브리드 앱의 장점이 사리지는 것이죠.

그래서 기존의 table ui를 해체하여(기존 table에 넣어야할 내용들을 해체하여) 하이브리드 앱에 맞는 반응형 디자인이 가능한 하나의 컴포넌트로 디자인을 해야했습니다. 아래 영상과 같이 말이죠!