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

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

Framer YouTube 채널을 구독하세요

Framer 에서 Shimmer 효과 만들기

1단계: 기본 레이아웃 준비

1. 반짝임을 표현할 Shimmer 레이어를 추가합니다.

   • 크기: 높이 1px, 너비 100px

   • 위치: 앱 창의 좌측 상단

   • Fill: Linear Gradient (왼쪽 → 오른쪽, 흰색 60% → 흰색 0%)

2단계: Shimmer 레이어에 루프 효과 적용

1. Shimmer 레이어를 선택한 후, Effect → Loop를 추가합니다.

2. 설정:

   • Delay: 3초 (애니메이션이 끝날 때마다 3초 대기)

   • Scale: 1

   • Rotation: 0

   • X 값: 800px (오른쪽으로 이동)

   • Opacity: 0 (이동하면서 점점 사라짐)

   • Transition Type: Ease Out (빠르게 시작 후 느려지며 종료)

   • Duration: 1.5초

이제 Shimmer 레이어가 3초마다 오른쪽으로 부드럽게 이동하며 사라지는 효과가 적용됩니다.

3단계: 오른쪽 Shimmer 추가하기

Linear 웹사이트처럼 세로 방향으로도 Shimmer 효과를 추가할 수 있습니다.

1. 두 번째 Shimmer 레이어를 생성합니다.

   • 크기: 너비 1px, 높이 100px

   • 위치: 앱 창의 오른쪽 상단

   • Fill: 동일한 Linear Gradient 적용

2. 같은 방식으로 Loop Effect를 추가합니다.

   • Delay: 2초 (첫 번째 Shimmer와 어긋나게 설정)

   • Y 값: 약 670px (아래로 이동)

   • Opacity: 0

   • Transition Type: Ease Out

   • Duration: 1.5초

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

결론

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

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

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