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

캐디 스튜디오

캐디 스튜디오는 실제 인물 이미지를 AI 인플루언서 이미지로 변환하는 B2B 서비스입니다. 신사업 팀 합류 후 개발 초기부터 배포까지 프론트엔드 개발(1인) 업무를 담당하였습니다.

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

문제 발생 상황

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

해결 방안

• 이 문제를 해결하기 위해, 다음과 같은 전략을 도입하였습니다.
  1. 이미지 컴포넌트를 활용하여 이미지를 동적으로 로드하고, 브라우저가 지원하는 최적의 형식인 AVIF, WebP와 같은 최신 이미지 형식을 우선적으로 사용하여 파일 크기를 감소시키고, 이미지 로드 시간을 단축시켰습니다.
  2. 이미지 컴포넌트의 lazy loading 기법을 적용하여, 사용자가 실제로 해당 이미지가 포함된 화면에 도달했을 때 로드되도록 구현하였습니다. 이렇게 하여 초기 페이지 로딩 시간을 단축하였습니다.
  3. LCP 요소가 될 이미지에 priority 속성을 추가하여 해당 이미지의 로드 우선 순위를 높여 사용자가 페이지를 더 빠르게 로드하고 주요 컨텐츠에 빠르게 접근할 수 있도록 하였습니다.

성과

최적화 전

최적화 후

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

Next.js 이미지 최적화 | Ju4n_Devlog

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

문제 발생 상황

• 이미지 생성 요청 후, 사용자는 이미지가 완성될 때까지 1분 이상의 긴 대기 시간을 경험하고 있었습니다. 이는 사용자의 만족도를 저하시키고 있었습니다.