8-1 바이브 코딩 프로젝트 ⏱ 약 15분

웹을 모바일 앱으로 (PWA · Capacitor)

새로 앱을 만들지 않아도 돼요. 지금 만든 웹앱을 홈 화면에 설치되는 앱(PWA)으로, 더 나아가 앱 스토어에 올리는 앱(Capacitor)으로 바꿔요.

🎯 이번 레슨을 마치면
  • 네이티브 앱, 하이브리드 앱, PWA의 차이를 안다
  • Antigravity에게 PWA 설정을 맡기고 휴대폰에 설치해 볼 수 있다
  • Capacitor로 스토어 앱을 만들 때 필요한 준비물과 절차를 안다

앱의 세 가지 종류

📱 네이티브 앱📦 하이브리드 앱🌐 PWA
만드는 법안드로이드·iOS 전용 언어로 따로웹 코드를 앱 껍데기에 포장 (Capacitor)웹사이트에 앱 설정 추가
앱 스토어✅ 올림✅ 올림❌ (주소로 접속 후 설치)
추가 비용·시간가장 큼중간거의 없음
이 과정에서다루지 않음2단계1단계

1단계: PWA로 만들기 (추천 시작점)

AI 코딩 도구에게 이렇게 말해 보세요
내 웹앱을 휴대폰 홈 화면에 설치할 수 있는 PWA로 만들고 싶어.
- 앱 이름, 짧은 이름, 테마 색, 아이콘(여러 크기)을 설정해 줘. 아이콘은 지금 로고로 만들어 줘.
- 인터넷이 끊겨도 첫 화면과 "인터넷 연결을 확인해 주세요" 안내는 보이게 해 줘.
- 로그인이나 예약 같은 데이터는 오프라인에서 저장된 척하지 않게, 항상 최신 서버 데이터를 쓰게 해 줘.
무엇을 추가하는지 먼저 설명해 주고, 다 되면 휴대폰에 설치하는 방법도 알려 줘.

배포한 뒤 휴대폰으로 사이트를 열고 설치해 보세요.

휴대폰설치 방법
안드로이드 (크롬)메뉴(⋮) → 앱 설치 또는 홈 화면에 추가
아이폰 (사파리)공유 버튼 → 홈 화면에 추가

2단계: Capacitor로 스토어 앱 만들기

PWA로 충분하지 않을 때 — 스토어에서 검색되게 하고 싶거나, 카메라·푸시 알림을 더 안정적으로 쓰고 싶을 때 — Capacitor로 포장해요.

준비물왜 필요해요?
Android Studio (윈도우·맥)안드로이드 앱을 만들고 휴대폰·에뮬레이터에서 실행해요
Mac + XcodeiOS 앱은 Mac에서만 만들 수 있어요
Google Play 개발자 계정플레이 스토어에 올리기 (1회 등록비)
Apple Developer Program앱 스토어에 올리기 (연간 회비)
AI 코딩 도구에게 이렇게 말해 보세요
이 웹앱을 Capacitor로 안드로이드 앱으로 만들고 싶어. 나는 코딩 초보자야.
- 필요한 프로그램 설치부터 한 단계씩 안내해 줘. 내가 직접 설치해야 하는 건 알려 줘.
- 앱 이름, 아이콘, 시작 화면(스플래시)을 설정해 줘.
- 웹을 고치면 앱에도 반영하는 방법(빌드 → 동기화)을 쉽게 정리해 줘.
- 내 안드로이드 휴대폰에 설치해서 확인하는 방법까지 알려 줘.

스토어 심사 전 체크리스트

퀴즈

비용 없이 가장 빠르게 '홈 화면에 설치되는 앱'을 만드는 방법은?

📝 정리해 볼까요?

  • PWA는 웹사이트에 "앱 정보(manifest)"와 "오프라인 도우미(service worker)"를 더해 홈 화면에 설치되게 만든 것이에요. 비용 0원으로 시작해요.
  • Capacitor는 같은 웹 코드를 안드로이드·iOS 앱으로 포장해서 스토어에 올릴 수 있게 해 줘요. 안드로이드는 Android Studio, iOS는 Mac과 Xcode가 필요해요.
  • 스토어에 올리려면 개발자 등록비, 개인정보 처리방침, 계정 삭제 기능 같은 심사 조건을 챙겨야 해요.

📖 새로 나온 용어

PWA Progressive Web App
휴대폰이나 PC에 설치해서 앱처럼 쓸 수 있는 웹사이트예요. 비유: 앱 옷을 입은 웹사이트
하이브리드 앱 Hybrid App
웹 기술로 만든 화면을 앱 껍데기에 담은 앱이에요. Capacitor가 대표적이에요.
네이티브 앱 Native App
안드로이드, iOS 등 각 기기 전용 언어로 만든 앱이에요.
용어 사전 전체 보기 →