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

효과가 작동하지 않을 때 점검해야 할 사항

1. Scroll Variant 설정 확인하기

가장 먼저, 사이트 내에서 Scroll Variant 효과가 ‘Section in View’로 설정되어 있는지 확인하세요. 이 옵션을 사용하는 경우, 반드시 Section 이름이 지정되어 있어야 효과가 정상적으로 작동합니다.

Section 이름이 없다면 이름을 추가한 후, 프로젝트를 다시 Publish한 뒤 효과가 실행되는지 확인합니다.

2. 접근성 및 모션 감속 기능 설정 확인하기

사이트의 설정에서 접근성 옵션이 활성화 되어있고, 사용자의 기기에서 모션 감속 기능이 활성화되어 있다면 효과는 정상적으로 작동하지 않습니다.

즉, 사용자 브라우저나 기기에서 “prefer-reduced-motion” 설정을 켜둔 경우 의도한 동작이 제한될 수 있으며 불투명도에만 애니메이션이 적용되게 됩니다.

3. 기기에서 저전력 모드 확인하기

사용하는 기기에서 저전력 모드가 활성화되어 있으면 일부 애니메이션이 비활성화되거나 제한될 수 있습니다. 이런 경우엔 해당 기기에서 저전력 모드를 해제한 뒤 다시 확인해 보세요.

위의 점검 사항을 모두 확인했음에도 문제가 계속된다면, Framer의 Contact 페이지를 통해 지원팀에 문의하시면 도움을 받으실 수 있습니다.

자주 묻는 질문(FAQ)

Q. 특정 Section이 화면에 들어오기 전에 미리 애니메이션을 시작할 수 있는 설정이 있나요?

• 네. Scroll Variant의 Offset 값을 조정하면 Section이 완전히 보이기 전에 애니메이션을 시작하도록 설정할 수 있습니다.

Q. 컴포넌트 안에 있는 Section에서도 Section in View 트리거를 사용할 수 있나요?

• 아닙니다. Section 트리거는 페이지 상의 실제 Section 레이어만 감지합니다. 컴포넌트 내부에 있는 Section은 페이지 구조에서 독립된 영역으로 인식되지 않기 때문에 감지가 불가능합니다.

Q. 여러 애니메이션을 한 Variant에 걸면 어떻게 되나요?

• 한 Variant에서 설정한 스타일이 다른 Variant의 스타일과 중첩될 때, 특히 Auto Layout 속성이나 높이/너비 변경이 겹치면 브라우저 렌더링 과정에서 의도치 않은 움직임이 발생할 수 있습니다.

본 글은 Framer 공식 블로그의 ‘Why aren't the effects in my project functioning’를 번역·각색한 콘텐츠입니다.