상품 설명 영역 개선기 Part.2

기존 HTML 타입의 상품 설명은 외부 솔루션에 의존하여 Image Crop과 Lazy Loading 기능을 사용했습니다. 그러나 PC 환경에서는 원본 HTML을 그대로 제공하여 대용량 이미지 로딩 시 속도가 저하되는 문제가 있었고, 기능 커스터마이징과 캐시 관리에 어려움이 있었습니다.

이를 해결하기 위해 올리브영은 외부 솔루션을 내재화하고, AWS Lambda와 S3, CloudFront를 활용한 자체 이미지 가공 프로세스를 구축했습니다. 새로운 프로세스는 다음과 같이 동작합니다.

• Step 1-2: 상품 상세 접근 시 Redis 캐시를 우선 조회하며, 캐시가 없을 경우 DB에서 데이터를 가져와 SQS로 메시지를 발행합니다.
• Step 3: Lambda가 외부 이미지를 스크래핑하여 S3에 업로드하고, Crop 및 HTML 가공을 거쳐 다시 S3와 Redis에 저장합니다.
• Step 4: 24시간 주기로 이미지 동일성을 검증하여 변경 사항을 반영합니다.

특히 이미지 스크래핑, 동일성 검사, S3 업로드 과정에 Kotlin Coroutine을 도입하여 비동기 방식으로 처리함으로써 작업 지연을 최소화했습니다.

개선 결과, PC 환경에서의 상세 기술서 로딩 속도가 기존 대비 60~99% 향상되었으며, 모바일 환경에서도 이미지 로딩 성능이 개선되었습니다. 또한 유효하지 않은 이미지에 대한 실시간 탐지 프로세스를 구축하고 유지보수 비용을 절감했습니다.