웹개발을 기반으로 앱개발 읊어보기 :: 둘 다 해본 개발자 😎

제가 할 수 있는 이야기가 무엇일까 생각해보았는데, 2023년 가을 “오늘의가든” 이라는 프로덕트를 런칭 해 본 경험을 기반으로 앱 개발을 해보면서 느낀 웹 개발과의 차이점을 주로 다루고 대부분의 서비스가 모바일 퍼스트가 된 현시점에서 앱을 웹뷰 / 네이티브 / 하이브리드로 구성하는 방법과 각자의 장단점을 살펴보려고 합니다.

 

https://yozm.wishket.com/magazine/detail/1969/ 이 블로그에서 글을 보고 마지막 도표의 글에 혹해서 글을 써야겠다고 생각하게 되었습니다. "2023년 2월 기준 전 세계 웹 사이트 트래픽의 60.06% 가 모바일 디바이스를 통해 유입되었습니다."

 

앱 개발은 웹 개발과 뭐가 다를까?

크게 “배포”와 “메모리 관리” 그리고 “UI 계층구조” 세가지 측면에서 웹 개발과 다르다고 느꼈습니다. 하나씩 읊어볼게요.

 

배포

앱 개발은 우선 배포 시 앱스토어를 통해야 한다는 점에서 자체적으로 배포하는 웹 개발과 차이가 있습니다. 이에 따라 플랫폼 공급자의 심사를 받아야해서 심사가 통과되지 못하여 추가 개발을 해야 하는 경우도 종종 있습니다.

 

더해서 앱은 하위 버전을 사용하는 유저가 있을 수 있기 때문에 API / 라이브러리 등을 사용할 때 하위버전에 대한 호환성을 반드시 고려해야 합니다. 서버와의 연관이 없는 앱 자체의 코드를 개선할 때도 해당되는 내용이죠. 웹의 경우에도 서버와 동시에 배포가 될 수 없기 때문에 호환성을 고려하지 않으면 순단이 발생할 수도 있어, 서버의 영향을 받는 부분의 개선은 모든 클라이언트에 전체적으로 적용되는 특징이네요.

 

메모리 관리

웹은 대부분의 요소를 네트워크를 통해 받아오는 반면, 앱에서는 빠른 반응 / 사용 성이 중요하기 때문에 이미지 등의 에셋 요소들을 앱 자체에 포함하는 경우가 많습니다. 일부 앱에서는 오프라인 상태일 때도 보여야 하는 요소들이 있고, 들어가자마자 표시되어야 하는 홈 화면이나 게임 캐릭터 같은 경우는 네트워크를 통해 받아오게 되면 사용자마다 속도의 차이가 있기 때문에 앱 내부에 넣어두는 것이 일반적입니다. 이럴 경우 화질과 용량을 적절히 조정해서 최선의 지점을 찾아야 합니다.

 

라이브러리의 경우도 마찬가지입니다. 불필요한 라이브러리를 최소한으로 줄이고 리소스를 지연해서 로드 하거나 코드를 압축 / 번들링 하는 과정을 거쳐야 하는데, 이는 웹 개발에도 공통적으로 해당되는 부분입니다.

 

앱의 용량이 커지게 되면 다운로드 설치 시간 증가 및 저장공간이 커지며 앱 성능이 저하되어 사용자 이탈을 일으킬 수 있고 나아가 앱 스토어의 제한을 받을 수도 있어서 유의해야 합니다.

 

UI 계층구조

웹에서는 브라우저의 History api를 사용해서 페이지 간의 전환을 처리하는 반면, 앱에서는 새로운 뷰를 여는 방식으로 페이지 전환을 처리합니다. 이에 따라 웹에서는 history 객체나 브라우저의 저장소에 데이터를 저장해서 화면 간에 공유하지만, 앱에서는 상태 관리는 코드 내부의 클래스 및 데이터 저장소를 이용하거나 SharedPreferences (AOS) 같은 스토리지를 통해 이루어집니다.

 

