1. Dalinaum (Leonaro YongUk Kim) @ Coupang Pay
Compose Multiplatform 101
A declarative framework for sharing UIs across Multiplatform with Kotlin.

2. Copyright © 2022 Coupang, Inc. All right reserved. 사용된 모든 쿠팡 상표와 쿠팡 로고 및 서비스 마크는 미국 및 기타 국가에 등록되
어 있는 Coupang, inc. 및/또는 그 계열사(통칭하여 “쿠팡”이라 함)의 재산입니다. 그 외 여기서 언급된 회사는 식별 목적으로만 언급된 것
으로, 쿠팡은 사용된 기업명이 동 회사의 등록 상표일 수 있으며 해당 회사가 단독으로 동 상표에 대한 독점적 소유권을 가진다는 것을 인정
합니다.
여기에 포함된 정보는 임직원으로서 저자 본인의 개인적 경험을 바탕으로 한 것으로 쿠팡의 견해나 의견을 나타내는 것이 아님을 밝혀 둡니
다. 쿠팡은 여기에 포함된 정보의 적절성이나 공정성, 정확성, 안정성에 대해 확인하지 않았으며, 그에 대한 어떠한 진술도 하지 않습니다.

3. 1. Introduction

5. Compose Multiplatform이란?
• Google의 Jetpack Compose에 기반한 JetBrains의 오픈소스 프로젝트
• Kotlin Multiplatform에 의존.
• Android는 Kotlin/JVM, ART (Android Runtime)에 기반하여 동작함.
• iOS는 Kotlin/Native 기술에 기반하여 네이티브 코드로 빌드.
• Desktop은 JVM (Java virtual machine)에 기반하여 동작. (조금 실망. 네이티브 아님)
• Web은 Kotlin/WASM 에 기반하여 동작.
• SKIKO를 그래픽 레이어로 사용.

6. 멀티 백엔드의 Kotlin
• 다양한 백엔드를 지원
• JVM 백엔드
• Java bytecode가 타겟
• JavaScript 백엔드
• Native 백엔드
• LLVM 기반 (LLVM bitcode)

7. Web Assembly
• 현대적인 웹 브라우저가 채택하고 있는 스
택 기반의 가상 머신.
• JVM은 스택 기반, 안드로이드 Dalvik은 레
지스터 기반의 가상머신.
• WAPM 사이트 등에서 간단한 파이썬 코드,
C 언어 코드등을 웹 브라우저에 실행해볼
수 있음.
• https://wapm.io/python/python
(module
(func (export "addTwo") (param i32 i32) (result i32)
local.get 0
local.get 1
i32.add))

10. 2. Kotlin Multiplatform

11. 11
매년 멀티플랫폼 라이브러리는 증가.

12. 12
코틀린 멀티플랫폼은 아직 베타 단계

13. 13
Kotlin Multiplatform 라이브러리

14. 14
Kotlin Multiplatform을 위해 필요한 것
Android Studio 멀티플랫폼 애플리케이션을 만들고 시물레이터나 하드웨어를 실행.

15. 15
Kotlin Multiplatform을 위해 필요한 것
Xcode
Xcode는 백그라운드에서 수행 됨.
Kotlin/Native가 의존하는 버전을 설치해야 함.

16. 16
Kotlin Multiplatform을 위해 필요한 것
Kotlin
Multiplatform
Mobile
안드로이드 스튜디오에서 Kotlin Multiplatform Mobile 플러그인 설치.

17. 17
Kotlin Multiplatform을 위해 필요한 것
JDK Android Studio에 의해 설치.
Kotlin Plugin Android Studio에 설치. 업데이트를 해서 버전을 최신화 해야.

18. 18
Kotlin Multiplatform을 위해 필요한 것
KDoctor KMP를 위해 필요한 환경이 있는지 점검하는 앱.

19. 19

20. 20
Kotlin Multiplatform을 위해 필요한 것
CocoaPods KMP은 SPM(SwiftPackageManager)를 지원하지 않음. (대체 왜!)

21. 21
Kotlin Multiplatform App으로 새 프로젝트를 만듬.

