본문 바로가기
일지/헬키

[RN 죽어] 헬키 개발일지 10. PWA 찍먹

by 리나그(ReenAG) 2024. 7. 24.
728x90
반응형

 지금 R/N을 이용할 개발이 한참 늦어지기는 해서 어짜피 펑크난 김에 다른 시도를 해보자는 말이 나왔다. 그래서 원래 가지고 있던 다른 poc repo를 개조하는 식으로 현재 생각해보고 있다.
 
 연구를 계속하고 있는데, 알고보니 이게 앱스토어에서 까는 방식이 아닌것 같다. 아니 그런 앱이 존재할 수는 있는 건가 싶긴한데 좀 더 보려고 한다. ChatGPT의 말에 따르면 일단 HTTPS를 서빙 하는 방식으로 되어있다고, 몇가지 조건을 충족한다면 바로 깔 수 있다나 뭐라나...
 
 결론적으로 또 AWS의 힘을 빌리게 되었다. 지금으로썬 https를 제대로 적용가능한건 이 녀석 뿐이니까.
다행히도 이미 CI파이프라인 구축하는건 마스터해서, 1일만에 다 만들어서 올리는데 성공했다. 
 


 
왼쪽이 PWA, 오른쪽이 기존 native앱이다. 당연히도 앱스토어에서 까는 건 줄 알았는데 그게 아니었다???? PWA가 기존의 앱과 다른 점이라고 한다면 까는데 스토어측의 승인이 아예 필요하지 않다는 점이다. 브라우저로 접속해서 홈 화면에 추가 버튼을 누르는 식으로 앱을 설치할 수 있다. iOS가 좀 더 빈약한 지원을 해준다만(OBJ-C나 Swift를 쓰지 않는게 불만이려나?) 그래도 멀쩡히 설치되는 것을 볼 수 있었고, 웹이 돌아만 가도 있다면 모델 렌더링이 된다는게 신기했다. 여기서 기본적인 native성 기능들을 이용하면 알람을 보내거나 하는 등의 기능들도 직접 활용할 수 있다고 한다.
 
 어찌되었건 스타트업에는 굉장히 매력적인 조건으로 다가오는게 사실이라, 그냥 그렇게 짜보기로 했다. 우리팀에 전 Next.js경험자가 있기 때문에 나도 배울 수도 있을 것 같아 기대가 된다. ㅎㅎ 이것 때문에 R/N을 버리지는 않겠다만 확실히 R/N은 좀 복잡한게 많다는 느낌이다. 엄청엄청... 복잡하다... 휴... 왜 항상 뭔가 만들면 복잡해지는거지 싶다. 분명 뭔가 고쳐야할 습관이 있는지도 모른다.
 
구글의 가이드라인이다. 읽어보자.
https://web.dev/learn/pwa

 

Learn PWA  |  web.dev

A course that breaks down every aspect of modern progressive web app development.

web.dev

 
 잡소리를 각설하고 위의 글을 읽다보니 나름대로 주의할 사항과 바로 적용하면 좋을 것 같다는 생각이 드는 게 몇가지 있었다.
PWA를 만든다면 생각해보아야할 중요한 포인트가 2개 있었다. 
 첫번째는 반응성. 다른 것보다 강조가 많이 된 부분이라고 생각되었다. 특히나, 초미니? 디스플레이의 경우에도 어떤 화면을 보여줄 건지에 대한 고민을 하라는 점이 특이했다. 플립의 앞부분 화면에 뭔가 띄우고 싶다면야... 그게 아니어도 모든 UI / UX를 한번에 생각하라고 하는게 좀 다소 번거로울 수 있겠다고 생각했다. flex + em + rem 등을 쓰면 좀 더 쉽게 해결할 수 있겠지만. R/N에서는 반응성을 구현하는 방법이 다소 제한적이었는데 여긴 풀 웹이니까 그런거 걱정할 필요는 없어서 좋다는 생각이다.
 두번째는 퍼포먼스. 걱정되기도, 오히려 기대되는 부분이기도 하다. 웹 앱인 만큼 로드시간이 짧아야한다고 한다. 번들링된 파일 크기도 어느 정도 이하로 줄여하하는 것으로 보인다. webpack을 써서 번들링 / minify도 해서 js코드는 최대한 압축하는게 좋은 듯하고, 그게 로딩되지 않는 경우에도 뭔가 보여주는 것이 있어야하는 듯? cache를 쓰는 것도 어느정도 가이드라인이 있다. 캐싱 전략이라나. 이런거 하면서 최적화를 배우게 되는 것은 기대가 되지만, 솔직히 3D모델을 쓰는 입장에서 이게 괜찮은 일인가 싶다.
 
지금 내가 드는 생각은 이게 다다. 그만 운동하러 가야겠다~

728x90
반응형