웹사이트를 앱으로 만들려면 어떤 방법을 골라야 할까?

웹사이트를 잘 운영하고 있는데 "앱도 있어야 한다"는 말을 들으면, 처음부터 앱을 새로 만들어야 하는지부터 고민하게 됩니다. 실제로는 웹 코드를 그대로 설치하게 하는 방법부터 처음부터 다시 만드는 방법까지 네 가지 길이 있습니다. 이 글에서 다루는 도구는 모두 오픈소스이고, 원본 주소와 라이선스는 글 끝에 모아 두었습니다.

네 가지 길은 웹 코드를 얼마나 살리는가와 휴대폰 기능을 얼마나 깊이 쓰는가에 따라 갈립니다. 아래에서는 웹을 앱으로 만드는 순서대로 PWA, 하이브리드, 크로스플랫폼, 네이티브를 살펴보고, 어떤 기준으로 고르면 되는지 정리합니다.

핵심 요약

• 웹 코드를 그대로 쓰려면 PWA나 하이브리드(Capacitor)를 고르고, 앱스토어에 올려야 한다면 하이브리드가 가장 짧은 길입니다.
• 크로스플랫폼(React Native, Flutter)은 화면을 새로 만들지만 코드 하나로 iOS와 안드로이드를 함께 지원합니다.
• 네이티브는 비용이 가장 크지만 성능과 기기 기능에 제약이 없습니다. 처음엔 가볍게 시작해 필요한 부분만 옮기는 방법도 흔합니다.

웹 코드를 얼마나 살리느냐로 길이 갈립니다

그림 1

앱을 만드는 방법은 보통 네 가지로 나눕니다. PWA는 웹사이트를 그대로 설치하게 하는 방법이고, 하이브리드는 웹앱을 앱 안에 넣어 앱스토어에 올리는 방법입니다. 크로스플랫폼은 앱 전용 화면을 새로 만들되 코드 하나로 두 플랫폼을 지원하는 방법이고, 네이티브는 iOS와 안드로이드용 앱을 각각 따로 만드는 방법입니다.

왼쪽으로 갈수록 빠르고 싸게 만들 수 있고, 오른쪽으로 갈수록 시간이 들지만 할 수 있는 일이 많아집니다. 어느 쪽이 더 좋다기보다 지금 가진 웹 코드와 앱에서 하고 싶은 일에 따라 맞는 자리가 다릅니다.

PWA는 웹사이트를 그대로 앱처럼 설치하게 합니다

PWA(Progressive Web App)는 웹사이트에 두 가지를 더해 앱처럼 쓰게 하는 방식입니다. 하나는 앱 이름과 아이콘, 시작 화면을 적은 웹 앱 매니페스트(설치 정보 파일)이고, 다른 하나는 화면 뒤에서 파일을 저장해 두었다가 인터넷이 끊겨도 열리게 해 주는 서비스 워커입니다. 사용자는 브라우저 메뉴에서 "홈 화면에 추가"를 누르면 아이콘을 눌러 주소창 없는 앱 화면으로 쓸 수 있습니다.

장점은 배포와 업데이트입니다. 웹사이트를 고치면 앱도 바로 바뀌고, 앱스토어 심사를 기다릴 필요가 없습니다. 대신 블루투스나 일부 센서처럼 브라우저가 막아 둔 기능은 쓰기 어렵고, 특히 iOS에서는 지원 기능이 안드로이드보다 적습니다. 안드로이드 Play 스토어에는 PWABuilder 같은 도구로 PWA를 포장해 올릴 수도 있습니다.

하이브리드는 웹앱을 앱 상자에 담아 스토어에 올립니다

하이브리드 앱은 웹앱을 진짜 iOS·안드로이드 앱 안의 웹뷰(앱 안에 들어 있는 브라우저 창)에 넣는 방식입니다. 지금 대표 도구는 Capacitor입니다. 예전에 많이 쓰던 Cordova의 뒤를 잇는 도구로, React·Vue·Angular 등 어떤 웹 프레임워크로 만든 앱이든 넣을 수 있습니다.

npm install @capacitor/core @capacitor/cli
npx cap init
npx cap add android
npm run build && npx cap sync

카메라, 위치, 푸시 알림처럼 브라우저만으로는 못 쓰는 기능은 플러그인이 이어 줍니다. JavaScript에서 함수를 부르면 플러그인이 휴대폰의 네이티브 코드를 대신 실행합니다. 주의할 점도 있습니다. 애플은 웹사이트를 감싸기만 한 앱은 심사에서 거절할 수 있으므로, 푸시 알림이나 오프라인 사용처럼 앱에서만 할 수 있는 기능을 넣는 것이 좋습니다.

Capacitor의 작동 방식과 설치, 플러그인 사용법, 개발 환경은 Capacitor 상세 글에서 자세히 정리했습니다.

크로스플랫폼은 화면을 새로 만들고 로직을 나눠 씁니다

