🚀 PWA 도입 경험기 - 앱 스토어 없이 앱 만들기

고민했던 배경

GitAnimals 프로젝트를 진행하면서 한 가지 고민이 있었습니다. 이 서비스는 깃허브 커밋을 통해 포인트를 얻고 그 포인트로 펫을 뽑아 키우는 서비스인데요, 일회용성 접근이 아닌 사용자 참여가 지속적으로 이루어지도록 하고싶었어요. 더 나은 사용자 경험과 접근성을 위해 앱 형태로 제공하는 것을 고려하게 되었습니다.

처음에는 RN을 이용한 웹 앱 개발을 고려했지만, 몇 가지 현실적인 제약이 있었습니다. 🤔

1. GitHub 로그인과 계정 연동이 필수적인데, iOS 앱의 경우 소셜 로그인을 구현하려면 Apple 로그인 기능도 필수적으로 요구됩니다.
2. 복잡한 인증 플로우로 인해 개발 일정이 지연될 가능성이 높았습니다.
3. 앱 스토어 심사 과정과 배포 시간도 부담으로 다가왔습니다.

이러한 고민 속에서 "꼭 앱이어야 할까?"라는 질문을 하게 되었고, 그 대안으로 PWA(Progressive Web App)를 발견하게 되었습니다.

PWA가 뭐길래?

PWA는 웹 기술을 사용하여 개발되지만 네이티브 앱과 유사한 사용자 경험을 제공하는 웹 애플리케이션입니다. 웹사이트를 모바일 기기의 홈 화면에 설치할 수 있고, 오프라인에서도 작동하며, 심지어 푸시 알림과 같은 네이티브 앱의 주요 기능도 활용할 수 있습니다.

이런 강력한 기능들은 대부분 '서비스 워커(Service Worker)'라는 기술 덕분에 가능합니다. 웹의 접근성과 앱의 사용자 경험을 결합한 하이브리드 접근 방식이라고 생각하면 이해하기 쉬울 것 같습니다.

서비스 워커란?
PWA의 핵심 기술인 서비스 워커는 웹 페이지와 브라우저 사이에서 동작하는 JavaScript 파일입니다. 네트워크 요청을 가로채고 캐싱 전략을 적용하여 오프라인 작동, 성능 향상, 백그라운드 동기화, 푸시 알림 등의 기능을 가능하게 합니다. 서비스 워커 덕분에 웹사이트가 앱처럼 동작할 수 있는 것이죠!

처음 PWA 개념을 접했을 때는 의구심이 들었지만, 알아볼수록 실용적인 기술이라는 생각이 들었습니다. 특히 앱 스토어의 심사 과정 없이도 앱과 같은 경험을 제공할 수 있다는 점이 매력적이었습니다.

PWA의 장점들

PWA를 검토하면서 가장 끌렸던 장점들은 다음과 같습니다.

1. 앱 스토어 우회 ⏭️ - 앱 스토어 심사 없이 바로 배포할 수 있어 빠른 개발 사이클을 유지할 수 있습니다.
2. 푸시 알림 🔔 - 웹인데도 네이티브 앱처럼 푸시 알림을 보낼 수 있어 사용자 참여를 유도하기 좋습니다.

이런 장점들이 GitAnimals 프로젝트의 현재 상황과 딱 맞는 것 같아 PWA 적용을 결정했습니다.

GitAnimals 프로젝트에 PWA 적용하는 방법

Gitaninmals는 Next.js App router 환경으로 이루어져있는 서비스입니다. Next.js로 개발된 프로젝트에 PWA를 적용하는 과정을 공유해보려고합니다.

1. 패키지 설치하기

첫 단계는 간단했습니다. next-pwa 패키지를 설치하는 것이었죠.

npm install next-pwa

이 패키지는 Next.js 프로젝트에 PWA를 손쉽게 적용할 수 있게 해줍니다. 처음에는 직접 서비스 워커를 구현해야 하나 걱정했는데, 이 패키지 덕분에 많은 부분이 자동화되어 편리했습니다.

2. Next.js 설정 파일 수정하기

다음으로 next.config.mjs 파일을 수정했습니다. 여기서 PWA의 핵심 설정을 추가하는 작업이었죠.

import createNextIntlPlugin from 'next-intl/plugin';
import NextPWA from 'next-pwa';

const withNextIntl = createNextIntlPlugin();
const withPWA = NextPWA({
  dest: 'public',
  disable: process.env.NODE_ENV === 'development' || process.env.DISABLE_PWA === 'true',
  register: true,
  skipWaiting: true,
});

const nextConfig = withNextIntl({
  // 기존 설정들...
});

export default withPWA(nextConfig);

