1. 정의
앱이나 프로그램UI를 좀더 쉽게 만들기 위해서 웹 컴포넌트를 활용하는 방식이다. 기존에는 java, c++, c를 통해 UI를 구현하였으나, 하이브리드 앱을 이용하면 html, css, javascript를 통해서 프로그램 UI를 좀더 수월하게 구현할 수 있다. 그러나 프로그램 자체적으로 웹모듈 라이브러리가 있어야 프로그램이 실행되기 때문에 그것 자체가 프로그램 퍼포먼스에 오버헤드라고 할 수 있겠으나, 현재 자바스크립트 및 웹 모듈 성능이 급격히 좋아지고 있으며, 디바이스 성능도 예전에 비해서 급격하게 좋아지고 있기 때문에 게임 프로그래밍이나 복잡한 연산 프로그램이 아닌 이상 오버헤드 문제는 크게 신경쓰지 않아도 된다.모바일 앱 방면에서는 플랫폼에 많이 구속받지 않는 방식으로 앱을 만들 수 있다.[1] 그래서 간단하고 빠르게 모바일 앱을 만드는 방법으로 주목받고 있다. 단, 애플 앱스토어 검수시에는 네이티브 기능 없이 웹만 앱 모양으로 감싸서 내면 등록 거부 당한다고 하니 참고할 것.[2]
다만 어차피 UI가 아닌 OS의 API를 활용하는 로직(카메라 사용, 푸시알림 등)은 네이티브로 여전히 짜야 하고, PC버전과는 어쨌든 UI가 분리될 수밖에 없으며[3]어쨌든 대부분의 경우 IOS 또는 안드로이드 둘 중 하나의 UI셋을 사용하게 되는데 그럼 필연적으로 반대 진영의 사용자에게는 어색하게 된다.[4]
하드웨어,OS 종속이 덜한 기능들(서버통신 등)은 js로 다 짜는 것이 가능하긴 하지만, 어쨌든 네이티브 기능이 있어야 검수가 통과되고..
또한 JS언어 자체가 개선되어가고 있긴 하지만 아직 문제점도 많고 동적 타입, 콜백지옥, IDE의 부재와 자동완성의 미흡, 각종 프레임워크들의 난립 및 춘추전국시대 등으로 인해 여러모로 난해한 언어이기도 하다. 그래서 확실히 로직을 JAVA나 C++로 짜는거보단 JS가 다소 난해해지고 지저분해지는 건 사실이다.
또한 HTML/CSS가 XML보다는 코딩이 편리하지만 요즈음엔 HTML/CSS보다도 편리하게 안드로이드 스튜디오나 그 외의 IDE에서 GUI 방식으로 UI디자인을 할 수 있는 툴을 제공하기 때문에 장점이 많이 희석되기도 했다.
2. 하이브리드앱과 웹앱
모바일앱을 개발 언어 및 방법에 따라 네이티브앱과 하이브리드앱으로 구분 지어 부른다.보통 Java 나 SWIFT 로 개발 된 모바일앱을 네이티브 앱으로 구분하는 것은 별다른 이견이 없겠지만, 반응형 홈페이지나 모바일용 홈페이지를 Webview 로 호출 하는 기능만 갖는 앱을 하이브리드앱으로 부르는 경우는 맞지 않다고 볼 수 있다.
코르도바, 폰갭, 자마린 등으로 개발하여 사용자 UI와 주요 소스는 모바일 장치내에 존재하고 외부에서 JSON 등으로 자료를 호출하거나 모바일 장치의 센서, 카메라 등을 제어 할 수 있는 앱이 하이브리드앱에 속하며, 외부에 있는 모바일 홈페이지를 Webview 로 호출하는 경우에는 웹앱 이라고 부르는 것이 조금 더 정확한 구분이다.
하이브리드앱과 웹앱은 외관상 구분이 어려우나 가장 큰 차이점은 하이브리드앱은 네트워크가 차단 된 경우에도 앱 동작이 가능하지만[5] 웹앱의 경우는 아예 구동이 불가능 하다.[6]
3. 예제
- 센차터치
[1]
웹은 iOS에서든 안드로이드에서든 똑같이 보이는걸 생각하면 쉽다.
[2]
앱으로 만들어야 하는 이유가 있어야 한다고.
[3]
반응형으로 다 짤수도 있긴 한데 보통 어느 한쪽에서는 UX/UI 최적화를 조금 희생하는 편이고, 단일 레이아웃으로 PC와 모바일 양측에 완벽히 최적화되기에는 한계가 있다.
[4]
IOS인데 사이드 메뉴나 드랍다운 메뉴가 있다든가, 안드로이드인데 IOS에서 쓰이는 언더바 메뉴가 있다거나
[5]
앱의 역할에 따라 다르지만 계산기, 일기장, 타이머 등을 외부자료 연동 없는 경우를 뜻한다.
[6]
웹앱은 http 등의 네트워크 사용이 필수이다.
[7]
위 정의의 '웹 컴포넌트를 활용하는 방식이다' 에 위배되므로 하이브리드 앱이라고 보기 어렵다. 리액트 네이티브는 Javascript 런타임과 네이티브 사이를 브릿지가 연결해주고 실제 렌더링은 네이티브에서 수행하는 방식이다. 리액트와는 달리 html/css 와는 직접적인 관련이 없고, 웹에서도 사용하려면 react-native-web 이라는 별도의 패키지와 연동하여야 한다.