Jetpack Compose for Desktop: 마일스톤 2 릴리스

최신 선언형 UI 프레임워크의 최초 공개된 Jetpack Compose for Desktop 마일스톤 1은 지난 2020년 11월에 출시되었습니다. 저희 팀은 Kotlin 커뮤니티에서 Compose for Desktop에 보여주신 큰 관심을 기쁘게 생각합니다. 사용자들이 Compose for Desktop을 활용해 Android 앱을 데스크톱으로 가져오고, 인기 애플리케이션의 사용자 인터페이스를 다시 구현하고, 완전히 새로운 환경을 구축하는 모습을 지켜보는 것은 매우 고무적인 경험이었습니다.

Compose for Desktop 랜딩 페이지 방문하기

그 이후로 다음 버전 출시를 위해 많은 노력을 기울여 왔습니다. 그리고 더 나은 개발 환경과 상호 운용성을 제공하는 데 초점을 맞춘 Compose for Desktop 마일스톤 2를 2020년 12월에 공개 하였습니다. 마일스톤 2는 새로운 프로젝트 마법사를 지원하며 기타 운영체제 및 빌드 시스템과 Compose for Desktop의 호환성을 개선했습니다. 또한 코드 재사용 기능을 도입하고 다양한 버그도 수정했습니다.

이 게시물을 통해 이번 릴리스의 주요 사항을 소개해 드리고자 합니다. 자세한 내용이 궁금하시다면, 여기에서 전체 변경 로그를 확인하실 수 있습니다.

프로젝트 마법사로 빠른 시작

IntelliJ IDEA 2020.3에 프로젝트 마법사 템플릿이 추가되어 뛰어난 사용자 인터페이스를 더욱 빠르게 빌드할 수 있습니다. Compose for Desktop 애플리케이션 제작이 그 어느 때보다 간편해졌습니다. File | New | Project…에서 새 프로젝트를 생성할 경우 Kotlin 마법사의 “Compose for Desktop" 카테고리에서 이용 가능한 템플릿 하나를 선택하고 Gradle 구성을 직접 작성할 필요 없이 애플리케이션 빌드를 시작할 수 있습니다!

호환성 개선

Compose for Desktop 마일스톤 2에서 macOS 10.13 및 10.14를 지원합니다.(10.15 이상은 M1에서 이미 지원). 이전에는 해당 운영 체제 버전을 대상으로 설정하기 위해선, 사용자가 Compose for Desktop에서 사용되는 그래픽 라이브러리인 Skiko의 사용자 지정 빌드를 생성해야 했습니다. 또한 Gradle 최신 버전에 대한 지원이 추가되어 Gradle 6.6 및 6.7이 지원됩니다.

Compose for Desktop을 차세대 Mac에서 사용할 수도 있습니다. 이를 통해 빌드한 애플리케이션은 Apple Silicon에서 기본적으로 작동합니다! 이제 Rosetta 2를 통한 동적 2진 변환 과정 없이도 M1 등의 Apple ARM 기반 하드웨어에서 애플리케이션을 바로 실행할 수 있습니다.

Swing 애플리케이션에서 Compose for Desktop 임베딩

간편한 상호 운용성은 Jetpack Compose 및 Compose for Desktop의 핵심적인 가치 중 하나입니다. 마일스톤 2에는 ComposePanel이라는 새로운 메커니즘이 추가되어 사용자가 Compose UI를 JFrame 같은 Swing 기반 컨테이너에 원활하게 추가할 수 있습니다. 따라서 기존 사용자 인터페이스를 완전히 교체할 필요 없이 Swing 기반 환경에서 Compose for Desktop을 실험적으로 사용해보고 점진적으로 도입할 수 있습니다.

아래 예시에서 ComposePanel 실제 사용 사례를 보여주는 짧은 데모를 확인할 수 있습니다. ComposePanel은 상위 JFrame 레이아웃을 따르며 Swing 및 Compose 모두에서 구현된 컨트롤을 통해 상태를 수정할 수 있습니다.

 
val leftClicks = mutableStateOf(0)
val rightClicks = mutableStateOf(0)

