모바일웹 / 웹앱 / 하이브리드앱 / 네이티브앱
[코드스테이츠 PMB 9기] 개발하는 방식
4가지 대표 개발 방식
IT 서비스를 개발한다면 어떤 방식으로 진행할지를 결정하게 됩니다. 네 가지 대표 개발 방식이 있습니다.
모바일 웹(Mobile Web) : 모바일 화면에 맞게 구성한 웹
웹 앱(Web App) : 모바일 웹과 비슷하지만 구동방식이 앱처럼 보이게 한 앱
하이브리드 앱(Hybrid App) : 웹 앱과 네이티브 앱의 기능을 결합하여 개발된 앱
네이티브 앱(Native App) : 모바일 기기에 최적화된 네이티브 언어로 개발된 앱
개발 방식 비교개발 방식은 현재 보유 자원(자금, 인력, 시간)과 개발 목적 그리고 사업단계에 따라 결정됩니다. 얼마나 빠르게 개발해야 하는지, 개발 인력이 있는지, 개발 목적은 무엇인지를 고민하면 개발 방식을 선택하는데 도움이 됩니다.
모바일 웹과 웹 앱을 비교해 보겠습니다. 둘은 웹 개발과 동일하게 만들어지기 때문에 모바일 운영체제 별로 개발할 필요가 없어 시간과 비용 측면에서 효율적입니다. 하지만 접속하기 위해선 브라우저를 이용해야 하기 때문에 직접 검색하거나 URL을 통해야 합니다. 이처럼 여러 단계를 거치고, 직접 입력해야 하는 노력이 필요다하는 점에서 접근성이 좋지 않습니다.
브라우저로 접속한 네이버 웹 앱풀 브라우저 방식 vs 단일 페이지 방식
모바일 웹과 웹 앱은 비슷한 점이 많지만, 실행 방법에 아래와 같은 차이가 있습니다.
• 모바일 웹 ➜ 풀 브라우저 방식 (Full Browsing)
• 웹 앱 ➜ 단일 페이지 방식 (SPA, Single Page Application)
풀 브라우저 방식(Full Browsing)은 화면 일부분이 변경될 때 화면 전체 내용을 서버에서 새로 받아오는 방식입니다. 따라서 페이지 리로드(Page Reload) 할 경우 속도가 느리다는 단점이 있습니다. 또한 모바일 기기 특성상 이동 중에 서버 접속 장애가 발생할 위험이 있습니다. 도식화 하면 아래 그림 중 상단의 'Traditional Page Lifecycle'에 가깝습니다.
단일 페이지 방식(SPA)은 브라우저에 최초 한 번 페이지 전체를 받아오고, 화면 일부분이 변경, 요청될 때 해당 부분만 Ajax를 통해 데이터를 바인딩 하는 방식입니다. 아래 그림의 하단 부분 'SPA Lifecycle' 입니다.
Traditional Page Lifecycle(위) / SPA Lifecycle(아래)용어
• Ajax : 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법 중 하나. 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있음
• 데이터 바인딩 : 자바스크립트 웹 애플리케이션의 복잡해지면서 쉬운 코드 관리와 유지보수를 위해 화면에 보이는 데이터와 브라우저 메모리에 있는 데이터를 일치시키는 기법
다시 돌아가면, 모바일 웹은 풀 브라우저 방식으로 실행 속도가 느린 반면, 웹 앱은 단일 페이지 방식으로 실행 속도가 빠릅니다.
점차 모바일 환경이 발달하면서 PC기반으로 개발된 웹페이지들이 모바일 환경으로 적응하게 되었고, 이 과정에서 모바일 최적화를 위한 다양한 방법들이 등장했습니다. 반응형과 적응형도 이 과정에서 등장했습니다. 한 개의 URL로 다양한 디바이스 사이즈에 맞게 변동하는 반응형 웹(Responsive Web)과 각 디바이스 별 템플릿을 만들어 접근한 디바이스에 따라 알맞는 템플릿을 제공하는 적응형 웹(Adaptive Web)이 대표적입니다.
네이티브 앱과 하이브리드 앱모바일 웹과 웹 앱보다 모바일 환경에 최적화된 개발 방법이 있습니다. 바로, 하이브리드와 네이티브 입니다. 하이브리드 개발은 웹 기반으로 운영체제에 따른 패키징을 달리하여 iOS와 안드로이드에서 실행하는 방법입니다. 하나의 코드로 개발하기 때문에 네이티브 앱에 비해 비용적, 시간적으로 효율적이지만, 그만큼 네이티브 앱보다 기능이 제한적이고, 속도가 느립니다.
네이티브 개발은 각 운영체제(iOS, 안드로이드)에서 제공하는 SDK로 만드는 방법입니다. 각 운영체제에 최적화된 개발이 가능하여 기능과 속도 측면에서도 하이브리드 앱보다 우수합니다. 하지만 개발 범위가 넓고, 많기 때문에 비용이 높고, 시간이 오래 걸립니다.
최근에는 크로스 플랫폼 프레임워크(Cross Platform Framework)가 주목받고 있습니다. 대표적인 크로스 플랫폼 프레임워크는 구글이 만든 Flutter와 페이스북이 만든 React Native가 있습니다. 하나의 소스코드로 iOS, 안드로이드 운영체제 모두에 배포할 수 있다는 특징 때문에 스타트업이 많이 활용하고 있습니다. 두 운영체제 언어를 각각 다루기 보다 두 운영체제를 한 번에 커버할 수 있어 효율적이기 때문입니다.
페이스북 React Native개발방식을 선택한다면
앞서 논의한 내용을 기반으로 개발 방식을 선택한다면, 몇 가지 기준을 고려해야 합니다. 이 외에도 팀과 상황에 따라 다양한 기준이 존재합니다.
목적 : 무엇을 위해 만드는 것인가. 정말 개발이 필요한가. 어느 정도의 완성도가 필요한가
시간 : 얼마만큼의 시간이 주어져 있는가(시간은 비용과도 직접적으로 연관됨)
인력 : 내부 개발인력이 있는가. 유지・보수는 어떻게 할 계획인가. 이후 개발은 어떻게 할 것인가
개발 방식에 대한 고민은 솔루션 이전 또는 함께 시작됩니다. 솔루션 실현 가능성에 대한 고민에는 개발 내용까지 포함되기 때문입니다. 주어진 예산과 인력, 시간에 따라 개발 계획이 수정될 수 있습니다. 가장 중요한 것은 주어진 자원으로 최고의 솔루션을 만드는 것 입니다. 따라서 솔루션을 개발에 한정짓기 보다 고객이 겪는 문제를 정확하게 파악했는지, 솔루션에 대한 고객의 반응은 어떠한 지 검증하는데 초점을 맞추어야 합니다. 궁극적으로 개발을 통해 서비스를 만들겠지만, 현재 프로덕트가 없는 상황에서 반드시 개발을 통해 솔루션을 만들 필요는 없습니다.
