spa와 pwa의 차이는 뭘까요?

최근 납품 막바지가 되어 회의를 하는데, 개발자 경력이 있는 클라이언트 분이 spa 개념을 이해(받아들이지)를 못하고 계시더라구요. 그래서 여러분들도 이를 해깔려 하실 분들이 있을 것 같아서 정리해봅니다.

 

우리는 지금까지 하이브리드앱 이라고 하면 그누보드로 서버에 모바일웹사이트를 만들고 웹뷰로 웹사이트를 감싸서 앱을 만드는 방식으로 주로 생각하셨을 것입니다.  (앱을 실행하면 서버의 웹페이지를 보여주는 방식). 그래서 그누보드로 웹페이지만들고 하이브리드앱용 웹뷰로 감싸는 프로그램이 cordova 라고 생각하고 계실텐데, 이게 좀처럼 잘 되지 않는다? 정도로 알고, 이부분은 해보고 안되면 외주를 맡기면 되나? 정도

 

일반적으로 웹페이지는 서버에서 구동되는 형태가 기본 전제였기 때문에

이 생각이 굳어져서 페러다임 수준으로 서비스 구조를 바라보는 시각이 형성되어 있는 것 같습니다.

웹페이지는 웹서버에서 쏴 준다.

 

그래서 spa라고 설명을 해도 서버에서 구동하는 방식으로 생각하시는 경향이 있습니다.

 

초창기에 하이브리드앱 폰갭이나 cordova 개발 관련 책자를 읽어 보아도 spa라는 개념이 나오긴 하는데 이게 서버에서 만들라는건지 클라이언트에서 만들라는건지 명확히 구분되어 있지 않고 모호하게 뒤석여 있었습니다.

거기에다 네이버와 같은 개발자 포럼에서 올린 동영상들을 보면 사이트는 웹에 만들고 자체적으로 웹뷰를 만들어서 쓴다는

방식을 설명하는 영상들이 돌면서 더욱 굳어 진 것 같습니다.

 

하긴 저도 spa라는 개념이 있는데, pwa는 뭐지 같은거 아닌가란 생각을 한적도 있긴하네요.

 

이젠 이글을 보시고 spa 구현 방식을 이해하셨으면 합니다

기준은 이렇습니다.

html, js, css 파일이 서버측에 있느냐 또는 클라이언트 앱안에 같이 포함되어 있느냐!

 

우리의 상식과는 다르게 거의 대부분의 하이브리드앱 구현 프레임워크? 라이브러리 들은

기본적으로 ionic이나 cordova, capacitor 은 html, js, css 파일을 앱에 포함시켜서 패키징하는 방식을 채택하고 있습니다.

하이브리드앱에서 spa라고 하면, html, js, css 를 앱안에 패키징하는 방식이다 라고 생각하셔야 합니다.

이러한 방식을 사용하는 이유는 장점이 매우 명확하기 때문입니다.

 

html, js, css를 앱으로 포함시켜서 패키징하면 얻게 되는 장점은  앱을 다운로드 할때 html, js, css 미리 다운로드해서 앱실행시 로딩 지연이 적게돼는 장점을 갖게 됩니다  그래서 하이브리드앱을 spa 방식으로 개발하게 되면 네이티브와 거의 동급으로 퍼포먼스를 낼 수 있다는 점에서 spa  앱페이킹 방식을 선호하고 이를 기본 가정으로 하이브리드앱 커뮤니티들이 발전을 하게 됩니다.

 

그런데 우리는 그누보드로 모바일 웹을 만들고 웹뷰를 감싸는 방식사용해왔죠?

거의 모든 하이브리드앱 커뮤니티들에서는 이방식을 사용안한지 오래인데, 대안이 없다보니 계속사용되어진 것 같습니다.

웹뷰 페키징 해주시는 분이 돈을 많이 번다는 소문도 들었습니다.

 

앞서 말했듯이 이방식은 성능이 좋지 않아서 기본 가정에서 폐기된 방식입니다.

하이브리드앱 vs 네이티브 이렇게 비교하면서 성능 논할때 웹뷰방식은 성능이 워낙 떨어지다보니 포함되지 않습니다.

그래서 ionic, cordova, capacitor 의 플러그인들은 모두 spa 방식을 기본 가정합니다.

웹뷰 방식은 속도도 느릴뿐만 아니라 하이브리드앱 커뮤니티의 도움을 받기 힘든 구조적 한계에 노출되어

나중에 큰 낭패를 보게됩니다. 하이브리드앱 커뮤니티에서 보안 이슈대응을 공동으로 하면서 플러그인 들이 업그레이드되고

관련 방식들이 공유가 되어 거의 실시간으로 보안 이슈가 대응이 되는데,

개인들이 임의로 만든 웹뷰 방식은  만들어준 그 개인이나 회사가 보안이슈에 대응하는

네이티브 코드를 충분히 이해하고 수정을 할 수 있어야 보안 이슈에 대응이 가능하게 됩니다.

게다가 하이브리드앱 특징상 안드로이드, 아이폰 공동으로 대응해야합니다. 거의 대응 못한다고 보시면 됩니다.

그래서 서비스가 중단되는 사태까지 발생할 수 있습니다.

 

개인의 컴퓨터 능력에 의존해야하기 때문에 문제가 심각해질 수 있습니다.

만약 회사라면, 그 원 개발자가 퇴사라도 한다면, 대응 불능 상태가 되고 맙니다.

그래서 커뮤니티에서 권고하고 지지하는 방식인 spa방식으로 개발을 해야합니다.

 

음~ pwa 이야기로 살짝넘거가면,

spa 개념이 일반 웹서버에 적용된게, pwa가 된것 같습니다.

react, vue 등이 이러한 경향을 견인하면서, 물론 일반웹에 라이브러리 수준으로 특정 부분만 사용하는 경우도 있지만

독자적일 라우팅 방식으로 사용하는 경우는 pwa로 구동되게 됩니다.

 

 하이브리드앱 spa라고 하면에서 html,js,css 가 앱에 포함되어 패키딩되는 방식으로 주로 회자되고

pwa 는 웹에서 spa를 구현하는 방식으로  이해하는게 맞지 않나란 생각을 해봅니다.

 

sveltekit으로 개발하고 빌드하면, build 라는 폴더가 생성되는데, 이 폴더를 앱에 넣으면 spa 하이브리드앱이 되고

서버에 올려서 실행하면 pwa가 됩니다.

 

 

하이브리드앱은 adaptor-static 으로 빌드하는데, 앱을 실행하면 build 폴더 안의 index.html 파일이 실행되는 방식으로  앱이 구동되는 것이고

 

웹서버는 서버에 올려서 adaptor-node로 빌드하고,  build 폴더 안의 index.js 파일을 node ./build/index.js 로 실행해서 node 웹서버를 구동하는 것입니다. 

html 안에 js를 땡겨와서 실행하는 방식이 아니라 node 웹서버를 별도로 구동하는 방식이니 이점을 해깔리면 안됩니다.
이부분을 또 따로 정리해서 이야기 해봐야겠네요.