내가 이번에 출시한 서비스는 웹서비스이다.
음 ... 요즘 앱의 접근성이 높지 않고,
(사실 내가 아직 앱을 만들지 못하는 것이 가장 큰 문제였지만)
우리가 원하는 결제 핸들링을 하기 위해서는 
당장에 인앱 결제들을 이용하면 불가능했다.(혜택을 받지 않으면 결제 이월)

추가적으로 빠르게 실험해야하는 테스트 환경에서,
다운 받아야지만 사용할 수 있는 앱을 만드는 것이 과연
옳은 일인가에 대한 의문도 들었다. 

아무튼 여차저차 이유로 React를 활용하여 웹으로 만들었는데,
결국에는 또 고객들이 편하게 웹서비스를 이용하게 할 것인가?
에 대한 문제에 부딪쳤다.

앱은 한번 다운만 받으면 쉽게 들어올 수 있지만,
웹은 그렇지 않으니 다음 번에 이용할 때는 또 어떻게 찾아서
들어와야 하는지에 대한 의문점들이 제기되었다.

이 부분에 대해서 참 아이러니 하지만 우리는 분명 
빠르게 개발하고 결제 핸들링을 우리가 하기 위해, 웹을 결정하였지만
개발자로서, 뭔가 내가 지금 당장 앱을 만들지 못해 그렇다라는 자괴감도 들었다.

뭐 아무튼 그건 다른 이야기이고, 
해결책을 찾아야 했다. 

그러다가 아래의 화면과 마주하게 되었다.

