웹을 설치 프로그램으로 (Electron · Tauri) (Claude Code)

원리: 웹 화면 + 전용 브라우저 창

내 웹앱 HTML · CSS · JS

전용 창 주소창 없는 작은 브라우저

설치 파일 .exe (윈도우) · .dmg (맥)

세 가지 방법 비교

	PWA 설치	Electron	Tauri
만들기	가장 쉬움 (8-1의 PWA 그대로)	쉬움	조금 어려움 (Rust 도구 필요)
설치 파일	❌ 브라우저에서 설치	✅ 만들 수 있음	✅ 만들 수 있음
프로그램 크기	거의 없음	큼 (브라우저 엔진을 통째로 넣음)	작음 (컴퓨터의 브라우저 엔진을 빌려 씀)
추천	먼저 이걸로 충분한지 확인	설치 파일이 필요한 입문자	용량·메모리가 중요할 때

1단계: PWA를 PC에 설치해 보기

8-1에서 PWA로 만들었다면, 크롬이나 엣지에서 내 사이트를 열고 주소창 오른쪽의 설치 아이콘을 눌러 보세요. 바탕화면 아이콘이 생기고 별도의 창으로 열려요. 많은 경우 이것만으로 충분해요.

2단계: Electron으로 설치 파일 만들기

AI 코딩 도구에게 이렇게 말해 보세요

내 웹앱을 Electron으로 윈도우 설치 프로그램(.exe)으로 만들고 싶어. 나는 코딩 초보자야.
- 프로그램 이름, 아이콘, 창 크기를 설정해 줘.
- 설치 파일을 만드는 도구(예: Electron Forge)를 써서 한 번에 설치 파일이 나오게 해 줘.
- 창 안에서 다른 사이트로 함부로 이동하지 않게 하고, 웹 페이지가 컴퓨터 파일에 마음대로 접근하지 못하게 안전하게 설정해 줘.
- 만든 설치 파일이 어디에 생기는지, 어떻게 설치해서 확인하는지 알려 줘.

“알 수 없는 게시자” 경고는 왜 뜰까?

처음 만든 설치 파일을 실행하면 윈도우는 “Windows의 PC 보호”, 맥은 “확인되지 않은 개발자” 같은 경고를 띄워요.

운영체제	경고를 없애려면
윈도우	코드 서명 인증서를 발급받아 서명 (비용이 들어요)
맥	Apple Developer Program 가입 후 서명과 공증(notarization)

자동 업데이트

웹사이트는 배포하면 모두가 바로 새 버전을 보지만, 설치 프로그램은 이미 설치한 사람의 컴퓨터에 옛날 버전이 남아 있어요. 그래서 새 버전이 나오면 알아서 받는 자동 업데이트 기능을 함께 만들어요.

퀴즈

직접 만든 설치 프로그램을 실행했더니 '알 수 없는 게시자' 경고가 떴어요. 이유는?

웹을 설치 프로그램으로 (Electron · Tauri)