PWA로 만들기 — 웹앱을 "앱처럼" 느끼게 하는 기술

 

앱스토어 없이 앱을 배포할 수 있다면

"이거 앱스토어에 올려야 하는 거 아니에요?" 타로 마스터를 보여줄 때마다 받는 질문이었다. 웹 브라우저에서 동작하는 걸 보여주면 다들 고개를 갸웃거렸다. 앱처럼 생겼는데 앱이 아니라니. 바로 그 "앱처럼"을 만들어주는 기술이 PWA다.

Progressive Web App, 줄여서 PWA. 이름은 거창하지만 핵심은 간단하다. 웹사이트에 몇 가지 설정을 추가해서, 사용자의 홈 화면에 설치되고, 오프라인에서도 동작하며, 푸시 알림도 보낼 수 있게 만드는 기술이다. 앱스토어 심사도 없고, 개발자 등록비도 없다. 사이드 프로젝트에는 이보다 좋은 선택이 없다.

사이드 프로젝트에 PWA가 적합한 현실적 이유

네이티브 앱을 만드는 것은 사이드 프로젝트에서 거의 불가능에 가까운 선택이다. iOS 앱을 만들려면 Swift를 배워야 하고, 연간 99달러의 개발자 등록비를 내야 하며, 앱스토어 심사를 통과해야 한다. 안드로이드까지 지원하려면 Kotlin도 필요하다. React Native나 Flutter로 크로스 플랫폼을 노릴 수도 있지만, 새로운 프레임워크를 배우는 시간이 추가된다.

PWA는 이미 만들어놓은 웹앱에 설정 파일 몇 개를 추가하는 것만으로 된다. 이미 React와 Vite로 만들어둔 타로 마스터에 PWA를 입히는 건, 완전히 새로운 기술을 도입하는 게 아니라 기존 기술 위에 레이어를 하나 얹는 것에 가깝다.

비용 측면에서도 비교가 안 된다. 앱스토어 등록 없이 URL 하나로 배포할 수 있고, 업데이트도 서버에 파일만 올리면 끝이다. 심사 대기 시간이 없으니 버그 수정도 즉시 반영된다. 혼자서 만드는 사이드 프로젝트에 이보다 현실적인 선택은 없다.

vite-plugin-pwa: 설정 한 줄로 시작하기

Vite 기반 프로젝트에서 PWA를 구현하는 건 놀라울 정도로 간단했다. vite-plugin-pwa라는 플러그인 하나가 대부분의 작업을 자동으로 처리해준다.

Claude에게 "타로 마스터에 PWA를 적용하고 싶다. Vite + React + TypeScript 환경이다"라고 말했더니, vite-plugin-pwa 설치부터 설정 파일 구성까지 단계별로 안내해줬다. 플러그인을 설치하고 Vite 설정 파일에 몇 줄을 추가하면, 서비스 워커 생성과 매니페스트 파일 생성이 자동으로 이루어진다.

물론 "자동으로 된다"는 말에는 함정이 있다. 기본 설정만으로도 PWA 요건은 충족하지만, 타로 마스터에 맞는 세부 설정은 직접 해줘야 했다. 앱 이름, 아이콘, 테마 컬러, 캐싱 전략 같은 것들이다. AI가 기본 뼈대를 빠르게 잡아주고, 세부 조정은 내가 하는 익숙한 패턴이 여기서도 반복됐다.

서비스 워커: 오프라인에서도 카드를 뒤집다

서비스 워커는 PWA의 핵심 기술이다. 브라우저와 서버 사이에서 중간 역할을 하는 스크립트로, 네트워크 요청을 가로채서 캐시된 리소스를 대신 전달할 수 있다. 인터넷 연결이 끊어져도 앱이 동작하는 건 바로 이 서비스 워커 덕분이다.

