📚
위니브 책 모음(공개 링크)/
🚀
PWA! <1만 시간의 법칙> 웹 페이지를 앱으로!/
📃
2.4 Manifest 설정하기
📃

2.4 Manifest 설정하기

1. Manifest에 들어가야 할 내용2. Manifest Options2.1 Info 작성하기2.1.1 Name2.1.2 Short name2.1.3 Description2.1.4 Display2.1.5 Background Color와 Theme Color2.2 Settings 작성하기2.2.1 Start URL2.2.2 Scope2.2.3 Orientation2.2.4 Language2.3 Images 작성하기2.3.1 Upload App Icons2.3.2 Generate Screenshots2.3.3 Done

1. Manifest에 들어가야 할 내용

PWA를 만들기 위해 필요한 Manifest(매니페스트)를 PWA Builder에서 만들어 보도록 합시다.
💡
Manifest가 100점이 나오지 않으면 최종적으로 PWA를 퍼블리싱 할 수 없습니다. 특히 아이콘 이미지가 제대로 업로드 되었는지 확인한 후 진행하셔야 합니다.
 
이때 매니페스트에는 어떤 내용이 들어가야 할까요?
다음은 web.dev에서 소개하는 매니페스트에 포함되어야 할 내용입니다. 아래 내용을 확인하고 PWA Builder로 돌아가 Manifest Option을 작성해 보도록 합시다.
  1. short_name 또는 name
  1. icons : 192px과 512px의 아이콘
  1. start_url
  1. display : fullscreen, standalone, minial-ui 중 하나이어야 함.
  1. prefer_related_aplications : 존재하지 않거나 false이어야 함.
 
What does it take to be installable?
Updated Progressive Web Apps (PWAs) are modern, high quality applications built using web technology. PWAs offer similar capabilities to iOS/Android/desktop apps, they are reliable even in unstable network conditions, and are installable making it easier for users to find and use them. Most users are familiar with installing applications, and the benefits of an installed experience.
What does it take to be installable?
https://web.dev/install-criteria/
What does it take to be installable?
 

2. Manifest Options

PWA Builder에서는 매니페스트 옵션을 작성하면 매니페스트 문서를 자동으로 생성해 줍니다. 빈 칸을 채워 넣어보도록 합시다.
PWA Builder - Manifest Options 작성 페이지PWA Builder - Manifest Options 작성 페이지
PWA Builder - Manifest Options 작성 페이지
 

2.1 Info 작성하기

notion imagenotion image

2.1.1 Name

앱의 이름을 말합니다. '1만 시간의 법칙'이라고 입력하겠습니다.
 

2.1.2 Short name

홈 스크린의 아이콘 이름과 같이 앱의 이름을 표시할 충분한 공간이 없을 경우 사용자에게 표시되는 이름을 말합니다. Short name은 '시간의 법칙'이라고 입력하도록 하겠습니다.
 

2.1.3 Description

Description에는 앱이 어떤 작업을 수행하는지에 대한 설명을 입력하면 됩니다. "1만 시간의 법칙은 전문가가 되기 위해 며칠이 걸리는지 계산해 주는 서비스입니다."라고 입력하겠습니다.
 

2.1.4 Display

Display는 개발자가 선호하는 디스플레이 모드를 설정할 수 있습니다. 앱이 사용자에게 어떻게 표시될지 결정하는 것으로 앱을 표시하는 방식입니다. 디스플레이 모드는 fullscreen, standalone, minimal-ui, browser로 다양한 모드를 제공합니다.
여기서는 'standalone(독립형)'으로 설정하겠습니다.
 
디스플레이 모드에 대한 자세한 설명은 아래 링크를 참고하시길 바랍니다.
display - Web app manifests | MDN
The display member is a string that determines the developers' preferred display mode for the website. The display mode changes how much of browser UI is shown to the user and can range from browser (when the full browser window is shown) to fullscreen (when the app is full-screened).
display - Web app manifests | MDN
https://developer.mozilla.org/en-US/docs/Web/Manifest/display
display - Web app manifests | MDN
 

2.1.5 Background Color와 Theme Color

Background Color는 스타일 시트가 로드되기 전 표시할 페이지의 배경색을 말하고, Theme Color는 앱의 기본 테마 색상을 말합니다. 둘 다 'None'으로 설정하겠습니다.
 

2.2 Settings 작성하기

notion imagenotion image

2.2.1 Start URL

Start URL은 사용자가 웹 애플리케이션을 시작할 때 로드되어야 할 기본 URL입니다. 일반적으로 앱의 root url을 말합니다. Start URL은 지난 챕터에서 생성한 두 개의 URL 중 원하는 것을 선택해서 입력해 주면 되며, /index.html 을 입력해도 무방합니다.
 

2.2.2 Scope

Scope은 애플리케이션 context의 탐색 범위를 정의하며, 매니페스트가 적용되는 동안 볼 수 있는 웹 페이지를 제한합니다. 만약 사용자가 제한된 범위인 외부를 탐색하면 브라우저 탭 또는 창 내부의 일반 웹 페이지로 되돌아갑니다. Scope은 '/'라고 입력하겠습니다.
 

2.2.3 Orientation

Orientation은 웹 페이지의 기본 방향을 정의합니다. 'portrait(세로 방향)'으로 설정하겠습니다.
 

2.2.4 Language

앱의 기본 언어는 'Korean'으로 설정하겠습니다.
 

2.3 Images 작성하기

2.3.1 Upload App Icons

Images에서는 앱의 아이콘을 업로드해야 합니다. Upload 버튼을 클릭하여 프로젝트 폴더의 [example] - [img] 폴더 안에 있는maskable_icon_x512.png 을 업로드합니다.
 
업로드하면 사이즈별로 아이콘들이 자동으로 생성된 것을 확인할 수 있습니다.
notion imagenotion image
 
💡
앱의 아이콘을 만드는 방법은 <부록. Maskable 아이콘 만들기> 챕터를 참고해 주시길 바랍니다.
 

2.3.2 Generate Screenshots

앱을 보여주기 위한 스크린샷으로, PWA 스토어에서 사용하기 위한 것입니다. 이 부분은 넘어가도록 하겠습니다.

2.3.3 Done

마지막으로 Done을 클릭해 주세요. 이미지가 제대로 업로드 되지 않았을 경우 다시 Manifest를 클릭해서 이미지만 별도로 업로드 해주시면 됩니다.