모캠 History - Node.js를 통해 썸네일 만들기

개발 배경

 

모두의 캠퍼스는 강의평가나 학습자료를 기반으로 운영되는 서비스였기 때문에 크게 이미지 관련해서 처리해야 할 부분이 많지 않았어요. 자료를 이용하는 부분이 유료는 아니었지만, 신뢰도가 떨어지는 자료들이 다수 섞여있게 되었고 이에 대해 미리 확인해 볼 수 있으면 좋을 거 같다는 피드백이 상당히 많이 들어왔었죠. 이때 까지만 해도 썸네일보다는 좀 더 중요하게 처리해야 할 작업들이 많았기 때문에 우선순위가 항상 밀려있는 느낌이었죠. 그래서 계속 미뤄두다가 피드 형식의 게시판을 개발하게 되었습니다. 내용은 아래와 같아요

 

1. 사용자들이 자유롭게 의견을 공유하고 글을 올릴 수 있다

2. 물론 좋아요, 공유하기가 가능하다.

3. 자유롭게 이미지도 올릴 수 있다 (게시물당 최대 5개)

 

사실 요구 사항은 훨씬 많고 자세하지만 간단하게 보면 저렇습니다. 그래서 이미지에 관한 처리를 안해 줄 수가 없게 되었죠

 

 

기존에 이미지는 어떻게 관리 했나요?

 

첫번째 변경된 구조

 

기존에는 서버에 있는 /tmp에 각종 이미지를 저장했습니다. 아마 외주를 통해 처음 코드를 받았을 때 상태 같아요. 우선 이 부분을 제거하기 위해 aws S3를 도입했어요 용량도 무제한이고 관리하기 편리하기 때문이었죠. EC2 자체에서 Volume을 높여서 사용할 경우 추가적인 비용이 발생하고 용량 부족으로 가끔씩 서버가 다운되기도 하더군요. 원인은 파일이라기 보단 로그 데이터가 너무 많이 쌓여서였지만요ㅎㅎ 그리고 썸네일 뭐 이런 거 없었던 거로 기억해요.

 

 

썸네일 이미지 어떻게 관리해야 할까?

 

이 부분에 대해서는 아직도 모르겠어요. 가까운 지인들에게 많이 물어보긴 했는데 정확히 원하는 대답을 얻지는 못했습니다. 제가 처음 했던 생각은 크게 원본 이미지와 썸네일 이미지, 썸네일 중에서도 모바일과 PC 이미지 이렇게 분리하면 될 거라고 생각했는데, 사실상 모바일의 경우 디바이스마다 전부 디스플레이 크기가 다르잖아요? 그래서 이 부분을 어떻게 처리하는 게 맞는 건지 잘 모르겠더라고요. 그래서 일단은 나중에 로직을 수정하더라도 간단하게 만들어보자! 하고 시작했습니다.

 

 

npm gm & imagemagick

 

Node로 이미지 관련 작업을 할 때 gm 모듈을 많이 사용한대요. gm 말고는 특별히 눈에 띄는 건 없었습니다. gm을 사용하기 위해서는 imageMagic 혹은 imageGraphics를 함께 설치해야 해요. 저 프로그램을 기반으로 모듈이 동작하나 봐요. 맥의 경우 brew를 통해서 간편하게 설치가 가능합니다. 그리고 lambda의 경우 직접 gm 모듈을 설치하는데 실패했습니다. 검색을 해보니 예전 버전에서는 설치가 가능했던 거 같은데 현재는 지원이 안되는 거 같아요. 대시 serverless framework를 통해 작동 시 필요한 파일을 같이 배포하는 방식이 있습니다.

 

graphicMagic & imageMagic을 lambda에 배포하는 방법

 

 

최종 구조

 

최종 구조

최종적인 구조는 위의 사진과 같아요. 사용자에 의해 이미지를 업로드하는 API가 발생하게 되면 S3에 원본 이미지를 업로드하게 됩니다. S3에 업로드가 발생하게 되면 aws lambda에게 Trigger가 발생하게 되고 lambda는 해당 bucket 경로에 존재하는 이미지 파일에 대해 썸네일을 생성하는 작업을 동기적으로 수행하게 됩니다.

 

 

아래 링크는 제가 테스트를 하기 위해 로컬 서버에서 한 번에 썸네일 작업까지 완료하는 코드입니다.

필요하신 분은 아래를  참고해 주세요

DongramO/thumbnail-convertor