PWA 만드는 법 — 홈페이지를 앱처럼 설치하기

📲 홈페이지가 앱이 된다

스마트폰 홈 화면에 앱 아이콘이 있다. 탭 하면 바로 열린다. 주소창도 없고, 브라우저 UI도 없다. 그냥 앱이다. 그런데 이게 진짜 앱이 아니라 홈페이지다.

PWA(Progressive Web App)라는 기술 덕분이다. 앱스토어에 심사를 제출할 필요도 없고, 코딩을 새로 배울 필요도 없다. 파일 두 개만 추가하면 기존 홈페이지가 그대로 앱이 된다. 뚝딱닷컴도 스마트폰에 설치하면 주황색 망치 아이콘으로 앱처럼 실행된다.

💡

이미 Netlify로 배포 중인 사이트가 있다면 바로 적용할 수 있어요. 아직 사이트가 없다면 뚝딱닷컴 교재에서 먼저 만들어 오세요.

🤔 PWA가 뭔가요?

Progressive Web App의 줄임말이다. 한마디로, 웹사이트인데 앱처럼 설치하고 실행할 수 있는 것이다.

홈 화면에 아이콘 추가 — 스마트폰 홈 화면에 앱 아이콘처럼 추가된다
전체 화면 실행 — 브라우저 주소창 없이 앱처럼 깔끔하게 열린다
오프라인 지원 — 인터넷이 없어도 캐시된 페이지가 열린다
빠른 로딩 — 주요 파일을 미리 저장해두어 반복 방문 시 속도가 빠르다
앱스토어 불필요 — 심사 없이 바로 배포, 업데이트도 즉시 반영된다

스타벅스, 트위터, 핀터레스트도 PWA를 운영한다. 기술은 거창하지만, 만드는 방법은 생각보다 간단하다.

📦 준비물

놀랍도록 적다.

운영 중인 사이트 — HTML 파일이 Netlify에 배포된 상태
HTTPS — PWA 필수 조건인데, Netlify는 자동으로 적용해준다
앱 아이콘 이미지 — 192×192px, 512×512px 두 가지. AI한테 만들어달라고 하거나 직접 준비하면 된다

🔒

PWA는 HTTPS 환경에서만 작동한다. Netlify로 배포한 사이트는 자동으로 HTTPS가 적용되니 별도 설정이 필요 없다.

🪜 만드는 순서

핵심은 파일 두 개를 만드는 것이다. 나머지는 HTML에 연결만 하면 끝.

📄

manifest.json
생성

→

⚙️

service-worker.js
생성

→

🔗

HTML head에
manifest 연결

→

🚀

Netlify
배포

→

📱

앱처럼
설치 완료

manifest.json 생성 프로젝트 루트 폴더에 manifest.json 파일을 만든다. 앱 이름, 아이콘 경로, 테마 색상, 시작 URL 등을 정의하는 파일이다.

service-worker.js 생성 프로젝트 루트에 service-worker.js를 만든다. 주요 파일을 캐시해서 오프라인에서도 페이지가 열리게 해주는 파일이다.

모든 HTML 파일 head에 manifest 링크 추가 <link rel="manifest" href="/manifest.json">을 각 HTML 파일의 <head> 안에 추가한다. 파일이 여러 개면 AI한테 한 번에 추가해달라고 하면 된다.

Netlify에 배포 netlify deploy --prod로 배포하면 끝. 스마트폰 브라우저에서 사이트에 접속하면 설치 버튼이 뜬다.

🤖

AI에게 "PWA 만들어줘. 앱 이름은 뚝딱닷컴, 테마색은 주황색(#ff7a00)"이라고 하면 manifest.json과 service-worker.js를 모두 작성해준다. 아이콘 경로만 실제 파일에 맞게 확인하면 된다.

📋 manifest.json이 뭔가요?

앱의 기본 정보를 담은 파일이다. 브라우저가 이 파일을 읽어서 "이 사이트는 앱으로 설치할 수 있구나"를 인식하고 설치 버튼을 띄워준다.

