[React] public/manifest.json 파일이란?

public/manifest.json 파일은 Progressive Web App(PWA)을 설정하는 데 중요한 역할을 합니다. 이 파일은 웹 애플리케이션이 모바일 앱처럼 동작할 수 있도록 해주며, 주로 웹앱이 설치되고 실행될 때의 외형과 동작 방식을 정의합니다.

Progressive Web App(PWA)

Progressive Web App(PWA)은 웹 애플리케이션의 장점과 네이티브 모바일 앱의 기능을 결합한 형태의 애플리케이션입니다.

주요 특징

1. 오프라인 지원: 네트워크 연결이 없는 상태에서도 동작할 수 있습니다.
2. 앱 설치: 사용자는 PWA를 웹사이트에서 바로 홈 화면에 설치할 수 있어, 앱스토어를 거치지 않아도 됩니다.
3. 빠른 로딩: 캐싱 기술을 사용해 빠르게 로딩됩니다.
4. 푸시 알림: 네이티브 앱처럼 푸시 알림을 보낼 수 있습니다.

PWA는 웹의 접근성과 앱의 기능성을 결합하여, 사용자 경험을 개선하고 개발자가 여러 플랫폼에서 동일한 코드를 사용할 수 있게 해줍니다.

public/manifest.json의 주요 항목 설명

1. name 및 short_name:

   • name: 웹앱의 전체 이름을 나타냅니다. 사용자가 앱을 설치했을 때, 홈 화면이나 앱 목록에서 표시됩니다.
   • short_name: 앱의 짧은 이름입니다. 이름이 너무 길 경우, 이 짧은 이름이 대신 표시됩니다.

2. start_url:

   • 앱이 시작될 때 불러올 URL을 지정합니다. 일반적으로 / 또는 /index.html로 설정되어, 앱이 루트 페이지에서 시작하도록 합니다.

3. display:

   • 앱이 어떻게 표시될지 정의합니다. 예를 들어:
     • standalone: 앱이 독립적인 형태로 실행되어, 브라우저의 주소 표시줄이나 탭이 보이지 않습니다.
     • fullscreen: 완전한 전체 화면 모드로 실행됩니다.
     • minimal-ui: 기본적인 브라우저 UI(뒤로 가기, 새로고침 등)만 보입니다.

4. background_color:

   • 앱이 로드될 때, 초기 화면의 배경색을 정의합니다. 이 색상은 앱이 로드되는 동안(예: 스플래시 화면에서) 표시됩니다.

5. theme_color:

   • 앱의 툴바나 상태 표시줄의 색상을 정의합니다. 사용자가 앱을 실행했을 때, 상단의 테마 색상이 변경됩니다.

6. icons:

   • 앱 아이콘의 경로와 크기를 정의합니다. 다양한 해상도에서 사용될 수 있는 아이콘들이 이곳에 정의됩니다. 아이콘은 홈 화면이나 앱 목록에 표시됩니다.

7. orientation:

   • 앱이 실행될 때의 화면 방향을 정의합니다. 예를 들어, portrait로 설정하면 앱이 항상 세로 모드로 실행됩니다.

PWA에서의 역할

이 파일은 PWA로서의 기능을 완전히 지원하기 위해 필요한 요소입니다. PWA는 웹사이트를 모바일 앱처럼 설치하고, 오프라인에서도 작동할 수 있게 하며, 빠른 로딩 속도를 제공하는 등의 장점을 가지는데, manifest.json 파일이 그 설정을 관리합니다.

따라서, 이 파일은 PWA의 핵심적인 설정을 담당하며, 사용자에게 더 나은 앱 경험을 제공하는 데 중요한 역할을 합니다.