웹용 Jetpack Compose는 웹 개발을 위한 새로운 UI 프레임워크입니다.

지난 몇 년 동안 크로스 플랫폼 프로그램 개발에 대한 큰 추진이 있었습니다. React 및 Flutter와 같은 프레임워크는 개발자가 Android, iOS, 데스크톱은 물론 웹에서도 단일 코드베이스를 공유할 수 있도록 만들어졌습니다. 가장 인기 있는 IDE와 Kotlin 프로그래밍 언어를 개발한 회사인 JetBrains도 크로스 플랫폼 개발을 위해 노력해 왔습니다. 처음에는 Kotlin Multiplatform을 사용했지만 최근에는 Jetpack Compose를 사용했습니다.

얼마 전 JetBrains는 Google의 Android용 선언적 디자인 프레임워크인 Jetpack Compose를 포팅했습니다. 데스크톱으로. 이를 통해 Java의 JVM을 기반으로 하는 크로스 플랫폼 데스크탑 개발이 가능해졌습니다. Jetpack Compose를 사용하면 하나의 코드베이스에서 Android, macOS, Windows, Linux용 앱을 모두 만들 수 있습니다. 그러나 iOS 외에도 Compose에는 웹이라는 꽤 큰 플랫폼이 없습니다.

하지만 곧 바뀔 것입니다. JetBrains는 출시된 웹용 Jetpack Compose의 기술 프리뷰라고 부르는 것입니다.

이제 Technology Preview는 기본적으로 사전 알파의 멋진 이름입니다. 웹용 작성은 프로덕션에 사용할 준비가 거의 되어 있지 않습니다. 튜토리얼도 없고 문서도 거의 없으며 API도 거의 완성되지 않았습니다. 그렇다면 지금까지 Compose for Web이 무엇을 제공하는지 살펴보겠습니다.

현재 버전에서는 웹용 Compose에서 개발할 수 있는 두 가지 방법이 있습니다. 즉, DOM API를 사용하거나 열 또는 텍스트와 같은 기존 Compose 위젯을 사용하는 것입니다.

DOM API를 사용하는 경우 다음과 같은 다양한 HTML 요소를 나타내는 API 이름을 갖게 됩니다.

피, ㅏ, 등등. 하지만 Compose와 기존 Kotlin JS의 가장 큰 차이점은 상태 기반 선언적 디자인을 사용할 수 있다는 것입니다. 이 옵션은 고전적인 웹 개발과 완전한 선언적 UI 개발 사이를 연결하는 일종의 다리처럼 보입니다. 레이아웃을 만드는 것 외에도 Compose for Web을 사용하면 동적 상태 기반 스타일시트를 만들 수도 있습니다.

두 번째 옵션은 Android 및 Compose 개발자에게 더 친숙해 보일 것입니다. 웹 UI를 구축하는 데 사용할 수 있는 열, 행, 슬라이더와 같은 미리 만들어진 구성 요소가 있습니다. 현재로서는 완벽하지 않으며 스타일과 옵션이 완전히 구현되지 않았습니다. 하지만 최소한 JetBrains가 Compose for Web을 위해 무엇을 준비하고 있는지에 대한 아이디어를 제공합니다.

전반적으로 현재로서는 Compose for Web에 대한 기능이 많지 않습니다. 아직 그 상태야 매우 초기. 하지만 이는 미래에 많은 의미를 가질 수 있습니다. 개인적으로 저는 Android 개발자로서 브라우저 기반 레이아웃 프레임워크에 접근하는 데 어려움을 겪었습니다. 기본 HTML과 CSS는 투박할 수 있으며 React와 Flutter 구문은 여전히 ​​HTML 디자인을 기반으로 합니다.

웹 디자인 원칙을 기반으로 하지 않지만 모든 기능을 갖춘 크로스 플랫폼 디자인 언어는 매우 흥미롭습니다. Jetpack Compose는 아직 갈 길이 멀지만 JetBrains가 계획한 것은 UI 디자인의 미래에 많은 의미를 가질 수 있습니다.

웹용 작성에 대해 자세히 알아보려면 JetBrains의 발표를 확인하세요. 현재 구현을 시험해보고 싶다면, GitHub 저장소로 가보세요.