[네이버 클라우드 플랫폼] 이미지 저장 및 resize, crop 하여 썸네일로 보이기

클라우드서비스를 쓰긴 하는데 이미지를 어떻게 처리해야할지 고심하던 차에 기존에 쓰고있던 네이버 클라우드 서비스로 이미지를 관리하기로 했습니다.

여기에는 독특한 기능이 있는데 'Image Optimizer' 라는 기능을 사용하면 이미지를 자동으로 resize, crop 하여 URL을 리턴해준다.(WOW) 그래서 이미지를 크기별로 따로 저장하지 않아도 되는 장점이 있습니다. 설정하는 것도 매우 간단하고.

여기서는 Object Storage 를 이용한 이미지 등록과 Image Optimizer 를 이용한 이미지 크기조절 및 링크반환 되는것을 보겠습니다.

순서 

1. Object Storage 설정

2. Image Optimizer 설정

---

1. Object Storage 설정

관련 설명은 다음 홈페이지를 참조하시면 됩니다.

https://www.ncloud.com/product/storage/objectStorage

콘솔에 접속하여 All Products 를 보면 Object Storage 를 선택할 수 있습니다.

버킷 생성을 클릭하여 버킷을 설정합니다.

이름을 설정할 때에는 리전 내 유일한 이름을 설정해야하기 때문에 test 같은 것은 설정이 안됩니다. 

여기서는 test-blog-bucket 로 설정했습니다.

다음은 공개여부와 네이버 클라우드 플랫폼 계정에 따른 권한을 설정할 수 있는 창입니다. 설명에서도 있듯이 파일에 대한 공개여부는 개별 파일에서 설정이 가능합니다. 일단 저는 모두 공개안함으로 했습니다. 누군가가 임의로 접근하는것도 문제겠지만 괜히 과도한 호출로 인해 트래픽이 마구 일어나면 돈이 많이 나갈것 같아서요(...)

이후 생성완료를 누르면 생성됩니다.

목록에 test-blog-bucket 가 있는것을 확인할 수 있습니다.

해당 버킷을 클릭합니다.

아직 아무것도 업로드한것이 없기때문에 비어있습니다.

이미지 파일을 하나 올려보겠습니다.

파일업로드가 완료된 것을 확인할 수 있습니다.

클릭하면 이미지에 대한 정보를 확인할 수 있습니다.

링크를 클릭하면 AccessDenied 에러 페이지가 보입니다.

공개여부가 '공개 안함'으로 되어있어서 그렇습니다. 

만약 파일을 공개로 변경하면 링크로 볼 수 있습니다.

### 권한을 공개로 변경하는 방법

권한을 수정할 때에는 1파일씩만 수정이 가능합니다.

수정할 파일을 클릭하고 '편집 > 권한관리' 을 클릭합니다.

전체 공개에서 공개로 수정한 후 확인을 누릅니다.

이제 링크를 클릭하면 이미지를 확인할 수 있습니다.

이제부터 Image Optimizer 를 설정하여 resize & crop 을 설정하겠습니다.

---

2. Image Optimizer 설정

관련 설명은 다음 홈페이지를 참조하시면 됩니다.

https://www.ncloud.com/product/media/imageOptimizer

All Products 를 보면 Image Optimizer 를 선택할 수 있습니다.

Project 생성을 클릭합니다.

프로젝트 이름을 선택하고, 원본이미지 저장소를 선택합니다.

위에서 등록한 test-blog-bucket 를 선택하고 다음으로 넘어갑니다.

서비스 프로토콜은 HTTP 를 이용했습니다. 

그리고 서비스 도메인은 'CDN 도메인사용'을 선택했는데, 고객보유 도메인을 사용할 경우, 도메인을 입력해주면 됩니다. 저는 아직 도메인 구매를 한 단계는 아니어서 제공하는 것을 이용하기로 했습니다. (CDN 사용에도 요금이 별도 청구됩니다)

캐시도 우선 1시간으로 설정을 했습니다.

### CDN 이란?

Content Delivery Network 의 약자로써 인터넷 사용자에게 다양한 콘텐츠를 빠르고 안전하게 전달하는 서비스 입니다. 다운로드, 스트리밍 서비스 등에 많이 사용됩니다.

관련된 내용은 아래 링크를 보시면 도움이 되실 겁니다.

https://www.ncloud.com/product/networking/cdn

Log 수집을 필수로 걸어야하는데, 이것에 따른 금액이 따로 나간다는게 조금 불편하긴 하네요. 

그래도 하루에 얼마나 쓰이는지 확인하려면 설정해두는것도 좋을거 같습니다. (뭐든 돈이 문제지...ㅠㅠ) 

설정해두면 다음화면처럼 확인이 가능합니다.

최종설정을 확인하고 생성합니다.

도메인은 생성하는데 시간이 좀 걸리더라고요. 실제로 생성이 다 되었는데도 '생성 중'이 변하지 않기도 하고요. 일단 이것보다 Rule을 지정해야 합니다.

Rule 은 이미지를 리사이즈, 크롭, 가로변환, 세로변환, 강제변환 등 5가지 옵션이 있습니다.

Rule 참조 링크

https://docs.ncloud.com/ko/media/media-3-2.html

여기서는 리사이즈 & 크롭을 옵션으로 해보겠습니다.

Width 와 Height 를 각각 100으로 설정합니다.

type=f&w=100&h=100

저장하면 아래 목록에 추가되고 미리보기 버튼이 생성됩니다.

미리보기 버튼을 눌러봅니다.

새로 팝업이 뜰겁니다. 

업로드한 파일을 클릭한 후 미리보기 버튼을 누르면 조절한 이미지가 나옵니다.

이미지 변환 링크 복사를 누르면 링크가 클립보드에 자동 저장됩니다.

새 브라우저 창에다 ctrl + v 를 눌러 띄워봅니다.

URL 규칙은 다음과 같습니다.

http://[CDN 도메인 주소]/[파일명]]?[설정한 Rolu]

URL 에 붙어있는 파라미터를 보면 우리가 role에 설정한 것이 그대로 있습니다. 

만약 이것을 변경해서 URL을 호출할 경우 404 에러가 발생합니다. 

여기서는 height를 50으로 바꿨더니 에러가 발생했습니다.

변형된 파일을 보면 실제 용량이 줄어든 것을 확인할 수 있었습니다.

네이버가 편리한 서비스를 제공하네요. 돈드는것만 빼면....