본 문서는 Framer를 배우는 국내 사용자들이 한글 자료의 부족으로 겪는 어려움을 해결하고자, 공식 블로그의 내용을 한국어로 번역하고 실무에 유용한 정보를 추가했습니다. 프레이머를 사용하는 여러분께 작게나마 도움이 되길 바랍니다.

YouTube 채널을 구독하세요

시작하기

Framer에서 웨이브 효과를 만들기 위해 가장 먼저 해야 할 일은 프레임을 그리는 것입니다. F 키를 누르면 프레임 도구가 열리고, 원하는 크기로 프레임을 배치할 수 있습니다. 이 효과에서는 프레임 크기가 크게 중요하지 않아요.

이제 프레임에 선형(Linear) 채우기를 설정해야 합니다. 프레임을 선택한 뒤 Properties 패널의 Fill에서 Linear를 선택하고, 색상을 #09F와 #0DF로 지정해줍니다. 그러면 시원한 느낌의 그라디언트가 적용됩니다.

마지막으로 프레임의 모서리를 둥글게 만들어야 합니다. 반경(Radius)을 40%로 설정하면 원에 가까운 ‘스쿼클(Squircle)’ 형태가 되면서 파도 애니메이션에 적합한 기본 모양이 완성됩니다.

레이어 만들기

웨이브 효과는 총 세 개의 레이어로 구성됩니다.

먼저 프레임의 위치를 Absolute로 변경하세요. Properties 패널의 Position에서 Absolute를 선택하면 됩니다. 이후 파도 효과를 크게 보여주기 위해 레이어의 가로·세로 크기를 4000픽셀로 확대합니다.

그다음 이 레이어를 두 번 복제해 총 세 개의 레이어를 준비합니다. (Command + D 단축키 활용) 이제 Layers 패널에 세 개의 레이어가 나란히 있는 것을 확인할 수 있습니다.

마지막으로 이 세 레이어가 서로 자연스럽게 섞이도록 Multiply 블렌딩 모드를 적용합니다. Style 패널에서 Multiply를 선택하면 레이어들이 겹치면서 파도 같은 중첩 효과가 드러납니다.

애니메이션 추가하기

이제 레이어에 움직임을 넣어봅시다.

세 개의 레이어를 모두 선택하고 Properties 패널의 Effects에서 Loop 애니메이션을 적용합니다. 기본적으로 레이어가 360도 회전하는데, 이를 Linear 곡선으로 설정하면 속도가 일정하게 유지되어 파도가 끊기지 않고 매끄럽게 흐르는 느낌을 줍니다.

또 하나 중요한 설정은 Pinning입니다. 세 레이어를 모두 선택한 뒤, 좌·우·하단 핀을 해제해야 페이지 크기가 바뀌더라도 파도가 제자리를 유지합니다.

Appear 효과 더하기

여기에 등장 애니메이션을 추가하면 더욱 다이내믹한 장면을 연출할 수 있습니다.

웨이브 컨테이너를 선택한 뒤 Appear 효과를 적용합니다. 이때 Opacity를 1로, Y 값을 -400으로 설정하면 파도가 화면 위쪽에서 아래로 내려오는 것처럼 보입니다. 트랜지션은 Ease Out, 시간은 5초로 지정하면 부드럽게 파도가 나타나며 시작하는 효과를 얻게 됩니다.

여러 스타일 실험하기

웨이브 애니메이션의 가장 큰 장점은 변형이 무궁무진하다는 점입니다.

예를 들어, 레이어의 색상을 바꾸거나 뒤집어보면 전혀 다른 분위기의 파도가 만들어집니다. 또, 파도의 위치를 상단이 아닌 하단에 배치하면 페이지의 푸터 배경처럼 활용할 수도 있습니다.

즉, 웨이브 효과는 단순한 장식이 아니라, 디자이너가 브랜드 톤에 맞게 자유롭게 변형할 수 있는 강력한 표현 도구입니다.

효과 보고 따라해보기→

본 글은 Framer 공식 블로그의 ‘Create a stunning wave animation in Framer with just three layers and zero code’를 번역·각색한 콘텐츠입니다.