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

Reduced Motion이란?

최신 운영체제들은 사용자가 화면상의 움직임을 줄일 수 있도록 설정하는 기능을 제공하고 있습니다. Framer 역시 이러한 사용자들의 선호를 반영하여 패럴랙스, 트랜스폼, 레이아웃 애니메이션을 비활성화할 수 있는 설정을 제공합니다.

Reduced Motion 설정 방법

프로젝트에서 해당 효과를 켜거나 끄려면 사이트 설정(Settings)으로 이동하세요. 일반 탭에서 이 설정을 조정할 수 있는 옵션을 찾을 수 있으며, 여기서 패럴랙스나 레이아웃 애니메이션 같은 다양한 동작 효과를 제어할 수 있습니다.

왜 Reduced Motion 설정이 중요할까요?

Framer로 멋진 애니메이션을 만드는 것도 좋지만, 모든 사용자를 배려하는 디자인은 모든 이들에게 만족스러운 경험을 선사해줄 수 있습니다. 만일 여러분이 만든 사이트가 동작 줄이기 설정에서 어떻게 보이는지 확인하고 싶다면, Setting > Accessibility에서 Reduced Motion을 체크해 보세요. 이 설정을 켠 상태에서 여러분의 Framer 사이트가 여전히 사용하기 편한지 확인해 보는 습관을 들이면 좋습니다.

애니메이션을 줄이면 저사양 기기나 배터리 절약이 필요한 환경에서도 사이트가 더 부드럽게 작동하는 효과를 볼 수 있습니다. 화려함보다는 사용자에게 꼭 필요한 정보가 잘 전달되고 있는가에 집중해 보시길 바랍니다.

자주 묻는 질문(FAQ)

Q. 이 설정을 켜면 사이트 내의 모든 효과가 전부 사라지나요?

• 아닙니다. Reduced Motion은 주로 시각적 어지러움을 유발할 수 있는 큰 움직임(슬라이드, 과도한 확대/축소, 패럴랙스 스크롤 등)을 억제하는 데 집중합니다.

Q. 특정 섹션의 애니메이션에만 Reduced Motion을 개별 적용할 수 있나요?

• 아닙니다. 사이트 설정에서 해당 기능을 활성화하면 모든 페이지의 패럴랙스나 레이아웃 애니메이션이 공통적으로 제어됩니다.

Q. 코드 컴포넌트로 직접 만든 애니메이션도 해당 기능으로 제어되나요?

• 아닙니다. 코드 컴포넌트로 직접 제작한 애니메이션을 멈추려면, 해당 코드를 작성한 란에 새로운 로직을 구현하는 등의 추가적인 코드 작성이 필요합니다.

본 글은 Framer 공식 블로그의 ‘Reduced motion settings’를 번역·각색한 콘텐츠입니다.