[React Native] 모바일 서비스 개발 유형과 프로젝트에 사용한 이유

많은 사람들이 모바일 환경에서 여러 서비스를 이용하고 있습니다.

이에 맞춰 모바일 서비스 개발을 고려하게 되는데, 모바일 서비스 개발하는 방식에는 여러 가지가 존재합니다.

이번 포스트에서는 모바일 서비스를 개발하는 여러 유형들에 대해 특징, 장단점을 알아보고 비교해 보도록 하겠습니다.

 

또한, 제가 진행한 프로젝트에서 여러 방식들 중에서 React Native를 선택하여 개발하게 된 이유에 대해 작성하였습니다.

 

📘 모바일 서비스 개발 유형

모바일 환경에서의 서비스를 제공하기 위하여 네이티브 앱, 웹, 하이브리드 등 여러 방법으로 개발하여 서비스를 제공하고 있습니다.

개발하는 여러 방법들에 간략히 알아보도록 하겠습니다.

 

네이티브 앱

여러 서비스에서 제공하는 방법으로 스마트폰이나 태블릿에 어플리케이션을 설치하여 제공하는 서비스입니다.

Android 와 iOS 에 맞게 각각 제공되는 Google Play Store, Apple Store 등을 통하여 어플리케이션을 설치 한 이후에 서비스 이용이 가능합니다.

 

장점

• 모바일 기기에서 지원하는 여러 기능(카메라, 위치(GPS), 푸시 메시지 등)을 이용하기 용이합니다.
• 높은 퍼포먼스 효과를 얻을 수 있습니다. (고사양 게임 등)
• 네트워크가 연결되어 있지 않더라도 어플리케이션에 미리 저장된 데이터를 이용할 수 있습니다.

단점

• 각 운영체제에 맞는 스토어를 이용하여 어플리케이션 설치가 필요합니다.
• 또한, 업데이트가 필요한 경우에도 스토어를 이용한 업데이트가 필요합니다.
• 서비스 제공을 위해서는 스토어에 어플리케이션을 심사를 거쳐 등록하는 과정이 필요합니다.
• 운영체제에 따라 개발을 진행하는 기술이 다르고 운영체제와 버전에 따라서 각각 개발 진행이 필요합니다.iOS - Object-C 또는 Swift
• Android - Java 또는 Kotlin

 

모바일 웹

별도의 설치 과정을 거치지 않고 모바일 기기에 있는 브라우저를 이용하여 웹페이지의 서비스를 바로 이용할 수 있는 서비스입니다.

데스크톱의 웹페이지와 동일하게 이용할 수 있으며 모바일 환경의 디스플레이에 맞게 레이아웃이 구성되어 있습니다.

 

장점

• 스토어에서 별도의 설치 과정이 필요하지 않습니다.
• 반응형 웹으로 제작한다면 모바일, 태블릿, 웹 모두 서비스를 이용할 수 있습니다.
• 웹 서비스와 같이 JavaScript, HTML, CSS를 이용하여 개발을 진행합니다.
• 서비스의 수정사항이 발생하는 경우, 별도의 과정을 거치지 않고 적용이 가능합니다.

단점

• 모바일 기기에서 지원하는 여러 기능(카메라, 위치, 푸시 메시지 등)을 사용하는데 제한이 있습니다.
• 모바일의 브라우저를 이용한 접속이 필요합니다.
• 네트워크가 불가능하면 서비스를 이용할 수 없습니다.

 

모바일 웹앱

모바일 웹과 유사한 방식이나 구동 방식과 레이아웃이 네이티브 앱과 유사하게 보이도록 제작한 서비스입니다.

 

장점

• 스토어에서 별도의 설치 과정이 필요하지 않습니다.
• 네이티브 앱을 사용하는 것과 같은 유사한 경험을 제공합니다.
• 서비스의 수정사항이 발생하는 경우, 별도의 과정을 거치지 않고 적용이 가능합니다.

단점

• 모바일 기기에서 지원하는 여러 기능(카메라, 위치, 푸시 메시지 등)을 사용하는데 제한이 있습니다.
• 모바일의 브라우저를 이용한 접속이 필요합니다.
• 네트워크가 불가능하면 서비스를 이용할 수 없습니다.

 

하이브리드 앱

네이티브 앱과 모바일 웹(앱)을 적절히 혼합하여 사용하는 방식으로 네이티브 앱 안에서 웹페이지를 이용할 수 있습니다.