22. 22
패키지 네임은 안드로이드/자바 앱처럼 도메인의 역순으로 지정함.

23. 23
앱 네임
기본으로 androidApp, iosApp, shared로 앱 네임이 정해짐.
iOS framework distribution은 Regular로 Cocoapods -_-을 선택할 수 있음.

24. 24
androidApp 안드로이드 관련 코드는 androidApp 아래 위치함

25. 25
안드로이드는
Compose로 생성 됨

26. 26
iosApp iOS 관련 코드는 iOSApp에 위치함.

27. 27
iOS는 SwiftUI로
Compose 아닙니다.

28. 28

29. 29
버전 처리는 어떻게 했을까요?
expect와 actual
shared/src/
commonMain
iOS와 Android에서 모두 사용할 인터페이스를 expect 키워드로 만듬.

30. 30
버전 처리는 어떻게 했을까요?
expect와 actual
shared/src/
androidMain
Android의 구현을 actual 키워드를 붙여 구현

31. 31
버전 처리는 어떻게 했을까요?
expect와 actual
shared/src/
iOSMain
iOS의 구현을 actual 키워드를 붙여 구현

32. 32
KMP for iOS에서 만나게 되는 상황들
ObjC
현재 Kotlin은 ObjC만 지원해서 제너릭 클래스만 지원하고 인터페이스를 지원하지 못함. Abstract class
를 대신 사용해야 함. (제너릭의 대상으로 클래스만 가능한 것도 단점)
@HinddenFromObjC, @ObjcName 키워드를 적극적으로 활용하자.
@ObjcName(swiftName=“_”) API를 스위프트 답게 하기 위해 자주 사용할 것임.
plane.fuel(volume: .Gallons(gallons: 12.5)) 대신 plane.fuel(.Gallons(12.5))
장기적으로는 코트린이 Swift를 바로 타게팅할 것임. Swift를 ObjeC를 제외하고 바인드할 수 없었기에 발
생한 문제.
SourceKitten와 같은 도구들로 중간 코드를 생성하자.
라인 데마에칸이 겪은 어려움
Suspend
suspend는 콜백(completion handler)이 되고 콜백은 Swift에서 async로 호출 가능하지만 취소가 불
가능함.
Flow도 잘 지원되지 않음. Flow가 인터페이스이고 KMP을 잘지원하지 못함. (여러번의 캐스트가 필요)
KMP-NativeCoroutines 라이브러리를 활용해야 함.
https://github.com/rickclephas/KMP-NativeCoroutines
코틀린 예외가 스위프트 핸들러 전달 되지 않을 수 있어 @Throws 키워드로 Error를 지정해야 함.

33. 33
KMP for iOS에서 만나게 되는 상황들
CocoaPods
아직 공식적으로 SPM(Swift Package Manager)를 지원하지 않음. Gradle API 수준에서 정리된 이후
에 지원한다고 함. (언제?)
CocoaPods는 의존성을 소스로 가져와 같이 빌드에 사용하기에 매우 비효율적.
TouchLab의 라이브러리 KMMBridge를 사용합시다.
https://github.com/touchlab/KMMBridge
SPM을 대응하기 위해서는 Git 리포지토리와 스태틱 파일 저장소가 필요하다. (AWS?)
Frozen
Global Object는 기본으로 frozen. 접근할 수 있지만 변경할 수 없음.
@ThreadLocal을 붙이면 freeze 호출 안함. Atomic한 자료구조의 사용이 필요할 수 있다.
freeze() 확장 함수를 이용해 데이터를 얼릴 수 있고 풀 수는 없음.
Global 프로퍼티는 메인스레드에서만 볼 수 있음.

34. 34
KMP for iOS에서 만나게 되는 상황들
Memory
Management
스택 트레이스 디버깅 어렵고, 메모리 매니지먼트가 아직 안정적이지는 않음.
https://youtrack.jetbrains.com/issue/KT-55512
참고
Kotlin Multiplatform Mobile을 활용한 데마에칸 드라이버앱 개발 이야기
Kotlin/Multiplatform for iOS developers : state & future by Salomon Brys

35. 3. Compose for iOS

