[server, Firebase Storage, Cloud Function]이미지 로딩 속도를 줄이기 위한 썸네일 제작

이미지 로딩 속도를 줄이기 위해 여러가지 방법이 있는걸로 알고 있습니다.

 

저는 이미지가 몇만개 저장되어있는 플레이스토어, 앱스토어에 배포되어 있는 서비스에서

앞으로 유저들이 업로드하는 이미지의 썸네일을 제작하여 속도 완화를 해야 했습니다!

요런 방식을 사용했습니다!

 

Firebase에서 베타 형태로 제공하는 Cloud Function을 사용하여,

Firebase Storage에 클라이언트 단에서 원본 이미지가 업로드 되면

=> 콜백 이벤트로 이미지를 400*400으로 리사이징하여 썸네일 이미지를 만들고, 

=> 해당 썸네일 이미지를 /thumbnails/(원본 이미지 파일 이름) 이런 경로로 저장하도록 설정해두었습니다.

 

그래서 클라이언트에서 이미지를 업로드 하면 자동으로 thumbnail 이미지가 생기는 형태이며,

앱에서 이미지를 조회할때에는 thumbnail이미지 url을 response로 받으면 해당 url로 이미지가 다운받아지는지 확인하고,

만약 이미지를 불러올 수 없다면 원본 url로 접근하여 원본을 다운받도록 하였습니다.

 

(여기에서 썸네일 이미지가 없을 때 원본으로 불러오고, 썸네일 이미지를 제작하여 Firebase Storage에 업로드하는 과정이 추가되어야겠죠?)

 

*AWS Lambda를 사용하려다가 어차피 Firebase에서 작업을 해야하기 때문에 Cloud Function을 사용하였습니다.