본문으로 건너뛰기

PWA

v1
작성 2026-04-12읽는 시간 8분

앱스토어 없이 웹사이트를 앱으로 만드는 마법

이건 뭐예요?​

보통 "앱을 만들겠다" 하면 Swift(아이폰용), Kotlin(안드로이드용) 같은 전혀 다른 언어를 배워야 하고, 앱스토어에 등록하고, 심사받고, 업데이트할 때마다 또 심사받고... 정말 복잡하죠.

그런데 PWA(Progressive Web App, 프로그레시브 웹 앱) 는 이 과정을 전부 건너뛰게 해줘요. 그냥 웹사이트(HTML)를 만들고, 설정 파일 몇 개만 추가하면 그 웹사이트가 앱처럼 동작해요. 폰 홈 화면에 아이콘이 생기고, 터치하면 브라우저 주소창 없이 앱처럼 바로 열려요.

쉽게 말하면 이래요. 웹사이트인데, 앱인 척 하는 기술. 사용자 입장에서는 앱이랑 구분이 안 돼요. 아이콘 눌러서 실행하고, 전체 화면으로 뜨고, 심지어 인터넷 없이도 동작하거든요. 그런데 실제로는 웹사이트예요. 앱스토어 등록도, 심사도, 연간 개발자 비용도 전부 필요 없어요.

PWA가 해주는 여섯 가지​

기능한 줄 설명
홈 화면 설치앱스토어 없이 폰 홈 화면에 앱 아이콘 추가
오프라인 동작인터넷이 끊겨도 캐시(미리 저장해둔 데이터)로 화면 표시
푸시 알림카카오톡 알림처럼, 앱을 안 열어도 메시지 전송
하드웨어 접근GPS(위치), 카메라, 마이크 같은 기기 기능 사용
자동 업데이트앱스토어 업데이트 버튼 없이, 접속하면 최신 버전으로 자동 반영
manifest.json앱 이름, 아이콘, 테마 색상 등을 정의하는 설정 파일(앱의 신분증)

하나씩 풀어볼게요.

1) 홈 화면 설치​

웹사이트에 manifest.json(매니페스트, 앱의 신분증 같은 설정 파일)을 추가하면 브라우저가 "이 사이트, 앱으로 설치할래요?" 라고 물어봐요. 사용자가 수락하면 폰 홈 화면에 아이콘이 딱 생겨요. 이 아이콘을 누르면 브라우저 주소창 없이, 마치 네이티브 앱(폰에 직접 설치한 앱)처럼 전체 화면으로 열려요. 이걸 standalone 모드(독립 실행 모드)라고 불러요.

2) 오프라인 동작​

Service Worker(서비스 워커) 라는 기술이 핵심이에요. 서비스 워커는 여러분의 웹사이트와 인터넷 사이에서 일하는 보이지 않는 도우미예요. 사용자가 처음 사이트에 접속하면, 서비스 워커가 주요 페이지와 이미지를 폰에 미리 저장(캐싱)해 둬요. 나중에 지하철에서 인터넷이 끊겨도 저장해둔 걸 꺼내서 보여주는 거예요.

3) 푸시 알림​

카카오톡 메시지 올 때 화면 위에 뜨는 그 알림, 웹사이트도 보낼 수 있어요. Push API와 Notifications API를 조합하면, 사용자가 앱을 안 열어놨어도 서버에서 알림을 밀어넣을(push) 수 있어요. "주문 완료됐어요", "새 글이 올라왔어요" 같은 알림이죠.

4) 하드웨어 접근​

웹사이트에서도 GPS(위치 정보), 카메라, 마이크 같은 폰 기능을 사용할 수 있어요. 예를 들어 navigator.geolocation(내비게이터 지오로케이션)이라는 명령어로 사용자의 현재 위치를 읽을 수 있어요. 물론 사용자가 "위치 허용" 버튼을 눌러야 동작해요. 허락 없이는 절대 접근 못 해요.

5) 자동 업데이트​

일반 앱은 버전이 올라가면 앱스토어에서 "업데이트" 버튼을 눌러야 하잖아요. PWA는 서비스 워커가 백그라운드에서 새 버전을 감지하고, 다음에 앱을 열 때 자동으로 최신 버전을 보여줘요. 사용자가 아무것도 안 해도 항상 최신이에요.

6) manifest.json — 앱의 신분증​

manifest.json은 PWA의 모든 설정이 담긴 파일이에요. 이름, 아이콘, 테마 색상, 시작 페이지 주소 같은 정보를 적어두면 브라우저가 이걸 읽고 앱처럼 동작시켜줘요.

{
  "name": "나의 멋진 앱",
  "short_name": "멋진앱",
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#0a0a0a",
  "background_color": "#000000",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}
  • name — 설치할 때 표시되는 앱 이름
  • short_name — 홈 화면 아이콘 아래 표시되는 짧은 이름
  • start_url — 앱을 열었을 때 첫 화면 주소
  • display: "standalone" — 브라우저 주소창 없이 앱처럼 실행
  • theme_color — 상태바(폰 맨 위 시간·배터리 나오는 줄) 색상
  • icons — 홈 화면에 표시할 아이콘 (192px, 512px 두 가지는 필수)

우리는 이렇게 쓰고 있어요​

디온웍스에서 실제로 만든 디지우드HR 이라는 인사관리 앱이 있어요. 공장에서 일하는 직원분들이 모바일 폰으로 출퇴근 체크를 하는 앱인데, 이걸 PWA로 만들었어요.