실시간으로 새로운 정보를 노출하거나 잦은 업데이트가 요구되는 서비스에 많이 사용됩니다.

 

장점

• 모바일 기기에서 제공하는 여러 기능(카메라, 위치, 푸시 메시지 등)을 이용할 수 있습니다.
• 웹페이지 관련 수정사항이 발생했을 때, 웹페이지만 수정하면 별도의 과정을 거치지 않고 Android와 iOS를 동시에 수정 가능합니다.
• 실시간으로 변하는 데이터를 제공하기 용이합니다.

단점

• 네이티브 앱과 같이 서비스 이용을 위해서 스토어에서 어플리케이션을 설치해야 합니다.
• 네트워크가 불가능하면 일부 서비스를 이용할 수 없습니다.

 

크로스 플랫폼 앱 (Cross Platform Framework)

최근에 주목을 받고 있는 개발 방식으로 하나의 코드로 Android와 ios 두 플랫폼을 동시에 개발할 수 있습니다.

기존의 네이티브 앱은 Android는 Java 또는 Kotlin을 이용하여 개발하고, ios는 Object-C 또는 Swift를 이용하여 운영체제에 맞게 각각 개발을 진행해야 했습니다.

그러나 크로스 플랫폼 앱 방식으로 개발하는 프레임워크는 대표적으로 React Native 와 Flutter가 있습니다.

 

장점

• 하나의 코드로 Android와 iOS를 동시에 개발 진행이 가능합니다.Flutter - Dart를 이용하여 개발할 수 있습니다.
• React Native - JavaScript를 이용하여 개발할 수 있습니다.
• 모바일 기기에서 제공하는 여러 기능(카메라, 위치, 푸시 메시지 등)을 이용할 수 있습니다.

단점

• Android와 iOS를 동시에 개발을 진행하다보니 일부 기능을 완전 동일하게 구현하기 어렵고, 디자인을 동일하기 어렵습니다.
• 네이티브 언어로 개발한 것이 아니기 때문에 퍼포먼스 이슈가 발생할 수 있습니다.

 

💡 React Native 사용하게 된 이유

Honey Pick(허니 픽) 프로젝트를 진행하면서 React Native를 처음 접하고 사용하게 되었습니다.

프로젝트 기획 당시 서비스의 가장 큰 핵심은 아래와 같았습니다.

1. 여러 쇼핑몰에 분포된 상품들을 한곳에 모아서 확인할 수 있다.
2. 사용자만의 주제를 갖고 여러 상품들을 보관할 수 있다.
3. 사용자가 애용하는 상품들을 다른 사람들과 공유할 수 있다.
4. 유명인 혹은 인플루언서, 감각이 좋은 일반인 등이 애용하는 상품 정보를 손쉽게 확인이 가능하다.

이러한 4가지의 핵심 서비스들을 잘 제공하기 위하여 모바일 환경을 고려하게 되었습니다.

 

쇼핑몰에 있는 상품 정보를 손쉽게 가져오고, 다른 사용자들과 상품들을 공유하기 위하여 빠르고 쉬운 접근성이 필요했습니다.

모바일 웹과 웹앱의 경우에는 서비스를 이용하기 위하여 매번 브라우저를 통해 서비스 이용이 가능하기 때문에 서비스 이용이 불편할 것으로 생각하였습니다.

네이티브 앱은 어플리케이션 설치가 필요하다는 단점이 있지만, 최초 1회만 설치하면 이후 접근성이 용이하기 때문에 네이티브 개발을 고려하게 되었습니다.

 

그러나 주어진 프로젝트 기간 내에 Android와 iOS 개발을 위하여 Java/Kotlin, Object-C/Swift를 단기간 내에 학습은 어려운 상황이기 때문에 크로스 플랫폼 앱을 고려하게 되었습니다.

Flutter를 이용하기 위해서는 Dart라는 새로운 언어 학습이 필요하였지만, React Native는 웹과 동일하게 JavaScript를 이용하고 React 와 유사하여 빠르게 습득이 가능하다고 판단하여 최종적으로 React Native를 사용하게 되었습니다.

 

📚 참고

• 공식문서 - React Native
• 브런치 포스트 - 어플을 만들기 전에 알아야 할 '앱 개발 유형 5가지'
• 브런치 포스트 - 모바일웹 / 웹앱 / 하이브리드앱 / 네이티브앱