AI 글래스에서 작동하는 증강 환경을 위해 Jetpack Compose Glimmer UI 프레임워크를 사용하여 AI 글래스 앱을 빌드하세요. Jetpack Compose Glimmer는 투명 디스플레이와 AI 안경 폼 팩터에 최적화된 최초의 UI 프레임워크 중 하나입니다.
1. 사용자 여정 결정
AI 안경 폼 팩터의 한눈에 보기 원칙과 호환되는 중요한 사용자 여정 (CUJ)에 집중하세요. 사용자가 주변 환경에 계속 머무를 수 있도록 최소한의 UI 또는 오디오만으로 표현할 수 있습니다. 기회를 찾으려면 현재 앱에서 안경을 활용할 수 있는 진입점을 고려하세요.
예를 들어 사용자는 목적지까지 이동하는 데 도움이 되는 핸즈프리 도보 경로 안내를 받을 수 있습니다.
선택한 사용자 여정은 안전, 편안함, 성능 원칙도 고려해야 합니다. 예를 들어 사용자의 카메라가 불필요하게 긴 시간 동안 필요하거나 사용자의 개인 정보를 침해하는 작업을 선택하지 마세요.
기본 원칙에 대해 알아봅니다.
권장사항
금지사항
2. 최소화 및 번역
디스플레이 모드 UI의 경우 핵심 앱의 CUJ로 시작하세요.
집중을 위한 레이아웃 최적화: 레이아웃은 필수 정보의 우선순위를 지정하여 사용자의 집중력을 유지하기 위해 작업 및 시각적 요소의 수를 줄입니다.
계층 구조에 깊이 사용: 깊이는 요소 우선순위를 전달하는 데 사용됩니다.
하향식 디자인: 모형을 빌드할 때는 하단에서 시작하여 구성요소를 위로 배치합니다.
시각적 구성요소 번역: 디스플레이 AI 글래스의 경우 Jetpack Compose Glimmer 구성요소와 레이아웃 패턴을 사용합니다.
최적화된 구성요소
B. Outline & Highlight: Outline 색상은 대비에 최적화되어 있습니다. 강조 표시를 사용하면 시각적 표현이 제공되며 일부 유형의 입력을 나타내는 데 사용할 수 있습니다.
C. 모양: 부드러운 모양 시스템을 사용하여 모서리의 선명도를 줄이고 편안함을 개선하여 한눈에 보기 쉽게 합니다. 표면(대비) 색상: 콘텐츠의 표면(대비) 색상은 세계와의 대비를 극대화하기 위해 흰색입니다.
D. 서체: Glimmer의 서체 스케일은 최적의 가독성과 명료성을 위해 커닝, 크기, 두께를 최적화하는 세련된 본문 및 제목 스타일의 작은 집합을 사용합니다.
E. 아이콘: 둥근 Material Symbols를 사용하면 둥근 서체 스케일과 일관성을 유지할 수 있습니다.
3. 오디오 흐름 및 신호
오디오와 대화하세요. 오디오는 사용자를 압도하지 않으면서 AI 글래스 앱의 큰 부분을 차지해야 하지만 특정 기기의 오디오 전용 환경도 고려해야 합니다. 이 환경을 설명하는 오디오 전용 흐름 지도를 만들어 이를 수행할 수 있습니다. 오디오 신호와 대화로 상호작용과 의견을 표기합니다.
4. 지도 입력 컨트롤
기기 제어 및 동작의 입력을 매핑해야 합니다. 탭과 같은 기본 앱 상호작용을 트랙패드 탭으로 변환하는 것부터 시작할 수 있습니다.
5. SysUI 고려
기타 시스템 인터페이스용 계정
앱은 사용되는 경우 홈 및 알림과 같은 기타 시스템 기능에 표시됩니다. 이러한 알림은 시스템 표시줄에 표시될 수 있습니다.
6. 추가 상태
앱은 연결 문제나 권한 문제와 같은 AI 글래스의 다양한 시나리오를 접하게 됩니다. 핵심 앱과 글래스 앱 모두에서 이러한 다양한 상태를 고려하세요.
기기 기능 권한을 요청해야 합니다.
시각적 UI와 오디오를 통해 이러한 사항을 고려해야 합니다. 예를 들어 모바일 기기에서 권한 부여 흐름을 완료해야 한다고 알리거나 오류를 읽어주기 위해 오디오 피드백을 제공합니다.