왜 PWA였냐면요. 직원분들에게 "앱스토어 들어가서 앱 검색해서 설치하세요" 라고 하면 절반은 못 찾고, 절반은 귀찮아서 안 해요. 그런데 PWA는 웹 주소만 알려주면 돼요. 접속하면 "홈 화면에 추가할까요?" 팝업이 뜨고, 한 번만 터치하면 끝이에요.

실제 구현 내용​

  1. manifest.json으로 홈 화면 설치 — display: "standalone" 설정으로 브라우저 주소창 없이 네이티브 앱처럼 실행돼요
  2. PWAInstallPrompt 컴포넌트 — Android에서는 beforeinstallprompt(설치 전 안내) 이벤트를 잡아서 자동으로 설치 안내 팝업을 띄우고, iOS(아이폰)에서는 Safari의 "홈 화면에 추가" 가이드를 보여줘요
  3. GPS 위치 기반 출퇴근 — Geolocation API(지오로케이션, 위치 정보 API)로 현재 위치를 읽고, Haversine 공식(두 지점 사이의 거리를 계산하는 수학 공식)으로 작업장 반경 150m 이내인지 확인해요. 범위 안이면 출근 버튼이 활성화돼요
  4. standalone 모드 — 브라우저 주소창이 안 보이니까 직원분들이 "이게 앱이야 웹사이트야?" 구분을 못 해요. 그게 바로 성공이에요
디지우드 HR 로그인 화면
디지우드 HR 대시보드 — 출퇴근 버튼과 GPS 위치

왼쪽: 디지우드HR 로그인 화면 / 오른쪽: 출퇴근 대시보드 (출근·출장 버튼과 GPS 위치 표시)

핵심은요, 앱스토어에 올리지 않고도 웹 기술만으로 출퇴근 앱을 만들었다는 거예요. Next.js(넥스트제이에스, React 기반 웹 프레임워크)로 웹사이트를 만들고, PWA 설정만 추가했을 뿐인데 앱스토어 심사도, 매년 개발자 계정 비용도 필요 없었어요.

한번 써볼까요?​

이미 웹사이트를 만들고 있다면, 파일 1개만 추가하면 PWA가 돼요. 디지우드HR도 이 방법으로 만들었어요. 별도 라이브러리 설치도 필요 없어요.

manifest.json 만들기​

프로젝트 폴더(public 폴더가 있으면 그 안에)에 manifest.json 파일을 하나 만들어요. 이게 "이 웹사이트는 앱이에요"라고 브라우저에 알려주는 신분증이에요.

{
  "name": "나의 멋진 앱",
  "short_name": "멋진앱",
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#0a0a0a",
  "background_color": "#000000",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

HTML에 한 줄 추가하기​

index.html의 <head> 안에 이 한 줄만 넣으면 끝이에요.

<link rel="manifest" href="/manifest.json" />

이게 전부예요. 이 두 단계만 하면 크롬 브라우저에서 "홈 화면에 추가" 기능이 활성화돼요. 사용자가 설치하면 앱 아이콘이 생기고, 브라우저 주소창 없이 앱처럼 실행돼요.

HTTPS 필수

실제 배포할 때는 HTTPS(주소가 https://로 시작하는 보안 연결)가 필수예요. 내 컴퓨터(localhost)에서 테스트할 때는 HTTP도 괜찮아요. Vercel, Netlify 같은 무료 호스팅은 HTTPS를 자동으로 지원해요.

클로드 코드 터미널에서는 이렇게​

이미 웹 프로젝트를 만들고 있는 중이라면, 클로드 코드에게 이렇게 말하면 돼요.

# 방법 1: 가장 간단 — manifest.json만 추가 (디지우드HR 방식)
이 프로젝트에 PWA 적용해줘. manifest.json 만들고 HTML에 연결해줘.

# 방법 2: 오프라인 기능까지 원하면
이 프로젝트에 PWA 적용해줘. Service Worker도 추가해서 오프라인에서도 동작하게 해줘.

클로드 코드가 프로젝트 구조를 보고 알맞은 위치에 manifest.json을 만들어 주고, HTML에 연결까지 자동으로 해줘요. 아이콘 파일 경로도 잡아줘요.

확인 포인트: 브라우저(Chrome 추천)에서 F12 → Application 탭 → Manifest 항목을 열어보세요. 앱 이름, 아이콘, display 모드가 표시되면 PWA 설정이 된 거예요.

이런 분께 추천해요​

PWA는 "앱스토어 등록 없이, 웹 기술만으로 앱 같은 경험을 제공하고 싶다"는 분께 딱이에요.

  1. 사내 도구를 웹으로 만들고 싶은 스타트업 대표 — 출퇴근 체크, 재고 관리, 주문 접수 같은 사내 앱을 앱스토어 없이 배포할 수 있어요. 직원에게 URL만 공유하면 끝이에요.

  2. 개인 서비스를 빠르게 런칭하고 싶은 1인 메이커 — iOS 앱스토어 연간 99달러, 구글 플레이 등록비 25달러를 아끼면서 앱 같은 경험을 제공할 수 있어요. 오프라인 동작과 푸시 알림까지 가능해요.

  3. 모바일 웹사이트를 운영하는 쇼핑몰·블로그 운영자 — 기존 웹사이트에 파일 2개만 추가하면 "홈 화면에 추가" 기능이 생겨요. 재방문율이 올라가고, 푸시 알림으로 신상품 알림도 보낼 수 있어요.

참고 링크​

▸개정 이력1건
  • v12026-04-12초판

이 글이 도움이 되었나요?