Shimmer는 흔히 로딩 상태나 강조 효과에서 자주 쓰이는 시각적 장치예요. 얇은 빛줄기가 부드럽게 움직이며 화면에 반짝이는 느낌을 주기 때문에, 사용자에게 “생동감 있는 인터페이스”라는 인상을 줄 수 있습니다. 이 튜토리얼에서는 Framer를 사용하여 웹사이트에 Shimmer효과를 만드는 방법을 보여드리겠습니다.

YouTube 채널을 구독하세요

Framer 에서 Shimmer 효과 만들기

1단계: 프로젝트 설정

먼저 Framer에서 새 레이어를 하나 만들어줍니다.
(유튜브 튜토리얼 예시 크기: 100px × 1px)

2단계: 그라디언트 채우기

레이어에 선형 그라디언트(Linear Gradient)를 적용하여 한쪽이 점점 사라지는 빛줄기를 만드세요.

• 왼쪽: 흰색(투명도 60%)

• 오른쪽: 흰색(투명도 0%)

3단계: 레이어 위치 지정

레이어를 화면의 좌측 상단에 배치합니다.
Note: 위치 속성은 Absolute로 설정하는 게 좋아요.

4단계: 레이어에 애니메이션 효과 추가

레이어를 선택하고 우측 패널의 Add Effect 버튼을 눌러 Loop 효과를 추가합니다.

5단계: 효과 설정하기

• Delay: 3초

• Duration: 1.5초

• Scale: 1

• Rotation: 0

• X 값: 오른쪽으로 이동

• Opacity: 0 (자연스럽게 사라지는 fade-out 효과)

• Transition: Ease Out (끝에서 점점 느려지는 효과)

이렇게 하면 부드럽게 오른쪽으로 사라지는 반짝임이 완성됩니다.

6단계: 레이어 복제 및 4, 5단계 반복

같은 레이어를 하나 복제해서 이번에는 Framer 창 우측에 배치합니다. 4단계와 5단계를 다시 반복하되, 이번에는 지연 시간을 2초로 조정하고 y 값을 조정하여 레이어를 아래로 이동합니다.
이렇게 하면 첫 번째 레이어와 엇갈리며 움직이면서 더욱 풍성한 Shimmer 효과가 만들어집니다.

• Delay: 2초

• Y 값: 아래쪽으로 이동

미리보기

이제 프로젝트를 Publish한 뒤 브라우저에서 열어보세요. 레이어 두 개가 교차하며 반짝임을 만들어내는 걸 확인할 수 있습니다.

결론

웹사이트에 반짝이는 효과를 적용하면 페이지에 시각적인 흥미를 더하는 재미있고 쉬운 방법이 될 수 있습니다. Framer를 사용하면 코드를 작성하지 않고도 이 효과를 쉽게 만들 수 있습니다. 이 튜토리얼의 단계를 따라 웹사이트에 반짝이는 효과를 추가하고 시선을 사로잡아 보세요.

효과 및 리믹스 프로젝트 보기→

본 글은 Framer 공식 블로그의 ‘Advanced animation techniques: strategic shimmer effects for professional UX’를 번역·각색한 콘텐츠입니다.