구글이 투명 디스플레이 기반 AI 안경을 위해 개발한 새로운 디자인 시스템 Jetpack Compose Glimmer를 공개했어요. Glimmer는 안드로이드 XR(확장현실) 환경에서 사용되는 인터페이스를 위한 디자인 시스템으로, 투명 스크린을 위한 UI 구성 요소와 설계 원칙을 담고 있습니다.
투명 디스플레이 환경은 기존 스마트폰 화면과 달리 현실 공간 위에 정보를 겹쳐 보여주는 형태입니다. 또한 빛을 추가하는 방식으로 동작하기 때문에 검정색이 불투명한 배경이 아닌 100% 투명한 공백으로 보이며, 밝은 빛이 인접한 어두운 영역으로 번져 흐릿한 후광을 만들어내는 할레이션(halation) 현상이 발생하는 까다로운 환경이에요.
이렇듯 색상, 타이포그래피, 그림자 등 기존의 머터리얼 디자인(Material Design) 요소가 그대로 작동하기 어렵기 때문에, AI 안경의 투명 디스플레이 환경에 맞는 새로운 디자인 시스템이 필요했습니다. Glimmer는 이런 조건을 바탕으로 새롭게 설계된 디자인 시스템이에요.
위의 이미지처럼 콘텐츠가 흐릿하게 번져 보이는 할레이션 현상을 피하기 위해 설계된 Do / Don't 예시를 보면 투명 디스플레이 환경에서의 UI 설계를 위해 구글이 어떤 문제와 고민에 직면했는지를 엿볼 수 있습니다. 표면은 어둡게, 콘텐츠는 밝게 유지하는 대비 구조를 통해 가독성 문제를 해결했어요.
또한 Glimmer에서 검정은 색이 아닌 콘텐츠를 위한 컨테이너로 작동하고, 타이포그래피도 픽셀 단위가 아닌 시각각(degree) 기반으로 최소 가독 기준이 설정되었습니다. 색상 역시 다양한 현실 배경에서도 읽힐 수 있도록, 중립적인 팔레트 안에서 중요한 요소에만 제한적으로 사용됩니다.
이렇게 만들어진 Glimmer는 화면을 채우는 UI가 아니라, 사용자의 시야 속에서 필요할 때만 등장하는 ‘앰비언트 인터페이스’로 나타납니다. 알림 모션이나 인터랙션도 방해가 아닌 부드러운 안내가 될 수 있도록 약 2초에 걸친 느린 전환을 적용해 현실과 조화를 이루는 인터페이스를 설계했습니다.
구글은 Glimmer를 소개하며 상세한 가이드 및 피그마에서 사용할 수 있는 디자인 키트도 함께 공유했습니다. 또한 Glimmer가 만들어진 자세한 비하인드 스토리도 있으니, 아래의 링크들을 참고해 보세요.
