Jetpack XR SDK로 Androidify를 XR에 도입

9분 길이

22 10월 2025년

Dereck Bridie

개발자 관계팀 엔지니어

Android XR로 구동되는Samsung Galaxy XR이 출시되었습니다! 이 블로그 게시물은 Android XR Spotlight Week의 일부로, Android XR용 앱을 학습, 빌드, 준비하는 데 도움이 되도록 설계된 리소스(블로그 게시물, 동영상, 샘플 코드 등)를 제공합니다.

Android XR로 구동되는 최초의 기기인 Samsung Galaxy XR이 출시되었습니다. 이제 Play 스토어에서 좋아하는 앱을 3차원이라는 완전히 새로운 차원에서 즐길 수 있습니다.

3차원은 앱을 위한 공간도 충분한 넓은 공간입니다. 앱에 적합한 도구를 사용하여 지금 바로 시작하세요. 예를 들어 Jetpack XR SDK를 사용하여 Kotlin 및 Compose와 같은 최신 Android 개발 도구를 사용하여 몰입형 XR 환경을 빌드할 수 있습니다.

이 블로그 게시물에서는 Google이 사랑받는 Androidify 앱의 기발함을 XR에 도입한 여정을 소개하고 앱을 XR에 도입하는 데 필요한 기본사항을 다룹니다.

Androidify 둘러보기

Androidify는 Gemini, CameraX, Navigation 3, Jetpack Compose와 같은 최신 기술을 사용하여 Android 봇을 만들 수 있는 오픈소스 앱입니다. Androidify는 원래 적응형 레이아웃을 만들어 휴대전화, 폴더블, 태블릿에서 멋지게 보이도록 설계되었습니다.

Androidify는 다양한 폼 팩터에서 멋지게 보입니다.

적응형 레이아웃의 핵심은 재사용 가능한 컴포저블입니다. Jetpack Compose를 사용하면 사용자가 어떤 유형의 기기를 사용하든 직관적인 사용자 환경을 만들 수 있도록 다양한 방식으로 배치할 수 있는 작은 UI 구성요소를 만들 수 있습니다. 실제로 Androidify는 앱을 수정하지 않고도 Android XR과 호환됩니다.

Androidify는 코드 변경 없이 대형 화면 반응형 레이아웃을 사용하여 XR에 적응합니다.

Android XR을 특별히 처리하지 않는 앱은 적절한 크기의 창에서 멀티태스킹할 수 있으며 대형 화면에서와 거의 동일하게 작동합니다. 따라서 Androidify는 추가 작업 없이도 Android XR에서 모든 기능을 제공합니다. 하지만 Google은 여기서 멈추고 싶지 않았으므로 XR 사용자에게 즐거운 환경을 제공하기 위해 XR 차별화 앱을 만들기로 했습니다.

XR에서 방향 지정

앱을 실행할 수 있는 두 가지 모드인 홈 공간과 전체 공간부터 시작하여 Android XR의 주요 기본 개념을 살펴보겠습니다.

홈 공간에서는 여러 앱을 나란히 실행할 수 있으므로 사용자가 여러 창에서 멀티태스킹할 수 있습니다. 이러한 의미에서 대형 화면 Android 기기의 데스크톱 창과 매우 유사하지만 가상 공간에 있습니다.

전체 공간에서 앱에는 공간 경계가 없으며 공간 UI 및 가상 환경 제어와 같은 Android XR의 전체 공간 기능을 사용할 수 있습니다.

앱을 전체 공간에서만 실행하도록 하는 것이 매력적으로 보일 수 있지만 사용자는 앱으로 멀티태스킹을 원할 수 있으므로 둘 다 지원하면 더 나은 사용자 환경을 제공할 수 있습니다.

Androidify의 새로운 차원 설계

즐거운 앱은 훌륭한 디자인에서 시작됩니다. Android DevRel의 선임 디자인 옹호자인 Ivy Knight는 Androidify의 기존 디자인을 가져와 XR용 새 디자인을 만드는 작업을 맡았습니다. Ivy의 설명을 들어보겠습니다.

