스타일

Liquid Glass

같은 프로젝트 작업실로 스타일 비교.

같은 프로젝트 작업실로 스타일 비교
프로젝트 / 오늘 · 01

공간 만들기

다음 아이디어를 위한 작은 공간.

자료를 모으고 방향을 그린 뒤 문구를 다듬습니다. 세 가지 작은 작업으로 생각이 담긴 작업실을 만듭니다.

작업

시작할 준비가 되었습니다.

본문 안의 가상 데모입니다. 초기화·새로고침으로 처음 상태로 돌아갑니다.

개념

Liquid Glass는 콘텐츠 위에 동적인 투명 탐색층을 둡니다. 이 웹 예제는 시각적 특징을 설명하며 Apple 네이티브 렌더링과 같지 않습니다.

예시

열한 스타일은 개요·작업 3개·진행률·자료 메모 2개가 같은 작업실입니다. 메뉴로 이동하고 완료 체크·상태 필터·메모 펼치기를 사용하세요. 하나를 완료하면 1 / 3과 33%가 표시됩니다. 필터 결과가 없으면 안내가 나옵니다. 초기화·새로고침하면 전체 필터·미완료 3개·0%·닫힌 메모로 돌아갑니다. 도구 보기를 누르면 부유 캡슐이 확장됩니다. 불투명 패널로 투명도를 없앨 수 있습니다.

추천 조건

풍부한 콘텐츠 위 작은 탐색층에 어울립니다. 투명 표면은 대비 확인과 불투명 대체 모드가 필요합니다.

Apple WWDC25

비교 요약
같은 범주의 비교
개념특징장점제약적합한 상황조합 조건
Liquid Glass부유 캡슐·반사 가장자리·확장 도구로 탐색층을 콘텐츠와 구분합니다.가벼운 탐색층이 배경 맥락을 유지합니다.투명 표면은 대비 확인과 불투명 대체 모드가 필요합니다.풍부한 콘텐츠 위 작은 탐색층에 어울립니다.작업 표면은 단색으로 두고 유리층 중첩은 피합니다.
이어서 살펴보기원본·수정 제안 ↗

이 선택에 관한 이야기

세 언어가 댓글을 공유합니다. 작성하려면 GitHub 로그인이 필요합니다.