Capacitor를 사용하여 웹앱 만들기

웹페이지를 웹뷰(WebView) 로 감싸서 앱처럼 배포하는 방법은 여러 가지가 있다.
네이티브 앱을 만들면 좋겠지만 내 입장에서 개발이 어렵고 시간도 많이 걸린다.
기존에 개발했던 웹 사이트가 있다면 URL만으로 간편하게 앱을 만들어 보자.
Capacitor를 이용해 웹앱을 만드는 방법을 알아본다.

1. node.js 18 이상 설치

https://nodejs.org/ko/download 사이트에서 내 환경에 맞는 버전을 다운로드 받는다.

node.js 다운로드 페이지 스크린 샷 — 2025.11.25 기준으로 LTS 버전을 다운로드 받으면 node-v24.11.1-x64.msi

기존에 공부용으로 설치했던 node.js 18버전이 내 PC에 설치되어 있었는데 동일한 위치에 덮어쓰려고 했더니 설치가 되지 않는다.
해당 폴더의 파일들을 모두 삭제하고 설치하니 정상적으로 설치가 되었다.

node.js가 정상적으로 설치되었는지 확인하는 방법

커맨드 창: win + r > cmd
node -v
npm -v
입력하면 각각의 버전이 출력된다.

앱을 생성할 폴더로 이동 후 전용 폴더 생성 및 초기화

mkdir testapp
cd testapp
npm init -y

2. Capacitor 설치 및 초기화

Capacitor는 웹 기술(HTML·CSS·JavaScript로 만든 웹사이트)을 안드로이드/ iOS 네이티브 앱처럼 동작하게 만들어주는 브릿지(bridge) 플랫폼이다. 웹페이지를 앱으로 감싸고, 네이티브 기능(푸시, 카메라, 파일 업로드 등)도 사용할 수 있게 해주는 도구라고 보면 된다.

npm install @capacitor/core @capacitor/cli
npx cap init

앱 이름(App Name): testapp
반대로 된 도메인(App id): com.testapp

3. 웹페이지 URL 연결

testapp 폴더에 생성된 “capacitor.config.json” 또는 “capacitor.config.ts” 파일에 웹 사이트 URL 적용. 여기서는 capacitor.config.json 파일을 예로 든다.

{
	"appId": "com.testapp",
	"appName": "testApp",
	"webDir": "www",
	"server": {
		"url": "https://example.com",
		"cleartext": true
	}
}

이렇게 설정하면 앱 실행 시 https://example.com 웹 사이트가 그대로 WebView에 표시된다.

4. Android 프로젝트 생성

앱을 만들기 위해 프로젝트 생성

npx cap add android

5. Android Studio 설치

앱을 구글 플레이스토어에 등록하기 위해 APK 파일을 만들어야 한다.
Andriod Studio 설치하고 APK 파일을 만드는 작업을 진행하자.

https://developer.android.com/studio?hl=ko 사이트에서 설치 파일을 다운로드 받는다.

Andriod SDK 설치

Andriod Studio 설치 후 실행
우측 톱니모양 > SDK Manager….. 클릭하면 Setting 창이 열린다.
Language & Frameworks > Android SDK 메뉴에서 Andriod SDK Location 우측 Edit 클릭하면 SDK Components Setup 페이지가 열린다. 설치!

6. Android 프로젝트 열기

커맨드 창에서 아래 명령어 실행

npx cap open android

Andriod Studio가 실행되면서 작업 중인 testapp 소스가 열린다.

7. release APK 생성

Build > Generate Signed App Bundle or APK…

APK 선택 Next
Key store path > Create new…
Key store path ⇒ C:\testapp
Password, Confirm: 비밀번호
Key > Alias: key0testapp
Key > Password, Confirm: 비밀번호
OK

여기까지 진행하면 c:\testapp\android\app\release 폴더에 app-release.apk 파일이 생성된다.
휴대폰으로 옮기고 설치하면 앱이 실행된다.