크로스플랫폼은 코드 하나로 iOS와 안드로이드 앱을 함께 만드는 방식입니다. 하이브리드와 달리 웹뷰를 쓰지 않습니다. React Native는 JavaScript로 작성한 화면을 각 플랫폼의 진짜 버튼과 목록으로 바꿔 그리고, Flutter는 Dart 언어로 작성한 화면을 자체 엔진으로 직접 그립니다.

웹 개발자에게는 React Native가 더 가깝습니다. 웹을 React로 만들었다면 데이터 처리나 서버 통신 같은 로직은 상당 부분 옮겨 쓸 수 있지만, 화면 코드는 앱용으로 다시 작성해야 합니다. Flutter는 언어부터 다르므로 사실상 새로 만든다고 보는 편이 맞습니다. 대신 둘 다 네이티브에 가까운 부드러운 화면을 얻을 수 있습니다.

네이티브는 처음부터 다시 만드는 대신 제약이 없습니다

네이티브 앱은 iOS는 Swift, 안드로이드는 Kotlin처럼 플랫폼 공식 언어로 따로 만드는 앱입니다. 웹 코드는 거의 쓸 수 없고, 두 플랫폼을 각각 개발하고 관리해야 하므로 비용이 가장 큽니다.

그 대신 성능과 기기 기능에 제약이 없습니다. 게임, 영상 편집, 블루투스 기기 연동처럼 휴대폰의 힘을 끝까지 써야 하는 앱이라면 결국 이 길로 오게 됩니다. 처음부터 네이티브로 시작하기보다 하이브리드로 시작한 뒤 무거운 화면만 네이티브로 옮기는 방식도 많이 씁니다.

구분	PWA	하이브리드	크로스플랫폼	네이티브
대표 도구	브라우저 표준, PWABuilder	Capacitor, Cordova	React Native, Flutter	Swift, Kotlin
웹 코드 재사용	거의 그대로	대부분 그대로	로직 일부	거의 없음
앱스토어 배포	필요 없음 (안드로이드는 포장 가능)	가능	가능	가능
성능·기기 기능	브라우저 범위 안	플러그인으로 확장	네이티브에 가까움	제한 없음
잘 맞는 경우	빨리 내놓고 자주 고칠 때	웹앱을 스토어에도 올릴 때	일반 소비자용 앱	게임, 고성능, 기기 연동

그림 2

정리하며

웹을 앱으로 만드는 방법은 PWA, 하이브리드, 크로스플랫폼, 네이티브 네 가지이고, 왼쪽일수록 웹 코드를 많이 살리고 오른쪽일수록 휴대폰 기능을 깊이 씁니다. 이미 웹앱이 있다면 PWA나 Capacitor 같은 하이브리드로 시작하는 것이 가장 빠르고, 성능이 중요한 화면이 생기면 그때 크로스플랫폼이나 네이티브를 검토하면 됩니다.

처음부터 정답을 고르려 하기보다, 지금 가진 웹 코드로 가장 빨리 사용자 손에 닿는 길을 먼저 고르는 것이 현실적인 출발점입니다. 반대로 네이티브 앱을 중심에 두고 웹서비스를 함께 제공하는 방법은 네이티브 앱과 웹서비스를 함께 운영하는 글에서 정리했습니다.

원본과 라이선스

• Capacitor · Ionic · MIT · github.com/ionic-team/capacitor
• Cordova · Apache 재단 · Apache-2.0 · github.com/apache/cordova-android
• React Native · Meta에서 시작 · MIT · github.com/react/react-native
• Flutter · Google · BSD-3-Clause · github.com/flutter/flutter
• PWABuilder · Microsoft · MIT · github.com/pwa-builder/PWABuilder

라이선스는 2026년 10월 26일 기준 각 GitHub 저장소에서 확인했습니다.

한마디로 정리하면

웹사이트를 동네에서 잘 되는 가게라고 생각해 보세요. 이제 이 가게를 백화점(앱스토어)과 손님 집 가까이로 넓히고 싶은 상황입니다.

PWA는 단골손님에게 가게 바로가기 카드를 나눠 주는 것입니다. 가게는 그대로이고, 손님은 카드만 있으면 언제든 쉽게 찾아옵니다. 하이브리드는 가게 인테리어를 그대로 떼어 백화점 매장에 옮겨 놓는 것입니다. 손님은 백화점에서 같은 가게를 만나고, 백화점 설비(카메라, 알림)도 빌려 쓸 수 있습니다.

크로스플랫폼은 레시피는 그대로 두고 백화점 규격에 맞춰 매장을 새로 꾸미는 것입니다. 한 번 꾸민 설계로 두 백화점(iOS, 안드로이드)에 함께 들어갑니다. 네이티브는 백화점마다 전용 매장을 따로 짓는 것입니다. 가장 비싸지만 원하는 대로 만들 수 있습니다.

결론은 간단합니다. 이미 잘 되는 가게가 있다면 바로가기 카드나 매장 이전부터 시작하고, 손님이 늘어 더 큰 무대가 필요할 때 새로 짓는 것을 고민하면 됩니다.