크로스 플랫폼 정리

[boojongmin]

KMP, flutter, react native 비교.

KMP, flutter, react native로 어느정도 UI는 단일 언어로 desktop, web, android, ios등 다양한 플랫폼을 지원할 수 있게 되었다. 각각의 장단점에 대해서 정리해본다.

KMP(kotlin multi platform)

• 설명
  • jetbrain이 주력 개발사로 멀티 플랫폼으로 2023년 6월부터 자사의 IDE인 IntelliJ IDEA, PyCharm, WebStorm.... 에 KMP를 적용했다고 한다. 자사의 IDE를 위해 KMP에 진심이 느껴진다.(보통 크로스 플랫폼을 보면 뭔가 아쉬운게 있는데 젯브레인에서 만든 IDE를 직접 사용해보면 퀄리티가 좋아서 desktop application으로 사용하기에 부족함이 없어 보인다.)
  • kotlin으로 작성하면 각 플랫폼별로 빌드됨(각각 플랫폼별 빌드되는 결과물은 아래 참조)

• 플랫폼별 비교
  • android
    • kotlin으로 작성하고 빌드하면 aar(android archive)로 번들링
    • 기존의 android compose UI를 사용할 수 있다. 코틀린 안드로이드 개발자는 허들이 많이 줄어든다.
  • IOS
    • kotlin으로 작성하고 빌드하면 .framework로 번들링
    • android에서 사용한 compose ui를 이용해서 ui를 구성할 수 있다.
      이 문서를 작성 시점에는 alpha. 도전적인 회사는 KMP compose ui를 사용해서 android/ios를 배포한 것으로 보인다.
  • web
    • kotlin으로 작성하고 빌드하면 js로 번들링
    • compose ui로 화면을 작성할 수 있다(레퍼런스는 못봄)
• desktop
  • kotlin으로 작성하고 빌드하면 jar로 번들링(데스크탑에 jvm 필요)
  • 빌드된 jar 파일을 gradle plugin을 이용해서 OS별 실행 바이너리 빌드
• backend
  • 코프링 개발자는 자연스럽게 사용 가능. 이 경우 http를 통한 json 모델을 client, server 둘다 만들어야하는데 KMP를 사용하면 common으로 만들고 둘이 같이 사용할 수 있어 코프링과 KMP 적용시 상당히 유리함.

IOS/Android 개발자를 보유하거나 규모가 큰회사가 KMP를 사용하는 경우는 UI는 각각 네이티브로 작성하고 common 모듈을 KMP로 작성해서 android, ios 동시에 사용할 수 있게 작성함. 기존에 출시한 앱이 있고 새로 만들 수 없는 경우 도입해보면 좋아 보임. 뒤에 나올 react native와 flutter와 비교해보면 native와 연동에 대한 IDE지원에 따른 개발 편리성은 월등함.

볼만한 자료
그 여자 APP, 그 남자 SDK: Kotlin Multiplatform 적용기

읽을만한 자료

• compose multiplatform

flutter

