Jetpack Compose Glimmer는 Jetpack Compose를 기반으로 빌드되며 디스플레이가 있는 AI 안경용으로 설계된 컴포저블, 구성요소, 동작, 테마를 포함합니다. Glimmer를 사용하면 Compose를 사용하여 디스플레이 글라스용 네이티브 UI를 빌드하고 더 적은 수의 코드, 강력한 도구, 직관적인 Kotlin API로 앱 환경에 생동감을 더할 수 있습니다.
Jetpack Compose Glimmer 컴포저블
Jetpack Compose Glimmer는 @Composable 함수를 AI
안경 디스플레이에 맞게 조정된 Text, Button, ListItem과 같은 기능을 제공합니다. 다음은 Jetpack Compose Glimmer 컴포저블의 몇 가지 고유한 특징입니다.
- 간소화된 스타일 지정: 예를 들어
Surface구성요소는 광학 디스플레이 최적화를 위해 기본적으로 검은색 또는 투명한 배경을 사용합니다. - 최적화된 색상 기본값: Jetpack Compose Glimmer는 기본적으로 배경 색상을 기반으로 콘텐츠 색상을 계산하므로 개발자는 텍스트 색상을 수동으로 설정할 필요가 거의 없어 추가 작업 없이 가독성을 높일 수 있습니다.
차별화된 포커스: 포커스는 리플 효과 대신 윤곽선 기반 시각적 피드백을 사용하여 표시되므로 명확한 가시성을 제공합니다.
그림 1. 윤곽선 기반 시각적 피드백을 사용하여 차별화되는 Jetpack Compose Glimmer의 세 가지 포커스 상태 최적화된 고도: Jetpack Compose Glimmer는 시각적 분리를 위해 제한된 box-shadow를 사용합니다.
그림 2. 제한된 box-shadow를 사용하여 차별화되는 Jetpack Compose Glimmer의 5가지 고도 수준
Jetpack Compose Glimmer 구성요소
Jetpack Compose Glimmer는 자체 맞춤 설계 구성요소 세트를 제공합니다. Jetpack Compose의 구성요소와 유사하지만 디스플레이 글라스의 고유한 시각적 및 상호작용 요구사항에 맞게 특별히 최적화되었습니다. Jetpack Compose Glimmer 구성요소는 Jetpack Compose Glimmer's 테마로 맞춤설정할 수 있으며 하위 수준 Compose 기능을 기반으로 기본적으로 탭 및 스와이프와 같은 사용자 입력 방법을 지원합니다.
특정 구성요소 사용에 관해 자세히 알아보려면 다음 가이드를 참고하세요.
이러한 상위 수준 구성요소 중 하나가 사용 사례에 맞지 않는 경우
를 사용하여 surface 맞춤 구성요소를 빌드할 수 있습니다. 표시 경로는 Jetpack Compose Glimmer의 가장 기본적인 템플릿으로, 빌드하려는 특정 맞춤 디자인 또는 상호작용을 위한 빈 캔버스입니다.
Jetpack Compose Glimmer 수정자
Jetpack Compose Glimmer의 수정자는 Compose 수정자와 동일하게 작동하며, 이를 통해 컴포저블의 레이아웃, 디자인, 동작을 맞춤설정하여 컴포저블을 보강할 수 있습니다. Jetpack Compose Glimmer에는 안경 관련 시각적 피드백 및 성능을 위한 수정자와 고유한 기본값이 포함되어 있습니다.
Jetpack Compose Glimmer의 테마
Jetpack Compose Glimmer는 디스플레이 글라스를 위한 전용 테마 시스템을 제공합니다.
Jetpack Compose Glimmer의 테마는 간소화되고 최적화된 색상, 서체, 도형 팔레트를 구현합니다. 이를 통해 디스플레이 안경의 가시성과 간결성을 극대화할 수 있습니다. 모든 Jetpack Compose Glimmer 구성요소는 안경 관련 입력 방법과 자동 통합되도록 설계되었습니다. Jetpack Compose
Glimmer의 테마는 GlimmerTheme 클래스를 사용하여 노출됩니다.
Jetpack Compose의 다른 테마와 마찬가지로 GlimmerTheme에는 맞춤설정 가능한 속성과 함께 다음 섹션에 간략하게 설명된 여러
하위 시스템이 포함되어 있습니다.
- 색상
- 서체
- 구성요소 간격 값
- 도형
- 깊이 효과 수준
- 아이콘 크기
색상
Jetpack Compose Glimmer의 색상 시스템은 가산 디스플레이
및 실제 환경을 위해 설계되었습니다. 표준 Android 테마와 달리 GlimmerTheme
Colors는 예측할 수 없는 실제 조명에서 콘텐츠를 읽을 수 있도록 반투명한 어두운 배경과 생생한
강조 색상을 우선시합니다.
시스템은 기본 색상, 보조 색상, 중립 색상의 세 부분으로 구성된 팔레트를 사용합니다. 중립 색상은 공간 UI의 물리적 노출 영역 역할을 하는 경우가 많으며, 기본 색상과 보조 색상은 상호작용 및 브랜딩을 위한 명확한 시각적 신호를 제공합니다.
GlimmerTheme의 색상 개요서체
Jetpack Compose Glimmer의 서체 시스템에는 디스플레이 글라스의 가독성과 간결성을 위한 다양한 서체 스타일이 포함되어 있습니다. 이러한 스타일은 더 굵은 글꼴 굵기, 더 넓은 글자 간격, 적절한 줄 높이를 통해 대비를 극대화하고 텍스트 가독성을 개선하도록 설계되었습니다. 이러한 스타일은
GlimmerTheme.typography를 통해 노출됩니다.
구성요소 간격 값
이러한 값은 Jetpack Compose Glimmer 구성요소 전반에서 일관된 간격을 보장하는 데 사용됩니다. 여기에는 구성요소 패딩, 구성요소 간 간격, 기타 간격 요소가 포함됩니다. 이러한 값을 변경하면 대부분의 구성요소의 기본 크기가 영향을 받습니다.
도형
Jetpack Compose Glimmer의 도형 시스템은 구성요소의 표준 모서리 처리 및 기하학적 형태를 정의하며, 모든 도형이 GlimmerTheme.shapes를 통해 노출되어 디스플레이 글라스 UI에서 일관되고 최소한의 시각적 언어를 만들도록 설계되었습니다.
깊이 효과 수준
Jetpack Compose Glimmer 구성요소는 깊이 를 사용하여 계층 구조를 나타내므로 다른 카드 위에 표시되는 요소를 시각적으로 구분하는 데 도움이 됩니다. 디스플레이 글라스의 깊이는 z-공간의 배치와 그림자의 조합입니다. 목록 항목과 같은 대부분의 상위 수준 구성요소의 경우 포커스 상태에 따라 깊이가 자동으로 적용됩니다. 구성요소에 포커스가 맞춰지면 깊이가 생기고 포커스가 해제되면 정상 상태로 돌아갑니다. 하지만 맞춤 구성요소로 작업하는 경우
Modifier.surface 또는 depthEffect에서 depthEffect 매개변수를 사용할 수 있습니다.
아이콘 크기
Jetpack Compose Glimmer의 아이콘 시스템은 디스플레이 글라스 UI의 간소화된 시각적 언어와 일관되게 통합되도록 설계되었으며, 최적의 가독성을 위해 Material Symbols Rounded와 같은 둥근 형태를 활용하는 경우가 많습니다.