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

> Clean Markdown view of GeekNews topic #26777. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=26777](https://news.hada.io/topic?id=26777)
- GeekNews Markdown: [https://news.hada.io/topic/26777.md](https://news.hada.io/topic/26777.md)
- Type: GN+
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2026-02-18T12:15:55+09:00
- Updated: 2026-02-18T12:15:55+09:00
- Original source: [design.google](https://design.google/library/transparent-screens)
- Points: 11
- Comments: 0

## Topic Body

- **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**을 제공함

## Comments



_No public comments on this page._