19. image 업로드

 

 

단순히 이미지를 한장 업로드 한다고 생각하면 그렇게 어려워보이지 않는다. 하지만 디테일하게 들어가면 굉장히 복잡해진다. 또한 이미지를 한두장 우리가 sns업로드 하듯 올리는게 아니라 수백 수천장의 사진까지도 필요에 따라 업로드 할 일이 생길 수 있다. 이럴 때 이런 이미지들은 그냥 우리 컴퓨터에서 슉 올리는게 아니라 클라우드라는 외부의 저장소에서 따로 이미지들을 관리하고 그곳에서 업로드 하도록 한다. 이미지를 업로드하는 전반적인 과정과 관리하는 방법에 대해서 공부해보자

 

---

 

클라우드 서비스

 

 일반적으로 이미지를 내 컴퓨터 파일에 업로드 하는 과정을 생각해 보자. usb에 담겨있는 사진파일을 드래그해서 바탕화면에 놓아서 파일을 옮길 수 있다. 이렇게 내 컴퓨터 안에 이미지를 업로드하는 경우는 편하긴 하지만 용량에 한계가 있기 때문에 실서비스에 적용할 이미지를 모두 내 컴퓨터에 업로드 하기에는 무리가 있다. 따라서 저장공간을 대여해주는 서비스가 있다. 이를 클라우드라고 한다. 물론 처음엔 무료로 쓸 수 있지만 세상에 공짜는 없듯이 큰용량을 쓰면 쓸수록 돈을 내야한다. 하지만 그래도 가변적으로 내가 원하는 만큼 저장소를 대여할 수 있고 서버관리를 직접 하지 않아도 되는 편리함 때문에 거의 대부분의 기업들이 클라우드 서비스를 이용한다. 구글에서 클라우드를 제공하는 서버를 CloudStorage라고 하고 제공되는 클라우드를 GCP라 하고 아마존에서 제공하는 클라우드 컴퓨터는 Simple Storage Service (3S) 라고 하고 제공하는 서비스를 AWS라고 한다. 대부분의 회사는 AWS를 쓴다고 한다. 따라서 좀 더 저렴한 쪽은 GCP쪽이다. 이들 클라우드 서비스를 제공하는 회사는 이곳에 저장된 고객들의 데이터를 손실없이 유지하기 위해서 분산해서 저장하며 하나의 서버컴퓨터가 손실되도 다른 컴퓨터에서 저장된 파일을 불러올 수 있도록 유기적으로 연결되어 있다. 이 클라우드에 이미지 파일을 업로드 하게 되면 나중에 그 파일을 다운받을때 그 이미지가 저장되어있는 주소를 받게 되고 그 주소를 통해 이미지를 다운받게 된다.

 

 

 용량이 큰 사진이나 동영상의 원본은 클라우드에 저장해 놓고 이를 다운받을 때에는 이들이 저장되어 있는 주소인 단순 문자열을 돌려받게 된다. 이를 우리의 DB 이미지 url에 저장한다. 이 url을 조회할 때에는 프론트에서 <img src > 안에서 호출해서 필요 할때 마다 그 이미지를 다운받는다. 순서를 정리하자면 1. 클라우드에 내 파일 업로드 2. 데이터베이스에 이미지 저장 주소 다운로드 3. 다운로드 주소 DB에 저장 4. DB에 저장된 이미지 주소를 통해 프론트에서 이미지 url 호출 이때 DB에 저장된 이미지 주소의 형식은 BLOB(Binary Large Object)으로 지정해준다. 그럼 이제 부터는 이미지를 업로드하는 API 를 직접 만들어서 업로드해볼 수 있다.

 

이미지 업로드 프로세스

 

 우리가 어떤 게시글을 올리고 이미지를 등록할 때 이를 이미지 업로드라고 하고 그 이미지가 어떻게 저장되어서 다른사람들의 화면에 뜨는것인지( 나는 사이트에 이미지를 올린것이지 그들에게 내 이미지를 하나한 실시간으로 보내주지 않는데!) 프로세스를 이해해보자. 우선 이미지를 업로드하는 사람이 A라고 하고 업로드 하는 사이트가 B라고 하자. A가 본인의 컴퓨터에 있는 이미지 파일을 드래그를 하던 클릭을 해서 올리든 복붙을 하든 어떤방식으로든 B 사이트에 등록을 하는 순간 B 사이트를 구성하는 백엔드에서 이미지 파일을 본인 회사 서비스가 이용하는 클라우드 서비스 저장소로 이미지 파일 주소를 저장시켜주는 API를 구성해서 실행되도록 한다. 이 클라우드에 대한 설명은 위에서 자세히 해 두었다. 즉, 이제 다른 사용자는 이 게시글을 클릭해서 이미지 파일을 불러올때마다 이 클라우드 저장소에서 가서 이미지 주소를 통해 이미지를 다운받아서 화면에 보여주게된다. 그렇다 보니 흔히 사용하는 사이트들을 새로고침해보면 텍스트들을 이미 불러와져있는데 이미지들은 조금 시간이 걸리는 것을 볼 수 있다. 

 

이미지들만 늦게 불러와지는 모습

 

실제로 콘솔창을 띄워서 이미지를 찾아서 src에 이미지를 다운로드 받아오는 주소가 적혀있는것을 확인해 볼 수 있다. 

따라서 최종적으로 다시한번 정리해보면 다음과 같다.

1.  사용자가 이미지를 포함한 게시글을 등록한다.
2.  등록한 사이트의 백엔드에 있는 이미지 업로드 API를 통해 Storage에 이미지 파일을 저장한다.
3.  Storage에 이미지가 저장되면 이미지를 요청할 때 다운받을 주소를 반환해준다.
4.  이미지를 포함한 게시글을 요청할 때마다 해당 주소를 통해 이미지를 실시간으로 받아와서 화면에 띄운다.