🤔

03-08-2020

BPM Tapper를 PWA로 만들어보았다

가려운 곳 스스로 긁기의 일환으로.. 디제잉을 하다보면 종종 모르는 곡의 BPM을 알아내야 할 때가 생기는데(바이닐 쓰시는 분이랑 백투백을 한다던지), 여기저기 찾아봐도 맘에 들게 생긴게 없어서 BPM 태퍼를 만들어 써야겠다는 생각을 해왔고, 이번에 좀 시간이 나서 만들어보았다. 아무래도 오프라인 상황이 종종 있을 것 같고, 최근에 트위터라던가 이런저런 PWA를 설치해서 쓰는 데 좀 맛이 들려서(..) PWA로 만들어보기로. 회사에서 Vue 밖에 못써서 hooks도 써볼 겸 React로 만들어봤다.

그리하여 일단 완성된 앱은 이렇다:

웹앱 https://bipi.me
깃헙 https://github.com/sehyunchung/bipi

간단한 앱이다. ‘홈 화면에 추가’등을 이용해 디바이스에 설치할 수 있고, 화면 아무곳을 2번 이상 탭하면 BPM을 계산해서 보여준다. 4초간 입력이 없으면 0으로 리셋.

해보고 싶었던 것들

PWA로 만들면서 중요하게 생각했던 것들은 아래와 같다.

  • 당연하지만 오프라인에서 작동한다.
  • 폰/패드/데스크탑에 설치하면 앱 아이콘이 표시된다.
  • 앱아이콘을 터치해서 실행하면 브라우저로 이동하는 게 아니라 스탠드얼론으로 실행된다.
  • 폰/패드에 설치할 경우 상태바가 검은색이나 흰색이 아니라 앱 배경색에 맞게 스타일링 된다.

다시 말해, 네이티브앱 경험에 최대한 가깝게 만들어보고 싶었다.

1. 오프라인에서 동작하게 만들기

서비스워커를 설정해주면 된다. 따로 한 건 없고 create-react-app에서 만들어주는 index.tsx의 맨 마지막 줄을 바꿔주기만 했다.

...
- serviceWorker.unregister()
+ serviceWorker.register()
...

2. 앱 아이콘 추가하기

여기서부턴 manifest.json에 설정을 추가하면 된다. manifest.json에서 앱아이콘을 설정하는 부분은 "icons" array다.

{
...
+    "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"
+        }
+    ],
...
}

3. 스탠드얼론 앱으로 실행되게 만들기

manifest.json에서 앱 바디가 어떻게 보이느냐를 설정하는 부분은 "display"다. 아래와 같이 standalone으로 설정했다.

{
...
+    "display": "standalone",
...
}

display의 설정값들과 설정시 화면 동작은 아래와 같았다.

프로퍼티설정시 화면 동작
browser디폴트 브라우저 화면
fullscreen브라우저인데 ui가 안보이는 브라우저 화면 ..이라고 되어있는데 iOS에선 browser랑 차이가 없었다.
minimal-ui스탠드얼론이랑 거의 같은데 메뉴바에 약간의 ui 컨트롤이 있음 ..이라고 되어있는데 iOS에선 역시 차이가 없었다.
standalone스탠드얼론 화면.

android에선 되나봄..

4. 상태바 스타일링되게 하기

안드로이드/크롬에선 기본적으로 특별히 설정하지 않아도 그냥 되지만, iOS 기기는 따로 설정을 해주어야 한다. index.html<head> 영역에 아래코드를 추가한다.

+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

역시 정리해 본 apple-mobile-web-app-status-bar-style의 설정값들과 설정시 화면 동작.

프로퍼티설정시 화면 동작
default상단에 상태바가 흰색 배경에 검은색 글자로 표시된다.
black상단에 상태바가 검은색 배경에 흰색 글자로 표시된다.
black-translucent상태가바 웹앱 배경색 배경에 흰색 텍스트로 표시된다.

그리하여..

완성된 앱은 아래와 같이 동작한다.

Bipi! Launch Screen Capture

그런데..

References


©2021 Sehyun Chung