🔗 웹에서도 확인이 가능합니다.

캐디 스튜디오

캐디 스튜디오는 실제 인물 이미지를 AI 인플루언서 이미지로 변환하는 B2B 서비스입니다. 또한, 백오피스는 사용자가 인스타그램 계정을 연동하여 포스팅을 예약 및 업로드하고, 인플루언서 검색으로 마케팅에 필요한 30만 건의 인플루언서를 검색할 수 있도록 지원합니다.

신사업 팀에 합류한 이후, 초기 개발부터 디자인, 배포까지 프론트엔드 개발을 단독으로 담당했습니다.

🚀 초기 페이지 로딩 속도 개선

문제 발생 상황

• 초기 화면에 다수의 고해상도 이미지를 포함하여 페이지 로드 시간이 현저히 느려지는 문제가 발생하였습니다. 이는 사용자 경험을 저해하고, 이탈 가능성을 높이는 요인이되었습니다.

해결 방법

• 이 문제를 해결하기 위해, 다음과 같은 전략을 도입하였습니다.

  1. 이미지 컴포넌트를 활용하여 이미지를 동적으로 로드하고, 브라우저가 지원하는 최적의 형식인 AVIF, WebP와 같은 최신 이미지 형식을 우선적으로 사용하여 파일 크기를 감소시키고, 이미지 로드 시간을 단축시켰습니다.

  module.exports = {
    images: {
      formats: ['image/avif', 'image/webp'],
    },
  };
  

  1. 이미지 컴포넌트의 Lazy loading 옵션을 적용하여, 사용자가 실제로 해당 이미지가 포함된 화면에 도달했을 때 로드되도록 구현하였습니다. 이렇게 하여 초기 페이지 로딩 시간을 단축하였습니다.
  2. LCP(Largest Contentful Paint) 요소가 될 이미지에 priority 속성을 추가하여 해당 이미지의 로드 우선 순위를 높여 사용자가 페이지를 더 빠르게 로드하고 주요 컨텐츠에 빠르게 접근할 수 있도록 하였습니다.

성과

최적화 전

최적화 후

• 최적화를 통해 페이지 첫 로드 시간을 이전의 약 4s에서 0.97s까지 단축하였습니다. 이로 인해 사용자들이 페이지에 더 빨리 접근할 수 있게 되어, 사용자 만족도와 페이지 이탈률 감소에 기여하였습니다.

Next.js 이미지 최적화 | Ju4n_Devlog

🚀 시간이 오래걸리는 AI 이미지 생성 시 사용자 경험 개선

문제 발생 상황