리퀴드 글래스 효과 사용법: 세련된 액체 유리 효과 디자인 완성하기

리퀴드 글래스(Liquid Glass)는 UI 요소에 정교한 빛의 굴절과 투명한 유리 질감을 구현하여 인터페이스의 깊이감과 레이어링을 극대화하는 시각적 효과입니다. 단순한 스타일 지정을 넘어 쉐이더(Shader) 기반으로 작동하며, 하단 레이어가 투영되는 방식을 실시간으로 변화시킵니다. 애플의 디자인 시스템에서 시작된 이 기법은 현대적인 리퀴드 글래스 ui 및 액체 유리 효과 디자인의 필수 요소가 되었으며, 감각적인 인터페이스 제작을 위해 리퀴드 글래스 효과 사용법을 익히는 것은 디자이너들에게 매우 중요해졌습니다.

최신 리퀴드 글래스(액체 유리) 디자인은 프레임, 컴포넌트, 인스턴스, 그리고 컴포넌트 세트까지 폭넓게 적용 가능합니다. 이를 활용하면 시각적으로 풍부하면서도 역동적인 사용자 인터페이스를 구축할 수 있는 강력한 디자인 도구를 갖추게 됩니다.

1부. 리퀴드 글래스 효과 사용법

리퀴드 글래스 소개

글래스(Glass)는 프레임에 굴절되는 유리 표면 질감을 부여할 수 있는 새로운 효과입니다.

리퀴드 글래스 만들기를 위해 알아야 할 두 가지 핵심 사항:

1. 글래스는 프레임 객체에 적용되어 하단 레이어의 시각적 인식을 변화시키는 쉐이더 또는 래스터 효과입니다.
2. 표준적인 글래스 스타일은 애플에서 선구적으로 도입했으며, iOS 및 iPadOS 16 UI 키트에서 가장 보편적으로 사용됩니다.

사용 범위

현재는 프레임, 컴포넌트, 인스턴스 및 컴포넌트 세트에만 적용할 수 있습니다.

효과(Effects) 패널에서 찾기

효과' 패널의 드롭다운 메뉴를 클릭하세요. 목록에서 '액체 유리'를 선택하여 프레임에 적용합니다. 적용 후, 새롭게 생성된 다양한 속성 매개변수들을 조정할 수 있습니다.

리퀴드 글래스 파라미터 설정

광원 각도/밝기

빛이 투사되는 방향(하이라이트가 맺히는 위치)과 하이라이트의 강도를 조절합니다.

균등조명

빛을 프레임 전체에 고르게 비춥니다. (프레임 외곽의 하이라이트 밝기가 일정한 톤으로 유지됩니다.)

굴절 (Refraction)

빛이 프레임의 가장자리를 따라 굽어지는 정도를 제어합니다. 굴절값이 높을수록 주변 배경 요소가 더 심하게 굴절되어 보입니다.

깊이 (Depth)

유리 재질의 두께감을 조절합니다. 값을 높일수록 프레임 가장자리의 Edge 효과가 더욱 뚜렷해집니다.

분산 효과(Dispersion)

분산 효과를 증가시켜 프레임 가장자리에 미세한 색상 차이 효과를 더합니다. 굴절 속성과 함께 사용할 때 효과가 더욱 극대화됩니다.

흐림 (Blur)

액체 유리 효과의 채도를 제어합니다. 이를 통해 선명하고 쨍한 느낌이나, 부드럽고 은은한 시각 효과를 연출할 수 있습니다.

밝기 (Brightness)

액체 유리 효과의 전반적인 밝기를 조절하여, 전체적인 광택감과 빛 반사 느낌을 제어합니다.

채도 (Saturation)

액체 유리 효과의 채도를 제어합니다. 이를 통해 선명하고 쨍한 느낌이나, 부드럽고 은은한 시각 효과를 연출할 수 있습니다.

2부. 리퀴드 글래스 활용 사례

리퀴드 글래스 만들기 및 디자인 영감을 얻는 방법

리퀴드 글래스 추가하기

1. 효과를 적용할 프레임을 선택합니다.
2. 새 효과를 추가하고 'Liquid Glass' 옵션을 선택합니다.
3. 프레임을 드래그하여 글래스 효과가 하단 배경을 어떻게 변화시키는지 확인합니다.

파라미터 미세 조정

리퀴드 글래스는 배경 투영 효과이므로, 파라미터를 조정하여 하단 요소 위에 독특하고 매력적인 액체 유리 효과 디자인을 완성할 수 있습니다.

1. 효과 패널을 선택합니다.
2. 각 파라미터를 조절하며 리퀴드 글래스 효과가 배경 객체에 미치는 영향을 확인합니다.

⚠ 참고: 굴절(Refraction)과 깊이(Depth) 파라미터는 서로 연동됩니다. 한쪽 수치가 너무 낮으면 글래스 효과가 거의 보이지 않을 수 있습니다.

자유로운 글래스 효과 실험

실제 사물을 재현하거나 프레임에 효과를 적용하여 스타일리시한 그래픽 에셋을 제작해 보세요.

3부. 주의 사항

효과적인 리퀴드 글래스 효과 사용법을 위한 중요 참고 사항

사용 시 고려해야 할 핵심 사항

리퀴드 글래스 효과는 현재 몇 가지 제한 사항이 있습니다. 기능이 아직 베타 단계이므로, 지속적인 업데이트를 통해 사용자 경험을 개선해 나갈 예정입니다.

프레임에만 적용 가능

현재 액체 유리 효과는 프레임 레이어에만 적용됩니다. 벡터 레이어나 텍스트 레이어에는 직접 적용할 수 없습니다. 추후 업데이트를 통해 더 많은 객체 유형을 지원할 예정입니다.

SVG 내보내기 불가

현재 액체 유리 효과가 있는 레이어는 SVG로 내보낼 수 없습니다.

모서리 반경 일치 필수

현재는 각기 다른 모서리 반경 값을 가진 프레임에는 액체 유리를 적용할 수 없습니다. 효과가 정상적으로 렌더링되려면 모든 모서리의 반경 값이 동일해야 합니다.

액체 유리 효과 중첩 불가

액체 유리 효과가 적용된 레이어를 또 다른 액체 유리 레이어 위에 올릴 경우, 배경의 유리 효과는 앞쪽 유리의 렌더링에 영향을 주지 않습니다.

프로토타입에서 사용 불가

현재 프로토타입 프레젠테이션 모드에서는 액체 유리 효과가 표시되지 않습니다. 추후 버전 업데이트를 통해 지원될 예정입니다.