코디엔진의 /룩북(/히스토리, /날짜) 모달에서 아바타 미리보기 로딩 속도 및 렌더링 성능을 전면 최적화했습니다.

주요 개선 및 최적화 사항

• 아바타 엔진 전역 파츠/아틀라스 캐시 공유: 기존에는 날짜별 프리셋 캔버스마다 new AvatarEngine()을 개별 생성하여 동일한 기본 몸통(00002000), 헤어, 성형, 아틀라스 이미지를 캔버스 수만큼(최대 9~15회) 중복 네트워크 요청 및 디코딩하던 비효율을 해결했습니다.
  클라이언트 전역 파츠/이미지 메모리 캐시를 공유하도록 개선하여, 최초 1회 로드 이후 모든 프리셋 및 날짜 카드가 0ms 즉시 메모리 캐시에서 파츠를 재사용합니다.
• 썸네일 정적 0프레임 고정 (불필요한 애니메이션 루프 차단): 코디 히스토리 카드는 정지된 썸네일임에도 매 프레임마다 백그라운드 requestAnimationFrame 애니메이션 틱을 돌며 CPU/GPU를 소모하던 문제를 개선했습니다. motionFrameIndex={0} 정적 렌더링을 적용하여 단 1회 렌더 후 애니메이션 루프를 즉시 종료하므로 브라우저 버벅임이 완전히 사라집니다.
• 과거 스냅샷 불변 데이터 HTTP 브라우저 캐싱: 과거 특정 날짜(date)의 코디 정보는 변하지 않는 불변 데이터임에도 no-store로 매번 넥슨 서버를 호출하던 구조를 개선했습니다. /api/character/outfits 응답에 Cache-Control: public, max-age=86400, s-maxage=604800을 적용하고 클라이언트 fetch의 강제 no-store를 해제하여, 한 번 조회한 과거 날짜는 재스크롤 시 0초만에 즉각 표시됩니다.
• 뷰포트 로딩 마진 튜닝: 창 진입 시 화면 밖 320px 아래 날짜들까지 한번에 10개 이상 동시 요청하여 네트워크 대역폭을 잠식하던 현상을 방지하도록 IntersectionObserver 마진을 80px로 조정하여, 화면에 보이는 카드부터 집중적으로 빠르게 로딩되도록 순서를 최적화했습니다.

코디엔진 바로가기 →