XR용 디자인에는 고유한 접근 방식이 필요했지만 실제로 모바일 디자인과 많은 공통점이 있었습니다. Google은 경계를 명확하게 표시하거나 미묘하게 암시하여 하위 공간에서 UI 요소를 구성하고 그룹화하는 방법을 포함하는 것으로 시작했습니다. 또한 사용자에 따라 조정되고 이동하도록 설계된 다양한 크기의 공간 UI 요소를 수용하는 방법을 배웠습니다. Androidify에서와 마찬가지로 적응형 레이아웃으로 빌드하여 공간 UI의 레이아웃을 여러 부분으로 나눌 수 있습니다.

홈 공간으로 디자인 시작

다행히 Android XR을 사용하면 홈 공간의 현재 앱으로 시작할 수 있으므로 창 도구 모음과 전체 공간 전환 버튼을 추가하여 확장된 XR 디자인으로 전환할 수 있습니다.

또한 가능한 하드웨어 기능과 사용자가 이러한 기능과 상호작용하는 방법을 고려했습니다. Androidify의 모바일 레이아웃은 다양한 자세, 클래스 크기, 카메라 수에 맞게 조정되어 더 많은 사진 옵션을 제공합니다. 이 모델에 따라 헤드셋 기기의 카메라 레이아웃도 조정해야 했습니다. 또한 UI와 사용자의 근접성을 고려하여 텍스트가 작동하도록 조정해야 했습니다.

전체 공간으로의 더 큰 전환을 위한 디자인

전체 공간은 가장 큰 변화였지만 디자인을 조정할 수 있는 가장 창의적인 공간을 제공했습니다.

Androidify는 '사진 찍기 또는 선택' 창과 같이 배경과 윤곽선이 있는 기능을 그룹화하기 위해 시각적 포함 또는 창을 사용합니다. 또한 상단 앱 바와 같은 구성요소를 사용하여 다른 창을 프레임으로 지정하여 자연스러운 포함을 만들었습니다. 마지막으로 '내 봇 색상 선택' 창 근처에 있는 '변환 시작' 하단 버튼과 같이 특정 요소와 다른 요소의 근접성으로 내재적 포함이 제안됩니다.

공간 패널은 쉽게 분리할 수 있도록 제작되었습니다. 공간 패널에 맞게 모바일 디자인을 조정하는 방법을 결정하려면 가장 뒤에 있는 노출 영역부터 시작하여 노출 영역을 삭제한 후 앞으로 이동해 보세요. 삭제할 수 있는 배경의 수와 남은 배경을 확인합니다. Androidify에 이 연습을 한 후에는 큰 녹색 Android 구불구불한 선이 남았습니다. 구불구불한 선은 브랜딩 순간과 배경 역할을 할 뿐만 아니라 3D 공간에서 콘텐츠의 앵커 역할을 했습니다.

이 앵커를 설정하면 요소가 앵커 주위로 이동하는 방법과 근접성을 사용하여 나머지 사용자 환경을 분리하고 변환하는 방법을 더 쉽게 상상할 수 있었습니다.

앱을 공간화하는 데 도움이 되는 기타 디자인 팁

포함되지 않도록 하기: 구성요소를 분리하고 실제 (공간) 공간을 제공합니다. 이제 이러한 UI 요소에 여유 공간을 제공할 때입니다.
노출 영역 삭제: 배경을 숨기고 디자인에 어떤 영향을 미치는지 확인합니다.
동작으로 동기 부여: 앱에서 전환을 어떻게 사용하고 있나요? 이 캐릭터를 사용하여 앱이 VR로 분리되는 것을 상상해 보세요.
앵커 선택: 공간에서 사용자를 잃지 마세요. UI를 수집하거나 고정하는 데 도움이 되는 요소가 있어야 합니다.

XR UI 디자인 패턴에 관한 자세한 내용은 Android 개발자의 Android XR용 디자인을 참고하세요.

공간 UI 기본사항

