스마트폰 화면이 단순히 정보를 보여주는 ‘창문’이 아니라, 눈앞에서 살아 움직이는 유리처럼 느껴진다면 어떨까요? 최근 Apple이 공개한 Apple iOS 26 Liquid Glass 디자인 갤러리 예시는 단순한 UI 변화를 넘어 인터페이스의 ‘물질감’을 재정의하고 있습니다. 디자이너라면 이 새로운 시각 언어가 실제 앱에서 어떻게 구현되고 있는지, 그리고 내가 만든 화면에 어떻게 녹여낼 수 있을지 궁금해질 수밖에 없겠죠.
글의 순서
iOS 26의 Liquid Glass — 진짜 유리처럼 흐르는 인터페이스
2025년 6월 발표된 [iOS 26](https://apple.com/newsroom/2025/06/ios-26-liqu id-glass-design-language)은 “Liquid Glass”라는 완전히 새로운 시각 언어를 선보였습니다. 이 효과는 단순한 반투명 레이어가 아니라, 실시간으로 빛의 굴절(refraction)과 반사(reflection)를 계산해 UI 요소가 기기의 움직임·터치·조도에 따라 반응하게 만듭니다.
Apple은 이를 버튼, 위젯, 잠금 화면 시계, 앱 아이콘까지 전면 적용했으며, iPhone 16 시리즈에서 가장 완벽한 렌더링을 제공합니다.
새로 공개된 Liquid Glass 디자인 갤러리 — 실제 앱 예시 12종
Apple은 최근 개발자 페이지에 공식 Liquid Glass 갤러리를 공개했습니다. Crumbl, Tide Guide, GrowPal, Lumy, Linearity Curve Graphic Design 등 여러 브랜드 앱이 참여하여 iOS 18과 iOS 26 디자인의 변화를 비교할 수 있게 구성했습니다. 각 앱은 기존 플랫 UI 대신 물결·빛 번짐·입체감을 살린 시각효과를 활용합니다.
아래는 대표 예시와 핵심 적용 포인트입니다.
| 앱 | 적용 영역 | 비주얼 포인트 |
|---|---|---|
| Lumy | 날씨 위젯/잠금화면 | 태양광 반사처럼 변화하는 하이라이트 |
| GrowPal | 홈 대시보드·카드형 메뉴 | 반투명 카드 배경에 미세한 유동 모션 적용 |
| CNN | 뉴스 피드 및 탭 바 | 탭 바 삭제, 떠있는 글래스 내비게이션 채택 |
| Linearity Curve | 툴바·패널 UI | 곡면형 블러와 반사로 고급 감각 강화 |
| Photoroom | 사진 편집 패널 | Glass overlay + Dynamic highlight |
실무에서 바로 적용할 수 있는 Liquid Glass 구현 팁
Liquid Glass는 화려해 보이지만 구현은 의외로 간단하게 시작할 수 있습니다.
- SwiftUI 기본 머티리얼 사용
- `.background(.ultraThinMaterial)` 또는 `.regularMaterial`을 적용해 기본 유리 질감 생성.
- 하이라이트 표현
- `GeometryReader`로 요소 크기를 추출해 터치 또는 기기 움직임(CoreMotion 데이터)에 따라 하이라이트 레이어 이동.
- 권장 값
- 블러 반경: 20–40pt / 투명도(alpha): 0.12–0.25 / 하이라이트 오버레이: alpha 0.06–0.18
- 성능 팁
- 복잡한 반사 렌더링은 Metal 또는 SceneKit으로 전담 처리. GPU 가속 사용 시 iPhone 15 Pro 이상 권장.
Figma·PSD 리소스로 빠르게 시각화하기
공식 리소스가 공개되면서 디자이너들이 사용할 수 있는 UI 키트도 속속 등장했습니다. Figma Community와 Dribbble, Behance 등에서 “iOS 26 Liquid Glass” 또는 “Glassmorphism kit” 키워드로 검색하면 다음과 같은 자산을 확보할 수 있습니다.
| 파일 형식 | 권장 해상도 / 포맷 | 사용 팁 |
|---|---|---|
| .fig (Figma) | 1284×2778 px / @3x | 레이어별 blur·highlight·grain 효과 추출 가능 |
| .PSD (Photoshop) | 2048 px 이상 / RGB모드 | 광택/그라디언트 조정 후 PNG 추출 권장 |
| .SVG (벡터) | @2x / @3x 스케일 모두 제공 | 아이콘·심볼은 벡터 유지로 해상도 손실 방지 |
라이선스는 반드시 상업용 가능 범위를 확인해야 합니다. 무료 배포 파일이라도 CC0 또는 MIT/Apache 조항이 없으면 앱내 활용 시 문제될 수 있습니다.
가독성과 퍼포먼스 — 아름다움의 그림자
Liquid Glass는 분명 놀랍지만 비판도 존재합니다. 일부 UI에서는 배경과 텍스트 간 대비가 약해져 읽기 어려울 수 있죠.
이를 방지하려면 텍스트 대비를 최소 4.5:1 이상 유지하고, 고대비 모드 옵션을 추가하는 것이 권장됩니다.
또한 굴절 효과와 반사 워핑(Render)로 GPU 소모가 커질 수 있으므로, iPhone 11–14 같은 구형 기기에는 단순 머티리얼(fallback 모드)을 적용해 퍼포먼스를 확보하세요.
디자인 트렌드의 진화 — Glassmorphism에서 Liquid Glass로
Glassmorphism이 단순히 “반투명 카드”였다면, Liquid Glass는 빛과 깊이를 통해 인터랙션 그 자체를 표현합니다. 즉, 사용자는 UI를 ‘보고’ 조작하는 것이 아니라 ‘느낀다’는 차이가 있습니다. Apple은 iOS뿐 아니라 macOS·watchOS·CarPlay까지 확장하며 시스템 전반에 이 미학을 일관되게 적용하고 있습니다.
지금 바로 활용할 액션 리스트
- [Apple Developer Gallery](https://apple.com/newsroom/2025/06/ios-26-liqu id-glass-design-language)에서 공식 데모와 고해상 스크린샷 확인
- Figma Community에서 “Liquid Glass UI kit” 다운로드 후 레이어별 분석
- SwiftUI로
.background(.ultraThinMaterial)테스트 → CoreMotion 기반 패럴랙스 효과 추가 - GitHub에서 “metal glass refraction” 샘플 확인 후 Metal 셰이더 성능 체크
- 대비 테스트(Accessibility Inspector) 실행으로 실제 사용자 환경 검증
- [Apple Developer Gallery](https://apple.com/newsroom/2025/06/ios-26-liqu id-glass-design-language)에서 공식 데모와 고해상 스크린샷 확인
- Figma Community에서 “Liquid Glass UI kit” 다운로드 후 레이어별 분석
- SwiftUI로 `.background(.ultraThinMaterial)` 테스트 → CoreMotion 기반 패럴랙스 효과 추가
- GitHub에서 “metal glass refraction” 샘플 확인 후 Metal 셰이더 성능 체크
- 대비 테스트(Accessibility Inspector) 실행으로 실제 사용자 환경 검증
마무리 — 실제와 가상의 경계를 녹인 디자인
Apple iOS 26 Liquid Glass 디자인 갤러리 예시는 단순히 새로운 트렌드가 아니라, 인터랙션 경험 자체의 재구성을 보여줍니다. 디자이너에게는 영감의 보고이며 개발자에게는 기술적 도전이죠. 지금이야말로 당신의 앱 인터페이스에도 ‘빛과 깊이’를 입힐 때입니다 — 투명하지만 확실히 존재감을 가지는 그 유리처럼요.
자주하는 질문
Apple iOS 26 Liquid Glass 디자인 갤러리 예시가 무엇인가요?
갤러리 예시를 내 앱에 바로 적용하려면 어떻게 시작하면 되나요?
.background(.ultraThinMaterial) 또는 .regularMaterial로 기본 유리 질감을 만들고, GeometryReader + CoreMotion으로 하이라이트(빛 이동)와 패럴랙스 효과를 연동하세요. 권장 값은 블러 반경 20–40pt, 투명도(alpha) 0.12–0.25, 하이라이트 오버레이 alpha 0.06–0.18입니다. Figma(.fig), PSD(.psd), SVG 자산을 Figma Community·Dribbble 등에서 다운받아 레이어별 blur·highlight를 분석하면 시각화가 빠릅니다.Liquid Glass 적용 시 성능·접근성 문제는 어떻게 대응하나요?