fun main() { 
	val window = JFrame() 
	val composePanel = ComposePanel() 
	with(window) { 
		defaultCloseOperation = WindowConstants.EXIT_ON_CLOSE
		title = "SwingComposeWindow"
		contentPane.add(actionButton("Left Swing") { leftClicks.value++ }, BorderLayout.WEST) 
		contentPane.add(actionButton("Right Swing") { rightClicks.value++ }, BorderLayout.EAST)
		contentPane.add(composePanel, BorderLayout.CENTER)
		composePanel.setContent { ComposeContent() }
		setSize(800, 600) 
		isVisible = true 
	}

fun actionButton(text: String, action: (() -> Unit)? = null): JButton = 
	JButton(text).apply { addActionListener { action?.invoke() } }

@Composable
fun ComposeContent() { 
	Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) { 
	Row { 
		Counter("Left", leftClicks) 
		Spacer(modifier = Modifier.width(25.dp))
		Counter("Right", rightClicks) 
		} 
	} 
}

@Composable
fun Counter(text: String, counter: MutableState<Int>) { 
// . . . 

자세한 내용을 알아보시려면 저장소에서 Swing 기반 애플리케이션에 Compose for Desktop 통합과 관련한 튜토리얼을 확인해 주세요.

현재 반대 작업(Swing 컴포넌트를 Compose for Desktop 구성에 추가)은 지원되지 않습니다.

Android XML 아이콘 지원

마일스톤 2부터 Compose for Desktop에서 Android XML 기반 벡터 이미지(벡터 드로어블(vector drawables)이라 지칭)에 대한 지원을 제공합니다. 따라서 해당 이미지를 조정하지 않고도 데스크톱 애플리케이션에서 바로 렌더링할 수 있습니다. 또한 벡터 드로어블을 Android 및 데스크톱 모두를 대상으로 하는 크로스 플랫폼 애플리케이션에서 일반 리소스로 공유하는 것도 가능합니다.

 
import androidx.compose.desktop.Window 
import androidx.compose.foundation.Image 
import androidx.compose.foundation.layout.fillMaxSize 
import androidx.compose.ui.Modifier 
import androidx.compose.ui.res.vectorXmlResource

fun main() { 
	Window { 
		Image( 
			imageVector = vectorXmlResource("images/compose.xml"), 
			modifier = Modifier.fillMaxSize() 
		) 
	} 
} 

샘플 XML 이미지 파일을 비롯한 Android XML 아이콘을 Compose for Desktop에서 사용하는 방법에 대한 최신 정보를 확인하시려면 이미지 및 인앱 아이콘 조작 튜토리얼의 관련 섹션을 참조하세요.

사전 릴리스 노트

이번 릴리스는 Compose for Desktop의 두 번째 마일스톤 릴리스이며 저희 팀은 사용자 여러분께 최고의 경험을 선사하고자 노력해 왔습니다. 안정적인 첫 릴리스가 나오기 전에 Compose for Desktop에서 제공하는 일부 API가 계속해서 변경될 수 있다는 점도 염두에 두세요. 안정적인 첫 상용 릴리스를 빠르게 개발하고 있으며 이를 위해서는 여러분의 의견이 무엇보다 중요합니다.

피드백을 남기고 토론에 참여하세요!

마일스톤 릴리스는 안정적인 릴리스가 나오기까지 중요한 문제를 해결하거나 추가 기능을 포함할 수 있는 기회를 주기 때문에 여러분의 피드백이 필요한 가장 중요한 시기입니다. Compose for Desktop으로 작업하면서 문제가 발생하거나 아직 데스크톱 전용 API로 개발되지 않은 사용 사례가 있으면 프로젝트의 이슈 트래커를 통해 저희와 공유해 주세요.

다른 개발자 및 팀원들과 대화를 원하실 경우 Kotlin Slack에 참여하여 논의해 보시길 바랍니다. #compose-desktop에서는 Compose for Desktop에 대해 토론할 수 있고, #compose에서는 Android Compose 및 Jetpack Compose와 관련된 일반적인 주제를 놓고 토론할 수 있습니다.

Compose for Desktop을 활용해 멋진 사용자 인터페이스를 계속 빌드해 주세요!

이 게시물은 Nikolay Igotti가 작성한 Jetpack Compose for Desktop: Milestone 2 Released를 번역한 글입니다.