Ivy가 XR용 Androidify를 디자인하는 동안 사고방식을 조정하는 경험을 다루었으므로 이제 공간 UI 개발에 관해 이야기해 보겠습니다. 최신 Android 도구 및 라이브러리를 사용하는 데 익숙하다면 Jetpack XR SDK로 공간 UI를 개발하는 것이 익숙하게 느껴질 것입니다. Compose로 레이아웃 만들기 등 이미 익숙한 개념을 확인할 수 있습니다. 실제로 공간 레이아웃은 행, 열, 스페이서를 사용하는 2D 레이아웃과 매우 유사합니다.

이러한 요소는 SpatialRows 및 SpatialColumns에 정렬됩니다.

여기에 표시된 공간 요소는 SpatialPanel 컴포저블이며, 텍스트, 버튼, 동영상과 같은 2D 콘텐츠를 표시할 수 있습니다.

  Subspace {
    SpatialPanel(
        SubspaceModifier
            .height(824.dp)
            .width(1400.dp)
    ) {
        Text("I'm a panel!")
    }
}

SpatialPanel은 하위 공간 컴포저블입니다. 하위 공간 컴포저블은 하위 공간 내에 포함되어야 하며 SubspaceModifier 객체에 의해 수정됩니다. 하위 공간은 앱의 UI 계층 구조 내의 어느 곳에나 배치할 수 있으며 하위 공간 컴포저블만 포함할 수 있습니다.SubspaceModifier 객체는 크기 조정 및 위치 지정과 같은 매개변수를 제어하는 Modifier 객체와도 매우 유사합니다.

Orbiter 는 SpatialPanel에 연결할 수 있으며 연결된 콘텐츠와 함께 이동할 수 있습니다. 이러한 요소는 연결된 콘텐츠에 관한 컨텍스트 컨트롤을 제공하여 콘텐츠에 기본 초점을 맞추는 데 자주 사용됩니다. 구성 가능한 거리에서 콘텐츠의 네 면 중 어느 곳에나 배치할 수 있습니다.

공간 UI 요소는 훨씬 더 많지만 이러한 요소는 Androidify의 공간 레이아웃을 만드는 데 사용된 주요 요소입니다.

XR 개발 시작하기

프로젝트 설정부터 시작하겠습니다. Jetpack XR 종속 항목 페이지에서 확인할 수 있는 Jetpack XR Compose 종속 항목을 추가했습니다.

사용자를 전체 공간으로 전환하는 버튼의 코드를 추가했습니다. 먼저 이렇게 할 수 있는 기능을 감지합니다.

  @Composable
fun couldRequestFullSpace(): Boolean =
   LocalSpatialConfiguration.current.hasXrSpatialFeature && 
   !LocalSpatialCapabilities.current.isSpatialUiEnabled
}

그런 다음 콘텐츠 펼치기 아이콘을 사용하는 새 버튼 구성요소를 기존 레이아웃에 만들고 onClick 동작을 부여했습니다.

  @Composable

fun RequestFullSpaceIconButton() {
   if (!couldRequestFullSpace()) return
   val session = LocalSession.current ?: return

   IconButton(
       onClick = {
           session.scene.requestFullSpaceMode()
       },
   ) {
       Icon(
           imageVector =  
               vectorResource(R.drawable.expand_content_24px),
           contentDescription = 
               stringResource("To Full Space"),
       )
   }
}

이제 이 버튼을 클릭하면 전체 공간에 중간 레이아웃이 표시됩니다. 공간 기능을 확인하고 공간 UI를 표시할 수 있는지 확인할 수 있습니다. 이 경우 새 공간 레이아웃이 대신 표시됩니다.

  @Composable

fun HomeScreenContents(layoutType: HomeScreenLayoutType) {
   val layoutType = when {
      LocalSpatialCapabilities.current.isSpatialUiEnabled -> 
          HomeScreenLayoutType.Spatial
      isAtLeastMedium() -> HomeScreenLayoutType.Medium
      else -> HomeScreenLayoutType.Compact
   }

   when (layoutType) {
      HomeScreenLayoutType.Compact ->
          HomeScreenCompactPager(...)

      HomeScreenLayoutType.Medium ->
          HomeScreenMediumContents(...)

      HomeScreenLayoutType.Spatial ->
          HomeScreenContentsSpatial(...)
   }
}

