Kotlin
A concise multiplatform language developed by JetBrains
JetBrains Toolbox 사례 연구: 100만 사용자를 Kotlin 및 Compose Multiplatform으로 이동
JetBrains의 Toolbox 팀 리더인 Victor Kropp이 데스크톱에서 Kotlin과 Compose Multiplatform을 사용하게 된 사연을 전해 드립니다.
JetBrains Toolbox App은 JetBrains IDE를 사용하여 개발 작업을 수행하기 위한 단일 진입점으로, 도구 및 프로젝트를 위한 제어판 역할을 하며 JetBrains IDE를 빠르고 쉽게 설치 및 업데이트할 수 있게 해줍니다. 2015년 해커톤 프로젝트에서 시작된 이 애플리케이션은 현재 월 100만 명의 실 사용자에게 서비스를 제공하여 JetBrains 제품과 함께 작업 생산성을 높이는 데 도움을 주고 있습니다.
Toolbox 팀이 이 애플리케이션을 C++ 및 JavaScript에서 Kotlin 및 Compose Multiplatform으로 완벽하게 마이그레이션한 후, 코드 작업과 관리를 더 간편하게 수행하고 아티팩트 크기를 줄여 런타임 성능을 개선할 수 있었다는 이야기를 읽어보세요.
JetBrains의 Toolbox 팀을 이끄는 Victor Kropp로부터 직접 들으려면 Talking Kotlin #107을 확인하세요.
Victor씨, JetBrains Toolbox에서 사용하는 아키텍처와 기술 스택을 소개해줄 수 있나요?
Toolbox App은 일반적인 클라이언트-서버 애플리케이션입니다. 이 데스크톱 앱은 서버에서 사용 가능한 도구 목록을 요청하여 사용자에게 보여주고 필요할 경우 JetBrains 제품 업데이트를 다운로드합니다. 애플리케이션의 서버 측 부분은 처음부터 Kotlin으로 구현했습니다. 그러나 데스크톱 애플리케이션은 달랐습니다.
2015년에 JetBrains Toolbox용 데스크톱 앱을 빌드하기 시작했을 때 C++를 사용하여 비즈니스 로직을 구현하고 React 및 HTML/CSS/JS와 함께 Chromium Embedded Framework를 사용하여 사용자 인터페이스를 빌드했습니다. 이러한 선택을 할 당시에는 Kotlin 1.0이 아직 출시되지 않았고 Java 9와 함께 제공된 모듈식 JDK도 없었습니다. 고작 작은 도우미 애플리케이션을 위해 수백 메가바이트의 JRE(Java Runtime Environment)를 번들로 제공할 여유도 없었고 사용자들에게 환경을 수동으로 설정해야 하는 번거로움을 안겨주고 싶지도 않았습니다. 그래서 완전히 다른 접근방식을 선택해야 했죠.
2021년에 이르러 사용자 인터페이스를 React에서 Compose Multiplatform, 더 구체적으로는 Compose for Desktop으로 마이그레이션하여 이 데스크톱 애플리케이션을 100% Kotlin으로 만드는 마지막 단계를 완료했습니다.
해당 제품에서 Kotlin과 라이브러리를 어떻게 사용하시나요?
Kotlin으로 마이그레이션을 완료하면서 모든 곳에서 사용하고 있습니다. 사용자 인터페이스를 지원하는 Compose for Desktop 외에도 모든 비동기 작업에 kotlinx.coroutines를 정말 많이 사용합니다. Toolbox App은 수많은 JSON 객체를 처리하므로 이에 따라 저희도 kotlinx.serialization을 (역)직렬화에 사용합니다.
서버 측은 최대한 단순하게 유지됩니다. 사실 여러분이 생각하시는 것과는 달리 이것은 HTTP 서버가 아닙니다. 설치 가능한 도구에 대한 모든 정보와 설명(Toolbox에서는 ‘피드’라고 함)은 정적으로 생성되며 CDN에서 JSON 파일로 제공됩니다. 피드가 자주 변경되지는 않으므로 저희는 TeamCity에서 지속적 배포 파이프라인의 일부로 새 버전의 도구가 출시될 때만 이를 업데이트합니다. 제너레이터는 지원되는 각 제품이 빌드될 때마다 자동으로 트리거되는 ‘빌드 구성'(작업을 나타내는 TeamCity 명칭)으로 호출되는 간단한 명령줄 Kotlin 프로그램입니다. 두 번째 작업에서는 새로 생성된 모든 피드를 주기적으로 병합하고 오래된 피드를 폐기하고 유효성 검사를 수행합니다.
Toolbox 팀이 데스크톱용 애플리케이션 개발에 Kotlin을 사용하기로 결정한 이유는 무엇인가요?
Compose for Desktop으로 이전하기 전에는 Chromium Embedded Framework를 사용하여 Toolbox App용 사용자 인터페이스를 빌드했고 비즈니스 로직에 기본 C++를 사용하여 모든 주요 데스크톱 운영 체제를 쉽게 지원할 수 있었습니다. (그 후로 많은 것이 바뀌었고 2020년에는 모든 C++ 비즈니스 로직을 JVM에서 실행되는 Kotlin으로 옮기기로 결정했습니다.)
2015년 당시에는 프로젝트를 시작하는 데 좋은 선택이었습니다. JetBrains에서 빌드한 웹 UI 구성 요소 라이브러리인 Ring UI의 구성 요소를 재사용할 수 있었습니다. 또한 저희는 웹 개발과 React 작업에 이미 많은 경험을 가지고 있었습니다.
그러나 단점도 없지 않았습니다.
- Chromium Embedded Framework는 리소스 소비가 많은 것으로 잘 알려져 있습니다. 유휴 상태일 때도 JetBrains Toolbox는 최소 200MiB의 RAM을 사용하곤 했습니다. 또한 창이 보이지 않을 때 전체 프레임워크를 언로드할 수 없었습니다. 사용자가 앱과 상호 작용하려고 할 때 몇 초 정도 지연이 발생하기 때문입니다.
- 저희에게는 단일 데스크톱 애플리케이션 내부에 완전한 클라이언트-서버 아키텍처가 필요했습니다. 임베디드 웹 UI와 비즈니스 로직은 서로 다른 언어로 서로 다른 사람에 의해 작성되었습니다. 이로 인해 개발 프로세스가 복잡해졌고 애플리케이션 내에서 수 메가바이트의 JSON을 주고 받기 위한 리소스가 필요했으며 이미 가지고 있던 데이터의 (역)직렬화에 CPU 리소스가 소진되었습니다.
이러한 상황은 애플리케이션을 100% Kotlin으로 이전한 후 크게 개선되었습니다.
- Compose for Desktop은 리소스를 훨씬 적게 사용합니다. Compose 프레임워크는 JavaScript 구현에 비해 더 나은 런타임 성능을 제공하며 백그라운드에서 유휴 상태로 실행될 때 앱에서 사용하는 RAM을 크게 줄일 수 있었습니다.
- 단일 언어를 사용한다는 것은 모든 개발자가 컨텍스트를 전환하지 않고 처음부터 끝까지 기능을 개발할 수 있음을 의미합니다. 더 빠르고 실수도 적게 발생하며 개발자 간에 원활한 지식 공유가 가능합니다. 또한 전체 애플리케이션이 메모리의 데이터에 대해 동일한 표현을 사용하므로 추가 (역)직렬화 단계가 필요하지 않습니다.
Toolbox에 Kotlin을 도입한 경험에 대해 말씀해 주시겠어요?
저희 앞에는 해결해야 할 많은 과제가 있었습니다. 우선, 만들어진 지 5년이 된 코드베이스를 모든 기능과 문제점을 포함한 상태로 다른 스택으로 마이그레이션해야 했습니다. 애플리케이션의 핵심 요소가 의도대로 작동하도록 모든 유닛 테스트를 마이그레이션했습니다. 그러나 저희 애플리케이션에는 에코시스템마다 확연히 다른 외부 종속 요소가 많이 필요합니다. 어떤 부분은 이전 구현에서 작동하지 않다가 새 구현에서는 작동하기 시작했습니다. 저희가 아무 조치도 취하지 않았는데도 말이죠. 이유는 단순히 새로운 종속 요소가 이를 지원했기 때문입니다. 그러나 당연히 작동하리라 여겼던 다른 것들은 더 이상 작동하지 않았습니다. 공개 릴리스가 출시된 후에도 이러한 차이점을 파악하지 못한 경우도 있었습니다. 두 범주의 사례는 시스템 트레이(메뉴 모음) 아이콘 또는 프록시 서버 및 SSL 인증서와 같은 운영 체제 통합의 다양한 측면들입니다. 다른 한편으로, Toolbox의 ‘Projects‘(프로젝트) 탭에서 IntelliJ IDEA의 프로젝트 검색을 지원하는 코드를 재사용하거나 특정 엔터프라이즈 설정을 탐지하는 것과 같이 JetBrains의 다른 팀이 작성한 Kotlin 코드를 재사용할 수도 있습니다.
저희는 Compose for Desktop를 공식 발표 전부터 사용하기 시작했기 때문에 프레임워크에서 발생하는 문제를 가장 먼저 접하는 경우가 많았습니다. Compose for Desktop의 최초 사용자로서, 저희는 사용 시작과 동시에 모든 종류의 문제를 확인하고 Compose Multiplatform 팀의 동료에게 모든 문제를 보고했습니다. 그들은 많은 도움을 주었고 빠르게 대응했으며 모든 문제를 매우 신속하게 수정했습니다. 심지어 같은 날 수정 사항이 포함된 새 릴리스를 받는 경우도 있었습니다. 매우 인상적이었죠! 또한 Compose를 채택할 때, 그리고 프레임워크에서 어려움을 겪고 있을 때도 많은 도움을 주었습니다.
저희는 이전 설계를 완벽하게 복제할 수 있었습니다. Compose는 언뜻 보기에 HTML/CSS에 비해 더 적은 기본 레이아웃 프리미티브를 제공하는 것 같지만 간단한 수평 및 수직 스택(Compose의 행 및 열)만으로 이미 모든 요구사항의 99%가 충족된다는 사실을 금세 알게 되었습니다. 처음 시작할 때 Compose for Desktop에는 SVG 그래픽 지원과 같은 일부 기능이 여전히 누락되어 있었으나 Compose 팀의 동료들이 고맙게도 이러한 부족한 부분을 매우 신속하게 해결해주었습니다.
처음에는 애플리케이션 전체에서 Compose의 Material 구성 요소를 사용했습니다. 이 구성 요소는 매우 다각적으로 고려하여 만들어졌지만 터치 인터페이스에 중점을 두고 있습니다. 이 때문에 모든 요소에 많은 여백이 있고(손가락으로 쉽게 누를 수 있도록), 마우스오버 상태가 없으며(터치 디스플레이에는 이러한 동작이 없으므로), 매우 눈에 띄는 시각적 터치 피드백이 제공됩니다. 데스크톱에서는 마우스를 가져가면 구성 요소가 반응하고 클릭에 대한 시각적 피드백이 현재 요소에만 영향을 미치는(손가락으로 가려지지 않으므로) 등 상황이 많이 다릅니다. 이 때문에 저희는 Material 구성 요소를 데스크톱에서 더 잘 작동하는 자체 구성 요소로 교체하고 있습니다. 또한 향후에는 구성 요소 라이브러리를 오픈 소스로 공개할 계획이 있으므로 계속 지켜봐 주시기 바랍니다.
Compose for Desktop을 선택하기 전에 다른 UI 프레임워크를 고려하셨나요?
한 가지 대안은 애플리케이션을 완전한 기본 인터페이스로 변환하는 것이었지만, 이렇게 했다면 기능마다 3배는 더 많은 노력이 필요했을 겁니다. 저희는 크로스 플랫폼인 동시에 보기에도 좋으며 Kotlin과 잘 작동하는 프레임워크를 원했습니다.
Swing은 너무 오래되었고 JavaFX는 사용 저변이 아직 부족하다고 느꼈습니다. 이것이 당시에 발표된 지 얼마 되지 않았음에도 불구하고 Compose for Desktop을 선택한 이유입니다. 해당 팀에게 직접적 지원을 받고 피드백이 순환적으로 긴밀하게 이루어진다는 점도 큰 이유를 차지했죠.
Kotlin이 해당 제품에 가져온 가장 큰 이점은 무엇인가요?
일상 작업이 훨씬 간편해졌습니다. 이제 전체 애플리케이션에서 동일한 언어를 사용하므로, 팀의 개발자들이 이전보다 코드와 지식을 더 잘 공유할 수 있게 되었습니다. 또한 C++ 및 JavaScript 대신 Kotlin으로 작성하면서 일하는 재미가 훨씬 커졌습니다!
저희 독자들에게 하고 싶은 조언이나 권장 사항이 있나요?
기존 애플리케이션을 새 프레임워크로 전환하려고 한다면 마이그레이션의 복잡성을 얕잡아보면 안 됩니다. 거의 처음부터 새로운 애플리케이션을 작성하는 것과 다르지 않습니다! 기능뿐만 아니라 의도적이든 아니든 앱 동작의 사소한 뉘앙스까지도 놓치지 않고 다시 구현해야 하거든요.
저는 Compose for Desktop이 2021년에 크로스 플랫폼 데스크톱 애플리케이션을 만드는 주된 방법이 될 것이라고 굳게 믿습니다. 유사한 기술과 비교할 때 Kotlin은 JVM에서 검증된 에코시스템에 대한 액세스를 제공하고 Dart 및 Flutter보다 채택률이 훨씬 높으며 React/JS를 사용하는 Electron보다 훨씬 효율적입니다.
Compose for Desktop으로 첫 데스크톱 앱 빌드하기
Victor Kropp은 JetBrains Toolbox App의 팀장입니다.
게시물 원문 작성자
Subscribe to Kotlin Blog updates
