State Machine과 WebP 최적화로 구현한 고성능 인터랙티브 카드 컴포넌트

Context

복잡한 애니메이션 상태 관리 시 Boolean 플래그 남용으로 인한 상태 동기화 오류 및 중복 입력 처리 문제 발생. 78장의 고해상도 카드 이미지 로딩으로 인한 초기 진입 속도 저하 및 모바일 환경의 사용자 경험 최적화 필요.

Technical Solution

• Boolean 기반 상태 관리 대신 'idle, shuffling, drawing, revealed' 4단계의 Explicit State Machine을 도입하여 애니메이션 중 중복 입력 완전 차단
• CSS 3D Transform의 perspective 속성을 부모 요소에 배치하고 backface-visibility: hidden을 적용하여 Safari 브라우저 렌더링 이슈 해결
• Framer-motion 등 외부 라이브러리 의존성 없이 cubic-bezier 곡선을 활용한 최적의 CSS 애니메이션 구현으로 번들 사이즈 최소화
• Fisher-Yates 알고리즘 기반의 카드 셔플 로직과 인라인 스타일의 Random Transform을 결합한 시각적 피드백 구현
• 50px 임계값 기반의 네이티브 Touch Event 처리를 통해 외부 라이브러리 없이 모바일 Swipe-to-draw 제스처 최적화
• WebP 포맷 전환 및 카드 뒷면과 상위 5장만 우선 로드하는 전략적 Preloading으로 초기 페이로드 감소

Impact

• 이미지 포맷 최적화(PNG → WebP)를 통한 전체 페이로드 7MB에서 2.5MB로 약 64% 감소
• 개별 이미지 용량을 80~120KB에서 25~40KB 수준으로 경량화
• 600ms의 Flip 애니메이션 시간을 이미지 Fetching 시간으로 활용하여 사용자 체감 로딩 시간 제로화

Key Takeaway

복잡한 인터랙션 설계 시 단순 상태 변수보다는 명시적 State Machine을 정의함으로써 엣지 케이스(중복 입력 등)를 구조적으로 방지하고 애니메이션과 상태 전이의 정밀한 제어가 가능함.