React 프로젝트에 PWA 적용하기

AI 관련 공모전에 나가기 위해, 관련한 서비스를 제작하게 되었습니다.

백엔드는 Flask로 진행하고, 데이터 팀원들이 데이터 작업을 진행할 동안 개발 파트를 맡은 나는 프론트엔드 작업을 만들어서 진행해야 하는 상황입니다.

모바일 앱으로 하면 좋겠지만, 모바일 앱 개발 경험도 없고, 정말 짧은 시간을 준비해야 되는 상황이라 그나마 기존에 조금이라도 써봤던 리액트로 작업을 하게 되었습니다.

 

 

PWA란

PWA(Progressive Web App)는 웹 기술을 활용해 모바일 앱과 유사한 사용자 경험을 제공하는 웹 애플리케이션입니다. PWA는 네이티브 앱의 장점인 빠른 속도와 오프라인 사용 기능을 웹 환경에서 구현할 수 있도록 하며, 특히 브라우저를 통해 설치 없이 사용 가능합니다. 이를 통해 앱스토어를 거치지 않고도 사용자는 홈 화면에 앱을 추가하거나 푸시 알림을 받을 수 있습니다.

 

PWA의 주요 특징은 반응형 디자인, 오프라인 지원(서비스 워커를 통한 캐시 처리), 빠른 로딩 속도, 그리고 웹과 앱 간의 경계 허물기입니다. 특히 앱스토어를 거치지 않으므로 개발자에게 더 많은 자유와 저렴한 개발 비용을 제공합니다. 또한 PWA는 HTTPS 기반으로 보안이 강화되며, 네트워크 상태와 상관없이 빠르게 페이지를 로드하는 기능을 가집니다​

 

다만, PWA는 스마트폰의 운영 체제나 하드웨어와의 깊은 통합이 제한되기 때문에 고성능 게임과 같은 앱에는 적합하지 않습니다. PWA를 고려할 때는 고객의 요구를 파악하는 것이 중요하며, 고객이 필요로 하는 서비스를 제공하는 경우 효과적으로 활용할 수 있습니다​.

 

 

출처

https://blog.tetedo.com/254

[정리] PWA란 무엇인가? ( + serviceWorker)

https://blog.wishket.com/%ed%94%84%eb%a1%9c%ea%b7%b8%eb%a0%88%ec%8b%9c%eb%b8%8c-%ec%9b%b9-%ec%95%b1pwa%ec%9d%b4%eb%9e%80-%eb%ac%b4%ec%97%87%ec%9d%b4%eb%a9%b0-%ec%99%9c-%ed%95%84%ec%9a%94%ed%95%9c%ea%b0%80/

프로그레시브 웹 앱(PWA)이란 무엇이며, 왜 필요한가? - wishket

https://perfectmoment.tistory.com/1632

 

 

 

 

PWA를 사용하려는 이유는, 이용자들이 주로 모바일로 접속할 가능성이 높기 때문입니다. 하지만 모바일 앱을 개발할 여력이 부족하여, 일반 웹 개발에 PWA를 적용하려고 합니다.

그러나 제가 프론트를 맡을 당시에는 PWA마저도 이용해 보지 않아서 저에게는 모든 것이 새로웠습니다.....

 

PWA 적용하기

설치

// 1. javascript
npx create-react-app <앱이름> --template cra-template-pwa

// 2. typescript
npx create-react-app <앱이름> --template cra-template-pwa-typescript

 

저는 타입스크립트로 작업하려고 합니다.

 

설치 후 파일 디렉토리를 확인했을 때

위와 같이 service-worker.ts 파일과 serviceWorkerRegistration.ts 파일이 잘 들어가 있으면 PWA가 잘 설치된 것입니다.

 

 

service worker 설정하기

index.tsx 파일에 기존에

 

serviceWorkerRegistration.unregister();

 

라고 작성된 부분을

 

serviceWorkerRegistration.register();

 

로 변경을 진행해야 합니다.

 

이 코드는 애플리케이션이 오프라인 환경에서도 작동할 수 있도록 지원하고, PWA 기능을 활성화하고, 성능을 최적화해주는 역할을 합니다.

 

ManiFest 설정하기

Web App Manifest는 PWA가 사용자의 디바이스에 어떻게 표시되고 동작해야 하는지 브라우저에게 알려주는 JSON 파일입니다. 웹 앱이 PWA가 되려면 설치 가능해야 하고, 설치를 가능하게 하기 위해 manifest.json 파일이 있어야 합니다. 이 파일에는 앱으로 만들기 위해 필요한 정보를 설정할 수 있습니다.

 

{
  "short_name": "",
  "name": "",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#0046ff",
  "background_color": "#ffffff"
}

 

 

 

• name: 사용자에게 표시되는 웹 앱의 이름
• short_name: name을 표시할 공간이 충분하지 않을 때 표시되는 웹 앱의 이름
• icons: 아이콘 정의(객체 배열을 지정함)
  • src: 이미지 파일 경로
  • type: 이미지의 미디어 타입
  • sizes: 이미지 사이즈
  • purpose: 이미지 사용 방법(monochrome, maskable, any)
• start_url: 사용자가 웹 앱을 시작할 때 로드하는 기본 URL
• display: 웹사이트 표시 모드(fullscreen, standalone, minimal-ui, browser)
• theme_color: 앱의 기본 테마 색상
• background_color: 스타일시트가 로드되기 전 표시할 페이지의 배경색

위와 같은 항목으로 구성되어 있습니다.

display 옵션에 대해 설명하자면 아래와 같습니다.

 

 

• fullscreen:
  • PWA가 화면을 완전히 차지하도록 표시합니다. 브라우저의 UI (탭, 주소 표시줄 등)가 전혀 보이지 않으며, 앱처럼 실행됩니다.
  • 이 모드는 게임, 비디오 플레이어 등 전체 화면 경험을 원하는 애플리케이션에서 유용합니다.
• standalone:
  • PWA가 독립적인 애플리케이션처럼 보이도록 합니다. 브라우저의 기본 UI (주소 표시줄, 탭 등)는 표시되지 않지만, 애플리케이션 상단에 시스템의 상태 표시줄은 나타납니다.
  • 네이티브 앱과 유사한 경험을 제공하고자 할 때 주로 사용됩니다. 현재 manifest.json에서 이 값이 설정되어 있습니다.
• minimal-ui:
  • standalone과 유사하지만, 최소한의 브라우저 UI가 추가됩니다. 보통 뒤로 가기 버튼, 새로 고침 버튼 등 최소한의 탐색 기능이 표시됩니다.
  • 네이티브 앱과 웹 앱의 중간 경험을 원할 때 적합합니다.
• browser:
  • PWA가 일반적인 웹페이지처럼 브라우저에서 실행됩니다. 주소 표시줄을 포함한 브라우저의 모든 UI가 보입니다.
  • 기본적으로 PWA가 일반 웹페이지처럼 동작하게 할 때 사용됩니다.

 

일단 전 기본값인 standalone으로 설정해놓고 진행하겠습니다.

 

그리고 index.html 파일에 아래 코드를 추가해 Manifest를 연결합니다. 이렇게 하면 Manifest 적용은 끝입니다.

꼭 head 안에 넣어주세요.

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

 

 

 

리액트를 다뤄본지 근 5개월이 되어 가는데, 까먹은 리액트 감각부터 다시 살리고 새로운 작업을 하려고 하니 쉽지 않은것 같습니다. 여기에 챗봇이다보니 웹소켓 방식으로 가야할 것 같은데, 이것도 상당히 머리가 아프네요.. 그래도 일단 잘 해보겠습니다!