대형 커서 — 시선 운반자
의도적으로 크게 만든 macOS 스타일 포인터로, 프레임을 _눈에 띄는 주인공_처럼 이동합니다. 화면 밖에서 등장해 시청자의 시선을 다음 관심 지점으로 안내하고, 클릭하여 다음 동작을 실행한 후 퇴장합니다. 여러 런치 영화에서 검증된 기법입니다.
존재 이유. 큰 커서 움직임은 런치 비디오에서 가장 저렴하면서도 효과적인 모션 소스 중 하나입니다. 하나의 요소, 트랜스폼 전용 트윈만으로도 (1) 정적일 수 있는 장면에 시선을 끌고, (2) 모프/전환에 인과 관계를 부여하며("클릭이 그렇게 만들었다"), (3) 새로운 장면이나 복잡한 애니메이션 시퀀스를 시작할 때 시선을 분할합니다. 클수록 좋습니다 — 실제 크기 커서는 비디오 스케일에서 사라져 보입니다.
크기 및 외형 (하우스 규칙)
- 전체 프레임 장면:
7cqw(1920 기준 약 134px). 모크업/소형 프레임 변형:4.6–5.5cqw. 그보다 작게 사용하지 않습니다. - 모든 곳에서 하나의 SVG 화살표 지오메트리 사용. 두 가지 검증된 채우기 방식 — 흰색 본체 + 검은색 윤곽선, 또는 검은색 본체 (
#1c1c1c) + 흰색 윤곽선 (1.4px). 장면 대비에 따라 선택하고, 영화 내내 일관성 유지. - 브랜드 모티프 커서 (강력한 기법). macOS 화살표는 기본값이지 강제 사항이 아닙니다. 대상 브랜드가 인식 가능한 커서 정체성(협업 디자인 툴의 컬러 멀티플레이어 화살표 + 이름표(Figma 스타일), 크리에이티브 스위트의 정밀 크로스헤어, 독특한 제품 포인터)을 가진다면 그 커서를 사용하세요: 제품을 아는 사람에게 즉시 통하는 브랜드 언어입니다. 동일한 규칙(대형 스케일, 물리적 진입/퇴장, 팁 타겟팅, 클릭 점화)이 그대로 적용되며, 이름표 변형은 하나의 단단한 유닛으로 이동합니다(이름표가 화살표 뒤를 따릅니다). 모티프가 진정으로 참조 가능할 때만 사용하세요; 아무도 모르는 커서는 그저 이상한 화살표일 뿐입니다 — 기본 macOS로 되돌리세요.
filter: drop-shadow(0 4px 6px rgba(0,0,0,.3)),pointer-events: none, 모든 장면 콘텐츠 위에z-index,will-change: transform.
#root .cursor {
position: absolute;
left: 48%;
top: 115%; /* 화면 아래로 숨김 — 기본 포즈는 화면 밖 */
width: 7cqw;
height: 7cqw;
z-index: 20;
filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
pointer-events: none;
will-change: transform;
}
진입 법칙 — 물리적이며, 절대 드러나지 않음
커서는 항상 화면 밖에서 진입합니다(기본값: 아래에서, top:115–120%) 그리고 하나의 감속 글라이드로 첫 번째 대상까지 이동합니다. _방 안에 들어온 느낌_을 주어야 합니다. 절대 정지 위치에서 불투명도 페이드인 하거나 마스크로 드러내지 마세요 — 그렇게 하면 결함처럼 보입니다(실제로 반복적으로 관찰된 실패 모드).
- 기본 경로: y축을 따라 직선으로 대상까지 — 분할된 대각선 없음. 대각선도 이야기상 필요할 때는 괜찮습니다(축에서 벗어난 대상을 향해 진입), 하지만 어느 쪽이든 하나의 연속적인 벡터여야 합니다.
duration: 0.4–0.92s,ease: power3.out,fromTo에immediateRender: false.
tl.fromTo(
cursor,
{ left: "48.6%", top: "115%" },
{ left: "48.6%", top: "55%", duration: 0.85, ease: "power3.out", immediateRender: false },
0.25,
);
팁 타겟팅 및 클릭 탭
핫스팟은 화살표 팁이지, 상자 중심이 아닙니다. 팁을 대상의 중심에 정렬하고, 모든 누름 스케일링을 팁을 기준으로 회전시킵니다: transformOrigin: '21% 14%' (24단위 viewBox의 하우스 화살표 경로 기준).
클릭 = 비대칭 압축/팽창 (1:2 비율이 실제 탭처럼 느껴짐):
tl.to(cursor, { scale: 0.84, duration: 0.1, ease: "power2.in", transformOrigin: "21% 14%" }, t);
tl.to(
cursor,
{ scale: 1, duration: 0.22, ease: "power2.out", transformOrigin: "21% 14%" },
t + 0.1,
);
대상의 반응은 별도의 병렬 트윈입니다(버튼: scale: 0.94 + 누름 색상/그림자, 같은 t에서 시작). 커서 전용 탭(예: 텍스트 입력 필드 포커스)에는 대상 반응이 없습니다. 대상 측면에서는 cursor-click-ripple / press-release-spring과 함께 사용하세요.
클릭이 다음 박동을 점화합니다
모프, 타이핑 실행, 창 변환 또는 장면 정의 애니메이션이 그냥 _시작_하도록 두지 마세요. 커서를 트리거 위에 두고 클릭이 같은 프레임 내에서 발생하게 하세요:
- 클릭 ▸ 메뉴/하위 메뉴 계단식, 토글 플립
- 클릭 ▸ 입력 필드에 타이핑 시작
- 클릭 ▸ 컴포저 모프 다운 / 창 축소
- 클릭 ▸ 로고 점화 / 비행 시작
- 클릭 ▸ 제품 모크업에서 재생 상태 전환 + UI 생명 깨우기
커서가 소유하지 않은 긴 박동(타이핑, 나레이션) 동안에는 옆으로 이동(0.5–0.9초, power2.out)합니다 — 절대 액션 위에 얼어붙어 있거나 무의미하게 흔들리지 않습니다.
퇴장 법칙 및 장면 간 핸드오프
두 가지 공식 퇴장 방식 — 둘 다 물리적이며, 절대 제자리에서 불투명도 페이드 아웃하지 않습니다:
- 프레임을 떠납니다:
power2.in으로 가장 가까운 가장자리를 향해 가속 (left:'118%',left:'-12%', 또는top:'116%'), 0.5–0.7초. - 곡선 절단 핸드오프: 하드 컷 직전 약 0.3초 동안 커서가 다음 장면의 첫 번째 클릭 지점을 향해 가속(
power2.in)하기 시작하여 해당 경로의 약 1/3을 덮습니다. 다음 컴포지션은gsap.set으로 커서를 핸드오프 포즈에 설정하고 일치하는 속도로power2.out을 계속합니다. 커서 자체가 이음새를 꿰매는 운반 요소가 됩니다:
// 장면 A, 마지막 0.3초 — 여정 시작:
tl.to(cursor, { left: "40.7%", top: "63.7%", duration: 0.3, ease: "power2.in" }, CUT - 0.3);
// 장면 B, t=0 — 일치하는 속도로 마무리:
gsap.set(cursorB, { left: "40.7%", top: "63.7%" });
tl.to(cursorB, { left: "22%", top: "45%", duration: 0.6, ease: "power2.out" }, 0);
체크리스트
- 전체 프레임 7cqw 이상 (모크업 내부 4.6–5.5cqw) — 확실하지 않으면 더 크게
- 하나의 연속 벡터로 화면 밖에서 진입 (페이드/마스크 드러냄 없음)
- 팁이 대상 중심에 도달; 누름 회전 중심
transformOrigin: '21% 14%' - 모든 클릭이 같은 프레임 내에서 무언가를 발생시킴
- 소유하지 않은 박동 동안 옆으로 이동; 무의미한 흔들림 없음
- 물리적으로 퇴장 (프레임 밖 또는 곡선 절단 핸드오프) — 제자리 페이드 없음