개발 지식 - 이미지 파일은 어떻게 배포해야 할까

이유승·2024년 1월 23일

목록 보기

27/27

2차 쇼핑몰 프로젝트를 진행하면서, 이미지 파일을 다룰 방법을 고심하게 되었다.

프론트엔드 파일 자체에 이미지들을 저장시켜두는게 가장 쉽고 간단하지만, 이렇게되면 프로젝트 파일의 크기가 과도하게 증가되는 문제가 발생하게 된다.

결국 이미지와 같은 고용량 파일들은 외부 호스팅 서비스를 이용해서 필요한 때에 필요한 파일만 가져오는 것이 가장 좋은 방법이다.

1. 어떤 방법들이 있을까..

네이버 블로그나 벨로그에 비공개 글을 하나 만들고, 이미지들을 업로드한 다음 이미지 경로를 가져와서 프로젝트에 사용한다.

이 방법은 애초에 블로그는 이미지 호스팅용이 아니라서 안정적으로 파일을 가져올 수 있는지에 대한 문제도 있고, 서비스 이용약관에 위배되는 행위인가도 따져봐야한다. 권리 문제도 있고, 신뢰성 문제도 있어서 패스.

Github Pages나 Vercel을 이용하는 방법.

가능하기는 할 것 같은데.. 간단하지도 않고 제대로 된 이미지 호스팅 서비스도 아니므로 이쪽은 시도도 안해보고 패스.

Google 사진, 드라이브에 이미지를 업로드하고 공유 옵션을 걸어서 이미지 경로를 가져와서 프로젝트에 사용한다.

이쪽은 이미지 자체에 대한 링크가 아니라 클라우드 서비스 내부에서 이미지 파일에 대한 접근 경로를 가져오는 방식이라 사용할 수가 없었다. 이쪽도 패스.

Imgur, AWS, Azure, Google Cloud 등에 이미지들을 업로드한 다음 이미지 경로를 가져와서 프로젝트에 사용한다.

Imgur는 무료 서비스라 사용하기도 편리하고 좋을 것 같았는데.. Imgur는 이미 10년 전 즈음부터 이미지를 호스팅하는 용도로 자사 서비스를 이용하는 것을 금지하였다.

AWS는 이번 프로젝트에서 S3, EC2, RDS까지 사용하고 있어서 프리티어 사용량 제한이 두려워서 패스..

남은건 Google Cloud인데, 여기서부터는 생각보다 빠르게 작업이 진전되었다. 일전에 진행했던 프로젝트에서 Google Firebase를 이용해서 프로젝트 배포도 하고, DB도 사용했고, Storage 서비스로 이미지 호스팅도 해봤기 때문.

사용 방법은 간단하다. 구글 계정으로 Firebase에 새 프로젝트를 만들고, Storage 서비스를 개설한 다음에 파일을 업로드하면..

서비스 이용이 원활하도록 엔드 포인트와, 파일 경로 및 파일 이름, 접근을 위한 액세스 토큰까지 모두 자동으로 생성된다.

데이터베이스에 이미지 URL만 제대로 저장해두면, 나중에 프론트엔드에서 Firebase Storage에 저장된 이미지 파일의 접근 경로만 잡아두면 이미지 파일을 아주 쉽고 간단하게 가져올 수 있다.

프론트엔드 개발자를 준비하고 있습니다.