RURADIO
waanee.com
pwa 아마 몇년전 부터 이 웹기술에 대한 키워드가 웹 검색에서 자주 등장 했습니다. 이 기술이 뭔가 잘 살펴보니 기존 모바일앱과 같이 혼용되는 웹기술로 html, css, javascript 으로 모바일앱을 일부분 대채 할수 있다 라는 키워드로 소개 되었습니다
모바일앱 개발 하면 리액트네이티브, 플러터로 모바일앱 개발 하면 되지 어차피 푸시 기능이라던가 채팅기능은 이미 구현방법 이라던가 검색 하면 다 일반적으로 사용 하는 방법으로 다 나오니까 굳이 이게 필요한가 곰곰이 생각해 봤습니다
그런데 pwa 를 자세히 알아보니 사실 웹표준으로 모바일앱 개발 하는 기술내용은 꽤 오래전 부터 고안해 오던것 이였어요
지금은 고인 이지만 애플의 ceo 였던 스티브잡스가 모바일앱은 웹기술로 만들어져야 한다 라는 모티브로 앱스토어를 계획했지만 결국 네이티브어플 시장을 만들었지만 처음에는 이 pwa를 기반으로 스토어를 계획 했었다고 해요 그래서 아이폰의 사파리를 보면 개발자 모드로 보면 그 흔적이 남아 있고 이 기술을 적용 하기 위한 시도들을 많이 해 왔어요
그리고 구글에서는 이 pwa를 적극적으로 내세우며 공식적으로 개발문서도 공개 했었죠. 마이크로소프트도 이 pwa를 적극적으로 사용하려 하고 있고 예를 들어 xbox cloud gaming, pwabuilder 가 있습니다
이 pwa에는 서비스워커 라는 자바스크립트 를 사용 하고 있는데 이 서비스워커가 pc, 모바일 브라우저에서 백그라운드에서 동작 하도록 설계 해서 오프라인 기능 (일종의 브라우저 캐시 같은건데 앱의 초기 파일을 미리 저장하여 앱을 실행 시켰을때 웹서버에 접근 하지 않고 앱을 실행 하게 해준다), 백그라운드에서 돌아가기 때문에 푸시기능도 가능.
이것을 활용 하면 기존의 모바일앱에서의 전유물인 푸시기능을 웹앱에서 구현이 기능 하게 되었어요
이 푸시를 웹푸시라고도 부르는데 이 기술을 사용 하기 위해서는 서비스워커가 필수 이고 이 계념을 이해 해야 웹푸시를 구현 할 수 있었어요
이 웹푸시는 그동안 안드로이드 에서는 진작에 구현이 되어 사용 가능 했지만 아이폰에서는 웹푸시에 대한 기능을 계속 사파리에 탑재 하지 않았어요 해외 개발자 들도 애플이 웹푸시 지원에 대한 내용이 없다 보니 해외 웹개발자들도 빨리 이 기술이 아이폰에서도 되기를 하면서 기다리고 있던 끝에 애플이 2023년 4월 드디어 아이폰에서도 사파리에 웹푸시 기능을 지원 하기 시작 했어요 (아이폰의 경우 홈화면으로 추가 하기 하면 푸시알림을 구현 했으면 푸시를 허용할지 물어봄)
이렇게 되면 대표적인 모바일 안드로이드, 아이폰에서 웹푸시가 가능하고 pc에서도 웹푸시가 가능한 환경이 됬어요
아직 많은 개발자들이 사실 관심이 없으면 잘 모르는 내용일 수도 있어요 푸시기능이 있는 앱을 만드려면 그냥 리액트네이티브, 플러터로 모바일앱으로 개발 하면 되지 이렇게 ..
하지만 이제는 이런 환경이 만들어 졌고 개발자들은 선택만 하면 될거 같아요 프로젝트가 웹에 많이 적합하다면 pwa도 이제는 고려해서 개발 할 수 있겠다 이게 저의 생각 이에요
홈화면으로 추가만 하면 모바일앱과 유사한 기능을 구현 할 수 있게 되었고 앞으로 이런 앱들이 많이 나오지 않을까 생각해 봤어요 이게 되면 굳지 스토어에 등록 하지 않아도 웹주소로만 앱을 홍보 하고 사용 할 수 있도록 유도만 하면 되거든요 그리고 seo에 적합한 웹기술로 만들어 지다 보니 그냥 웹에서 검색하다가 pwa앱을 사용 할 수 있거든요
위 예시는 푸시알림 기능만 예시를 뒀지만 채팅기능이나 결재연동 부분도 전부 가능 합니다
그래서 사실 이제는 웹기반으로 앱 서비스를 만들어도 괜찮겠다 생각 했구요
하지만 pwa가 아직 안되는 부분은 하드웨어 접근이 아직 일부분 제한적이어서 네이티브로 만들어야 하는 부분이 아직 존재 합니다 프로젝트의 성향에 맞게 기술 선택을 하는게 바람직 합니다
그럼 위에서는 pwa으로도 일반적인 푸시기능 , 채팅 기능이 있는 앱은 구현이 가능 하다 가 일반적이고
그럼 어차피 pwa으로 개발하면 웹기술로 모바일앱으로 만들 수 있으니까 좋긴 한데 어차피 웹이니까 페이지가 많은 서비스의 경우 화면전환 이나 네비게이션 탭바는 어떻게 구현 하냐, 그럴수 있는데 사실 이 부분에 대해 대안 방법이 있습니다.
최근 하이브리드앱 프레임워크인 아이오닉, 프레임워크7 과 같은 프레임워크 들이 이 웹기반이고 기존 아이폰 안드로이드에서 사용하는것과 같은 화면전환, 뒤로가기 스와이프 등 기능이 웹기반으로 잘 구현 되어 있어서 이 프레임워크로 pwa를 만들면 기존 네이비브앱의 애니메이션을 그대로 지원 합니다
사용자에게 더 좋은 사용자 경험을 제공 해 줄 수 있더라구요 이런 프레임워크 에서 리액트, vue를 기반으로 개발 할 수도 있고 웹기반 이기 때문에 pwa와도 아주 잘 맞는 프레임워크임을 알게 되었습니다
현재 아이폰, 안드로이드 앱을 (간단한 푸시기능, 채팅이 있는 흔한 예약앱) 들이 리액트 네이티브, 플러터 로 개발이 되는것을 많이 봤는데 개발자 에게 또 다른 선택지가 생겨서 오히려 좋은거 같아요
만약 스토어 등록하지 않고 내가 만든 앱서비스로 빠르게 시장에 시험해 보고 싶다 그렇다면 위 기술 로도 가능 하게 되었으니까요
그럼 이 글 쓴 사람은 위 기술로 뭐 해보기는 했냐? 이렇게 물어 볼 수도 있을거 같아서 하나 소개해 봅니다
https://ent.waanee.com/radio
사실 제가 개인용도로 사용 하려고 만든 라디오앱인데 pwa으로 만들어 져 있어서 홈화면으로 추가만 하면 앱처럼 사용 할 수 있어요
이앱을 개발한 동기는 안드로이드 에서는 라디오앱이 전체채널이 잘 나오는데 아이폰에서는 이런 앱이 없더라구요 그래서 pwa으로 만들어 봤습니다
개발은 4일 걸려서 개발해 봤습니다. (잠자는거 아끼면서..)
편성표 링크를 클릭하면 화면전환 되는 애니메이션을 볼 수 있어요ㅎㅎ
이거 말고도 다른 프로젝트도 pwa으로 서비스 개발중 입니다.
본론으로 다시 돌아와서 pwa가 주는 이 기능으로 이제는 모바일앱을 개발 할 수 있다 라는걸 알려 드리고 싶었고 개발자 에게는 이제 모바일앱 을 개발 할때 하나의 선택지가 더 생겼다는걸 알려 드리고 싶었습니다
어차피 개발자 에게는 이런 기술들은 단지 도구일 뿐 이니까요 이 도구들을 어떻게 조합해서 어떤 제품을 어떻게 만들까 이게 개발자 역량 으로써 중요한 부분이 아닐까 생각 하면서
긴 글 다 읽어주셨다면 감사합니다.
다음 내용이 궁금하다면?
이미 회원이신가요?
2024년 3월 10일 오전 12:23
안녕하세요, 재밌는 글 공유해 주셔서 감사해요. pwa라는 개발 도구를 처음 들었는데요, 공유해주신 덕에 하나 더 알아갑니다. 앞으로도 유익한 개발자 도구들 많이 공유해 주세요!
�
... 더 보기십
... 더 보기