투명 디스플레이를 위한 설계 전략: Jetpack Compose Glimmer로 보는 AI 글래스 UI 디자인의 핵심

AI 글래스와 같은 확장현실(XR) 기기는 더 이상 미래의 기술이 아닙니다. 하지만 이 새로운 디바이스를 위한 인터페이스 설계는 기존 스마트폰이나 태블릿과는 전혀 다른 접근을 요구합니다. 화면이라는 ‘고정된 사각형’이 사라지고, 현실 세계 그 자체가 배경이 되는 환경에서 우리는 어떻게 정보를 자연스럽게 보여줄 수 있을까요?

이 글에서는 Android XR 환경을 위한 새로운 디자인 시스템인 Jetpack Compose Glimmer를 중심으로, 투명 디스플레이 기반 AI 글래스 인터페이스 설계의 배경과 과제, 그리고 이를 해결하기 위한 핵심 원칙들을 정리합니다. 색상, 타이포그래피, 모션, 깊이 표현까지 — 기존 UI 디자인의 상식을 어떻게 다시 정의했는지 살펴보겠습니다.

반응형

---

1. 화면이 없는 인터페이스: ‘현실 위에 겹쳐지는 UI’

전통적인 디자인은 항상 ‘컨테이너’에서 시작합니다. 스마트폰 화면, 브라우저 창, TV 패널처럼 명확한 경계가 존재합니다.

하지만 AI 글래스는 다릅니다.
화면이 없습니다. 대신 사용자의 시야 위에 정보가 겹쳐집니다.

특히 중요한 점은, 인터페이스가 렌즈 표면에 붙어 있는 것이 아니라 **약 1미터 전방(팔 길이 정도 거리)**에 투사된 것처럼 인식된다는 사실입니다.

이 말은 곧 사용자가 콘텐츠를 읽기 위해서는 실제 현실(사람의 얼굴, 길, 풍경 등)에서 초점을 옮겨야 한다는 뜻입니다. 단순한 ‘흘낏 보기’가 아니라, 의식적인 초점 전환이 필요합니다.

이것이 의미하는 바

• 인터페이스는 항상 시야 안에 있지만, 항상 읽히는 것은 아닙니다.
• 사용자의 주의를 ‘얻어야’ 합니다.
• 과도한 정보나 자극은 피로를 유발합니다.

결국 디자인의 목표는 명확해집니다.
**필요할 때만 나타나고, 필요 없을 때는 사라지는 ‘앰비언트(ambient) 디스플레이’**가 되어야 합니다.

---

2. 왜 ‘검은색’을 쓰지 않는가: 물리 법칙과 디자인의 충돌

Jetpack Compose Glimmer를 소개할 때 가장 많이 받는 질문은 이것입니다.

“왜 검은색을 쓰지 않나요? 스타일인가요?”

정답은 간단합니다.
물리 법칙 때문입니다.

이 디스플레이는 빛을 ‘더하는(additive)’ 방식으로 작동합니다.
즉, 어둡게 만들 수 없고, 빛을 추가할 수만 있습니다.

• 검은색 = 100% 투명
• 불투명한 배경 생성 불가
• 밝은 면은 실제로 강한 빛 덩어리로 보임

기존 Material Design처럼 불투명한 카드, 레이어, 그림자 기반 UI를 그대로 적용하면 다음과 같은 문제가 발생했습니다.

• 강한 빛 번짐(halation)
• 텍스트 가독성 저하
• 배터리 소모 증가
• 눈부심

해결 전략: “검은색을 색이 아닌 컨테이너로 재정의”

Glimmer에서는 검은색을 ‘색상’이 아니라 콘텐츠를 위한 클린 플레이트 역할의 컨테이너로 정의합니다.

또한 기존의 그림자 대신, 깊이 시스템을 새롭게 정의하여 어두운 리치 쉐도우로 공간감을 표현합니다. 이를 통해:

• 요소 간 위계 표현
• 시스템 레벨 UI와 일반 UI 구분
• 자연스러운 공간감 형성

디스플레이의 물리적 특성과 싸우는 대신, 그것을 전제로 디자인 언어를 재구성한 것입니다.

---

3. 0.6도(°)의 과학: XR에서 텍스트 가독성 설계

AI 글래스에서는 텍스트 크기를 픽셀이나 포인트로 측정하지 않습니다. 대신 **시각 각도(visual angle)**를 기준으로 설계합니다.

예를 들어 고속도로 표지판을 떠올려보세요.
표지판의 실제 크기는 고정되어 있지만, 멀리 있을 때는 작게, 가까이 갈수록 크게 보입니다. 이것이 시각 각도입니다.

연구 결과, 최소 가독 기준은 약 0.6도입니다.
Jetpack Compose Glimmer의 타이포그래피는 이 최소값보다 충분히 크게 설정되어 대부분의 환경에서 한눈에 읽히도록 설계되었습니다.

Google Sans Flex의 활용

브랜드 서체인 Google Sans Flex를 기반으로:

