[이미지 렌더링 최적화] CloudFront 비용절감 트러블 슈팅

[이슈 상황]

- 1번 상황
현재 CF에서 발생하는 비용이 꽤 크다

> 모든 이미지를 jpg, png로 반환하는 상태인데, 이로 인해 서빙되는 바이트가 너무 높게 책정됨으로써 OutBound관련 비용이 크게 나오고 있다 (1달 기준으로, 꽤 크게 나오고 있다...)

 

- 2번 상황
작품 썸네일 이미지 화질이 좀 낮은 상태이다.

> 현재 파일 이미지 등록은 API에서 해당 이미지 데이터를 받아서 S3에 올리고 있는데, 해당 과정에서 리사이징 및 압축을 진행하고 있다. 
이로 인해 이미지 화질이 낮아질 때가 잦다.

 

[해결을 위한 설계 내용 요약]

- 1번 결론

> 클라이언트에 데이터를 제공하는 OutBound 시점에, 압축률이 더 큰 WEBP 형식으로 변환하여 응답하도록 조정진행.

* WEBP형식은 위 이미지 포맷형식들보다 압축률이 25~35%정도 높으니, 변환 작업을 마치게 되면 비용 또한 20%정도 절감할 수 있는 효과를 기대할 수 있음

 

(마음 같아선 새로 나온 포맷형식인 AVIF로 하고 싶은데.. 지원하는 브라우저 버전이 좀 높다. 현재 회사에서 운영 중인 서비스 이용객중 고령 인구가 많은 점을 감안했을 때, 브라우저 버전이 높을 경우 예기치 못한 사례가 발생할 것 같으니 우선 WEBP로 진행하는 것으로 결정하였다. 추후 고도화를 시킬 때 AVIF에 대한 개선점도 같이 반영할 예정이다)

 

- 2번 결론

> 굳이 서버 통해서 S3에 이미지 올리지말고, 클라이언트 단에서 곧바로 S3에 이미지 등록할 수 있도록 Presinged URL 제공하도록 진행.
* 리사이징 및 압축진행과 같은 과정은 CF에 Lambda@Edge 붙여서 해결하도록 하자 (이때 WEBP 변환도 할 거다)
* 붙이게 된다면 이미지 조회 시, Origin response단에 해당 기능을 붙일 예정이다

• Viewer-request : CloudFront가 최종 사용자의 요청을 수신할 때
• Origin-request : CloudFront가 오리진에 요청을 전달하기 전
• Origin-response : CloudFront가 오리진의 응답을 수신할 때
• Viewer-response : CloudFront가 최종 사용자에게 응답을 반환하기 전

 

[추가 고민해본 것들]

- 이미지 등록 시, 해당 이미지의 보안 관련해서 신경 써줘야 할까?

> 작품 이미지 같은 경우는 Private하지 않다. 즉, 돈을 내고 봐야하는 이미지가 아니다. 그러니 보안을 고려해서 설계하지 않게 결정함

 

- 현재 사용 중인 CF에 연동되어 있는 S3 버킷의 정책을 수정해야 할까?

> 현재 연동되어 있는 S3의 버킷정책을 보니 Put 관련된 정책이 없었다. 허나 IAM을 확인한 결과 S3 Put관련된 정책이 있었으므로 굳이 S3 버킷의 정책을 수정할 필요가 없어졌다. 
* 이미지 등록 도메인이 달라질 경우, S3의 권한에서 AllowedOrigins 부분을 고려하여 수정해줘야 할 듯 (CORS 때문에)

 

- 현재 사용 중인 CF에 설정되어 있는 캐시가 없는 것 같은데...

> 이유는 인프라팀에 한번 물어봐야겠지만, 필자가 봤을 땐 CF에 캐시가 따로 지정되어 있지 않았다.

잘못 본 걸수도 있으니 추후 꼭 문의를 해보고, 캐시 도입을 최대한 반영하려고 한다.

 

 

 

--------------------------------------------------------------------------------------

 

현재 조직 측면에서 봤을 때 비용 절감이 필요해보여서 필자가 직접 제안한 프로젝트이니만큼, 꼭 유종의 미를 거두고 싶다.

설정한 개발기간 준수하여 마무리 잘 해보자.

아자아자 화이팅~~