• 설명

  • 구글이 메인 개발. opensource
  • 특징
    • skia 엔진이 화면을 그리는데 특징으로는 플랫폼별 컴포넌트를 사용하는 것이 아닌. 모든 요소를 엔진이 그리고 사용자 인터렉션을 관리한다. web으로 예를 들면 브라우저가 제공하는 input을 사용하는게 아니라 화면을 꽉채운 canvas를 두고 canvas로 input을 그린다.
      
    • 이러한 동작 덕분에 두가지 장점이 있는데
      1. 크로스플랫폼별로 동일한 화면을 제공할 수 있다.
      2. 게임등에 활용될 정도로 UI를 그리는데에 있어 성능이 매우 좋다.
    • 개발하려면 dart 언어를 알아야하며 컴포넌트 형태로 개발(dart는 js와 비슷하고 컴포넌트 개발도 react와 개념적으로 비슷해서 react 개발자라면 학습이 수월함)
    • dart는 js와 마찬가지로 싱글스레드 기반(성능을 생각해보면 skia에서는 멀티스레드를 사용할듯)
    • native 연동은 channel을 만들어서 통신
      • 
      • 불편한점은 primitive type이나 string만 제공해서 typesafe한 구조체 전달하기 불편함.
      • pigeon을 사용해서 code generate를 할 수 있는데 사용해보면 여전히 불편.
      • 최근 뉴스에 따르면 flutter에서 code generate를 해주는 것을 만들어서 앞으로는 편하게 할 수 있게 해줄 예정이라는데 관련 자료는 아직 못찾았다.
    • 개인적으로는 크로스 플랫폼중 UI 관련해서는 플러터의 방식이 가장 이상적이지 않나 싶다.(네이티브 연동은 KMP가 한수 위지만)
    • 앱스토어를 거치지 않고 업데이트를 할 수 있는 code push를 shorebird를 통해 사용 가능(유료)

• 읽을만한 자료

  • Windows용 Flutter를 소개합니다

RN(react native)

• 설명

  • 페이스북이 주로 개발
    
  • flutter가 화면을 직접 그리는것에 비해 RN은 각 네이티브의 컴포넌트를 사용한다. web인 경우 브라우저가 제공하는 input을 그대로 사용한다. 물론 인터렉션도 native와 연결.
    • 이로인해 flutter와 비교되는 단점으로는 flutter는 크로스 플랫폼별로 화면이 동일한데 플랫폼별로 RN은 일부 화면이 조금씩 틀어질 수 있다.
  • 처음에 react native를 보면 android, ios만 사용하는 것으로 오해할 수 있는데 web도 포함이다. 아래의 표를 보면 RN의 컴포넌트가 각 플랫폼별로 대응되는 컴포넌트들을 볼 수 있다.
    • flutter에 비하면 성능이 떨어진다. RN으로 만든 앱이 몇 년전에는 좀 느린감이 있었던거 같은데. 요새 스마트폰이 성능이 좋아지면서 어지간한 서비스에서는 특별히 문제 될 것으로 보이지 않는다.
    • 참고로 fabric 렌더링 엔진을 통해 성능 문제도 많이 개선되었다고함.
  • 앞선 dart처럼 js도 싱글 스레드 이벤트루프 방식
  • 기존 react 기반 web front 개발자는 쉽게 개발 가능(단 플렛폼별 대응 코드에 대한 노하우가 쌓여야함. 들어보면 많지는 않다고함.)
  • 네이티브와 연동은 flutter랑 큰차이는 없는데 js에서는 실제로는 object인데 generic으로 type을 줄 수 있어서 조금 편리하게 쓸 수 있는 트릭이 존재. 네이티브에서는 js의 object를 map으로 받을 수 있음.(flutter는 String으로 받아서 deserialize 필요)
  • nodejs 백엔드와 궁합이 매우 좋음(클라이언트 백엔드 다 할 수 있어서. 일이 많아지는 걸로 볼수도...)
  • react native 문서를 보면 new architecture를 소개함. flutter와 비슷하게 native와 연동에 코드 제너레이드등을 제공해서 typesafe하고 편리한 native 연동을 제공한다고 함.
  • 수많은 npm 모듈들과 code push는 RN의 최대 장점.
  • facebook, intargram, skype, shopify, 토스등 큰 회사에서 사용

• 볼만한 것

• 미친 생산성을 위한 React Native

• 달리는 토스 앱에 React Native 엔진 더하기

[boojongmin]

요새 드는 생각은 이제는 언어 하나가지고 만드는게 개발 비용을 줄일 수 있어서 새로 시작하는 곳은 고민해볼 필요가 있지 않나 싶다. 크로스플랫폼이란게 옛날 같지 않고 제품으로도 잘 나오고 있고..