SCRIPT간단하게 유리 재질로 만들어주는 LiquidGlass Script

요즘 SNS에서는 조만간 Apple의 모든 인터페이스에 적용될 Liquid Glass에 대한 이야기가 많이 언급되고 있습니다. 이런 분위기에서 발빠르게 나온 LiquidGlass Script를 소개해드리고, 이런 Script가 없어도 만들 수 있는 튜토리얼이 YouTube에 있어서 함께 소개해드리겠습니다.


1. LiquidGlass Script 분석하기

01. 배경으로 사용될 Typo를 하나 만듭니다.

02. LiquidGlass의 인터페이스인데, 사이즈와 사각형 및 원형으로 형태를 선택할 수 있습니다. Content를 체크하면, 사각형이나 원형의 Glass에 다른 컨텐츠를 넣을 수 있는 Comp가 하나 더 생성됩니다. 이 부분은 나중에 설명드리겠습니다.

03. 사각형으로 선택하고 Create 버튼을 클릭합니다.

04. LiquidGlass Script가 적용되었습니다. 아래 그림처럼 2개의 Comp와 1개의 Solid Layer로 구성되어 있습니다. 이제 이 구조들이 어떤 방식으로 되어 있는지 알아보겠습니다. 전체적인 구조를 파악하는 것이 중요한데, 구조를 파악하면 나중에 응용이 가능해지기 때문입니다.

05. gd_LiquidGlassKey라는 Composition을 열어보면, Shape Layer로 만든 사각형만 하나 있습니다. 앞서 봤던 2개의 Composition Layer가 같은 것이라고 생각하면 됩니다.

06. gd_LiquidGlassKey Composition을 하나 더 복제한 것이 현재 상태입니다. Solid Layer는 Adjustment Layer로 만든 다음에 gd_LiquidGlassKey Composition에 Alpha Matte로 적용시킵니다. Adjustment Layer로 된 Solid Layer에 Fast Blur와 Turbulet Displace 이펙트를 줍니다. 그러면 사각형 박스에 보이는 Layer들은 흐릿하게 보이고 왜곡된 형태로 나타날 것입니다. 맨 위에 있는 gd_LiquidGlassKey Composition Layer에 그림처럼 Parent로 연결합니다. 그렇게 만든 이유는 아마도 맨 위에 있는 Layer만 움직이면 나머지 Layer들도 함께 움직이도록 하기 위해서 인 것 같습니다. 그리고 맨 위에 있는 gd_LiquidGlassKey Composition Layer에 Expression Control 이펙트를 적용하여 하단에 있는 이펙트와 Shape Layer의 옵션들을 연결해 놓았습니다.

07. 이번에는 Content를 체크한 상태에서 만들어보겠습니다. Content를 체크하고 Create 버튼을 클릭합니다. 그림처럼 gd_LiquidGlassContent Composition이 추가로 생성되었습니다.

08. gd_LiquidGlassContent Composition을 더블 클릭해 확인해보겠습니다. Place the content below라는 Composition Layer는 새롭게 추가하는 Layer는 이 Layer의 밑에 놓으라는 말입니다. 이 Layer는 앞서 이야기한 gd_LiquidGlassKey라는 Composition과 같은 Composition Layer입니다. 박스만 있는 Composition Layer이고, Mode는 Stencil Alpha로 되어 있습니다. 하단의 Layer가 눈에 보이지 않는 박스 안에서만 보인다는 뜻입니다. ARTWORKS라는 Typo를 추가했습니다.

09. 그렇게 하면 이렇게 Glass 위에 보여집니다.

10. 이번에는 배경을 Grid로 만들어보겠습니다. Solid Layer를 하나 만들고, 여기에 Grid 이펙트를 적용했습니다.

11. 이번에는 Circle을 선택하여 원형으로 LiquidGlass를 만들어보았습니다.

12. 이번에는 박스형이나 원형이 아닌 다른 오브제로 LiquidGlass를 만들어보겠습니다. gd_LiquidGlassKey Composition 안에 있는 기존의 박스형이나 원형의 Shape Layer의 눈을 끄든지, 아니면 삭제하고 원하는 것을 만들어주면 됩니다. 여기에서는 Type Tool로 MOTIONLAB을 입력했습니다.

13. 하나의 Comp를 복제하여 사용했기 때문에, 하나만 바꿔줘도 그림처럼 간단하게 바꿔줄 수 있습니다.

14. Type Layer의 사이즈가 작아서 잘 안보일 수도 있어서 조금 크게 해봤습니다.

