네이티브 앱 · 웹 앱 · 하이브리드 앱과 PWA
모바일에서 쓰는 앱은 무엇으로 만들고 어디서 실행되느냐에 따라 네이티브 앱, 웹 앱, 하이브리드 앱으로 나뉘고, PWA는 웹 앱을 설치형 앱처럼 쓸 수 있게 만드는 기술 묶음입니다. 면접에서는 "각 방식의 장단점과, 어떤 상황에 무엇을 고르겠는가"를 자주 묻습니다.
한눈에 보기
- 세 방식의 차이는 "화면을 누가 그리고, 휴대폰 기능에 얼마나 직접 손댈 수 있는가" 입니다.
- 네이티브 앱: 운영체제(안드로이드, iOS)의 언어와 도구로 직접 만든 앱
- 웹 앱: 브라우저 안에서 돌아가는 웹사이트를 앱처럼 만든 것
- 하이브리드 앱: 네이티브 앱 껍데기 안에 웹 화면을 띄운 앱
- 비유: 집 짓기로 생각해 보면 쉽습니다.
- 네이티브 앱은 그 땅(운영체제)에 맞춰 직접 지은 단독 주택입니다. 튼튼하고 빠르지만, 다른 땅(다른 운영체제)에는 처음부터 다시 지어야 합니다.
- 웹 앱은 호텔 객실입니다. 짐(설치) 없이 누구나 바로 들어가 쓸 수 있지만, 벽에 못을 박는 것(휴대폰 기능 사용)은 호텔(브라우저)이 허락한 만큼만 됩니다.
- 하이브리드 앱은 단독 주택 뼈대 안에 조립식 방을 넣은 집입니다. 방(웹 화면)은 어느 땅에서나 재사용하고, 뼈대(네이티브 부분)를 통해 땅의 기능도 씁니다.
- PWA는 호텔 객실에 내 열쇠와 우편함을 달아 준 것입니다. 여전히 호텔이지만, 홈 화면에 바로가기가 생기고 오프라인에서도 열리고 알림도 받습니다.
그림 출처: 에이콘아카데미 블로그 - 네이티브앱 vs 모바일웹앱 vs 하이브리드앱
참고: 그림은 2017년 기준입니다. 지금 안드로이드는 Java보다 Kotlin, iOS는 Objective-C보다 Swift를 주로 씁니다. 또 그림에서 웹 앱을 "모바일 웹과 네이티브 앱을 결합한 것"이라고 한 것은 앱처럼 쓰는 경험을 더했다는 뜻이고, 실제로는 브라우저 안에서 돌아갑니다. 네이티브 껍데기로 감싼 것은 하이브리드 앱입니다.
네이티브 앱 (Native App)
흔히 앱 스토어(구글 플레이, 애플 앱 스토어)에서 내려받아 쓰는 일반적인 앱입니다.
그림 출처: 에이콘아카데미 블로그 - 네이티브앱 vs 모바일웹앱 vs 하이브리드앱
- 각 모바일 운영체제에 맞는 언어와 개발 도구(SDK)로 만듭니다.
- 안드로이드: Android SDK와 Kotlin(현재 구글 권장 언어) 또는 Java
- iOS: iOS SDK와 Swift 또는 Objective-C
- 만든 코드가 기계어에 가까운 형태로 바뀌어 운영체제 위에서 바로 실행됩니다.
앱 (Kotlin / Swift 코드)
│
▼ 운영체제 API를 직접 호출
안드로이드 / iOS
│
▼
카메라, GPS, 블루투스, 알림, 연락처 ...장점
- 세 방식 중 성능이 가장 좋습니다. 화면 전환과 애니메이션이 가장 매끄럽습니다.
- 운영체제가 제공하는 네이티브 API를 직접 호출하므로, 카메라, 블루투스, 센서 같은 기기 기능을 제한 없이 쓸 수 있습니다.
- 각 운영체제의 디자인 규칙에 맞는 자연스러운 화면을 만들기 쉽습니다.
- 앱 스토어를 통해 사용자에게 노출되고 설치됩니다.
단점
- 플랫폼에 묶입니다. 안드로이드 앱과 iOS 앱을 따로 만들어야 하므로 개발 비용과 인력이 두 배로 듭니다.
- 운영체제마다 언어가 정해져 있어 언어 선택이 자유롭지 않습니다.
- 업데이트할 때마다 앱 스토어 심사를 거쳐야 하고, 사용자가 업데이트를 받아야 반영됩니다.
웹 앱 (Web App)
브라우저 안에서 실행되는 웹사이트를, 앱처럼 쓰기 좋게 만든 것입니다. 설치하지 않고 주소로 접속해서 씁니다. 아래 그림처럼 휴대폰, 태블릿, PC 어느 화면에서나 같은 웹 앱을 열 수 있습니다.
그림 출처: 에이콘아카데미 블로그 - 네이티브앱 vs 모바일웹앱 vs 하이브리드앱
먼저 비슷한 두 말을 구분해 두면 좋습니다.
| 구분 | 설명 | 예 |
|---|---|---|
| 모바일 웹 | PC용 홈페이지를 휴대폰 화면 크기에 맞게 줄여 놓은 웹사이트. 정보를 보여 주는 것이 중심입니다. | 회사 소개 페이지의 모바일 버전 |
| 모바일 웹 앱 | 화면 크기만 맞춘 것이 아니라 터치 조작, 화면 전환 등 앱처럼 쓰는 경험에 맞춰 만든 웹. 주로 SPA로 만들어 화면 전환이 빠릅니다. | 모바일 브라우저로 쓰는 웹 메일, 지도 |
화면 크기에 맞춰 레이아웃을 바꾸는 방법은 이 사이트의 반응형 레이아웃 글을 참고하세요.
장점
- 웹사이트를 여는 것이므로 따로 설치할 필요가 없습니다.
- 브라우저만 있으면 안드로이드, iOS, PC 어디서든 같은 코드로 접근할 수 있습니다.
- 앱 스토어 심사 없이 서버에 올리기만 하면 바로 모든 사용자에게 반영되어 유지 보수가 쉽습니다.
- 검색 엔진에 노출되고, 링크 하나로 공유할 수 있습니다.
단점
- 운영체제 API를 직접 쓸 수 없고, 브라우저가 열어 준 웹 API만 쓸 수 있습니다. 위치, 카메라, 알림 같은 기능은 웹 API로도 꽤 쓸 수 있지만, 블루투스나 연락처처럼 브라우저마다 지원이 다르거나 막힌 기능이 많습니다.
- 브라우저를 거치므로 네이티브 앱보다 느리고, 부드러운 터치 반응을 만들기가 조금 더 번거롭습니다.
- 실행이 번거롭습니다. 홈 화면 아이콘 대신 브라우저를 열고 주소를 입력하거나 검색해서 들어가야 합니다. (이 단점을 PWA가 보완합니다.)
하이브리드 앱 (Hybrid App)
네이티브 앱 + 웹 앱
네이티브 앱 껍데기 안에 웹뷰(WebView)를 띄우고, 그 안에서 웹 앱을 실행하는 방식입니다. 웹뷰는 앱 안에 들어가는 작은 브라우저 화면입니다.
그림 출처: 에이콘아카데미 블로그 - 네이티브앱 vs 모바일웹앱 vs 하이브리드앱
네이티브 껍데기 (앱 스토어로 배포)
└─ 웹뷰: HTML / CSS / JS로 만든 화면
│
▼ 브리지(Bridge)로 부탁
네이티브 API (카메라, 푸시 알림 등)화면은 웹 기술로 만들고, 카메라처럼 웹으로는 부족한 기능은 브리지를 통해 네이티브 코드에 부탁합니다. Cordova, Ionic(Capacitor) 같은 도구가 이 방식을 씁니다. 은행, 쇼핑 앱 중에도 일부 화면을 웹뷰로 띄우는 경우가 많습니다.
장점
- 네이티브 API와 웹 API를 모두 쓸 수 있습니다.
- 웹 개발 기술(HTML, CSS, JS)로 앱을 만들 수 있습니다.
- 한 번 개발한 웹 화면을 여러 플랫폼에서 재사용할 수 있습니다.
- 웹 화면 부분은 앱 스토어 심사 없이 서버에서 바로 고칠 수 있습니다.
- 앱 스토어에 올릴 수 있어 일반 앱처럼 설치하고 홈 화면에서 실행합니다.
단점
- 네이티브 기능을 쓰려면 결국 네이티브 개발 지식이 필요합니다.
- 화면이 웹뷰 안에서 그려지므로 네이티브 앱보다 성능이 떨어지고, 화면 전환이 덜 자연스러울 수 있습니다.
- UI 프레임워크(Ionic 등)를 쓰지 않으면, 앱처럼 보이는 화면을 개발자가 직접 만들어야 합니다.
헷갈리기 쉬운 것: React Native나 Flutter는 하이브리드 앱이 아니라 크로스 플랫폼 앱으로 따로 구분합니다. 코드 하나로 두 운영체제용 앱을 만든다는 점은 같지만, 웹뷰에 웹 페이지를 띄우는 것이 아니라 React Native는 진짜 네이티브 화면 부품을, Flutter는 자체 그리기 엔진을 써서 화면을 그립니다. 그래서 성능이 네이티브에 가깝습니다.
PWA (Progressive Web App)
웹의 장점과 앱의 장점을 합친 것. 앱 수준의 사용자 경험을 웹에서 제공하는 것이 목적입니다.
PWA는 새로운 언어나 프레임워크가 아니라, 웹 앱에 몇 가지 기술을 더해 설치형 앱처럼 쓸 수 있게 만든 것입니다.
- 웹 주소만 있으면 누구나 바로 쓸 수 있고, 앱 스토어를 거치지 않아도 됩니다.
- 브라우저의 "홈 화면에 추가"로 설치하면 아이콘이 생기고, 주소창 없이 앱처럼 전체 화면으로 열립니다.
- 네이티브 앱보다 저장 공간을 훨씬 적게 차지합니다. (캐시 파일만큼은 저장 공간을 씁니다.)
아래 그림은 안드로이드 크롬에서 PWA를 설치하는 장면입니다. 평범한 웹페이지(왼쪽)를 열면 아래쪽에 "홈 화면에 추가" 안내가 뜨고(가운데), 누르면 설치 확인 창이 나옵니다(오른쪽). 화면 글자는 스페인어입니다.
그림 출처: Wikimedia Commons (CC0)
PWA를 이루는 세 가지
| 구성 요소 | 하는 일 |
|---|---|
| HTTPS | 서비스 워커는 보안을 위해 HTTPS에서만 동작합니다. (개발 중인 localhost는 예외) |
웹 앱 매니페스트 (manifest.json) | 앱 이름, 아이콘, 시작 주소, 화면 표시 방식 등을 적은 파일입니다. 브라우저는 이 파일을 보고 "설치할 수 있는 앱"으로 알아봅니다. |
| 서비스 워커 (Service Worker) | 브라우저와 네트워크 사이에서 요청을 가로채는 자바스크립트입니다. 중요한 파일을 캐시해 두어 다음에 열 때 빨리 뜨고, 네트워크가 나빠도(오프라인이어도) 동작하며, 푸시 알림도 받을 수 있게 해 줍니다. |
매니페스트 파일은 다음처럼 생겼습니다.
{
"name": "1mo 기술 면접 노트",
"short_name": "1mo",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#3c8772",
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
}"display": "standalone"이 주소창 없이 앱처럼 열리게 하는 설정입니다.
PWA가 제공하는 특징
| 특징 | 설명 |
|---|---|
| 프로그레시브 (점진적 개선) | 기본 기능은 모든 브라우저에서 동작하고, 최신 브라우저일수록 더 많은 기능이 켜집니다. 이름의 Progressive가 이 뜻입니다. |
| 반응형 | 데스크톱, 모바일, 태블릿 등 모든 화면 크기에 맞습니다. |
| 연결 독립적 | 서비스 워커 덕분에 오프라인이나 느린 네트워크에서도 동작합니다. |
| 안전 | HTTPS로 제공되므로 중간에서 엿보거나(스누핑) 내용을 바꿔치기할 수 없습니다. |
| 검색 가능 | 매니페스트와 서비스 워커 덕분에 "앱"으로 인식되면서도, 웹이므로 검색 엔진에서 찾을 수 있습니다. |
| 재참여 가능 | 푸시 알림 같은 기능으로 사용자가 다시 찾아오게 만들 수 있습니다. |
| 설치 가능 | 앱 스토어 없이 홈 화면에 설치할 수 있습니다. |
| 링크 가능 | 주소(URL) 하나로 공유할 수 있습니다. |
플랫폼 지원 차이: 안드로이드 크롬은 PWA를 폭넓게 지원합니다. iOS는 iOS 16.4부터 홈 화면에 추가한 PWA에 한해 푸시 알림을 지원하는 등 지원 범위가 상대적으로 좁고, 사파리 정책에 따라 달라질 수 있습니다.
코드로 감 잡기: 서비스 워커의 캐시 우선 전략
서비스 워커가 오프라인에서도 페이지를 열어 주는 원리를 Python으로 흉내 내 봅니다. 요청이 오면 캐시를 먼저 보고, 없을 때만 네트워크로 가져와 캐시에 저장하는 캐시 우선(Cache First) 전략입니다. 실제 서비스 워커는 자바스크립트의 fetch 이벤트와 Cache API로 같은 일을 합니다.
# 서비스 워커의 "캐시 우선(Cache First)" 전략을 흉내 낸 코드
cache = {} # 서비스 워커가 관리하는 캐시 저장소
online = True # 지금 네트워크가 연결되어 있는지
def network_fetch(url):
if not online:
raise ConnectionError("네트워크 없음")
return f"{url} 내용(서버에서 받음)"
def sw_fetch(url):
if url in cache: # 1) 캐시에 있으면 바로 돌려줌
return cache[url] + " [캐시]"
body = network_fetch(url) # 2) 없으면 네트워크로 요청
cache[url] = body # 3) 받은 내용을 캐시에 저장
return body + " [네트워크]"
print(sw_fetch("/index.html")) # 첫 방문
print(sw_fetch("/index.html")) # 두 번째 방문
online = False # 지하철에서 신호가 끊김
print(sw_fetch("/index.html")) # 캐시 덕분에 열림
try:
print(sw_fetch("/new-post.html")) # 한 번도 안 받은 페이지
except ConnectionError as e:
print("/new-post.html 실패:", e)실행 결과:
/index.html 내용(서버에서 받음) [네트워크]
/index.html 내용(서버에서 받음) [캐시]
/index.html 내용(서버에서 받음) [캐시]
/new-post.html 실패: 네트워크 없음한 번 받아 둔 페이지는 네트워크가 끊겨도 열리지만, 한 번도 받지 않은 페이지는 열리지 않습니다. 그래서 PWA는 첫 설치 때 꼭 필요한 파일(첫 화면, 오프라인 안내 페이지)을 미리 캐시해 둡니다. 캐시를 너무 오래 믿으면 새 버전이 반영되지 않는 문제가 생기므로, 자주 바뀌는 데이터는 네트워크 우선(Network First) 전략을 섞어 씁니다.
면접에서 자주 나오는 질문
Q. 네이티브 앱, 웹 앱, 하이브리드 앱의 차이는 무엇인가요? 네이티브 앱은 운영체제 전용 언어로 만들어 성능과 기기 기능 접근이 가장 좋지만 플랫폼마다 따로 개발해야 합니다. 웹 앱은 브라우저에서 실행되어 설치 없이 어디서나 쓰고 배포가 쉽지만 기기 기능과 성능에 제약이 있습니다. 하이브리드 앱은 네이티브 껍데기 안의 웹뷰로 웹 앱을 실행해, 웹 기술로 여러 플랫폼을 지원하면서 네이티브 기능도 씁니다.
Q. 새 서비스를 만든다면 어떤 방식을 고르겠나요? 빠르게 검증하고 여러 기기에 동시에 내야 하면 웹 앱이나 PWA, 앱 스토어 노출과 일부 기기 기능이 필요하면 하이브리드나 크로스 플랫폼, 게임이나 카메라 처리처럼 성능과 기기 기능이 핵심이면 네이티브를 고릅니다. 정답보다는 팀의 기술, 예산, 필요한 기능을 기준으로 이유를 설명하는 것이 중요합니다.
Q. PWA가 무엇인가요? 웹 앱에 HTTPS, 웹 앱 매니페스트, 서비스 워커를 더해 설치, 오프라인 동작, 푸시 알림 같은 앱 경험을 제공하는 웹입니다. 앱 스토어 없이 배포하고 URL로 공유할 수 있습니다.
Q. 서비스 워커는 무엇이고, 왜 HTTPS가 필요한가요? 브라우저와 네트워크 사이에서 요청을 가로채 캐시를 돌려주거나 푸시 알림을 처리하는 백그라운드 자바스크립트입니다. 모든 요청을 가로챌 수 있을 만큼 권한이 강해서, 중간에 누군가 바꿔치기하지 못하도록 HTTPS에서만 동작합니다.
Q. 하이브리드 앱과 React Native, Flutter는 같은 것인가요? 아닙니다. 하이브리드 앱은 웹뷰 안에 웹 페이지를 띄우고, React Native와 Flutter는 웹뷰 없이 네이티브 화면 부품이나 자체 그리기 엔진으로 화면을 그리는 크로스 플랫폼 방식입니다.
정리
| 구분 | 네이티브 앱 | 웹 앱 | 하이브리드 앱 | PWA |
|---|---|---|---|---|
| 만드는 기술 | Kotlin/Java, Swift | HTML, CSS, JS | 웹 기술 + 네이티브 껍데기 | 웹 기술 + 매니페스트 + 서비스 워커 |
| 실행 위치 | 운영체제 | 브라우저 | 앱 안의 웹뷰 | 브라우저 (설치하면 앱처럼) |
| 설치 | 앱 스토어 | 필요 없음 | 앱 스토어 | 홈 화면에 추가 (선택) |
| 성능 | 가장 좋음 | 낮음 | 중간 | 웹 앱보다 좋음 (캐시) |
| 기기 기능 | 모두 사용 | 브라우저 API만 | 네이티브 + 브라우저 API | 브라우저 API + 푸시, 오프라인 |
| 여러 플랫폼 | 따로 개발 | 하나로 해결 | 대부분 공유 | 하나로 해결 |
| 업데이트 | 스토어 심사 필요 | 즉시 | 웹 부분은 즉시 | 즉시 |