모바일 / 앱

하이브리드 웹앱(Hybrid Web App)

하이브리드 웹앱(Hybrid Web App)은 웹 기술로 만든 화면을 네이티브 앱 컨테이너 안에서 실행하는 앱 방식입니다.

쉬운 설명

웹 기술로 만든 화면을 네이티브 앱 컨테이너 안에서 실행하는 앱 방식.

배경과 쓰임까지 이해하기

조금 더 자세히

하이브리드 웹앱(Hybrid Web App)은 HTML, CSS, JavaScript로 만든 웹 화면을 모바일 앱 안에서 실행하는 방식입니다. 웹 코드를 iOS와 Android에서 함께 재사용하면서 카메라, 알림, 파일 같은 기기 기능을 연결할 수 있습니다.

다만 일반 브라우저와 WebView의 동작 차이, 권한, 뒤로 가기 등을 실제 기기에서 확인해야 합니다. 한마디로, 하이브리드 웹앱은 웹 화면과 네이티브 앱 껍데기를 결합한 앱입니다.

실제로는 이렇게 만나요

웹으로 만든 서비스 화면을 iOS와 Android 앱의 WebView에 넣고 로그인이나 푸시 알림 기능을 네이티브 코드와 연결할 수 있습니다.

  • 이런 거 할 때 나와요 웹 코드를 여러 모바일 플랫폼에서 재사용하면서 카메라, 알림 같은 기기 기능을 앱 연결부를 통해 사용할 수 있습니다.
  • 이렇게 생겼어요 하이브리드 웹앱(Hybrid Web App)은(는) WebView, Responsive Web, Frontend 같은 주변 개념과 함께 문서, 설정 화면, 오류 메시지에서 자주 보입니다.
  • 나오는 화면 예시 모바일 / 앱 작업을 하다가 WebView, Responsive Web, Frontend를 확인하는 화면

헷갈리기 쉬운 점

브라우저에서는 잘 되던 기능도 웹뷰 버전, 권한, 뒤로 가기, 파일 업로드 방식에 따라 다르게 동작할 수 있습니다.

왜 알아두면 좋을까요?

웹 코드를 여러 모바일 플랫폼에서 재사용하면서 카메라, 알림 같은 기기 기능을 앱 연결부를 통해 사용할 수 있습니다.

Checklist

실제로 볼 때 확인할 것

  1. 01

    지원할 OS와 웹뷰 버전을 정한다

  2. 02

    네이티브 연결 기능을 문서화한다

  3. 03

    실제 기기에서 뒤로 가기와 권한을 확인한다

관계 지도

하이브리드 웹앱(Hybrid Web App) 중심으로 관련 개념의 정의와 관계를 한눈에 정리했습니다.
하이브리드 웹앱(Hybrid Web App)의 정의와 관련 개념 간 관계를 설명한 계층형 그래프