모바일 개발 기술 소개

목차

• 개요
• 기술 개발의 흐름

개요

모바일 개발 기술의 진화를 소개하고 Flutter의 등장 배경에 대해 설명합니다.

네이티브 개발 및 크로스 플랫폼 기술

네이티브 개발

네이티브 어플리케이션은 해당 플랫폼에서 지원하는 개발도구 언어를 활용해 시스템에서 제공하는 SDK API를 직접 호출하는 모바일 플랫폼에 특화된 어플리케이션을 의미합니다.

대표적인 예

• 안드로이드 | 언어 : 자바,코틀린
• IOS | 언어 : Objective-C , Swift

주요 이점

• 모든 플랫폼 기능에 대한 엑세스
• 빠른 속도, 고성능, 복잡한 애니메이션 및 그림을 구현할 수 있어 사용자 경험이 좋음

주요 단점

• 플랫폼이 구체적이고(IOS,안드로이드) 개발 비용이 높으며 플랫폼마다 다른 코드를 유지해야 하며 그에 따른 인건비 증가
• 새로운 기능 업데이트가 있을 때만 버전을 출시할 수 있다.

동적으로 변하는 컨텐츠에 따라가지 못하는 문제가 있엇고, 비즈니스 요구 사항에 따른 비용 증가 문제로 크로스 플랫폼 프레임 워크가 등장하였습니다.

크로스 플랫폼 기술 소개

• HTML5 + Native(Cordova, Ionic, WeChat 애플릿)
• JavaScript + Native rendering(React Native, Weex)
• Self-drawn UI + Native(Mobile Qt,Flutter)

하이브리드 기술 소개

HTML5 + Native

HTML5를 활용해 앱에서 동적으로 변경되어야 하는 콘텐츠를 구현하고 Webview를 활용해 로드하는 방식입니다.

주요 장점

• HTML5 로 작성되어 언제든 동적으로 변경 가능
• IOS/Android 두 플랫폼을 동시에 개발 가능

주요 단점

• Native 기능의 경우 WebView JavaScript Bridge를 활용해 사용이 가능하다.
• 성능 경험이 좋지 않다.

React Native , Weex

Flutter 또한 React , React Native의 원리에서 영감을 받았기에 많은 아이디어가 동일 하므로 React 원리에 대한 깊은 이해도가 필요합니다.

1. 돔 트리,제어 트리
   DOM - 확장 가능한 마크업 언어를 다루기 위해 W3C 조직에서 권장하는 표준 프로그래밍 인터페이스
   XML 또는 HTML을 표현하고 조작하기 위한 표준 인터페이스 입니다.
   웹에선 DOM Tree을 통해 사용자 인터페이스를 제어하지만 모바일의 경우 Control tree 를 활용하여 XML을 제어하는 방식으로 되어있습니다.
   둘은 같은 개념이면서 다른 느낌으로 볼 수 있습니다.

2. 반응형 프로그래밍
   리액트의 주 특징

• 상태 변화에 따라 화면을 새로 그린다
• 상태 변화에 따라 변경된 화면만 새로 그린다.(Diff 알고리즘)

3. 네이티브에 반응
   React , React Native의 차이점은 가상 돔이 매핑되는 대상입니다.
   React - 브라우저 DOM Tree
   React Native - JavaScriptCore를 통해 Control Tree 에 매핑 됩니다.

JavaScriptCore: RN에서 두가지 주요 기능이 있는 js 인터프리터 입니다.

• Js용 런타임 환경을 제공
• js와 native 사이를 이어주는 브릿지 기능은 JsBridge와 동일하며 IOS의 경우 JsBridge 구현 대부분이 JsCore를 기반으로 합니다.

매핑되는 과정

• 레이아웃 메시지 전달, 가상 Dom 레이아웃 정보를 네이티브에 전달
• 레이아웃 정보에 따라 해당 네이티브 컨트롤을 통해 네이티브로 렌더링

주요 장점

• 웹 개발 기술 스택을 사용하며 커뮤니티가 거대하고 개발 비용이 상대적으로 낮습니다.
• 네이티브 렌더링, H5에 비해 성능이 훨씬 향상 되었습니다.
• 동적으로 변화하고,핫 리로드 기능을 지원합니다

주요 단점

• 렌더링은 js와 native 간의 통신이 필요하며, 드래그와 같은 일부 시나리오에서는 빈번한 통신으로 재밍이 발생할 수 있습니다.
• js는 실행중에 해석 및 실행되어야 하는 스크립팅 언어 이므로 실행 효율성 및 컴파일된 언어에 비해 시작 속도가 느린점이 있습니다.
• 렌더링은 기본 컨트롤에 의존하기 때문에 다른 플랫폼의 컨트롤을 별도로 유지 관리 해야하므로 시스템이 업데이트 될때 커뮤니티 컨트롤이 지연되는 문제로인해 , 사용자 지정 기본 렌더링 구성 요소가 필요한 경우 높은 개발 유지 관리 비용이 발생할 수 있습니다.

Self-drawn UI + Native (QT 모바일)

시스템의 기본 컨트롤에 의존하지 않고 다른 플랫폼에서 통합 인터페이스로 렌더링 엔진을 구현하여 UI를 그려 UI일관성을 달성할 수 있도록 하는 것 입니다.

주요 장점 (QT 모바일)

• 고성능 자체 드로우 엔진이 시스템 API를 직접 호출하여 그리기때문에 성능이 네이티브에 가깝습니다
• 동일한 렌더링 엔진으로 일관성있는 UI, 유지 관리면에서 효율적이다.

주요 단점 (QT 모바일)

• 역동성 부족, UI 드로우 성능을 보장하기 위해 AOT모드를 사용하여 릴리즈 패키지를 컴파일 하기 때문에 앱이 릴리즈 된 후에는 변경이 불가능하다. (ReactNative CodePush)
• 개발 생산성이 떨어진다.정적 언어인 C++는 UI개발에서 JS 같은 동적 언어보다 유연성이 떨어진다. 메모리 할당을 수동으로 관리하며 JS및 Java에있는 GC메커니즘이 없습니다.

플러터의 탄생

플러터는 QT 모바일 처럼 자체 드로잉 엔진을 구현하고 레이아웃, 드로잉 시스템 또한 자체적인 부분을 사용합니다.

주요 장점

• 고성능 자체 드로우 엔진을 사용해 성능이 좋다
• 커뮤니티가 활성화 되어있어 개발하는데 어려움이 없다
• 개발 효율성이 좋다. 핫 리로드 지원/Material UI를 지원하기에 공통적인 컴포넌트 작성에 시간이 덜든다

주요 단점

• 동적인 앱 변화를 공식적으로 지원하지 않는다
  (Flutter의 릴리즈의 경우 기본적으로 Dart AOT 모드로 컴파일되어 있으므로 동적화를 지원하지 않지만 Dart에는 모든 동적화를 지원하는 JIT 또는 스냅샷 실행 모드도 있다. )