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

프로젝트 세팅하기

먼저 기본적인 프로젝트 구조가 필요합니다. 두 가지 상태(Off와 On)를 가진 토글을 만들고, 오버라이드를 이용해 이 토글들이 서로 연결되어 가격과 상태를 함께 업데이트하도록 할 수 있습니다. 세 개의 토글을 선택한 뒤 새 파일을 추가하고 새로운 Override를 작성해줍니다.

Framer에서 Override 만들기

Override를 세팅하는 과정은 다음과 같습니다. 먼저, 특정 값을 추적할 수 있는 저장소가 필요합니다. 예시의 경우에는 yearly라는 불리언 값입니다. 하나의 가격 카드를 토글하면 이 값이 업데이트되고, 그에 맞춰 모든 가격 카드의 상태와 가격이 올바르게 변경됩니다.

그 다음 withToggle이라는 Override를 작성합니다. 이 Override는 캔버스에서 컴포넌트를 받아 React 컴포넌트로 반환하면서 업데이트된 props를 전달합니다. 여기서는 일단 Framer에서 받은 props를 그대로 반환합니다. 이 상태로 적용하면 아직 아무 동작도 하지 않습니다.

Variant 업데이트하기

Override가 실제로 동작하려면, 저장소에 저장된 현재 값에 따라 Variant를 설정하고 컴포넌트를 클릭할 때 store의 값을 반전시키는 onClick 핸들러가 필요합니다. 이렇게 하면 올바른 Variant가 적용되면서 매끄럽게 전환됩니다.

또한 텍스트와 같은 다른 속성도 업데이트할 수 있습니다. 예를 들어 컴포넌트를 클릭할 때 텍스트가 월별 가격에서 연간 가격으로 바뀌도록 설정할 수 있습니다.

동기화된 가격 카드 완성하기

이 두 가지 방식을 사용하면 두 숫자 사이를 전환하며 애니메이션되는 가격 카드를 만들 수 있습니다. 캔버스에서 각각의 숫자를 속성으로 설정해두고, 토글 시 자연스러운 전환 효과를 볼 수 있습니다.

원한다면 API를 연동해 지역화된 가격을 가져오는 것도 가능합니다. 그 과정에서도 Framer 컴포넌트 내부 애니메이션의 장점을 그대로 활용할 수 있습니다.

마무리

Framer의 Override는 런타임에서 컴포넌트를 제어하고 수정할 수 있는 강력한 기능입니다. 이번 글에서는 하나의 카드를 토글할 때 가격과 상태가 전체 카드에 동기화되도록 만드는 방법을 살펴봤습니다. 직접 프로젝트를 열어보고 실험해보면 훨씬 더 이해가 쉬울거에요.

프로젝트 따라해보기→

본 글은 Framer 공식 블로그의 ‘How to build synced pricing cards using overrides in Framer’를 번역·각색한 콘텐츠입니다.