개발 과정에서 한 가지 깨달은 점은 개발 환경에서는 PWA 기능을 비활성화하는 것이 좋다는 것이었습니다. 서비스 워커가 활성화되면 캐싱 때문에 코드 변경사항이 즉시 반영되지 않아 개발 효율이 떨어지더라고요. 그래서 disable: process.env.NODE_ENV === 'development' 옵션을 추가했습니다.

3. PWA 설치 안내 배너 만들기

PWA를 구현하면서 가장 큰 도전 과제는 설치 프로세스였습니다. 기본 기능 구현은 next-pwa 패키지 덕분에 쉬웠지만, 사용자들에게 "이 웹사이트를 앱으로 설치할 수 있어요"라고 알려주고 그 과정을 안내하는 것은 온전히 제 몫이었습니다.

브라우저에서는 PWA를 설치할 수 있을 때 작은 알림을 표시하지만, 대부분의 사용자는 이를 놓치거나 무시하게 될것 같고, 그래서 직접 설치 안내 배너를 만들기로 했습니다.

'use client';
import { useEffect, useState } from 'react';
import { css } from 'panda/css';
import { flex } from 'panda/patterns';
import { AnimatePresence, motion } from 'framer-motion';

export const PWAInstallBanner = () => {
  const [showBanner, setShowBanner] = useState(false);
  const [showModal, setShowModal] = useState(false);
  
  useEffect(() => {
    // PWA 설치 이벤트 감지
    window.addEventListener('beforeinstallprompt', (e) => {
      e.preventDefault();
      setShowBanner(true);
    });
    
    // 이미 설치된 경우 감지
    window.addEventListener('appinstalled', () => {
      setShowBanner(false);
    });
  }, []);

  const handleInstall = () => {
    setShowModal(true);
  };
  
  // 배너 UI 렌더링 코드
}

이 코드에서 핵심은 beforeinstallprompt 이벤트를 감지하는 부분입니다. 브라우저가 "이 사이트는 설치 가능합니다"라고 판단할 때 이 이벤트가 발생하고, 이때 사용자에게 배너를 보여주는 방식으로 구현했습니다.

4. 브라우저별 설치 가이드 구현과 설치 과정의 복잡함 해결하기

먼저 설치 안내 배너를 만든 후, 곧바로 더 큰 문제를 발견했습니다. PWA 설치 방법이 브라우저마다 완전히 다르다는 점이었죠. Chrome, Safari, Samsung Internet 등 브라우저별로 설치 UI와 과정이 달라서 모든 사용자에게 적용할 수 있는 통일된 안내를 만들 수 없었습니다.

그래서 사용자의 브라우저를 자동으로 감지하고 맞춤형 설치 가이드를 제공하는 모달을 구현했습니다.

export const PWAInstallGuideModal = ({ onClose }: { onClose: () => void }) => {
  const [currentSlide, setCurrentSlide] = useState(0);
  const [browserType, setBrowserType] = useState('unknown');
  
  useEffect(() => {
    // 브라우저 탐지
    const userAgent = navigator.userAgent.toLowerCase();
    if (/iphone|ipad|ipod/.test(userAgent)) {
      setBrowserType('safari');
    } else if (/android/.test(userAgent)) {
      if (/samsung/.test(userAgent)) {
        setBrowserType('samsung');
      } else if (/kakao/.test(userAgent)) {
        setBrowserType('kakao');
      } else if (/naver/.test(userAgent) || /whale/.test(userAgent)) {
        setBrowserType('whale');
      } else {
        setBrowserType('chrome');
      }
    }
  }, []);
  
  // 브라우저별 설치 가이드 슬라이드 구성
  const slides = [
    // 인트로 슬라이드
    {
      title: '앱으로 설치하기',
      description: '홈 화면에 설치하여 더 빠르게 접근하고 오프라인에서도 사용해보세요!',
      image: '/images/pwa-intro.png',
      isIntro: true,
    },
    // 브라우저별 가이드 슬라이드...
  ];
  
  // 슬라이드 UI 및 네비게이션 코드
}

PWA의 경우 브라우저마다 설치 과정이 다르고, 사용자가 여러 단계를 거쳐야 합니다. 그러다보니 사용자가 앱 설치를 하는 접근성이 좋지 않다고 생각하였고, 우선적으로 해결해야하는 문제라고 생각했어요.

이런 문제들을 해결하기 위해 여러 전략을 적용해보았습니다.

• 맞춤형 안내: 주요 브라우저 각각에 대해 맞춤형 설치 가이드를 만들었습니다.
• 시각적 자료 활용: 각 단계를 스크린샷과 함께 제공하여 사용자가 직관적으로 따라할 수 있도록 했습니다.
• 설치 혜택 강조: "앱으로 설치하면 더 빠르게 접근하고 오프라인에서도 사용할 수 있어요"와 같은 구체적인 이점을 강조했습니다.

