[오늘가챠] TCG 렌더링 최적화: Cloudinary 미디어 실시간 변환과 Lazy Loading

·
◈ Yermi Project/오늘가챠🃏
수백 장의 고화질 일러스트(카드)가 한 번에 뷰포트를 채우는 '오늘가챠' 앱 특성상, 미디어 렌더링 최적화는 프론트엔드 성능의 절대적인 지표입니다. 이를 우아하게 해결한 최적화 여정을 공유합니다.1. On-the-fly 실시간 트랜스포메이션의 마법보통 백엔드 개발 시 유저가 이미지를 업로드하면, 원본, 중간 사이즈, 작은 썸네일 사이즈로 각각 리사이징 툴(ImageMagick 등)을 거쳐 S3 버킷에 별도로 저장해 두는 무거운 배치를 돌립니다. 이 지루한 작업을 글로벌 미디어 CDN 서버인 Cloudinary에 100% 외주화했습니다.극한의 자동 압축 (f_auto, q_auto)Cloudinary에 원본 이미지 하나만 올려두면, 프론트엔드 태그에서 URL 파라미터만 살짝 변경하여 요청을 때립니다.원본..