하이브리드앱과 크로스 플렛폼 앱 비교

앱개발을 하게 되며 다양한 방식으로 앱을 개발할 수 있다는 것을 알게되었고, 그 종류와 장단점 느낀점을 정리해보고자 한다.

살펴볼 방식

하이브리드앱, 크로스플렛폼앱, 네이티브앱 ( 추가로 모바일웹  )

1. 하이브리드 앱

네이티브 앱과 웹 앱의 기능을 결합한 것(웹 앱: 흔히 사용하는 웹 브라우저를 통해 이용하는 것을 말한다.)

장점

• 단일 코드 기반으로 iOS나 Android에서 동일한 웹페이지를 사용할 수 있으므로 비교적 개발 비용 및 시간이 적게 소요된다.
• 모든 플랫폼에서 일관된 사용자 경험을 제공할 수 있으며 앱 용량도 비교적 가볍다.
• 웹이라 빠르고 편리하게 앱을 유지보수 가능하다.
• 마켓에 등록이 가능하며, 배포 후에도 웹만 연결되어 있다면 수정 및 보완이 가능하다.
• 네이티브 API와 브라우저 API를 이용한 다양한 개발 가능하다.

단점

• 그래픽 집약적 앱의 성능이 떨어지며 네이티브 앱에 비해 동적인 요소의 구현이 어렵다.
• 네트워크 환경과 웹사이트의 용량에 따라 속도가 느려질 수 있다.
• 네이티브 앱보다 UI를 구성하는 디자인 부분 취약하다.

2. 크로스 플렛폼 앱

둘 이상 플랫폼에서 돌아가는 앱 만드는것이라 할 수 있다. (한 가지의 개발 언어와 프레임워크로 iOS나 Android 양쪽 앱스토어에 출시할 수 있는 개발 방식)

- 리액트 네이티브가 여기에 해당한다.

장점

• 코드를 하나만 작성하면 이를 2개 플랫폼에서 모두 사용할 수 있으므로 시간을 굉장히 줄일 수 있고, 리액트 개발자라면 리액트 네이티브로Dart 개발자라면 flutter web 빠르게 모바일 애플리케이션을 개발할 수 도 있다.
• 하나의 코드로 작성하기 때문에 유지보수도 쉽다.

단점

• 네이티브가 아닌 만큼 퍼포먼스를 100% 끌어올릴 수 없고 변환하는 작업이 필요하다.

3. 네이티브앱

모바일 기기에 최적화 되어있는 스마트폰 앱으로 Android, IOS코드를 별도로 사용한다. 즉 안드로이드 IOS 각가의 플렛포 에서만 최적하되어있는 앱

장점

• 높은 사양의 그래픽과 성능을 자랑하면서도 구동 속도가 빠르며, 인터넷이 연결되어 있지 않아도 사용이 가능하다. 만약 퍼포먼스에 집중하는 서비스라면 네이티브는 좋은 선택이 될 수 있다. 예를 들어 내 얼굴에 3D 마스크를 입히는 앱을 들 수 있다.
• 네이티브 앱은 핸드폰에서 사용하기 최적화된 언어(iOS는 swift언어 / android는 Java언어)를 사용하기 때문에 핸드폰의 기능을 핸들링(진동을 조정, 카메라 기능을 핸들링)할 수 있고, 여러 가지 api를 제약 없이 사용할 수 있다.
• 기기에 저장된 주소록, 파일 등의 고유 정보를 사용할 수 있으며 카메라 등의 하드웨어 또한 제어가 가능하다.

단점

• 만약 2개의 플랫폼(iOS, android)에 앱을 출시하고 싶다면,iOS는 swift / xcode그리고 android는 java / kotlin / android studio 언어를 모두 배워야 한다. 그래서 시간과 에너지가 2배로 필요하다.

번외 ) 모바일웹

모바일 웹 사이트로 앱은 아니지만, 모바일 친화적으로 작업한 컨텐츠여서 추가로 알아보고자 한다. (가장 쉽게 모바일 친화적인 컨텐츠를 제작할 수 있는것같다.)

• 사용자의 스마트폰에 설치되어 있는 인터넷 브라우저를 기반으로 작동한다.
• 웹에서 사용하는 언어로 개발하기 때문에 비용과 시간적 면에서 저렴하다.
• HTML, CSS, JSP, PHP, 닷넷 등의 대표적인 웹 개발 언어를 사용한다.
• 설치를 하지 않고 안드로이드와 IOS의 구분 없이 인터넷 브라우저만 있으면 접속이 가능하다.
• 온라인 상태에서 URL 을 통해 접속하는 앱이기 때문에 인터넷의 상태에 따라 접속 장애가 생길 수 있다.
• 마켓에 등록이 불가능하고, 스마트폰에 설치하지 않기 때문에 네이티브 앱 에 비해 속도가 느리다.

---

실제 실무에서 작업해본 방식은 하이브리드 앱과 모바일웹, 최근에 작업하게된 크로스 플렛폼앱인 리액트 네이티브로 작업한 앱이다.

각각의 장단점이 다르지만,

하이브리드 앱은 프론트 입장으로서 디자이너의 요구사항을 맞추는것이 수월했다.
웹앱이다보니 css에서 제공하는 모든 속성들을 다 사용할 수 있었고, 각각의 태그들이 가진 스타일을 개발자 도구로 확인하기가 쉬웠기 때문이다. 
그러나, 프론트 혼자서는 앱의 기능을 사용할 수는 없는 방식이라, 앱개발자들과 협업하여 작업해야하는 내용도 꽤나 있었다. (카메라라던가 바코드 인식이라던가.,,) 물론 브릿지 세팅하면 다 작업할 수는 있으나 앱기능 작업을 해야할때마다 공조해야하는 수고로움이 있었다.
추가로 하이브리드앱은 항상 IOS가 문제다.  style이라던가, click문제라던가,,,배포 후 큐에이 과정에서 해당 이슈들을 찾아야하는 수고로움이 있다. ( 작업 진행할때는 웹에서 하기때문에 실 기기에 입혔을때와 다르다. )

리액트 네이티브로 작업한 크로스 플렛폼 앱같은 경우엔, 아직 작업을 많이해본것이 아니라 확언할 순 없으나 느끼는 장점과 단점은 다음과 같았다.

하이브리드앱과 달리 네이티브로 컨트롤할 수 있는 앱기능들이 많아 프론트 개발자 혼자 앱기능 개발이 수월한것이 큰 장점이라고 느꼈다.
단점..?은 우리는 디자인된데로 작업을 해야하는데 스타일 확인, 테스트로 스타일 줘보는 것이 불편하였다. (또 안되는 속성들도 많다)

그렇다면, 다음에 앱개발을 할때 어떤 방식으로 할것같은가? 라는 질문을 스스로 던져보았을때 나의 대답은,. 리액트 네이티브로 개발할것같다.

( 물론 코틀린 스위프트를 하지못해 하이브리드는 선택권이 없을 수 있지만 ^^.. ) 리액트 네이티브는 리액트 개발자로서 러닝커브는 있어도 훨씬 앱개발하기에 최적화된 방식이라고 느껴졌기때문이다.