홈 화면용 디자인 구현

전체 공간의 홈 화면용 공간 디자인으로 돌아가서 구현 방법을 알아보겠습니다.

여기에서 두 개의 SpatialPanel 요소를 식별했습니다. 하나는 오른쪽에 동영상 카드가 있는 패널이고 다른 하나는 기본 UI를 포함하는 패널입니다. 마지막으로 상단에 Orbiter가 연결되어 있습니다. 동영상 플레이어 패널부터 시작하겠습니다.

  @Composable
fun HomeScreenContentsSpatial(...) {
   Subspace {
      SpatialPanel(SubspaceModifier
                   .fillMaxWidth(0.2f)
                   .fillMaxHeight(0.8f)
                   .aspectRatio(0.77f)
                   .rotate(0f, 0f, 5f),
      ) {
          VideoPlayer(videoLink)
      }
   }
}

추가 변경사항 없이 일반 레이아웃의 2D VideoPlayer 구성요소를 SpatialPanel에 재사용했습니다. 독립형으로 표시되는 모습은 다음과 같습니다.

기본 콘텐츠 패널도 동일한 방식으로 작동합니다. SpatialPanel에서 중간 패널 콘텐츠를 재사용했습니다.

  SpatialPanel(SubspaceModifier.fillMaxSize(),
             resizePolicy = ResizePolicy(
                 shouldMaintainAspectRatio = true
             ),
             dragPolicy = MovePolicy()
) {
    Box {
        FillBackground(R.drawable.squiggle_full)
        HomeScreenSpatialMainContent(...)
    }
}

이 패널에 ResizePolicy를 부여했습니다. 이 정책은 사용자에게 패널 크기를 조절할 수 있는 가장자리 근처의 핸들을 제공합니다. 또한 사용자가 드래그할 수 있는 MovePolicy도 있습니다.

동일한 하위 공간에 배치하면 서로 독립적이므로 VideoPlayer 패널을 기본 콘텐츠 패널의 하위 요소로 만들었습니다. 이렇게 하면 기본 콘텐츠 패널이 상위-하위 관계를 통해 드래그될 때 VideoPlayer 패널이 이동합니다.

  @Composable
fun HomeScreenContentsSpatial(...) {
   Subspace {
       SpatialPanel(SubspaceModifier..., resizePolicy, dragPolicy) {
           Box {
               FillBackground(R.drawable.squiggle_full)
               HomeScreenSpatialMainContent(...)
           }
           Subspace {
              SpatialPanel(SubspaceModifier...) {
                  VideoPlayer(videoLink)
              }
           }
       }
   }
}

이것이 첫 번째 화면을 만든 방법입니다.

다른 화면으로 이동

다른 화면도 간략하게 살펴보고 각 화면에 적용된 특정 고려사항을 강조하겠습니다.

여기에서는 SpatialRow 및 SpatialColumn 컴포저블을 사용하여 권장 시청 공간에 맞는 레이아웃을 만들고 중간 레이아웃의 구성요소를 다시 사용했습니다.

전체 공간의 결과 화면: 프롬프트로 생성된 봇: 빨간색 야구 모자, 에비에이터 선글라스, 밝은 파란색 티셔츠, 빨간색과 흰색 체크무늬 반바지, 녹색 플립플롭, 테니스 라켓을 들고 있음.

결과 화면에는 페더링 효과를 사용하여 무료 견적이 표시되므로 화면 가장자리 근처에서 사라질 수 있습니다. 또한 사용된 입력을 볼 때 실제 3D 전환을 사용하여 공간에서 사진을 뒤집습니다.

Google Play 스토어에 게시

