독자가 큰 사진을 넘겨 보는 해안 사진 일기를 만든다고 가정해 봅시다. 탐색 메뉴는 공간을 적게 쓰고 필요할 때만 펼쳐져야 합니다. 넓은 반투명 정보 카드는 사진과 시선을 다툽니다.
어떻게 해결하는가
화살표로 사진을 넘기면 둥글게 떠 있는 렌즈 아래 사진이 휘어 보입니다. 도구 보기는 캡슐을 펼치고 불투명 패널은 광학 효과를 없앱니다. 초기화하면 해변으로 돌아갑니다.
떠 있는 렌즈로 사진을 넘기고 도구를 펼쳐 불투명 표시와 비교하세요.
아침 해변모래언덕 길 끝까지 밀려온 파도.저녁 항구마지막 햇살을 받으며 돌아온 배들.고요한 호수돌아오는 길의 잠깐의 쉼.
해변 일기 1 / 3
화살표로 사진 세 장을 둘러보세요. 도구는 탐색 영역에 머뭅니다.
떠 있는 조작부 아래 사진이 렌즈처럼 휘어 보입니다. 도구를 열면 캡슐이 펼쳐집니다. 특징을 강조한 웹 예제로, Apple의 네이티브 렌더링은 아닙니다.
본문 안의 가상 데모입니다. 초기화·새로고침으로 처음 상태로 돌아갑니다.
무엇이라 부르는가
Liquid Glass는 렌즈 효과·반사광·유동적인 형태 변화를 결합한 Apple의 조작·탐색 재질입니다. 글래스모피즘은 반투명·배경 흐림을 쓰는 더 넓은 시각 양식입니다. 이 강조된 웹 모형은 이미지 변위를 쓰며 Apple의 네이티브 광학·자동 대비 조절을 재현하지 않습니다.
사진 같은 풍부한 콘텐츠 위의 작은 조작층에 적합합니다. 글래스모피즘은 고정된 반투명 패널까지 넓게 설명합니다. Apple 재질의 적응형 광학 동작은 이 웹 예제에서 구현하지 않습니다.
02응용 사례
일기는 로컬 생성 사진 세 장을 순환합니다. 도구 캡슐은 일반 흐름 안에서 커져 아래 설명을 가리지 않습니다. 작은 갤러리나 지도 탐색에도 같은 관계를 적용할 수 있습니다.
03구현 참고·주의점
읽기 쉬운 불투명 표면에서 시작해 배경 필터를 더하고 사진마다 검사합니다. 투명도 감소와 강제 색상을 지원합니다. 불투명 전환은 데모에만 적용됩니다. CSS만으로 Apple 동작이나 자동 대비 적응을 구현했다고 표현하지 않습니다.
여기서는 넓은 서리 유리 정보 패널과 조작에 따라 펼쳐지는 작은 렌즈의 차이를 강하게 드러냅니다. 글래스모피즘은 일반적인 시각 양식이며 애니메이션도 가능합니다. 단순히 정지와 움직임의 차이가 아닙니다. 웹 렌즈는 선택한 이미지의 사본을 변위시키고 가장자리 반사광을 더합니다. Apple의 네이티브 재질·자동 색조 적응·물리 광학 시뮬레이션을 재현하지는 않습니다.
이 선택에 관한 이야기
세 언어가 댓글을 공유합니다. 작성하려면 GitHub 로그인이 필요합니다.