Apple Liquid Glass — 모든 플랫폼을 위한 디자인 언어
범위: Apple의 Liquid Glass 룩을 적용해야 하는 모든 인터페이스 — 웹 페이지, 웹 앱, Electron 또는 Tauri 데스크탑 앱, Android 또는 Flutter 앱, 또는 네이티브 Apple 앱. 아래 디자인 규칙은 모든 곳에서 동일합니다. 배경, 흐림 및 굴절을 구현하는 방법만 다릅니다. 먼저 경로를 선택하세요:
| 빌드 대상 | 경로 |
|---|---|
| Web, Electron, Tauri, WebView | assets/tokens.css + assets/refraction.js (이 파일 및 참조) |
| iOS, iPadOS, macOS 26+ 네이티브 | 시스템 Material: SwiftUI glassEffect, UIKit UIGlassEffect — 절대 가짜 사용 금지 |
| Android (Compose) | Haze haze-glass 레시피 |
| Flutter | BackdropFilter + ImageFilter.shader |
| Windows / Linux 네이티브 | 앱 내에서 직접 그림; 창 Material (Mica, Acrylic)은 Liquid Glass가 아님 |
플랫폼별 코드, 버전 제한 및 폴백: references/platforms.md.
앱 흐름, 탐색 및 화면 사양은 mobile-ux-designer를 사용하세요.
이 스킬은 Apple의 디자인 언어를 처음부터 다시 도출할 필요가 없도록 존재합니다. 여기의 모든 것은 기억이나 Apple에 관한 블로그 게시물이 아닌, Apple 자체 Human Interface Guidelines 및 그 그림에서 직접 읽은 것입니다. Apple이 실제로 명시하지 않은 내용은 이 스킬이 규칙을 만드는 대신 그렇게 말합니다. 이 정직함이 핵심입니다. 대부분의 "Apple 스타일" 작업은 자신 있게 만든 규칙을 적용하기 때문에 실패하기 때문입니다.
다른 모든 것이 따르는 하나의 아이디어
Apple의 인터페이스는 두 개의 레이어이며, 전체 언어는 이를 구분하는 데에 있습니다:
- 콘텐츠 레이어 — 앱이 실제로 하는 일. 불투명. 단단한 표면, 실제 그림자, 유리 없음. 텍스트는 여기에 있으며 절대 움직이는 배경 위에 놓이면 안 됩니다.
- 기능 레이어 — 툴바, 사이드바, 탭 바, 팝오버, 메뉴, 플로팅 컨트롤. 여기에 Liquid Glass가 있습니다. 콘텐츠 위에 떠서 굴절시키며, 절대 콘텐츠와 경쟁하지 않습니다.
Apple은 이를 직접 명시합니다: "콘텐츠 레이어에 Liquid Glass를 사용하지 마십시오... 콘텐츠 레이어에 포함하면 불필요한 복잡성과 혼란스러운 시각적 계층 구조가 발생할 수 있습니다."
한 가지를 기억하세요: 크롬에는 유리, 카드에는 사용하지 마십시오. "Apple 스타일" 작업의 가장 흔한 실패는 모든 것을 프로스팅(frosting)하여 Material이 존재하는 계층 구조를 파괴하는 것입니다.
출력
사용자가 요청한 것을 제공하세요 — 고정된 페이지, 진단, 컴포넌트 — 사용자가 요청한 길이와 형식으로. 요청되지 않은 디자인 철학 글을 추가하여 수정을 덧붙이지 말고, 간결함을 위해 실제 요구 사항을 건너뛰지 마세요: 요청되지 않았더라도 대비, 터치 대상 크기 및 아래 폴백을 확인하세요. 올바르게 보이지만 이를 실패하는 결과는 이 스킬이 방지하려는 "가짜 Apple" 결과물이기 때문입니다.
2026년 개선 사항도 중요합니다. Apple의 macOS 27 Golden Gate 페이지(apple.com/os/macos, 2026-09-27 확인): "Liquid Glass 업데이트는 보다 균일한 굴절과 개선된 대비로 탁월한 가독성을 보장합니다." 또한 균일한 툴바, 가장자리에서 가장자리까지의 사이드바, 업데이트된 창 모양을 나열합니다. 즉, 더 무거운 틴트, 눈에 띄는 굴절 가장자리, 떠 있는 섬이 아닌 하나의 연속적인 막대입니다. 첫 번째 릴리스의 얇고 희미한 유리를 구축한다면 Apple이 이미 수정한 버전을 구축하는 것입니다.
토큰에서 시작 (웹)
assets/tokens.css는 작동하는 토큰 레이어입니다 — 밝고 어두운 팔레트, 굴절 가장자리가 있는 유리 프리미티브, 스크롤 에지 효과, 축소된 투명도, 축소된 동작, backdrop-filter 지원 전혀 없음에 대한 폴백. 값을 수동으로 만들지 말고 여기서 시작하되, 읽지 않고 붙여넣지 말고 실제 요약과 비교하여 확인하세요: 귀하의 컨텍스트에서 아래 대비 및 터치 대상 규칙을 여전히 충족하는지 확인하고, 파일을 절대적인 진리로 인용하지 말고 값을(특히 색상 — Apple은 릴리스마다 변경될 수 있다고 다시 강조함) 조정하세요.
그 중 두 가지는 단순히 사용하는 것보다 이해할 가치가 있습니다:
유리 프리미티브는 착색된 반투명 배경 + backdrop-filter: saturate(180%) blur(28px) + 내부 상단 하이라이트입니다. 하이라이트는 빛이 굽은 것처럼 읽히게 합니다. 이것이 없으면 표면은 단순한 투명도처럼 보이며, 이는 모방에 의한 글라스모피즘의 징후입니다. Apple 자체 Material 그림은 가장자리를 따라 뚜렷한 밝은 테두리를 보여줍니다.
테두리(.glass::before)는 1px 그라데이션 링으로, 왼쪽 위가 가장 밝고, 측면은 희미하며, 오른쪽 아래에서 다시 더 밝아집니다. 균일한 흰색 테두리는 스티커처럼 읽히고, 고르지 않은 테두리는 빛을 받는 두꺼운 베벨(bevel)로 읽힙니다.
주변 배경. 유리는 뒤에 무언가가 있어 굴절시킬 필요가 있습니다. 그렇지 않으면 평평한 회색으로 렌더링됩니다. 페이지 배경에 미묘한 다중 정지 그라데이션은 Material이 할 일을 제공합니다. Apple은 배경화면과 사진에서 이를 무료로 얻습니다. 웹에서는 직접 제공해야 합니다.
굴절: 블러가 가짜로 만들 수 없는 부분
Apple: "이 반투명 Material은 주변을 반사하고 굴절시킵니다." Apple 자체 이미지를 확대해 보면 유리 컨트롤의 가장자리에 닿는 텍스트나 모양이 윤곽을 따라 구부러지고 늘어나며, 중간은 선명하게 유지됩니다. 이것이 Liquid Glass를 2020년대 글라스모피즘과 구분짓는 것이며, 사용자가 없을 때 가장 먼저 놓치는 부분입니다. 기본적으로 유리 컨트롤에 대해 구축하세요. 요청을 기다리지 마십시오.
- 메커니즘 (모든 플랫폼): 테두리 밴드 내에서, 가장 안쪽의 콘텐츠를 윤곽선에서 가장 강하게, 실제 모양(캡슐 끝, 둥근 모서리)을 따라 표시합니다.
- 웹: 유리 요소에
data-refract를 추가하고assets/refraction.js를 로드합니다. Chromium 엔진(Chrome, Edge, Android WebView, Electron, Windows의 Tauri)에서는 라이브 배경을 구부립니다. Safari와 Firefox는backdrop-filter에서url()필터를 실행할 수 없으므로 알려진 영역 위의 유리에 대해data-refract-source="#id"를 추가합니다: 스크립트는 모든 브라우저에서 해당 영역의 복사본을 구부립니다. 소스가 없는 유리는 일반 블러를 유지합니다. 항상 히어로 및 데모 유리에 소스를 제공하십시오. 그렇지 않으면 대부분의 방문자(Safari, Firefox)가 굴절을 전혀 볼 수 없습니다. - 선명한 유리는 텍스트가 눈에 띄게 휘어지는 곳(블러 거의 없음)입니다. 일반 유리에서 굴절은 흐릿한 그림의 모양과 색상 가장자리에서 나타납니다.
- 굴절 유리는 더 밝은 틴트(
--glass-refract)를 얻어 굴절이 보이도록 합니다. 단어를 담는 유리 — 메뉴, 팝오버, 시트, 사이드바 — 는.glass-text를 추가하여 전체 틴트를 유지합니다. 그렇지 않으면 밝은 콘텐츠 위에서 레이블이 대비 이하로 떨어질 수 있습니다. - "투명도 줄이기"에서는 해제되고, "동작 줄이기"에서는 절대 애니메이션되지 않습니다.
- 확인: 컨트롤을 텍스트 줄 위에 놓고 스크린샷을 찍으세요. 가장자리의 글자가 휘고 늘어납니다. 중간은 읽을 수 있습니다.
값, 조정 테이블 및 테스트 방법: references/materials.md ("굴절과 테두리"). Android, Flutter 및 네이티브 경로: references/platforms.md.
절대 양보할 수 없는 사항
이것은 위반 시 결과가 Apple처럼 읽히지 않게 만드는 규칙입니다.
- 유리는 기능 레이어에만. 콘텐츠 카드는 불투명 표면과 그림자를 얻습니다.
- 색상은 절약. Apple: "Liquid Glass Material에 색상을 아껴서 적용하십시오... 상태 표시기나 기본 작업과 같이 강조가 실제로 유익한 요소를 위해 색상을 아껴두십시오." 그들의 그림은 잘못된 것으로 표시된 세 개의 착색된 버튼이 있는 툴바와 기본 작업만 착색된 동일한 툴바를 올바른 것으로 표시합니다. 막대당 하나의 색상이 있는 항목.
- 강조는 배경에, 글리프가 아닙니다. "기본 작업을 강조하려면 기호나 텍스트보다는 배경에 색상을 적용하십시오." 예외는 선택된 탭입니다. Apple은 아이콘과 레이블에 색상을 지정하고 막대는 중립으로 둡니다.
- 헤어라인, 테두리 아님. 구분선은 약 12% 불투명도에서 0.5px이며, 목록에서는 앞 아이콘 너머로 들여쓰기됩니다. 1px 단색 회색 테두리는 웹 관용구이지 Apple 것이 아닙니다.
- 가는 글꼴 두께 없음. Apple: "Regular, Medium, Semibold 또는 Bold 글꼴 두께를 선호하고 Ultralight, Thin 및 Light는 피하십시오."
- 문장 형태, 대문자+트래킹 아님. 넓은 문자 간격의 대문자 마이크로 레이블은 대시보드/편집 관용구입니다. Apple의 섹션 헤더는 문장 형태이며 두께와 색상에 의존합니다.
- 계층 구조는 크기, 두께 및 색상에서 — 규칙과 상자에서가 아님. 제목에 밑줄이 없고 섹션에 경계선이 없습니다. Apple 자체 Mail 그림은 세 가지 변수만으로 네 가지 수준을 구축합니다.
- 아이콘은 그룹 내에서 모두 또는 전무. Apple의 메뉴 규칙: "그룹의 모든 항목에 아이콘이 있거나, 전혀 없어야 합니다." 절반만 아이콘이 있는 목록은 미완성처럼 보입니다.
- 모든 사용자 정의 컨트롤에는 누름 상태가 필요합니다. Apple은 이를 명시적으로 강조합니다 — 없으면 컨트롤이 "반응이 없는 느낌을 줄 수 있습니다."
- 콘텐츠는 크롬 아래로 확장됩니다. 스크롤 에지 효과를 사용하여 콘텐츠가 막대 아래로 지나갈 때 사라지게 하고, 사이드바 아래로 배경을 확장하십시오(아래 참조). 사이드바 가장자리에서 갑자기 멈추는 콘텐츠는 Apple 자체의 올바름/올바르지 않음 그림 쌍의 내용입니다.
- 모든
backdrop-filter사용에는@supports not (...)불투명 폴백이 필요합니다. 축소된 투명도 미디어 쿼리와는 별도로 — 하나는 누락된 브라우저 지원을 처리하고 다른 하나는 사용자 설정을 처리합니다. 건너뛰는 것은 흔하고 놓치기 쉬운 버그입니다: 막대가 블러 없이 너무 투명하게 조용히 렌더링됩니다. - 유리는 굽고 테두리가 있습니다. 균일한 1px 흰색 테두리와 굴절이 없는 유리 컨트롤은 글라스모피즘이지 Liquid Glass가 아닙니다. 플랫폼이 허용하는 곳에서는 테두리 그라데이션과 굴절을 사용하고, 허용하지 않는 곳에서는 깨끗한 블러 폴백을 사용하십시오.
- 히트 타겟은 iOS에서 최소 44×44pt입니다 (macOS는 더 조밀하지만 여전히 편안한 클릭 타겟이 필요합니다). 파괴적 작업(삭제, 계정 제거)은 파괴적/빨간색 역할을 받으며, 절대 중립적 역할을 받지 않습니다.
타이포그래피
Apple의 척도는 장식적이지 않습니다 — 고정된 사다리이며, 이를 유지하는 것이 타이포그래피를 네이티브처럼 느끼게 하는 대부분입니다. iOS 기본값 (Large) 스타일:
| 스타일 | 두께 | 크기 | 행간 |
|---|---|---|---|
| Large Title | Regular | 34 | 41 |
| Title 1 | Regular | 28 | 34 |
| Title 2 | Regular | 22 | 28 |
| Title 3 | Regular | 20 | 25 |
| Headline | Semibold | 17 | 22 |
| Body | Regular | 17 | 22 |
| Callout | Regular | 16 | 21 |
| Subhead | Regular | 15 | 20 |
| Footnote | Regular | 13 | 18 |
| Caption 1 | Regular | 12 | 16 |
| Caption 2 | Regular | 11 | 13 |
macOS는 더 좁은 사다리를 실행합니다(Body 13/16, Large Title 26/32) 그리고 Headline은 Semibold 대신 Bold입니다. 데스크탑 우선 웹 레이아웃은 일반적으로 두 가지 사이의 무언가를 원합니다: 제목 및 읽기 텍스트의 경우 iOS 크기, 사이드바 및 메타데이터의 경우 macOS 밀도.
최소값은 실제입니다: iOS 11pt, macOS 10pt. 그 이하에서는 Apple이 텍스트를 읽을 수 없다고 간주하며 웹 픽셀은 포인트보다 작으므로 ~11px를 최소값으로 처리하십시오.
글꼴 스택: -apple-system, BlinkMacSystemFont, 'SF Pro Text', …는 Apple 하드웨어에서 실제 SF를 제공합니다. 다른 모든 곳에서는 폴백이 필요합니다 — Inter는 가장 가까운 널리 사용 가능한 대체품입니다. 절대 SF를 CDN에서 링크하지 마십시오. 라이선스가 허용되지 않습니다.
Apple의 트래킹은 크기별로 광학적으로 보정됩니다: 12pt 미만에서 느슨하고, 정확히 12pt에서 0, 19–20pt(≈ −0.45pt) 주변에서 가장 조이며, 약 24pt(+0.40pt, 29–34pt)부터 양수가 되다가 디스플레이 크기에서 0으로 감소합니다. 시스템 글꼴은 Apple 하드웨어에서 이를 자체적으로 적용합니다. 토큰 파일의 웹 값(-0.022em 제목, -0.012em 본문, 0 캡션)은 Inter와 같은 폴백 글꼴이 느슨해 보이지 않도록 유지하는 웹 관습입니다 — Apple의 표 변환이 아니므로 Apple의 것으로 인용하지 마십시오.
전체 표, 트래킹 곡선 및 SF Symbols 두께/크기 페어링: references/typography.md.
색상
Apple은 정확한 값을 제공하지만, *"시스템 색상 값을 하드코딩하지 마십시오... 실제 색상 값은 릴리스마다 변동될 수 있습니다."*라고도 말합니다. 따라서 그것들을 절대적인 진리가 아닌 기준점으로 사용하십시오.
의미론적 세트는 팔레트보다 더 유용합니다: 텍스트용 label / secondaryLabel / tertiaryLabel / quaternaryLabel, 헤어라인용 separator, 그리고 두 가지 배경 패밀리 — 시스템 및 그룹 — 각각 primary / secondary / tertiary가 있습니다. 그룹은 콘텐츠가 카드에 있을 때 사용하는 것입니다: 페이지는 그룹 배경(밝은 회색)을 사용하고 카드는 흰색을 사용합니다. 웹 기본값(회색 페이지, 흰색 카드)의 이러한 반전은 Apple 레이아웃이 Apple처럼 읽히는 큰 이유입니다.
다크 모드는 반전이 아닙니다. Apple은 베이스 및 높은 표면을 사용합니다: 뒤로 물러나는 가장 뒤쪽 레이어는 거의 검은색, 올려진 것으로 읽혀야 하는 모든 것에 대해 확실히 더 밝은 차콜. 모든 것을 순수한 검은색으로 칠하는 것은 잘못이며, Apple 자체 그림 쌍이 이를 보여줍니다.
Apple이 명시한 대비 최소값: 17pt까지 4.5:1, 18pt 이상에서 3:1, 모든 크기에서 Bold의 경우 3:1.
모든 시스템 색상의 정확한 RGB 값(라이트, 다크 및 두 가지 증가된 대비 변형), iOS 및 macOS의 전체 의미론적 목록: references/color.md.
Material
두 가지 변형이 있으며, 잘못 선택하면 눈에 띕니다:
- Regular — 뒤에 있는 것을 흐리게 하고 광도를 조정합니다. 거의 모든 것이 이것을 사용합니다. Apple 그림에서는 불투명에 가깝습니다. 배경은 그림이 아닌 부드러운 색상으로 읽힙니다.
- Clear — 매우 반투명하며, 미디어가 두드러져야 하는 사진 및 비디오 위에 떠 있는 컨트롤용입니다. 뒤의 콘텐츠가 밝으면 Apple은 레이블이 살아남을 수 있도록 아래에 35% 불투명도의 어두운 디밍 레이어를 지정합니다.
Material은 또한 적응합니다: 밝은 콘텐츠 위에서는 유리와 그 기호가 어두워지고, 어두운 콘텐츠 위에서는 밝아집니다. 웹에서 이는 유리 토큰이 하나의 값과 다른 불투명도가 아닌, 테마당 진정으로 다른 값을 필요로 함을 의미합니다.
레시피, 네 가지 표준 Material 및 생동감 수준: references/materials.md.
컴포넌트
컴포넌트 모양은 신호의 많은 부분을 전달합니다. 짧은 버전:
- 툴바 — 하나의 균일한 막대, 단색, 작업은 원형 또는 캡슐 칩으로, 관련 작업은 공유 캡슐로 그룹화됩니다. 제목(및 선택적 부제목)이 그 안에 있을 수 있습니다.
- 사이드바 — 가장자리에서 가장자리까지, 유리, 악센트로 착색된 SF-Symbol 아이콘, 둥근 선택 fi
…
[번역을 위해 잘림]