모바일 / 앱

하이브리드 웹앱(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

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

관계 지도