포켓몬상 테스트 PWA 배포 도전기!! - 종료

2022.07.26 - [AI/개발도구] - 포켓몬상 테스트 만들기 - 종료

안녕하세요. 오늘은 PWA로 배포하는 방법을 소개하려고 합니다. 앱 개발에는 네이티브 개발 및 크로스 플랫폼 개발 등 여러 개발 방법이 있는데 웹사이트 기반으로 앱을 만들 수 있다고 들어서 궁금해서 시작해 보았습니다.

 

PWA란?

프로그레시브 웹 애플리케이션은 웹을 통해 전달되는 응용 소프트웨어의 일종으로, HTML, CSS, 자바스크립트를 포함한 일반 웹 기술들을 사용하여 만들어진다. 표준을 준수하는 브라우저를 사용하는 어떠한 플랫폼에서라도 동작하도록 고안되었다. 위키백과

 

PWA를 만드는 방법은 여러 방법이 있는 것으로 파악되었습니다. 저는 그중에 MS에서 만든 Pwabuilder라는 툴을 사용해보려고 합니다. 먼저 https://www.pwabuilder.com/ 접속합니다. Enter the URL to your PWA 레이블에 변환하려고 하는 웹 사이트 주소를 입력합니다.

 

분석하는데 시간이 5~10분 내외로 소요되는 거 같습니다.

 

분석이 완료되었는데 제가 만든 웹사이트는 PWA Score 30 점이 나왔습니다. 무엇인가 더 처리할 게 있나 봅니다.

 

먼저 0점 받은 Manifest의 ▶ 버튼을 누릅니다.

 

누락되어 있는 레이블을 모두 채웁니다.

 

맨 아래로 내려가면 View Code 버튼을 눌러 manifest.json 파일을 생성합니다.

 

index.html 파일에 방금 생성한 manifest.json 파일을 link 코드를 추가하고 필자의 경우 netlify와 github에 연동되어 있어서   업로드하고 웹 사이트를 재 배포하였습니다.

 

git push 하면 netlify에서 자동으로 배포를 해주기 때문에 배포 상태를 확인하였습니다.

 

PWABuilder로 돌아와서 Next Button을 클릭하였더니 Download PWA Base Files라는 것이 생성되었습니다. Generate 버튼을 누르면 PWA를 구성하는 Base File을 다운로드할 수 있습니다.

 

다운로드 파일을 압축을 풀게 되면은 next-steps.html 파일이 생성이 되는데 PWA를 구성하기 위한 방법을 가이드해줍니다. https://github.com/pwa-builder/pwabuilder-web/blob/V2/src/assets/next-steps.md를 참고하셔서 환경설정을 추가적으로 진행합니다.

모든 환경을 구성을 하고 웹 사이트를 재배포를 한 뒤 Test Update App 버튼을 다시 클릭합니다.

 

점수는 올랐는데 아직도 무엇인가 부족한 게 있나 봅니다.

 

서버에 images라는 폴더를 만들고 아래 사항이 반영되지 않아 추가하였습니다.

 

Manifest를 수정하고 다시 Test 결과 이제야 150점이 나왔습니다. 감격..;;

 

Next 버튼을 클릭하니 각 스토어에 Publish 할 수 있는 메뉴가 나타납니다. 필자는 Android를 선택하였습니다.

 

아래처럼 Option을 설정합니다.

 

하앗.. 계속 오류가 나네요. 이번에는 지원하지 않는 image type이라고 합니다.ㅠㅠ 크으

manifest.json 상에서 x-icon MIME type을 제거하고 다시 PWA 테스트를 실행합니다.

 

이번에는 정상적으로 되는 건지... 오류가 없어 성공할 수 있을 거란 기대감과 함께 기다려 봅니다.

 

정상적으로 변환이 되면 아래처럼 나타납니다.

 

다운로드한 파일을 압축을 풀면 아래처럼 APK와 KEYSTORE 파일이 생성된 것을 알 수 있습니다.

 

이상으로 Pwabuilder를 이용하여 APK 만드는 포스팅을 마치겠습니다. 오류가 생기는 위치를 찾아서 수정하면 PWA 앱을 만들 수 있습니다. 소요되는 시간은 제가 약 3시간 정도 걸린 거 같습니다. 처음 해서 그런지 몰라도 오류 찾고 문제 확인하는 것에 연속이었으니 나중에 다시 할 때는 더 빠르게 할 수 있을 거 같습니다.

 

2022-07-26 PWA로 만들 웹 사이트를 PLAY CONSOLE에 올리려고 몇 번을 시도하였는데 계속 BLOCK을 당했다. 사유는 저작권 문제로 판단되는데 아무래도 포켓몬이라는 고유의 저작권을 사용해서 그런 거 같다. 

 

몇몇 사례들을 찾아봤는데 캐릭터 저작권 관련하여 문제가 있는 것을 알게 되었다. 기존에 만든 테스트는 모두 종료 하기로 한다. 포켓몬이 아니라 저작권 없는 류의 테스트를 따로 만들어서 재 업로드해야겠다. 

[반듯지식iN] 포켓몬스터 캐릭터 이용, 저작권 문제는 없을까요?