[SW 정글 125일차] 나만의 무기 33일차 (우리 팀의 이미지 리사이징)

오늘은 어제의 밤샘작업 여파로 늦게 강의실에 나왔다.

나오자마자 한 것은 어제 마무리 짓지 못한 사망 스케줄러 리팩토링이다.

코드는 일단은 돌아가게끔 구현은 해놨었지만 부분부분 문제가 있었다.

문제라는 것은 비효율적으로 for문을 돌린다거나 서버에게는 중요한 결과 log남기기를 빼먹었다던가..

 

코드의 비효율적인 것을 리팩토링하는 데에는 조장님을 큰 도움을 받았다.

현업에서 프론트개발을 하다가 정글에 오신 분이여서 경력이 있기도 하고 워낙 개발을 잘하시는 분이여서 너무 큰 도움을 받았다.

for문을 돌리면 하나하나 작업을 돌려도 non-block구조이다보니 결과를 다 받지 못한상태에서 다음 코드실행이 될 수 있으니까 이러한 부분은 async-await를 쓰는 것도 알았고 작업을 병렬적으로 하게 시키고 promise.all을 써도 된다는 것도 알았고

개념적인 부분을 자세하게 물어볼 수는 없으니까 여기다가 내가 무엇을 했는지만 간단하게 기록을 해놓고 JS에 대해 더 자세히 찾아볼 생각이다.

 

 

그리고 서버팀에서 이루어진 다른 작업은 AWS Lambda를 이용한 이미지 리사이징이다.

(강호형, 진영이 형의 collabo)

이미지 리사이징에 대한 고민은 S3를 이용하여 이미지 파일을 관리(저장)하는 방식을 채택했을 때부터 시작되었다.

우리의 서비스는 생명체 sprite이미지 뿐만 아니라 인증방식으로 채택한 사진올리기와 더불어 챌린지 생성 시 간단하게 챌린지를 대표하는 썸네일 사진을 올리는 것이 있다.

이러한 사진들은 보통 핸드폰으로 찍을 것이라고 예상(물론 챌린지 썸네일 사진은 아닐수도)했고 직접 핸드폰으로 사진을 찍어보니 2.5mb ~ 3mb정도 였다. (갤럭시 s9+)

 

S3를 도입하여 이미지를 업로드하고 클라이언트에게 보내주는 것을 완성했을 때에는 일단 돌아가니까 나중에 챌린지적인 과제로 남기자고 했고 다른 여러 기능을 우선시해서 개발하고 조금씩 다른 팀원들이 알아보다가 어제 이미지 리사이징 작업을 마무리 지었다.

 

아직은 어떻게 Lambda를 설정해주었고 왜 Lambda를 써야했는지, 현업에서도 같은 문제를 마주할텐데 어떠한 방식으로 해결하는지에 대해서는 추후에 다시 공유할 시간을 가지고 문제점과 문제해결을 위한 고민은 이전부터 공유를 하였다.

 

 

문제점은 명확하다.

이미지 사이즈가 불필요하게 크다.

여기서 말하는 사이즈는 용량적인 부분이 될 수도 있고 실제 사진 크기를 말하는 것일 수도 있다.

• 챌린지 검색 - 130 x 130
• 인증 수락 - 732 x 516

웹 페이지를 기준으로 프론트엔드에서 보여지는 사진 크기를 설정한 것은 위와 같다.

그리고 핸드폰으로 사진을 찍었을 시에는 갤럭시 - 1992 x 981, 아이폰 XR - 1792 x 828, 아이폰 12 - 2532 x 1170 이 정도가 된다.

(이미지 사이즈에 대한 정보 출처: https://dean30.tistory.com/78)

 

보여지는 것에 비해 저장되어 관리되는 이미지 크기 자체가 너무 크고 크기에 대한 리사이징만해도 용량이 꽤 많이 줄 것으로 예상됐다.

 

현재의 이미지 리사이징 전 이미지 사이즈는 평균 3mb 정도...

멘토님의 얘기로는 이미지는 그래도 100kb로는 떨어져야한다고 하셨다.

그래서 네이버 홈페이지를 접속해서 보여지는 수 많은 이미지를 크롬 개발자 도구를 사용하여 확인해봤더니 제일 큰 것이 250kb 정도 하나이고 나머지는 100kb 아래로 떨어진다.

 

 

일단은 lambda에 대해서는 아래의 AWS 영상을 보면서 알아보고 이미지 리사이징 방법과 현업에서는 어떻게 해결하는지에 대해 알아보고 잠자러 가야겠다.

https://www.youtube.com/watch?v=tTg9Lp7Sqok