Jetpack Compose Glimmer는 Jetpack Compose를 기반으로 빌드되며 디스플레이가 있는 AI 안경용으로 설계된 컴포저블, 구성요소, 동작, 테마가 포함되어 있습니다. Glimmer를 사용하면 Compose를 사용하여 AI 글래스용 네이티브 UI를 빌드할 수 있으며, 적은 수의 코드, 강력한 도구, 직관적인 Kotlin API로 앱 환경에 생동감을 더할 수 있습니다.
Jetpack Compose Glimmer 컴포저블
Jetpack Compose Glimmer는 Text, Button, ListItem과 같은 AI 안경 디스플레이에 맞게 조정된 @Composable 함수를 제공합니다. 다음은 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의 구성요소와 유사하지만 AI 글래스의 고유한 시각적 및 대화형 요구사항에 맞게 특별히 최적화된 자체 맞춤 설계 구성요소 세트가 있습니다. Jetpack Compose Glimmer 구성요소는 Jetpack Compose Glimmer의 테마로 맞춤설정할 수 있으며 하위 수준 Compose 기능을 기반으로 빌드되어 탭 및 스와이프와 같은 사용자 입력 방법을 기본적으로 지원합니다.
특정 구성요소 사용에 대해 자세히 알아보려면 다음 가이드를 참고하세요.
이러한 상위 수준 구성요소 중 하나가 사용 사례에 맞지 않으면 surface를 사용하여 맞춤 구성요소를 빌드할 수 있습니다. 서페이스는 Jetpack Compose Glimmer의 가장 기본적인 빌드 블록입니다. 빌드하려는 특정 맞춤 디자인이나 상호작용을 위한 빈 캔버스입니다.
Jetpack Compose Glimmer 수정자
Jetpack Compose Glimmer의 수정자는 Compose 수정자와 동일하게 작동하므로 레이아웃, 모양, 동작을 맞춤설정하여 컴포저블을 보강할 수 있습니다. Jetpack Compose Glimmer는 특정 수정자를 도입하거나 안경 관련 시각적 피드백 및 성능에 고유한 기본값을 적용할 수 있습니다.
Jetpack Compose Glimmer 깊이
Jetpack Compose Glimmer 구성요소는 깊이를 사용하여 계층 구조를 나타내므로 다른 카드 위에 표시되는 요소를 시각적으로 구분하는 데 도움이 됩니다. AI 안경의 깊이는 z-공간의 배치와 그림자의 조합입니다. 목록 항목과 같은 대부분의 상위 수준 구성요소의 경우 포커스 상태에 따라 깊이가 자동으로 적용됩니다. 구성요소에 포커스가 있으면 깊이가 생기고 포커스가 없어지면 정상 상태로 돌아갑니다. 하지만 맞춤 구성요소를 사용하는 경우 Modifier.surface 또는 Modifier.depth에서 depth 매개변수를 사용할 수 있습니다.
Jetpack Compose Glimmer 테마
Jetpack Compose Glimmer에는 AI 글래스 전용 테마 시스템이 있습니다.
Jetpack Compose Glimmer의 테마는 간소화되고 최적화된 색상, 서체, 도형 팔레트를 구현합니다. 이렇게 하면 AI 안경의 가시성과 간결성이 극대화됩니다. 모든 Jetpack Compose Glimmer 구성요소는 AI 안경의 특정 입력 메서드와 자동으로 통합되도록 설계되었습니다. Jetpack Compose Glimmer 테마는 GlimmerTheme 클래스를 사용하여 노출됩니다.
다른 Jetpack Compose의 테마와 마찬가지로 GlimmerTheme에는 색상, 도형, 서체, 아이콘 (기호학) 등 여러 하위 시스템이 포함됩니다. Jetpack Compose Glimmer 테마에는 맞춤설정할 수 있는 Jetpack Compose Glimmer 구성요소도 포함되어 있습니다.
색상
Jetpack Compose Glimmer의 색상 시스템에는 검은색 값이 렌더링되지 않는 AI 안경 디스플레이에서 가시성과 간결성을 극대화하도록 설계된 최적화된 팔레트의 7가지 색상이 포함되어 있습니다.
GlimmerTheme의 색상 개요입니다.'...에서' 색상은 GlimmerTheme를 통해 노출되지 않습니다. 이러한 색상은 배경색을 기반으로 시스템에서 자동으로 계산합니다.
이러한 색상은 GlimmerTheme.colors.primary를 통해 노출되며, 각 색상 역할의 값은 다음 표에 설명되어 있습니다.
색상 역할 |
기본값 |
|---|---|
primary |
#A8C7FA |
2차 |
#4C88E9 |
긍정적인 |
#4CE995 |
부정적인 |
#F57084 |
surface |
#000000 |
outline |
#606460 |
outlineVariant |
#42434A |
surface, outline, outlineVariant은 맞춤설정 가능으로 표시되지만 이러한 값은 맞춤설정하지 않는 것이 좋습니다.
도형
Jetpack Compose Glimmer의 모양 시스템은 구성요소의 표준 모서리 처리 및 기하학적 형태를 정의합니다. 이는 GlimmerTheme.shapes를 통해 모든 모양이 노출되어 AI 글래스 UI에서 일관되고 미니멀한 시각적 언어를 만들도록 설계되었습니다.
서체
Jetpack Compose Glimmer의 서체 시스템에는 AI 안경 디스플레이의 가독성과 간결성을 위한 6가지 서체 스타일이 포함되어 있습니다. 이러한 스타일은 더 굵은 가중치, 더 넓은 글자 간격, 적절한 줄 높이를 통해 대비를 극대화하고 텍스트 가독성을 개선하도록 설계되었습니다. 이러한 스타일은 GlimmerTheme.typography를 통해 노출됩니다.
아이콘
Jetpack Compose Glimmer의 아이콘 시스템은 AI 안경 UI의 간소화된 시각적 언어와 일관되게 통합되도록 설계되었으며, 최적의 가독성을 위해 Material Symbols Rounded와 같은 둥근 형태를 활용하는 경우가 많습니다.