2. 다른 방식으로 LiquidGlass 만들기

01. 이번에는 Script 없이 만들어보겠습니다. 일단 움직이는 BG Layer를 만드는데, 새로 나온 FluidMap이라는 이펙트로 만들어보겠습니다. Solid Layer에 FluidMap 이펙트를 적용합니다. 만약, 없다면 Fractal Noise 같은 것을 활용해도 상관없습니다.

02. FluidMap 이펙트는 아래 그림과 같은 스타일의 영상을 만드는 것에 최적화가 되어있는 이펙트입니다. 물결이나 커튼, 깃발의 움직임 등을 표현할 수 있습니다.

03. 여기에 컬러를 추가해보겠습니다. Solid Layer를 하나 더 만들고 Gradient8 이펙트를 적용합니다. Gradient8은 최근에 나온 이펙트로, 8개의 컬러를 적용할 수 있습니다. 기본 이펙트 중에 4-Color Gradient를 사용해도 됩니다. Gradient8 이펙트는 상당히 옵션이 많아서 사용자의 입맛대로 다양한 표현이 가능합니다. 이 Layer에 Overlay Mode를 적용합니다.

04. 이제 새로운 Composition을 하나 만들고, 앞서 만든 Background Composition을 가져옵니다. 새로운 박스를 Shape Layer로 만듭니다. 그림처럼 Brightness & Contrast – Gaussian Blur – Noise – Transform 4개의 이펙트를 순서대로 적용합니다. Layer를 Adjustment Layer로 바꿔주면 그림처럼 보일 것입니다.

05. Shape Layer를 복제합니다. 복제한 Shape Layer에 있는 이펙트들은 모두 삭제하고, Layer의 이름을 Refraction이라고 입력합니다. 물론, Adjustment Layer는 없애 줍니다. 여기에 Layer Style > Inner Glow를 적용합니다. Color를 흰색으로 바꿔주고 Size를 35로 입력합니다. 나중에는 개인 취향에 따라서 입력 값을 바꾸길 바랍니다. 이 부분이 굴절되는 부분이 될 것입니다.



06. Refraction Layer의 Path Size, Roundness를 맨 처음 만든 Shape Layer의 Path Size, Roundness에 Whip을 이용하여 Parent 시켜줍니다. 그 이유는 나중에 하나의 Path Size와 Roundness을 조절하여 전체를 변형시키기 위해서 입니다.

07. 이제 맨 처음에 만든 Shape Layer로 돌아갑니다. 여기에 Displacement Map 이펙트를 추가합니다. Map Layer를 Refraction Layer로 설정하고, Effects & Mask로 설정합니다. Effects & Mask로 설정해주지 않으면 적용이 안됩니다.



08. 그림처럼 가로와 세로의 값을 각각 30, 20으로 입력합니다. 물론, 더 굴절되는 것을 원한다면 입력 값을 조금 높여주면 됩니다.

09. 맨 처음에 만든 Shape Layer를 다시 한번 복제하여 이번에는 Stroke으로 이름을 입력합니다. 이 Layer는 박스 주변에 Stroke을 주기위해 만들었습니다. 만약, 테두리가 있는 것이 싫다면 만들지 않아도 됩니다. Stroke Layer의 Path Size, Roundness도 Whip을 이용하여 처음 만든 Shape Layer의 Path Size, Roundness에 Parent시켜줍니다

10. 이제 Refraction Layer와 Stroke Layer를 처음 만든 Layer에 Parent시켜줍니다. 이제 Shape Layer만 이동시키면 모든 Layer가 함께 움직일 것입니다.

11. Refraction Layer와 Stroke Layer에 Lock(열쇠)을 걸어서 선택되지 않게 해줍니다.

12. 이제 완성이 다 되었습니다. Shape Layer를 선택하여 이동시켜 봅니다.

13. 원하는 문구를 써 보겠습니다. Typo Layer도 Parent시켜 줍니다.

14. Shape Layer의 Path로 가서 Size와 Roundness를 조절하면 그림처럼 다양한 모양으로 만들 수 있습니다. Morphing 애니메이션도 가능합니다.

15. 위에 설명한 것은 요즘 YouTube에 자주 언급되고 있는 방식입니다. 만약, LiquidGlass Script로 만든다면 이렇게 나올 것입니다. 가장자리에 굴절이 되는 부분이 없긴 합니다. 그래서 Script를 사용해 굴절 부분을 좀 더 밀도감 있게 추가하여 사용하는 것도 좋은 방법입니다.