Android용 Premium Glass
목표: 차분하고 공간감 있으며 고급스러운 인터페이스. 유리는 콘텐츠 위에 떠 있는 컨트롤을 위한 재질입니다. 모든 곳에 뿌려야 하는 스타일이 아닙니다. 성공 테스트: 사람들이 "깔끔하고 레이어가 잘 되어 있다"고 말해야 하며 "누군가 모든 것에 블러를 추가했다"는 말은 절대 나오지 않아야 합니다.
이 스킬은 재질, 계층 구조, 깊이감, 모션, 접근성을 제어합니다. 프로젝트 고유의 브랜드가 아이덴티티와 카피를 제어합니다. 기본 브랜드 값은 assets/tokens.json에 있으며 (색상 팔레트 유지) 교체할 수 있습니다.
0. 안전 및 범위
- 사용자가 선택한 프로젝트 내에서만 작업합니다. 비밀, 키, 환경 변수를 읽지 마세요. 네트워크 요청을 보내거나 패키지를 설치하지 마세요. 라이브러리가 필요하면 이름을 알려주고 사용자가 결정하도록 하세요.
- 요청 없이 기존 파일을 덮어쓰지 마세요. 먼저 제안합니다 (2절 참조).
- 가상의 예제 콘텐츠만 사용하세요.
- Apple 폰트(San Francisco), SF 심볼, Apple 로고, iOS 크롬은 절대 사용하지 마세요. Inter와 Material Symbols/Lucide 스타일 아이콘을 사용하세요.
- (VERIFY) 표시된 사실은 (API, 버전) 시간이 지나면 오래될 수 있습니다. 사용자에게 확인하라고 알려주세요.
1. 다섯 가지 엄격한 규칙
- 콘텐츠는 절대 유리가 아닙니다. 카드, 목록 행, 폼, 페이지 배경, 미디어는 불투명하거나 부드러운 표면으로 유지합니다.
- 유리는 오직 떠 있는 레이어에만 적용합니다: 하단 네비게이션 필, 스크롤 콘텐츠 위의 상단 바, 플로팅 액션 버튼, 하단 시트 및 메뉴, 검색 필드, 토스트/스낵바, 작은 떠 있는 칩.
- 유리 위에 유리를 절대 놓지 않습니다. 유리 표면 내부의 항목은 채우기, 구분선 또는 불투명도로 분리합니다.
- 가독성이 디자인보다 우선합니다. 본문 텍스트는 최악의 배경에서 4.5:1 (큰 텍스트와 아이콘은 3:1)을 유지해야 합니다.
scripts/contrast_check.py를 실행하세요. - 모든 유리 표면에는 불투명 대체 스타일이 있습니다 (구형 Android, 투명도 줄이기, 고대비, 배터리 절약, 기기에서 블러 비활성화).
어떤 요소에 유리를 적용하기 전에 확인하는 질문: "이 재질은 어떤 기능적 역할을 전달하는가?" 유효한 답변: 스크롤 콘텐츠 위에 떠 있습니다. 임시적이거나 상황에 따라 다릅니다. 콘텐츠가 아래에서 움직이는 동안에도 도달 가능해야 합니다. 답이 없으면 유리를 적용하지 마세요.
2. 워크플로우
- 검사: 플랫폼, 최소/타겟 SDK, 기존 테마/토큰, 네비게이션 구조, 접근성 요구 사항, 성능 목표. 추측하지 말고 질문을 목록화하세요.
- 레이어 맵 (코드 작성 전): 요소 -> 레이어 (콘텐츠/구조/떠 있음) -> 유리 여부 -> 등급 -> 이유를 표로 작성하고 계획과 함께 제시하세요.
- 토큰:
assets/tokens.json에서 시작하여 브랜드 색상을 조정하고 두 모드에서 각 등급에 대해 대비 검사를 다시 실행하세요. assets/GlassTheme.kt의 템플릿과references/compose-implementation.md의 지침에 따라 빌드하세요.references/review-checklist.md및scripts/audit_compose.py로 검증하세요. 증거(대비 값, 화면당 유리 레이어 개수, 대체 스크린샷)를 보고하세요. 증거 없이 검사 통과를 주장하지 마세요.
3. 재질 등급 (시작 값, dp)
| 등급 | 용도 | 블러 | 채우기 (어두움) | 채우기 (밝음) |
|---|---|---|---|---|
| 없음 | 콘텐츠, 카드, 목록, 배경 | - | - | - |
| 얇음 | 아이콘 전용 또는 큰 레이블 컨트롤 | 16 | 잉크 @ 0.55 | 흰색 @ 0.55 |
| 보통 | 네비게이션 필, 상단 바, 검색, FAB, 토스트 | 24 | 잉크 @ 0.66 | 흰색 @ 0.70 |
| 두꺼움 | 시트, 메뉴, 다이얼로그, 텍스트가 많은 오버레이 | 32 | 잉크 @ 0.78 | 흰색 @ 0.82 |
| 스크림 | 모달 시트 뒤의 어두움 | 0-8 | 검정 @ 0.20-0.45 | 검정 @ 0.20-0.45 |
자세한 내용과 검증된 대비 값은 references/tokens.md를 참조하세요. 채우기는 순수 흰색이 아닌 표면 잉크 색상으로 틴트 처리되어 어두운 모드 텍스트가 밝은 배경에서도 살아남습니다. |
4. Android 현실 점검 (약속하기 전에 읽으세요)
Modifier.blur()/ RenderEffect는 요소 자체의 콘텐츠를 블러 처리하며, 뒤에 있는 것은 블러 처리하지 않습니다. 실제 배경 블러는 라이브러리(Haze는 Apache-2.0이며 Android에서 Compose를 지원함)나 다이얼로그용 창 블러가 필요합니다. 라이브러리 API 이름은 버전마다 변경됩니다: 설치된 버전의 README를 읽으세요 (VERIFY).- 블러 효과는 Android 12(API 31) 이상이 필요합니다 (VERIFY). 그 이하에서는 불투명 대체 표면을 사용하세요.
- 모달 하단 시트와 다이얼로그는 별도 창에 있으므로 컴포지션 내 배경 블러가 뒤의 콘텐츠를 볼 수 없습니다. 지원되는 경우 창 배경 블러를 사용하고
WindowManager.isCrossWindowBlurEnabled를 확인하세요 (VERIFY). 그렇지 않으면 스크림이 있는 두껍고 거의 불투명한 시트를 사용하세요. - 단색 그라데이션 위의 블러는 보이지 않습니다. 유리 뒤에는 구조(콘텐츠, 이미지, 의도적인 부드러운 광채)가 필요합니다. 그렇지 않으면 성능만 소모합니다.
- 예산: 화면당 동시 블러 레이어는 최대 2-3개 (저사양 폰에서는 1-2개). 목록 항목이나 전체 화면을 절대 블러 처리하지 마세요. 큰 표면의 블러 반경을 애니메이션하지 말고 알파나 변형을 애니메이션하세요.
- 저사양 폰(3-4 GB RAM)에서 릴리스 빌드로 테스트하세요.
5. 접근성 모드 (모두 구현)
- 투명도 줄이기 (앱 내 설정 + 시스템 "애니메이션 제거"/고대비 신호): 유리를 눈에 띄는 1 dp 테두리가 있는 불투명 표면 토큰으로 교체합니다.
- 큰 글꼴(200%) 및 TalkBack: 색상에만 의존하는 정보는 없음. 아이콘 전용 컨트롤에 레이블. 포커스 순서가 적절해야 함.
- 움직임 줄이기: 움직임을 페이드로 대체. 상태 피드백 유지.
- 터치 대상은 최소 48 dp. 제스처(스와이프)에는 항상 버튼 또는 customActions 대안이 있어야 함.
6. 컴포넌트
네비게이션 필, 상단 바, FAB, 시트, 검색 필드, 칩, 카드, 스와이프 행, 트리아지 스택, 채팅 입력, 마스킹된 값 칩의 사양은 references/components.md를 참조하세요. 역할당 하나의 반경 사용 (칩 999, 컨트롤 16, 카드 24, 네비게이션 필 28, 시트 32); 중첩 반경 = 외부 반경 - 패딩.
7. 모션
스프링 250-350ms, 짧은 페이드 150ms, 튕김 오버슈트 없음. 스와이프 임계값에서 햅틱 틱. 누른 상태: 0.97 배율 + 부드러운 하이라이트. 움직임 줄이기를 준수.
8. 이미지 프롬프트 모드 (참고 화면)
목업 프롬프트를 요청받으면 references/image-prompts.md를 따르세요: 화면당 하나의 프롬프트, 자체 포함 스타일 블록, 화면에 정확한 텍스트, 떠 있는 레이어에만 유리, "카드는 불투명", Android 상태 표시줄, Apple 요소 없음. 6개의 작업된 화면 프롬프트가 참고 자료에 있습니다. 생성기가 작은 텍스트와 데바나가리 문자를 왜곡한다는 점을 사용자에게 상기시키세요. 출력물을 레이아웃 및 분위기 참고 자료로 사용하고 Figma/Compose에서 다시 빌드하세요.
9. 리뷰 모드
디자인이나 코드를 리뷰하도록 요청받으면: 각 요소를 레이어별로 분류하고, 화면당 유리 레이어 개수를 세고, 감사 스크립트(python scripts/audit_compose.py <src>)를 실행하고, 대비 스크립트를 실행한 후, 심각도별로 결과를 나열하고 references/review-checklist.md의 수정 사항을 제시하세요.
10. 출력 기대사항
모든 작업에 대해 다음을 명시하세요: 무엇이 유리이고 그 이유는 무엇인지, 어떤 등급인지, 대비 증거, 대체 스타일, 근사치이거나 검증되지 않은 부분. 변경 범위를 좁게 유지하세요. 관련 없는 UX를 재설계하지 말고 관련 없는 문제는 별도로 목록화하세요.
참고 자료 및 파일
references/principles.md- Apple에서 파생된 원칙 및 출처references/tokens.md- 토큰 테이블 및 검증된 대비 결과references/compose-implementation.md- Compose 아키텍처, 스니펫, 대체 스타일, 성능references/components.md- 컴포넌트 사양 및 상태references/image-prompts.md- 프롬프트 템플릿 및 워크플로우references/review-checklist.md- 품질 게이트 및 안티 패턴scripts/contrast_check.py,scripts/audit_compose.py- 로컬 검사기 (네트워크 불필요)assets/tokens.json,assets/GlassTheme.kt(선택 사항: 45개 화면 Retain 프롬프트 세트를assets/retain-screen-prompts.md로 추가 가능)