36. 36
Compose Multiplatform iOS Android Application
템플릿을 이용해서 시작해야
템플릿 https://github.com/JetBrains/compose-multiplatform-ios-android-template

37. 37
Compose for iOS를 위해 필요한 것
Android Studio Android 앱과 iOS 앱를 실행할 수 있는 개발 환경.
Xcode
Xcode는 백그라운드에서 수행 됨.
Kotlin/Native가 의존하는 버전을 설치해야 함.
Kotlin
Multiplatform
Mobile
안드로이드 스튜디오에서 Kotlin Multiplatform Mobile 플러그인 설치.
CocoaPods Compose for iOS도 SPM(SwiftPackageManager)를 지원하지 않음.

38. 38
Compose for iOS를 위해 필요한 것

39. 39
shared/src/
commonMain

40. 40
androidApp/
src/
commonMain

41. 41
iosApp/iosApp

42. 42
iosApp/iosApp

43. 43
Shared/
commonMain/
resources

44. 44
sharedApp/
src/iosMain

45. 45
처음 변경해보는 Compose for iOS
TextField 추가 TextField를 추가하는 데모를 합시다.

46. 4. Compose for Desktop

47. 47
Compose for Desktop의 특징
Cross-
Platform
멀티플랫폼이 아닌 크로스플랫폼으로 분류.
JVM이 타겟이고 JVM 덕에 여러 플랫폼에서 도는 것을 크로스플랫폼으로 설명.
SKIKO
SKIA의 코틀린 바인딩 SKIKO에 의해 렌더링. https://github.com/JetBrains/skiko
SKIA의 폰트 렌더링이 운영체제 마다 달라 스크린 샷 테스트를 하지 말자.
Compose
Multiplatform
IDE support
인텔리제이 아이디어나 안드로이드 스튜디오에 설치.
https://plugins.jetbrains.com/plugin/16541-compose-multiplatform-ide-support
IntelliJ IDEA 인텔리제이 아이디어 2020.3 이상에서 사용가능.

48. 48
Compose for Desktop의 특징
참고영상
You can do desktop too! By Victor Kropp
https://www.youtube.com/watch?v=Mgf_9kxM1BA
JDK 15 JDK11으로 프로젝트 생성 가능. 네이티브 배포 패키징을 위해서는 15 이상.

49. 49
Compose Multiplatform desktop application
New Project로 시작하기

50. 50

51. 51

52. 5. Compose for Web

53. 53
Compose for Web의 특징
WebAssembly
JavaScript를 쓰지 않고 WebAssembly로 실행.
Kotlin/WASM이 타겟.
Compose
HTML
HTML을 생성하는 Kotlin/JS의 라이브러리도 있음.
Compose for Web과 무관.
Compose
Multiplatform
IDE support
인텔리제이 아이디어나 안드로이드 스튜디오에 설치.
https://plugins.jetbrains.com/plugin/16541-compose-multiplatform-ide-support
IntelliJ IDEA 인텔리제이 아이디어 2020.3 이상에서 사용가능.

54. 54
WASM 예제 https://github.com/Kotlin/kotlin-wasm-examples

55. 55

56. 56

57. 6. Compose Multiplatform용 라이브러리들

58. 58

59. 59
Glide, Coil의 대안 Kamel
Kamel https://github.com/Kamel-Media/Kamel

60. 60
Retro
fi
t, HttpClient -> Ktor (1/3, commonMain)
Ktor https://ktor.io/

61. 61
Ktor (2/3, androidMain)

62. 62
Ktor (3/3, iosMain)

63. 63
GSON -> kotlinx.serialization (1/3)
kotlinx.serializ
ation
https://github.com/Kotlin/kotlinx.serialization

64. 64
kotlinx.serialization (2/3)

65. 65
kotlinx.serialization + Ktor content negotiation (3/3)

66. 66
Android ViewModel -> moko-mvvm
moko-mvvm https://github.com/icerockdev/moko-mvvm

67. 67
대안 라이브러리
preCompose https://github.com/Tlaster/PreCompose
Compose
ImageLoder
https://github.com/qdsfdhvh/compose-imageloader

68. Fin.