manifest.json 예시
{
  "name": "뚝딱닷컴",
  "short_name": "뚝딱닷컴",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#fff8f0",
  "theme_color": "#ff7a00",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

name — 설치 시 표시되는 앱 이름
short_name — 홈 화면 아이콘 아래 짧게 표시되는 이름
display: "standalone" — 브라우저 UI 없이 앱처럼 실행
theme_color — 상단 상태바 색상. 뚝딱닷컴은 주황색 #ff7a00
icons — 홈 화면 아이콘. 192px와 512px 두 가지가 필요

⚙️ service-worker.js가 뭔가요?

브라우저와 네트워크 사이에서 작동하는 중간 관리자 같은 파일이다. 사이트에 처음 접속할 때 주요 파일들을 브라우저에 저장(캐시)해뒀다가, 인터넷이 없을 때 그 저장된 파일을 대신 보여준다.

덕분에 지하철 터널 같은 오프라인 환경에서도 마지막으로 열었던 페이지가 그대로 표시된다. 일반 웹사이트라면 "인터넷에 연결할 수 없습니다" 오류가 뜰 상황이다.

service-worker.js 핵심 구조
const CACHE_NAME = 'ddukddak-v1';
const URLS_TO_CACHE = ['/', '/index.html', '/manifest.json'];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME).then(cache => cache.addAll(URLS_TO_CACHE))
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => response || fetch(event.request))
  );
});

📝

service-worker.js 내용을 직접 이해하지 않아도 된다. AI가 사이트 구조에 맞게 작성해주면, 그대로 사용하면 된다.

📱 설치 확인하는 법

배포 후 스마트폰으로 접속하면 설치할 수 있다. OS마다 방법이 조금 다르다.

Android에서 설치하는 법

크롬 브라우저로 사이트에 접속하면 하단에 "앱 설치" 배너가 자동으로 뜬다. 배너를 탭하면 홈 화면에 아이콘이 추가된다. 배너가 안 뜨면 크롬 주소창 오른쪽 점 세 개(⋮) 메뉴 → "앱 설치" 또는 "홈 화면에 추가"를 찾으면 된다. 뚝딱닷컴은 주황색 망치 아이콘으로 홈 화면에 설치된다.

iOS(아이폰)에서 설치하는 법

Safari 브라우저로 접속해야 한다. 크롬에서는 설치가 안 된다. Safari 하단 가운데 공유 버튼(□↑)을 탭 → 스크롤 내려서 "홈 화면에 추가" 선택 → 이름 확인 후 추가. 홈 화면에 아이콘이 생기면 완료다.

설치 후 일반 앱이랑 다른 점이 있나요?

주소창과 브라우저 버튼이 사라져서 앱처럼 보인다는 점 외에 큰 차이는 없다. 기기의 카메라, GPS, 알림 같은 네이티브 기능은 PWA에서 제한적으로만 쓸 수 있다. 하지만 일반 홈페이지를 앱처럼 보이게 하는 것만으로도 사용자 경험이 크게 달라진다.

✅ 마무리 — 앱스토어 없이 앱이 된다

PWA의 가장 큰 장점은 앱스토어 심사 없이 바로 배포할 수 있다는 것이다. 앱스토어 등록은 심사에 며칠이 걸리고, 업데이트마다 다시 심사를 받아야 한다. PWA는 코드를 수정하고 Netlify에 배포하면 그 즉시 모든 사용자에게 반영된다.

파일 두 개, 코드 몇 줄로 홈페이지가 앱이 된다. 뚝딱닷컴 교재에서 manifest.json과 service-worker.js 전체 코드와 함께 단계별로 따라할 수 있다.

이 글이 도움이 됐나요?

PWA 전체 코드와 단계별 실습이 담긴 교재가 무료로 제공되고 있어요.

📖 뚝딱닷컴 교재 전체 보기