이제 앱이 공간 레이아웃으로 XR에 맞게 준비되었으므로 Play 스토어에 출시했습니다. 앱의 AndroidManifest.xml 파일에 적용한 마지막으로 중요한 변경사항이 있습니다.

  <!-- Androidify can use XR features if they're available; they're not required. -->
<uses-feature android:name="android.software.xr.api.spatial" 
              android:required="false" />

이렇게 하면 Play 스토어에서 이 앱에 XR 차별화 기능이 있음을 알 수 있으며 사용자에게 앱이 XR을 염두에 두고 제작되었음을 알리는 배지가 표시됩니다.

Android XR의 Google Play 스토어에 표시된 Androidify

출시를 업로드할 때 XR용으로 출시하기 위한 특별한 단계는 필요하지 않습니다. 동일한 앱이 모바일 트랙의 사용자에게와 마찬가지로 XR 기기의 사용자에게도 정상적으로 배포됩니다. 하지만 앱의 XR 관련 스크린샷을 추가하거나 공간 동영상 애셋을 사용하여 앱의 몰입형 미리보기를 업로드할 수도 있습니다. Android XR 기기에서 Play 스토어는 이를 몰입형 3D 미리보기로 자동 표시하여 사용자가 앱을 설치하기 전에 콘텐츠의 깊이와 규모를 경험할 수 있도록 합니다.

지금 바로 나만의 환경 빌드 시작

Androidify는 기존 2D Jetpack Compose 앱을 공간화하는 방법을 보여주는 좋은 예입니다. 오늘은 디자인에서 코드, 게시까지 Androidify의 공간 UI를 개발하는 전체 프로세스를 보여드렸습니다. 기존 디자인을 수정하여 공간 패러다임과 호환되도록 하고 SpatialPanel 및 Orbiter 컴포저블을 사용하여 사용자가 전체 공간으로 전환할 때 표시되는 공간 레이아웃을 만든 후 Play 스토어에 새 버전의 앱을 출시했습니다.

이 블로그 게시물을 통해 Android XR에 자체 앱을 도입하는 방법을 이해하는 데 도움이 되었기를 바랍니다. 다음은 도움이 될 수 있는 몇 가지 링크입니다.

Androidify의 소스 코드를 확인하고 Google Play에서 Androidify를 사용하여 나만의 봇을 만들어 보세요.
개발자 문서를 시작하고 XR용 Jetpack Compose에 관해 자세히 알아보세요.
Android XR 에뮬레이터를 다운로드하고 자체 앱을 사용해 보세요.

작성자:

Dereck Bridie

개발자 관계팀 엔지니어

read_more 프로필 보기

계속 읽기

4 3월 2026년

4 3월 2026년

방법

배터리 기술 품질 시행이 시작되었습니다. 일반적인 웨이크 잠금 사용 사례를 최적화하는 방법

arrow_forward

Google은 과도한 배터리 소모가 Android 사용자의 가장 큰 관심사라는 점을 인식하고 개발자가 더 전력 효율적인 앱을 빌드할 수 있도록 상당한 조치를 취해 왔습니다.
Alice Yuan • 8분 길이
방법

샘플 카탈로그 앱으로 Android에서 AI 살펴보기

arrow_forward

Google은 온디바이스 모델과 클라우드 모델을 모두 사용하여 AI 지원 기능의 예를 제공하고 사용자에게 즐거운 환경을 만들도록 영감을 주고자 했습니다.
Thomas Ezan, Ivy Knight • 2분 길이
20 11월 2025년

20 11월 2025년

방법

성능 여정을 위한 레벨링 가이드

arrow_forward

성능 레벨링 가이드는 5단계로 구성되어 있습니다. 최소한의 도입 노력 성능 도구를 소개하는 레벨 1부터 맞춤형 성능 프레임워크를 유지할 리소스가 있는 앱에 적합한 레벨 5까지 살펴보겠습니다.
Alice Yuan • 9분 길이

작성자:

개발자 관계팀 엔지니어

계속 읽기

Alice Yuan • 8분 길이

Thomas Ezan, Ivy Knight • 2분 길이

Alice Yuan • 9분 길이

소식 받아 보기