타로 마스터에서 오프라인 지원은 의외로 잘 맞는 기능이었다. 타로 카드 78장의 이미지와 해석 텍스트는 한번 다운로드하면 변경될 일이 거의 없다. 서비스 워커가 이 리소스들을 캐시에 저장해두면, 이후에는 네트워크 없이도 카드 리딩이 가능해진다. 지하철에서, 비행기에서, 와이파이가 불안정한 카페에서도 타로 카드를 뒤집을 수 있다.

캐싱 전략을 선택하는 과정에서 AI의 도움이 컸다. "네트워크 우선(Network First)" 전략과 "캐시 우선(Cache First)" 전략의 차이를 설명받고, 타로 마스터의 특성에 맞는 전략을 골랐다. 정적 리소스(카드 이미지, 해석 텍스트)는 캐시 우선으로, AI 실시간 해석 같은 동적 콘텐츠는 네트워크 우선으로 설정했다. 하나의 전략이 모든 것에 맞지 않는다는 걸, 실제로 적용해보면서 배웠다.

매니페스트: 아이콘, 스플래시, 테마의 힘

웹앱 매니페스트는 앱의 "신분증" 같은 파일이다. 앱 이름, 아이콘, 테마 컬러, 표시 모드 같은 정보를 담고 있다. 사용자가 "홈 화면에 추가"를 했을 때 보이는 모든 것이 이 파일에서 정의된다.

아이콘 작업이 의외로 손이 많이 갔다. PWA는 다양한 크기의 아이콘을 요구한다. 192x192, 512x512는 기본이고, iOS의 사파리를 위한 apple-touch-icon까지 필요하다. 타로 마스터의 남색 배경에 금색 별 모양의 아이콘을 디자인하고, 각 사이즈별로 준비하는 작업을 했다.

스플래시 스크린도 신경 썼다. 홈 화면에서 앱을 실행할 때 잠깐 보이는 시작 화면인데, 이 짧은 순간이 앱의 첫인상을 결정한다. 타로 마스터의 남색 배경에 골드 로고가 뜨는 스플래시 스크린은 "앱을 여는 순간부터 타로의 세계에 들어간다"는 느낌을 준다.

테마 컬러 설정도 중요했다. 모바일 브라우저의 주소창과 상태바 색상을 앱의 배경색과 맞추면, 브라우저의 존재감이 줄어들고 앱처럼 느껴지는 효과가 확실히 커진다. 남색 #0a0a1a를 테마 컬러로 설정하자, 상태바까지 어두운 톤으로 통일되면서 몰입감이 한 단계 올라갔다.

"홈 화면에 추가"가 만드는 차이

PWA의 진정한 가치는 "홈 화면에 추가" 순간에 드러난다. 브라우저의 주소창이 사라지고, 전체 화면으로 앱이 열린다. 독립적인 앱 아이콘이 홈 화면에 자리 잡는다. 앱 전환기에서도 별도의 앱으로 표시된다. 이 경험이 사용자에게 "이건 그냥 웹사이트가 아니라 앱이다"라는 인식을 만든다.

재방문율에 미치는 영향은 예상보다 컸다. 브라우저 북마크에 저장된 사이트와 홈 화면에 설치된 앱은 접근성 차이가 크다. 북마크는 브라우저를 열고, 북마크 목록을 찾아야 한다. 홈 화면의 앱 아이콘은 한 번의 탭으로 바로 열린다. 이 한 단계의 차이가 "아, 오늘 타로 한번 볼까?" 하는 순간에 실제 행동으로 이어지느냐 마느냐를 결정한다.

standalone 표시 모드를 선택한 것도 중요한 결정이었다. 브라우저 UI를 완전히 숨기는 fullscreen 모드도 있지만, 뒤로 가기 제스처 같은 기본 내비게이션까지 사라지면 사용자가 혼란스러워할 수 있다. standalone은 주소창만 숨기고 기본 제스처는 유지해서 앱 같은 느낌과 웹의 편의성을 동시에 챙길 수 있었다.

네이티브 앱 vs PWA: 현실적인 비교