웹에서는 각각의 탭마다 메모리를 따로 관리할수도 있는 반면 (브라우저 엔진 종류마다 다름) 앱은 새로운 뷰를 열 때마다 스택을 유지해야 하기 때문에 이미 열려진 뷰를 재사용 하거나 필요없는 뷰의 메모리를 해제하여 메모리를 관리하는 것이 중요합니다.

 

그럼 사용자가 뷰를 계속 열면 메모리 관리를 못해서 앱이 꺼지나요? 네! 이럴 때는 사용자에게 메모리에 대한 경고를 주는 식으로 해결할 수 있으나 대부분의 앱이 갑자기 꺼지는 현상을 보여 사용자 경험이 안 좋아지곤 합니다.

 

앱에서는 뷰가 열리고 닫히는 구조이기 때문에 페이지 전환을 위한 애니메이션 효과도 고려해야 합니다. iOS나 AOS에서 기본적으로 적용되는 페이지 전환 애니메이션이 있는데요. 이걸 웹으로 구현한 곳이 당근마켓 입니다 ㅋㅋㅋ (라이브러리) 앱의 stack 구조와 애니메이션까지 모두 웹으로 구현 했는데요, 이를 활용하면 앱 내부에서는 하나의 웹뷰를 띄운 뷰를 가지고 모든 페이지 이동을 구현할 수 있습니다. 레이턴시가 중요하지 않은 페이지들이면 앱의 리소스를 크게 들이지 않고 이런 방식으로 구현해도 좋겠네요! 다만 이런 애니메이션 및 스택 구조 기반의 라이브러리가 확실히 구현되어 있다는 가정 하에..! 별개로 당근마켓은 오픈소스가 꽤 많네요.. 멋있따.. 🙊

https://www.bitcot.com/ui-ux-animations-and-libraries-to-enhance-ios-app/ 
여기 앱에서의 애니메이션 종류가 알아듣기 좋게 모션 이미지로 나타나있어요 :) 

 

이런 stack 구조로 쌓이는 뷰 때문에 앱 개발은 좋은 점도 나쁜 점도 있습니다. 페이지 간의 이동에서 유지해야 하는 요소가 없습니다. 현재 페이지를 다른 페이지로 바꾸는 웹과 달리 새로운 페이지를 위에 하나 띄우는 것이기 때문에 스크롤 복귀 등의 요소를 신경쓸 필요가 없게 됩니다.

 

하지만 안 좋은 점은 이렇게 띄워진 뷰들 간의 상태를 통일 시키기 쉽지 않다는 점입니다. 리스트 페이지인 A뷰에서 아이템을 하나 클릭해서 디테일 페이지 B 뷰가 떠있다고 해봅시다. B 뷰에서 누른 좋아요가 B 뷰를 닫았을 때 A 뷰에도 반영되어 있어야 합니다. 이를 해결하는 방식은 2가지가 있는데 이벤트 핸들러 형식의 함수를 등록해두어 B 뷰에서 좋아요 버튼을 누르면 핸들러 함수가 실행되면서 A 뷰에 반영되게 할 수도 있고, B 뷰를 닫고 A 뷰로 돌아올 때 A 뷰가 focus 되면 다시 서버로부터 데이터를 가져오는 식으로 구현할 수도 있습니다.

 

앱 개발을 하는 방법

앱을 만드는 방법 중 크게 4가지를 가져와봤습니다.

 

하이브리드 앱 개발

