1. 문제점 파악

이미지 업로드 속도가 느리다.

Gloddy 프로젝트를 운영하면서 구글폼에 여러 문의가 들어왔는데, 그 중 가장 많았던 게 바로 '이미지 업로드가 너무 느려요'였다. 사용자가 직접 문의할 정도면 심각한 거라고 생각했고, 이건 뭐가 됐든 고쳐야겠다고 마음먹었다.

현재 상황이 얼마나 심각할까?

Untitled

이미지 업로드 시점부터 브라우저에 이미지가 뜰 때까지: 3.6초

일단 개선 전후를 비교하려면 현재 속도부터 측정해야 했다. 사용자가 이미지를 선택한 순간부터 화면에 실제로 나타나기까지 총 3.6초가 걸렸다.

내 환경은 빠른 인터넷에 최신 휴대폰이었는데도 이 정도였다. 더 열악한 환경에서는 얼마나 답답할까 싶었다. 😢

2. 원인 파악

기존 이미지 업로드 프로세스를 분석해보니 이렇게 동작하고 있었다.

1. 클라이언트 → 백엔드 서버로 이미지 파일 전송
2. 백엔드 서버 → AWS S3로 이미지 업로드
3. AWS S3에서 이미지 URL 생성 후 백엔드 서버로 반환
4. 백엔드 서버 → 클라이언트로 URL 전달
5. 클라이언트에서 <img /> 태그의 src에 URL 설정하여 이미지 표시