솔직히 말하면, PWA가 네이티브 앱을 완전히 대체할 수 있는 건 아니다. 푸시 알림의 안정성, 하드웨어 접근성, 앱스토어의 검색 유입 같은 부분에서 네이티브 앱이 여전히 우위에 있다. 특히 iOS에서 PWA의 기능 제약은 아직 존재한다. 사파리가 일부 웹 API를 지원하지 않는 것은 현재진행형인 한계다.

하지만 사이드 프로젝트의 현실에서 이 비교는 무의미하다. 네이티브 앱을 만들 시간과 비용이 없으니까. PWA가 네이티브 앱의 80퍼센트 경험을 제공한다면, 사이드 프로젝트에서는 그 80퍼센트면 충분하다. 나머지 20퍼센트를 위해 투입해야 하는 시간과 비용을 다른 기능 개선에 쓰는 게 훨씬 효율적이다.

타로 마스터의 경우, PWA로 충분한 이유가 분명했다. 복잡한 하드웨어 접근이 필요 없고, 주요 기능이 프론트엔드에서 완결되며, 빈번한 업데이트가 필요한 프로젝트 특성상 앱스토어 심사 없이 즉시 배포할 수 있는 PWA가 오히려 유리했다.

AI에게 PWA 설정을 요청하면 벌어지는 일

PWA 설정은 AI 협업의 장점이 극대화되는 영역이다. 서비스 워커 설정, 매니페스트 파일 작성, 캐싱 전략 선택 같은 작업은 한번 제대로 세팅하면 끝나지만, 처음 하는 사람에게는 공식 문서와 블로그를 오가며 반나절을 소비하게 만드는 종류의 일이다.

Claude에게 "타로 마스터의 PWA 설정을 도와달라"고 하자, 프로젝트의 기술 스택과 특성을 고려한 맞춤 설정이 돌아왔다. 특히 vite-plugin-pwa의 설정 옵션 중 어떤 것을 켜고 끌지, 캐싱 전략별 장단점은 무엇인지를 프로젝트 맥락에 맞춰 설명해주는 건 일반적인 문서 검색으로는 얻기 어려운 가치였다.

물론 AI가 생성한 설정을 그대로 복사해서 쓰면 안 된다. 특히 서비스 워커 관련 설정은 잘못되면 캐시가 꼬여서 사용자에게 오래된 버전이 계속 보이는 문제가 생길 수 있다. AI가 만들어준 설정의 각 항목이 무엇을 의미하는지 이해하고, 직접 테스트한 후에 적용하는 과정이 반드시 필요하다. 빠르게 시작하되, 맹목적으로 따르지 않는 것. 이 원칙은 PWA 설정에서도 변하지 않았다.

웹의 가능성을 다시 보다

PWA를 적용하고 나서 "웹앱"에 대한 인식이 바뀌었다. 예전에는 웹과 앱이 명확히 구분되는 것이라고 생각했다. 웹은 브라우저 안에서만 살고, 앱은 설치해서 쓰는 것이라고. PWA는 그 경계를 허문다. 웹의 장점(URL 공유, 즉시 접근, 앱스토어 독립)과 앱의 장점(홈 화면 설치, 오프라인 동작, 전체 화면)을 동시에 가져갈 수 있다.

타로 마스터를 PWA로 만든 건 기술적으로 어려운 작업이 아니었다. vite-plugin-pwa 덕분에 대부분의 복잡한 설정이 자동화됐고, 세부 조정도 AI의 도움으로 빠르게 처리됐다. 하지만 이 작업이 사용자 경험에 미치는 영향은 기술적 난이도와 비례하지 않는다. 투입 대비 효과가 가장 높은 작업 중 하나였다.

다음 편 예고

앱의 틀이 잡혔으니, 이제 그 안을 채울 시간이다. 다음 편에서는 리딩 히스토리, 스트릭, SNS 공유, PDF 리포트, Instagram 스토리 카드, 자유 선택 모드까지. AI와 함께 하루 만에 기능을 쏟아내는 경험, 그 속도감과 그 이면의 이야기를 다룬다.