• 문자 내부 공간(counter) 확대
• i, j의 점 위치 조정
• 광학적 크기(optical size) 축 활용

이러한 조정을 통해 코드 상에서 별도의 자간 설정 없이도 최적의 가독성을 확보합니다.

XR 환경에서는 타이포그래피가 단순한 ‘브랜드 표현’이 아니라, 시각 과학에 기반한 가독성 엔지니어링에 가깝습니다.

---

4. 현실 속에서 사라지는 색상: 대비의 재정의

현실 세계는 항상 변화합니다.

• 맑은 하늘
• 어두운 실내
• 강한 햇빛
• 도시의 네온사인

이런 환경에서 스마트폰용 고채도 색상을 그대로 사용하면 어떻게 될까요?
대부분 현실 속에 묻혀버립니다.

그래서 Glimmer는 다음 전략을 채택했습니다.

• 기본 인터페이스는 중립적(Neutral)
• 표면은 항상 어둡게
• 콘텐츠는 밝게
• 색상은 절제된 형태로 사용

또한 단순 명암 대비가 아니라, **additive contrast ratio(가산 대비 비율)**를 기준으로 밝기를 측정해 설계합니다.

결과적으로:

• 대부분의 환경에서 안정적 가독성 유지
• 버튼과 같은 핵심 요소에만 색상 집중
• 현실과 조화를 이루는 UI

색상은 장식이 아니라, 주의 유도를 위한 전략적 도구가 됩니다.

---

5. 모션은 눈길을 끌어야 할까, 배려해야 할까?

AI 글래스는 하루 종일 착용하는 기기입니다.
즉, 알림은 언제든 시야에 등장할 수 있습니다.

초기에는 일반 앱처럼 약 500ms 전환 애니메이션을 적용했습니다. 하지만 문제가 있었습니다.

• 너무 빨리 나타남
• 사용자 인지 전에 사라짐
• ‘깜빡’ 등장하는 느낌

해결책: 거의 2초에 걸친 느린 등장

알림은 주변 시야(periphery)에서 서서히 등장해 중앙으로 이동합니다.
이는 사용자의 주의를 강제로 빼앗지 않고, 부드럽게 초대하는 방식입니다.

하지만 입력에 대한 반응은 달라야 합니다.

• 음성 명령
• 제스처 입력

이 경우에는 즉각적인 피드백이 필요합니다.
이를 위해 포커스 링과 하이라이트가 저지연으로 반응하도록 설계되었습니다.

결론은 명확합니다.
앰비언트 모션은 느리게, 인터랙션 피드백은 빠르게.

---

6. Jetpack Compose Glimmer의 핵심 특장점 정리

1) 투명 디스플레이에 최적화된 설계

기존 모바일 UI의 단순 이식이 아닌, XR 전용 디자인 원칙 수립

2) 물리 기반 색상 및 대비 체계

Additive 디스플레이 특성에 맞춘 대비 계산

3) 시각 과학 기반 타이포그래피

0.6도 기준 이상의 가독성 확보

4) 새로운 깊이 시스템

기존 그림자 대신 공간감과 계층을 표현하는 구조 설계

5) 인간 중심 모션 설계

주의를 빼앗지 않고 유도하는 전환 전략

---

7. 개발자를 위한 활용 관점

Jetpack Compose Glimmer는 단순한 디자인 가이드가 아니라, Android XR 경험을 구축하기 위한 기반 시스템입니다.

디자인 키트(Figma Design Kit)와 함께 제공되며, 이를 기반으로:

• XR 환경에 맞는 컴포넌트 사용
• 권장 타이포그래피 스케일 적용
• 대비 기준에 맞춘 색상 선택
• 깊이 시스템을 활용한 위계 구성

과 같은 방식으로 구현할 수 있습니다.

중요한 점은 기존 모바일 앱을 그대로 확장하는 것이 아니라,
XR 환경의 물리적 특성과 인간 인지 방식을 이해한 뒤 설계해야 한다는 점입니다.

---

728x90

기술은 눈에 띄지 않을 때 가장 잘 작동한다

AI 글래스를 위한 디자인은 단순히 새로운 폼팩터에 대응하는 작업이 아닙니다.

• 주의(attention)
• 초점(focus)
• 인지 부담
• 현실과의 조화

이 모든 요소를 고려해야 하는, 인간 중심 설계의 집약체에 가깝습니다.

Jetpack Compose Glimmer는 기술을 전면에 내세우지 않습니다. 대신 사용자가 필요할 때 조용히 나타나고, 역할을 다하면 사라집니다.

앞으로 AI 글래스가 진화할수록, 우리는 더 많은 정보를 보게 될 것입니다.
그러나 중요한 질문은 이것입니다.

그 정보가 우리의 주의를 빼앗을 것인가,
아니면 현실을 더 잘 보게 도와줄 것인가?

Jetpack Compose Glimmer는 후자를 선택했습니다.
그리고 이것이 투명 디스플레이 시대 UI 디자인이 나아가야 할 방향일 것입니다.

300x250

https://design.google/library/transparent-screens

How to Design for Transparent Screens - Google Design