Compose용 도구

Android 스튜디오에 새로운 Jetpack Compose 전용 기능이 많이 추가되었습니다. 코드 중심 접근 방식을 수용하면서도 디자인 인터페이스와 코드 편집기 중 하나를 선택할 필요 없이 개발자 생산성을 개선합니다.

뷰 기반 UI와 Jetpack Compose의 근본적인 차이점은 Compose는 컴포저블을 렌더링하는 데 View를 사용하지 않는다는 것입니다. 이러한 아키텍처 접근 방식의 결과로 Android 스튜디오는 에뮬레이터를 열거나 기기에 연결하지 않고도 Jetpack Compose를 위한 확장된 기능을 제공합니다. Android 뷰와 비교할 때, 이렇게 하면 개발자가 UI 디자인을 더 빠르고 반복적으로 구현할 수 있습니다.

Jetpack Compose에 Android 스튜디오 관련 기능을 사용 설정하려면 애플리케이션 build.gradle(.kts) 파일에 이러한 종속 항목을 추가해야 합니다. 재료명세서 (BOM)를 사용하거나 종속 항목을 개별적으로 정의할 수 있습니다.

재료명세서

  val composeBom = platform("androidx.compose:compose-bom:2024.06.00")
  implementation(composeBom)

  debugImplementation("androidx.compose.ui:ui-tooling")
  implementation("androidx.compose.ui:ui-tooling-preview")

개별

  debugImplementation("androidx.compose.ui:ui-tooling:1.6.8")
  implementation("androidx.compose.ui:ui-tooling-preview:1.6.8")

설계

디자인 사양에 맞게 구성요소, 디자인 시스템, 화면을 만듭니다.
미리보기 매개변수 다중 미리보기
@Preview 주석을 사용하면 컴포저블을 미리 볼 수 있습니다. 애셋을 미리 보고 정리하고 상호작용하는 방법을 알아보세요.
자세히 알아보기
애니메이션 미리보기
Android 스튜디오에서는 Animation Preview 창을 사용하여 애니메이션을 디자인하고 검사할 수 있습니다. 이를 통해 애니메이션을 프레임별로 미리 보고 필요한 동작에 부합하는지 확인할 수 있습니다.
자세히 알아보기

개발

컨텍스트 전환을 줄여 UI를 빌드하고 실행 중인 애플리케이션의 테스트를 가속화합니다.
실시간 편집
실시간 편집을 사용하고 변경사항을 적용하여 전체 빌드를 피하고 개발 프로세스를 가속화하는 방법을 알아보세요.
자세히 알아보기
라이브 템플릿 여백 아이콘
Android 스튜디오 편집기 창에서 기능을 사용하여 생산성을 높이는 방법을 알아보세요.
자세히 알아보기

디버그

Compose UI를 디버그하여 앱을 파악합니다. 레이아웃, 리컴포지션, 컴포지션 추적을 분석하여 앱의 UI 성능을 개선하는 방법을 자세히 알아보세요.
재구성 횟수 시맨틱
에뮬레이터 또는 실제 기기에서 Compose 레이아웃을 검사하는 방법을 알아보세요.
자세히 알아보기
시스템 추적
컴포지션 추적을 사용하여 시스템 트레이스에서 구성 가능한 함수를 추적합니다.
자세히 알아보기

추가 도구

Relay는 디자이너와 개발자 간에 Android UI 구성요소를 즉시 핸드오프합니다. 디자이너는 Figma용 Relay 플러그인을 사용하여 레이아웃, 스타일 지정, 동적 콘텐츠, 상호작용 동작 관련 정보 등 개발자가 사용할 UI 구성요소를 주석 처리하고 패키징할 수 있습니다.
자세히 알아보기

최신 뉴스 및 동영상