HyperFrames 모션 다듬기
이미 만들어진 비디오가 더 프리미엄스럽고 유려하게 느껴져야 할 때 이 스킬을 사용하세요.
세그먼트 진단
타임라인을 3~5초 단위 블록으로 나누세요:
- 이 세그먼트에서 뷰어가 이해해야 할 것은 무엇인가요?
- 어떤 요소에 초점이 맞춰지나요?
- 커서가 올바른 대상을 클릭하나요?
- 클릭 전에 컴포넌트가 이미 나타나 있나요?
- 움직임 없이 긴 멈춤이 있나요?
- 텍스트나 이미지가 잘려 보이나요?
고효율 조정
- 클릭 피드백을 커서 접촉 지점에 더 가깝게 이동하세요.
- 혜택과 가격 사이의 멈춤을 줄이세요.
- UI 스크롤에는
power3.inOut를 사용하세요. - 텍스트 및 카드 등장에는
power2.out또는power3.out을 사용하세요. - 하위 애니메이션이 상위 컨테이너 스크롤과 충돌하지 않도록 하세요.
- 클릭 대상에
1.015에서1.035사이의 작은 포커스 줌을 적용하세요. - 임시 그림자를 사용하여 시선을 유도하세요.
일반적인 수정 사항
커서가 빈 공간을 클릭함
- 컴포넌트가 완전히 등장할 때까지 클릭을 지연하세요.
- DOM 경계 상자에서
x/y를 다시 계산하세요. - 컨테이너가 스크롤되는 경우, 스크롤 후에 위치를 검증하고 스크롤 전에는 검증하지 마세요.
텍스트 겹침
- 등장 간격을 늘리세요.
- 글꼴 크기뿐만 아니라 블록 스케일도 줄이세요.
- 프레임당 표시되는 복사본을 줄이세요.
- 카드와 버튼의 고정 높이를 보장하세요.
활기 없는 캐러셀
- 캐러셀이
y,opacity, 약간의scale과 함께 나타나게 만드세요. - 중앙 카드에서 멈춤을 포함하여 수평 축을 애니메이션 처리하세요.
- 선택된 카드에 미묘한 줌을 적용하세요.
- 원본 사이트에 없는 테두리나 그림자는 제거하세요.
정적 세그먼트
- 멈춤을 미세 움직임으로 전환하세요: 가벼운 시차, 미묘한 호흡, 다음 동작을 준비하는 커서.
- 중요한 읽기 자료가 없는 지점의 유지 시간을 줄이세요.
- 혜택과 가격을 더 간결한 순서로 표시하세요.
CTR 체크리스트
- 제품이 일찍 나타납니다.
- 혜택이 가격보다 먼저 나타납니다.
- 가격이 깔끔한 화면에 나타납니다.
- CTA에 시각적 초점이 맞춰집니다.
- 커서가 무작위로 느껴지지 않고 여정을 보여줍니다.
- 체크아웃으로의 전환이 클릭의 결과로 느껴집니다.
검증
충분한 샘플과 함께 npx hyperframes inspect를 사용하세요:
npx hyperframes inspect ./project --samples 18
가능하다면, 클라이언트가 비판한 시점의 스냅샷을 생성하고 검토하세요:
- 첫 번째 프레임;
- 첫 번째 클릭;
- 주요 제품;
- 혜택;
- 가격;
- 체크아웃;
- 확인.
HTML을 재구성하기 전에 타이밍, 이징, 오프셋, 스케일 및 불투명도를 조정하는 수술적 변경을 가하세요.