구글 Glimmer - 투명 스크린을 위한 디자인 방법

(design.google)

AI 안경용 투명 디스플레이를 위한 새로운 디자인 시스템 Jetpack Compose Glimmer는 현실 세계 위에 자연스럽게 겹쳐지는 인터페이스를 구현함
기존 Material Design의 불투명한 표면과 그림자는 투명 디스플레이에서 빛 번짐(halation) 과 가독성 저하를 일으켜, 어두운 표면과 밝은 콘텐츠 중심의 새로운 접근이 필요함
텍스트는 시각 각도(visual angle) 기준으로 설계되어, 약 0.6도 이상의 크기와 Google Sans Flex의 광학 크기 조정으로 읽기 쉬운 형태를 유지함
색상은 가산 대비비(additive contrast ratio) 를 기반으로 조정되어, 현실 배경의 밝기 변화 속에서도 안정적인 중립 팔레트와 높은 대비를 확보함
움직임은 사용자의 주변 시야를 존중하는 부드러운 전환으로 설계되어, 기술이 주의를 요구하기보다 현실과 조화롭게 어우러지는 경험을 제공함

Jetpack Compose Glimmer와 투명 디스플레이 디자인의 배경

Jetpack Compose Glimmer는 Android XR(확장현실) 환경을 위한 새로운 디자인 시스템으로, AI 안경용 인터페이스 개발에 사용됨
- 기존 화면 기반 디자인과 달리, 현실 세계가 바로 캔버스가 되는 형태
- 인터페이스는 필요할 때만 나타나고, 필요 없을 때는 사라지는 주변형(ambient) 디스플레이 개념을 지향함
투명 디스플레이에서는 색상, 타이포그래피, 그림자 등 기본 요소가 기존과 다르게 작동함
- 예를 들어, 검정색은 투명으로 인식되고, 밝은 색상은 하늘색 배경에서 사라짐
- 이러한 특성으로 인해 기존 디자인 원칙을 근본적으로 재정립해야 했음

디스플레이는 렌즈 표면이 아니라 약 1미터 거리(팔 길이) 에 투사되어 보이는 구조
- 사용자는 현실에서 이 초점면으로 시선을 이동해야 하며, 이는 의식적이고 능동적인 주의 전환 행위임
이 초점 이동은 설계의 핵심 과제로, 짧은 순간에도 주목할 가치가 있는 인터페이스를 만드는 방향으로 이어짐

투명 디스플레이는 빛을 더할 수만 있고, 어둡게 만들 수 없음
- 따라서 검정색은 색상이 아닌 빛이 없는 공간(투명 영역) 으로 작동
기존 Material Design의 밝은 표면과 그림자는 투명 화면에서 눈부심과 배터리 소모를 유발
- 밝은 영역이 번져 텍스트가 흐려지는 halation 현상이 발생
해결책으로 검정을 ‘컨테이너’로 재정의하고, 어두운 표면 위에 밝은 콘텐츠를 배치
- 깊이감 있는 어두운 그림자를 사용해 계층과 공간감을 표현
- 버튼, 카드, 시스템 슬라이더 등은 계층적 깊이 수준으로 구분

텍스트는 픽셀 단위가 아닌 시각 각도(visual angle) 로 설계
- 0.6도 이상의 크기가 최소 가독 기준으로 설정됨
Google Sans Flex 서체의 광학 크기(Optical Size) 축을 활용해 글자 내부 공간과 간격을 조정
- ‘a’, ‘e’ 등의 내부 공간을 넓히고, ‘i’, ‘j’의 점 간격을 늘려 빠른 시선 인식을 지원
- 코드에서 별도 자간 설정 없이도 자동 시각 최적화가 이루어짐
권장 사항: 두껍고 간격이 넓은 서체 사용, 얇고 작은 글씨는 금지

현실 세계가 배경이 되므로, 밝기와 색상이 지속적으로 변함
- 팀은 가산 대비비(additive contrast ratio) 를 측정해 콘텐츠의 가시성을 확보
고채도 색상은 현실 배경에서 사라지거나 희미하게 보임
- 이에 따라 Glimmer는 중립적이고 어두운 표면 + 밝은 콘텐츠를 기본 구조로 채택
탈채도(desaturated) 된 팔레트로 환경 변화에 관계없이 안정적인 대비 유지
- 색상은 주로 버튼 등 주목 요소 강조용으로 제한적으로 사용

헤드업 디스플레이에서는 움직임이 방해가 되어서는 안 됨
- 콘텐츠는 언제든 시야에 나타날 수 있으므로, 부드럽고 존중하는 전환이 필요
초기 500ms 전환은 너무 짧아 인식되지 않았고, 약 2초의 완만한 전환으로 조정
- 사용자의 주변 시야(periphery) 에서 중심으로 자연스럽게 시선을 유도
사용자 입력(음성, 제스처)에는 즉각적 피드백이 필요
- 이를 위해 포커스 링과 하이라이트를 사용해 저지연 반응성 확보

투명 디스플레이 디자인의 핵심은 주의와 집중 같은 인간적 요인
- Jetpack Compose Glimmer는 기술이 주의를 요구하지 않고, 현실을 보완하는 경험을 목표로 함
이러한 접근은 AI 안경이 정보를 보여주는 도구를 넘어, 현실 인식 자체를 향상시키는 방향으로 발전
Google은 개발자를 위해 AI 안경 디자인 가이드라인과 Figma Design Kit을 제공함