인터랙션 · 애니메이션
Framer의 가장 큰 강점은 움직임입니다. 코드 없이 부드러운 인터랙션을 만들어 사이트에 생동감을 줄 수 있습니다.
1. 기본 효과 (Effects)
요소를 선택하고 바로 적용할 수 있는 효과들입니다.
| 효과 | 설명 | 활용 |
|---|---|---|
| Hover | 마우스를 올리면 변형 | 버튼, 카드 강조 |
| Appear | 화면에 나타날 때 페이드인·슬라이드 | 섹션 등장 |
| Parallax | 스크롤에 따라 다른 속도로 이동 | 배경 깊이감 |
2. 스크롤 인터랙션
스크롤 위치에 따라 요소가 나타나거나 변형되게 합니다. 랜딩페이지에서 “스크롤하면 하나씩 펼쳐지는” 효과가 대표적입니다.
- 요소가 화면에 들어올 때 페이드인/슬라이드인
- 스크롤 진행도에 따라 크기·위치·투명도 변화
3. Variant 전환으로 만드는 인터랙션
컴포넌트의 Variant(상태)를 연결하면 더 정교한 인터랙션이 됩니다.
- 토글 / 스위치 — On ↔ Off 상태 전환
- 아코디언 — 접힘 ↔ 펼침
- 탭 메뉴 — 선택된 탭 전환
- 메뉴 열기/닫기 — 모바일 햄버거 메뉴
Variant 사이의 전환에 Transition(전환 속도·이징) 을 지정하면 부드럽게 움직입니다.
좋은 애니메이션의 원칙
- 속도 — 0.2~0.4초가 기본. 큰 요소는 약간 느리게.
- 이징(Easing) — “Ease Out”이 가장 자연스럽습니다 (빠르게 시작해 부드럽게 멈춤).
- 목적 — 장식이 아니라 “사용자의 시선을 안내”하는 용도로 쓰세요.
⚠️
애니메이션이 과하면 산만하고 느려 보입니다. 특히 모바일에서는 성능에 영향을 줄 수 있으니 핵심 부분에만 절제해서 쓰세요.
다음 단계
자주 묻는 질문
Last updated on