(참고 : bookmark.js 샘플영상 - https://youtu.be/M9c2qZWKf7M)

"오오오오??"

사실 크롬이나 사파리에서 제공하는
"홈 화면에 추가" 버튼만 잘 활용한다고 하면, 우리 아이콘을 각각의 모바일 사용자의 바탕화면에 추가할 수 있고, 그러면 정말 앱처럼 편하게 접근할 수 있게 되는 것 이기에(우리는 테스트하면서 이미 그렇게 하고 있었다.)

이것을 어떻게 하면 좀 더 편하게 추가하게 할 수 있을까 고민하다가 위의 글을 보게 된 것이다.

그렇게 나의 구글링이 시작되었다.
찾다보니 굉장히 많은 글을을 보게 되었는데,
아래에 해당 글들을 링크 걸어 본다.

[그누보드 QA - 모바일웹 '홈 화면에 추가하는 방법을 찾고 있습니다.](https://sir.kr/qa/309652)

사실 나와있는 대부분의 해결책이 네이버app을 활용한 바로가기 추가 버튼이었는데, 이 경우 네이버 app이 설치되어 있지 않다면 무용지물이 된다는 단점이 있었다.

그리고 어느 새 특정 키워드가 반복되고 있다는 것을 알 수 있었다.
"PWA를 활용해야 한다."

음 ... 새로운 것을 원천적으로 싫어하는 나에게는 굉장히 큰 허들이 아닐 수 없었다. PWA가 뭐야??
하지만 서비스 출시가 당장 눈 앞에 닥쳐 있기에...
누워서 찾아보던 나는 어쩔 수 없이 다시 책상에 앉았다.

그렇게 PWA에 대해서 찾아보기 시작했는데,
그 중에 처음 PWA에 대한 이해와 허들을 낮추어준 영상을 첨부한다.

[PWA가 뭔가요? (+모바일 앱의 종류) - YouTube](https://www.youtube.com/watch?v=NMdnzvPsGu8

 

추가 첨언하자면 PWA는 progressive web app으로,
웹앱을 좀 더 네이티브하게 활용할 수 있도록 발전시킨 기술이라고 할 수 있다.

이미 만들어진 우리 웹서비스에 간단하게 PWA를 적용하면,
이를 통해 우리는 훨씬 더 쉽게 고객들의 화면에 우리아이콘을 설치할 수 있도록 하고(이를 통해 완벽하진 않지만 거이 앱처럼 구동하도록 보인다.) 상단의 웹 URL창을 없애고, PUSH 알림까지 보낼 수 있도록 되는 것이다.

추가적으로 인터넷이 불안정하여 해당 서비스에 접근할 수 없을 때는 미리 캐시 해놓은 데이터들을 뿌려주어서 해결할 수 있도록 한 점 또한 매우 참신했다.

와 사실 정말 ... 더 이상 플레이스토어나 앱 스토어를 필요하지 않도록 만드는 기술이 아닌가 싶다. 오히려 고객들이 귀찮게 앱을 다운 받지 않아도 되고, 편하게 바로가기 아이콘을 설치해서 앱처럼 이용할 수 있다고 하면, 훨씬 그 허들도 낮을 뿐더라 앱을 업데이트해야지만 개선되었던 부분들 역시 웹이기에 바로 바로 적용된 다는 장점까지 있으니, PWA는 꼭 적용해야 되겠다는 생각이 들었다.

PWA 적용법은 생각보다 너무 너무 간단한데?! (물론 완벽하게 하자면 또 안드로메다로 가야 되겠지만...)  위의 YOUTUBE와 아래 사이트를 참고하면 된다.

[web.dev](https://web.dev/

 

web.dev

Get the web's modern capabilities on your own sites and apps with useful guidance and analysis from web.dev.

web.dev

 

이미 너무나도 잘 나와 있어서 
여기에 대해서 찾아보면서 보게 된 좋은 아티클 등을 공유하면서 마무리하고자 한다.

 

앱스토어의 종말 - https://brunch.co.kr/@bundi/31

 

앱스토어의 종말

프로그레시브 웹 앱 (Progressive Web App)과 앱스토어 | *다음은 아래 글에 대한 번역입니다. https://onezero.medium.com/the-end-of-app-stores-is-rapidly-approaching-b972da395097 앱스토어의 종말 프로그레시브 웹 앱 (Prog

brunch.co.kr

 

Progressive 웹 앱이 드디어 iOS에서도! | Sophie writes code - https://sophiedophie.github.io/2018/04/23/progressive-web-app-ios/

 

Progressive 웹 앱이 드디어 iOS에서도! | Sophie writes code

Articles 섹션에서는 영어공부 & 정보 습득을 위해 저에게 필요한 글들을 번역해서 공유합니다.혹시 문제가 된다면 저에게 연락해주세요! seohee.sophie.kwon@gmail.com이 글은 ‘Progressive Web Apps on iOS are he

sophiedophie.github.io

 

iOS 13 및 14, iPhone 및 iPad의 PWA (Progressive Web Apps) - https://love2dev.com/pwa/ios/

 

Progressive Web Apps (PWA) on iOS 13 & 14, iPhone & iPad

Progressive Web Apps are great solutions for business success despite the iOS 13 & 14 not supporting all modern web platform features. Learn why PWAs are better than native apps for your business

love2dev.com

 

위의 글들을 보면 알 수 있지만 구글에 비해 애플은 아직 PWA에 대해서 굉장히 소극적으로 대응하고 있고 이 때문에 간단하게 구글에서는 띄울 수 있었던 web app download 권유를 사파리에서는 할 수 없다.

developer.mozilla.org/ko/docs/Web/Progressive_web_apps

추가적으로 IOS에서 해당 기능을 쓰기 위한 방법들

[javascript-PWA : 프로그래밍 방식으로 트리거하는 방법 : "홈 화면에 추가"? iOS Safari-스택 오버플로](https://stackoverflow.com/questions/51160348/pwa-how-to-programmatically-trigger-add-to-homescreen-on-ios-safari)

 

[iOS 사용자가 Ember에 프로그레시브 웹 앱을 설치하도록 장려-DockYard](https://dockyard.com/blog/2017/09/27/encouraging-pwa-installation-on-ios)

 

[iOS PWA를 네이티브 앱처럼 느끼게하는 6 가지 팁 | 모바일의 Netguru 블로그](https://www.netguru.com/codestories/pwa-ios)

 

카카오 인앱 브라우저 => 외부 브라우저 띄우기

 

[카카오, 네이버 인앱에서 외부 브라우저 띄우는 방법 정리 [Android/iOS]](https://www.burndogfather.com/201)


이제 이 부분을 개선하기 위해 전 다시 가봅니당 총총...

+ Recent posts