프론트엔드
리브랜딩 ATF 개발기
두줄요약
500장 이상의 이미지를 로고로 수렴시키는 ATF 인터랙션을 WebGL 기반으로 구현했습니다. Texture Atlas와 사전 좌표 계산으로 요청 수와 런타임 부담을 줄였습니다.
문제 상황
- ATF에서 500장 이상의 이미지를 스크롤 연동 애니메이션으로 이동·집결시키는 리브랜딩 인터랙션
- PC·모바일 환경의 초기 리소스 로딩, 디코딩, 프레임 드롭 위험
구조와 흐름
- DOM 스타일 갱신 대신 PixiJS 기반 WebGL 렌더링으로 스프라이트 좌표를 GPU 버퍼에서 갱신
- GSAP 스크롤 진행도와 PixiJS 애니메이션 동기화
- Atlas 메타데이터와 사전 생성 positions.json을 런타임 애니메이션에 활용
선택 이유
- Texture Atlas로 개별 이미지 요청을 묶고 우선순위 Atlas와 이미지 중복 사용으로 초기 로딩 자원 축소
- SVG 경계 샘플링, Poisson Disk·Stratified Grid 샘플링으로 로고 외곽과 내부 밀도 구성
- 헝가리안 알고리즘과 방향 패널티로 Origin–Target 최소 비용 매칭
성능/운영 포인트
- PC 기준 이미지 요청 500장→11장, 추가 최적화 후 6장으로 축소
- 빌드 타임 좌표 계산 분리로 사용자 환경의 계산 부담 축소
- 모바일 스크롤·애니메이션 동시 구간의 안정적 FPS 확보