React Native, Flutter 와 같이 앱 개발을 위한 언어가 아닌 다른 언어로 앱을 개발할 수 있도록 만든 프레임워크를 이용하여 앱을 개발하는 방식입니다. iOS, AOS 앱을 따로 개발할 필요없이 크로스 플랫폼이 호환되는 것에서 장점이 있고 웹 코드를 재사용 할 수 있다는 점에서 웹 서비스를 어차피 제공해야 하는 서비스에서 사용하기 좋습니다. 다만 네이티브에서 만큼의 그래픽 처리와 반응성이 나오지 않는다는 점 / GPS, 카메라, 센서 와 같은 하드웨어와 연관된 기능을 구현하기 어렵다는 점 / 푸시알림 기능을 구현하기 어렵다는 점이 단점으로 꼽혔습니다. (사용 가능한 라이브러리 검색해보니 요새는 다 가능할 것 같긴 하네요.)

 

하이브리드 앱은 앱 개발과 다른 언어를 사용하기는 하지만 결국 네이티브 언어로 패키징되어 스토어에 배포된다는 점에서 개발을 제외한 배포부터의 과정은 네이티브 앱 개발과 비슷합니다.

 

네이티브 앱 개발

원래 iOS 는 Swift 나 Objective-C 를 이용해서 개발되며, AOS 개발에는 Java 와 Kotlin이 주로 사용됩니다. 이런 앱 언어를 이용하여 정석으로 개발하는 방법을 네이티브 앱 개발이라고 일컫습니다. 앱이 할 수 있는 모든 기능을 문제 없이 이용할 수 있지만 AOS, IOS 앱을 별도로 구현해야 한다는 점에서 리소스 상의 단점이 있습니다.

 

앱 내의 웹뷰 개발

네이티브 앱으로 만들어진 앱 내부에 뷰를 띄우고 그 안에 브라우저를 띄우는 방식의 웹뷰를 활용하는 방식도 있습니다. 별도 심사가 필요없는 웹 배포 만으로 앱에 변화를 줄 수 있어 실시간으로 대응하기 좋아 빠른 실험을 해야 할 때 주로 사용되며, 외부의 서드파티 기능을 사용해야 할 때 해당 기능을 코드로 받을 필요 없는 장점 덕분에 웹뷰를 주로 사용합니다.

 

하지만 앱과의 사용성 연동 (e.g. 위에서 언급 했던 좋아요 처리 등) 이나 앱의 기능을 사용해야 하는 경우 (e.g. 앱바에 있는 공유하기 버튼 클릭 / 앱바 구성 등) 앱이 웹뷰에서 따로 처리해주어야 하는 것들이 많아지기 때문에 개발자 리소스가 2배로 들 수 있습니다. 더해서 보안 상의 문제가 있을 수 있다는 점과 매년 업데이트되는 애플과 구글의 OS 업데이트를 웹뷰로는 따라가지 못한다는 점은 웹뷰의 단점입니다.

 

PWA (Progressive Web App)

PWA는 웹 기술을 사용하여 만들어지는 웹 어플리케이션으로 브라우저를 사용하는 어떤 플랫폼에서나 동작합니다. 오프라인에 앱을 띄우거나 푸시 알림을 보내거나 하드웨어와의 연동이 필요한 기능의 구현 등 네이티브 앱과 유사한 경험을 만들 수 있습니다. 일반적인 앱과 비슷하게 특정 링크를 통해 사용자가 웹앱을 설치할 수 있고 메인화면에 설치됩니다. 설치된 앱을 클릭하면 브라우저로 구현된 웹앱이 열리게 됩니다.

따라서 위의 방식들과 다르게 PWA 는 앱스토어의 승인 없이 설치할 수 있다는 점에서 자유롭습니다. 하지만 웹 링크를 통해 설치해야 해서 사용자가 앱을 발견하기 어렵고 오래된 운영체제나 iOS 의 safari 브라우저에서 일부 문제가 있을 수 있습니다.

 

참고

https://www.youtube.com/watch?v=LbU5E1pWfks 9:23 너무 공감돼서 웃김 ㅋㅋㅋ

https://ko.wikipedia.org/wiki/프로그레시브_웹_애플리케이션

https://yozm.wishket.com/magazine/detail/1969/