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

Context

HTML 타입 상품 설명 영역은 외부 솔루션으로만 모바일 환경에서 이미지 자르기(Crop)와 지연 로딩(Lazy Loading)을 제공했고, PC 환경에서는 원본 HTML을 그대로 제공하여 100MB 이상의 대용량 이미지로 인한 조회 속도 저하가 발생했습니다. 또한 외부 솔루션 사용으로 기능 커스터마이징이 불가능했고, 서버별 캐시 관리로 인한 반영 지연 및 세일 기간 중 다량의 timeout이 발생했습니다.

Technical Solution

• 외부 솔루션의 Crop 및 Lazy Loading 기능을 직접 구현하여 내재화: Lambda(Public)를 통해 외부 이미지 스크래핑 및 S3 업로드, 이후 이미지 Crop 및 HTML 가공 처리를 자체 수행
• Redis 기반 다층 캐싱 전략: 사용자 접근 시 먼저 Redis 캐시(key: productNo + version) 조회, 미존재 시 Oracle DB에서 원본 HTML 조회 후 Redis에 적재
• SQS 메시지 기반 비동기 처리 파이프라인: 상품 상세 노출 후 SQS로 메시지 발행하여 별도 프로세스에서 이미지 스크래핑, Crop, 가공된 HTML을 Redis에 재적재
• CloudFront 및 CDN 캐시를 통한 정적 컨텐츠 배포: Private S3에 가공된 이미지와 HTML을 저장하고 CDN으로 고속 전송
• 코루틴 기반 비동기 처리: 외부 이미지 스크래핑, 이미지 동일성 검사, S3 업로드 작업을 코루틴으로 비동기 실행
• 24시간 주기 이미지 동일성 검증: 정기적으로 원본 이미지와 가공된 이미지의 변경 여부 확인, 변경 감지 시 전체 프로세스 재실행
• 실시간 유효하지 않은 이미지 감지: Lambda(Public) 스크래핑 단계에서 없는 이미지 또는 크기가 큰 이미지에 대해 로그 기록 및 협업툴 알림

Impact

• PC 환경 상세 기술서 로딩 속도 60~99% 향상
• 모바일 환경에서도 이미지 로딩 속도 개선 (네트워크 상태에 따라 변동)
• 외부 솔루션 제거로 인한 유지 보수 비용 절감

Key Takeaway

대용량 정적 컨텐츠를 서빙할 때 Redis 캐싱 + S3 + CDN을 조합하고, SQS 기반 비동기 파이프라인으로 전처리하며, 코루틴으로 I/O 병목을 해소하면 외부 솔루션 의존을 제거하면서도 대폭의 성능 향상을 달성할 수 있습니다. 정기적 동일성 검증과 실시간 감시 프로세스의 구축은 장기적 운영 안정성을 보장합니다.