🔥 사용자 피드백 개선 : [사진 응답속도 개선]

[evergreenn]

출시후 사용자들의 반응

우선 지난주 학내 커뮤니티 에브리타임에 첫 출시후 반응이 좋았습니다.. ㅎㅎㅎ 그런데 사용자분들이 우리의 핵심 기능인 "사진" 과 관련되어서 속도가 느리다 라는 피드백이 있어서 해당 응답속도를 개선해 보았습니다.
https://everytime.kr/426789/v/339376642

속도개선까지의 아이디어

저의 가장 큰 주안점은 분산된 서버 환경에서의 이미지 파일 제공 이였습니다. ! 최근 정보처리기사 실기 공부를하고 있었는데, 전세계적으로 분산되어서 파일을 저장하고, 해당 지역별로 가장 가까운 서버에서 파일을 제공 받게 한다면, 해당 이미지의 응답속도가 개선되지 않을까 ? 라는 너무 막연한 착안점을 얻었습니다.
그다음 구글링과 스택 오버플로우 검색을 해 보았습니다.

CDN 을 이용한 성능개선

다행히도, CDN 이라는 키워드를 찾을수 있었고, CDN 을 이용한 캐싱을 한다면 응답속도를 조금 더 최적화 할수 있지 않을까라는 가설을 세웠습니다.
CDN에 대해 간략해 설명하자면,

CDN(콘텐츠 전송 네트워크, content delivery network) 간단히 말하면 지리적으로 분산된 여러 개의 서버로 사용자에게 웹 콘텐츠를 효율적으로 제공할 수 있는 서버의 분산 네트워크입니다.

좀 더 자세히 설명하자면 사용자의 물리적 위치와 가까운 엣지(Edge) 서버가 있고, 이는 파일 복사본을 임시로 저장하는 프로세스인 캐싱을 사용합니다. 그렇게 캐시된 웹 콘텐츠를 전송함으로써 전송 속도를 높이게 되고, 사용자는 콘텐츠가 로딩될 때까지 기다릴 필요가 없게 되는 것입니다.

Cloud Front 를 이용한 CDN 서버 생성

우선 AWS CloudFront 를 생성하고, 현재 쿠석쿠석에서 보유하고 있는 이미지 파일 버컷을 등록해 주었습니다.

또한 Dto에서 프론트로 응답해주는 코드에 기존 S3의 url이 아니라 CloudFront의 Url이 반환되도록 문자열 처리를 해주었습니다.

기존 반환 url : https://kusuk-image-bucket.s3.ap-northeast-2.amazonaws.com/konkuk/5b241b6f-8a31-45e9-9453-4fade5107e52.jpg

변경 후url : https://drooj3d6yc2tf.cloudfront.net/konkuk/5b241b6f-8a31-45e9-9453-4fade5107e52.jpg

CDN 적용전 반응속도 비교

현재 반응속도 ( 62ms ) (고화질 사진 4.2MB 기준)

성능 개선후 반응속도 (46.77% 개선)

그런데 CDN 을 CLOUDFLONT를 이용하여 S3 버킷을 프록시 서버로 만든뒤에, 실험을 해보니 실제로도 같은사진( 고화질 4.2MB ) 기준 46.77 % 정도 의성능 개선이 이루어 졌습니다 !! 62ms -> 33ms

감격스러운 Hit from cloudfront

실제로 해당 속도 개선이 네트워크 상황에 따른 우연인지 확인하기 위해 HTTP 응답 헤더 값을 확인해 보니 해당 S3에 저장된 이미지 파일이 CDN 서버를 통해 캐싱되어서 Cache HIT 라는 단어를 발견할 수 있었습니다 !!!!

아래의 응답해더에 보면 현대 대한민국에서 가장 가까운 서버에서 캐싱되어있던 파일이 Hit 되어서 빠르게 전송된 것을 확인할수 있었습니다 !!!

결국 내 가설이 맞았습니다 ㅠㅠㅠ !! ㅎㅎㅎㅎ 실제로 Cache HIT from cloudfront 라는 단어를 보니 신기하고 뿌듯하군요...
사용자들이 준 피드백 하나하나가 너무 고마웠고, 앞으로도 지속적으로 성능 개선해 나가야겠습니다.. ㅎㅎㅎㅎ