특히 iOS Safari의 경우 PWA 설치가 직관적이지 않고 숨겨져 있어서 단계별 가이드가 필수적이었습니다. 사용자가 "공유" 버튼을 누르고, 스크롤을 내려 "홈 화면에 추가" 옵션을 찾고, 설명을 읽고, "추가" 버튼을 눌러야 하는 복잡한 과정을 거쳐야 합니다.

그럼에도 불구하고 이상적인 설치 경험에는 여전히 미치지 못한다는 생각이 듭니다. 앱 스토어에서 하나의 "설치" 버튼으로 끝나는 단순함과 비교하면, PWA 설치 과정은 여전히 진입 장벽이 높습니다. 이 부분은 PWA 기술 자체의 한계이기도 하며, 앞으로 브라우저들이 더 일관되고 직관적인 설치 경험을 제공하기를 기대해 봅니다.

아직 남은 고민들

PWA 구현을 진행하면서 여전히 몇 가지 해결되지 않은 고민이 남아있습니다.

첫째, 푸시 알림 권한입니다. PWA에서 푸시 알림을 보내려면 사용자의 권한이 필요한데, 이 과정도 브라우저마다 다릅니다. 특히 iOS에서는 알림 권한 획득이 더 까다롭고, 사용자가 거부한 경우 다시 요청하기가 어렵습니다.

둘째, iOS 제약사항입니다. iOS Safari의 PWA 지원은 Android Chrome보다 제한적입니다. 예를 들어, 백그라운드 동기화나 일부 웹 API가 제한되어 있어서 완전한 앱 경험을 제공하기 어렵습니다. 이는 Apple이 앱 스토어 생태계를 보호하기 위한 전략으로 보이지만, 개발자 입장에서는 제약이 많습니다.

셋째, 브랜딩과 발견성입니다. 앱 스토어는 사용자들이 새로운 앱을 발견하는 중요한 채널인데, PWA는 이런 발견성이 떨어집니다. 사용자들이 웹사이트에 먼저 방문해야만 PWA를 알 수 있고, 앱 검색 시장에서는 완전히 배제되어 있습니다.

이런 고민들이 있지만, 그래도 PWA는 네이티브 앱 개발 리소스가 제한적인 상황에서 괜찮은 타협점이라고 생각합니다. 특히 GitAnimals 같은 GitHub 통합 서비스에서는 네이티브 앱의 인증 복잡성을 우회할 수 있다는 점이 큰 장점입니다.

앞으로의 계획

PWA 도입은 아직 초기 단계이지만, 앞으로 몇 가지 계획을 가지고 있습니다.

우선 사용자 테스트를 통해 설치 가이드의 효과를 검증할 예정입니다. 실제 사용자들이 얼마나 쉽게 PWA를 설치하고 사용할 수 있는지 피드백을 수집하고, 지속적으로 UX를 개선하려고 합니다. 특히 다양한 브라우저 환경에서의 설치 성공률을 측정하고 중간에 포기하는 지점을 파악하여 설치 가이드를 최적화할 계획입니다.

또한 푸시 알림을 활용한 사용자 참여 전략을 구체화할 계획입니다. 예를 들어, 일일 커밋 알림이나 펫 상태 변화 알림 등을 통해 사용자들의 지속적인 참여를 유도할 수 있을 것 같습니다. 다만 iOS와 Android의 푸시 알림 지원 차이를 고려한 대응책도 함께 마련해야 할 것 같습니다.

PWA 푸시 알림 팁
iOS 16.4부터 Safari에서도 PWA 웹 푸시 알림이 지원되기 시작했습니다. 단, iOS에서는 사용자가 먼저 PWA를 설치한 후에만 푸시 알림 권한을 요청할 수 있으니 요청 타이밍에 주의해야 합니다!

무엇보다 중요한 건 사용자 경험이라고 생각합니다. 기술적인 구현 방식보다는 사용자들이 GitAnimals를 얼마나 편리하게 이용할 수 있는지가 핵심이니까요. PWA든 네이티브 앱이든, 최종적으로는 사용자들에게 가장 좋은 경험을 제공하는 방향으로 결정할 것입니다.

사실 현재는 프로젝트의 상황에 맞춰 PWA를 선택했지만, 장기적으로는 Apple 로그인을 구현할 수 있는 리소스가 확보된다면 결국 앱 스토어 심사를 거치는 네이티브 앱 방향으로 변경하게 될 가능성도 있습니다. PWA는 완벽한 해결책이라기보다는 현재 상황에서의 적절한 타협점이라고 생각합니다.

이번 PWA 도입 과정은 기술적 제약 속에서 창의적인 해결책을 찾아가는 여정이었습니다. 완벽한 솔루션은 아니지만, 현재 상황에서 최선의 선택을 하기 위한 탐색 과정이었다고 생각합니다. 앞으로의 발전 과정도 기회가 되면 공유하겠습니다.