Image Optimizer로 섬네일 만드는 방법

네이버 클라우드 플랫폼에서 나만의 섬네일을 만들어 보자!

올 봄 네이버 클라우드 플랫폼에서 Object Storage라는 스토리지 상품이 새롭게 출시되었는데요. 용량 변화에 유연하게 대응해 사용자가 원하는 규모로 운영할 수 있고, 웹 기반 콘솔 및 다양한 방식으로 손쉽게 사용 가능하며 Amazon S3와도 호환되어 매우 편리하게 데이터를 저장하고 백업할 수 있는 아주 기특한 상품이랍니다.

네이버 클라우드 플랫폼의 Image Optimizer 서비스와 함께 사용하면 그 활용도가 더 높아지는데요. Image Optimizer는 원본 이미지를 손쉽게 리사이즈, 크롭, 가로/세로 변환, 강제 변환 등 자유롭게 편집할 수 있는 클라우드 기반의 실시간 이미지 변환 서비스입니다. 모바일, PC 등 다양한 기기에 알맞는 해상도로 편집이 가능하며 Object Storage와도 연동이 가능합니다. Image Optimizer에서 작성한 이미지 변환 룰을 Object Storage에 저장된 이미지에 자동으로 적용시킬 수 있습니다.

Image Optimizer와 Object Storage를 함께 활용해 게시물에 적용되는 섬네일을 원하는 대로 편집해보세요!

Object Storage에 업로드한 이미지를 Image Optimizer에서 어떻게 변환할 수 있나요?

(1) Object Storage에 이미지 업로드

- Bucket 생성 및 공개 설정하기
먼저 파일을 업로드할 버킷을 만들어야 하는데요.
[All Products] > [Storage] > [Object Storage]에 접속하여 [버킷 생성] 버튼을 클릭합니다.

버킷에 할당할 이름을 입력 후 다음 버튼을 클릭합니다. (이미 사용중인 버킷 이름은 사용할 수 없습니다.)

버킷의 공개 설정 여부를 선택합니다.
타 계정 사용자들에게도 해당 버킷에 접근을 허가하려면 해당 계정 ID 를 입력한 후 부여할 권한을 선택하고 추가 버튼을 클릭합니다. 여기서는 전체 공개를 선택하고 별도의 사용자를 추가하지 않았습니다.

버킷 이름 및 공개 설정을 검토 후 버킷 생성 버튼을 클릭하면, 자동으로 버킷 목록 페이지로 이동하면서 새로운 버킷에 생성되었음을 확인할 수 있습니다.

- 이미지 파일 업로드하기
버킷이 만들어졌으니 그 안에 파일을 업로드 해봅시다.
생성한 버킷을 선택하고 파일 올리기 버튼을 클릭하면 업로드 관리 창이 뜨는데, 이 곳에 이미지 파일을 옮겨둔 후 전송 시작 버튼을 클릭합니다.

- 이미지 파일 공개 설정하기
업로드가 완료되면 파일을 공개 설정하여 외부에서 다운로드 가능하도록 해줍니다. 업로드 된 파일의 상세보기를 선택하여 권한 관리 옆 박스를 클릭한 후, 권한 설정 팝업에서 공개 관리 여부를 ‘공개’ 로 선택하고 확인 버튼을 누릅니다. Image Optimizer 로 변환할 모든 이미지 파일에 동일한 작업을 수행합니다.

(2) Image Optimizer Project 생성

- 프로젝트 생성 및 변환 대상 버킷 선택
모두 저장했다면 이제 Image Optimizer를 실행시켜서 원하는 형태의 섬네일 이미지로 변환해볼까요?
아직 서비스를 신청하지 않은 상태라면, [All Products] > [Media] > [Image Optimizer]에 접속하여 [상품 이용 신청] 후
[Project Management] > [Project 생성] 버튼을 클릭합니다.

생성할 Project 이름을 입력한 후 이전 단계에서 변환할 이미지들이 업로드 되어 있는 버킷을 선택한 후 다음 버튼을 클릭합니다.

CDN 서비스 프로토콜을 선택, 사용중인 CDN 도메인이 있다면 도메인 명을 입력하고, 캐시 만료 시간을 선택 후 다음 버튼을 클릭
합니다. 여기서는 HTTP 프로토콜로 새로운 CDN 도메인을 할당받고, 캐시만료 시간은 1시간으로 선택했습니다.

다음으로 로그 수집 여부를 설정합니다. 변환 횟수나 변환 상태를 확인하기 위해서는 로그 서비스를 이용하는 것이 좋습니다.
여기서는 Cloud Log Analytics 서비스 이용을 신청한 후 다음으로 넘어갈게요.

설정한 내용들을 검토한 후 생성 버튼을 클릭합니다.
(CDN 서비스 도메인을 신규로 신청한 경우 생성되기 까지 약 10분 내외로
소요됩니다.)

(3) 사진 리사이즈 룰 설정

본격적으로 다양한 이미지 변환 기능을 사용해 봅시다!
이전 단계에서 아래와 같이 모두 다른 사이즈의 이미지를 버킷에 업로드 했다고 가정할게요.
해당 이미지들을 워드프레스에 동일한 가로 사이즈로(200px) 게시하고 이미지를 클릭하면 원본 사이즈의 이미지를 보여주도록 만들어 봅시다.

- 프로젝트에 룰 생성
[Image Optimizer] > [Project Management] 이동 후 이전 단계에서 생성한 프로젝트를 선택하여 이미지 가로 사이즈를
변경하는 룰을 입력한 후 저장 버튼을 클릭합니다.
※ 변환 Rule Query String : type=w&w=200&quality=90
※ 메모 : 룰에 대한 설명을 입력합니다.

이전 단계에서 추가한 룰을 선택 후 오른쪽 미리보기 버튼을 클릭하면 변환 대상 파일들이 조회됩니다. 원하는 파일을 선택한 후
[이미지 변환 링크 복사] 를 클릭합니다.

- 이미지 변환 링크 복사 및 워드프레스 게시물에 삽입
이제 입력한 룰이 적용된 이미지를 게시할 일만 남았습니다.
1. Wordpress 사이트에 접속하여 [새 글 추가] 버튼을 클릭한 후 미디어 추가 버튼을 클릭합니다.
(※ Wordpress 사용 가이드: https://codex.wordpress.org/ko:Main_Page)

2. [미디어 추가] 버튼을 클릭 후 [URL에서 삽입하기] 를 선택하여 상단에 복사한 링크를 붙여넣습니다.
이미지를 클릭했을 때 원본 이미지를 보여줄 예정이므로 하단 연결 항목에서 [사용자 정의URL] 을 클릭하여 오브젝트 스토리지에
업로드 한 원본 이미지의 링크도 붙여 넣습니다.

3. 게시물에 추가할 모든 이미지에 대해 동일한 작업을 수행한 후 작업이 완료되면 [공개] 버튼을 클릭하여 글을 게시합니다.

- 게시물 발행 및 변환 결과 확인
가로 사이즈가 200 px 로 동일한 게시물이 작성됨을 확인할 수 있습니다. 사진을 클릭하면 원본 사이즈로 확대되어 보여집니다.

(4) 사진 자동 회전 룰 설정

이번에는 워드프레스에 이미지의 세로 사이즈를 300 px 로 리사이즈하고 방향이 뒤집어 진 사진을 자동으로 회전하여 게시하도록 만들어 볼까요?

- 프로젝트에 룰 생성
[Image Optimizer] > [Project Management] 이동 후 이전 단계에서 생성한 프로젝트를 선택하여 이미지 세로 사이즈를
300px 로 변경하고 방향이 뒤집어진 사진을 자동으로 변환하는 룰을 입력한 후 저장 버튼을 클릭합니다.
※ 변환 Rule Query String : type=h&h=300&quality=90&autorotate=true
※ 메모 : 룰에 대한 설명을 입력합니다.

- 이미지 변환 링크 복사 및 워드프레스 게시물에 삽입
1. Wordpress 사이트에 접속하여 [새 글 추가] 버튼을 클릭한 후 미디어 추가 버튼을 클릭합니다.
(※ Wordpress 사용 가이드: https://codex.wordpress.org/ko:Main_Page)

2. [미디어 추가] 버튼을 클릭 후 [URL에서 삽입하기] 를 선택하여 상단에 오브젝트 스토리지에 업로드 한 원본 사진의 링크를 붙여
넣습니다. 오브젝트 스토리지에 업로드 했던 변환 전 이미지와 Image Optimizer를 통해 변환된 이미지를 비교해 볼 예정입니다.

3. 같은 게시물에 [미디어 추가] 버튼을 클릭 후 [URL에서 삽입하기] 를 선택하여 상단에 Image Optimizer 프로젝트에서
룰 설정 후 변환된 이미지의 [이미지 변환 링크 복사] 버튼을 클릭하여 워드프레스 게시물에 붙여 넣습니다.

4. 워드프레스에서 [공개] 버튼을 클릭하여 게시물을 발행합니다.

- 게시물 발행 및 변환 결과 확인
아래와 같이 원본 게시물과 비교하여 이미지 사이즈가 축소되고 자동으로 회전됨을 확인할 수 있습니다.
[참고] 자동 회전되는 이미지의 방향은 원본 이미지 EXIF 속성 중 Orientation 이라는 값을 참조하여 (Orientation 값이 1이 되도록) 회전하며,
캡처한 이미지나 PNG 이미지의 경우 EXIF 속성이 없으므로 회전되지 않습니다. 만약 업로드 한 이미지가 회전되지 않았다면 EXIF Viewer 와 같은
프로그램을 통해 변환할 이미지의 EXIF Orientation 값을 확인하시기 바랍니다. (※ EXIF Orientation 관련 참고 : http://biscuitpress.kr/766)

(5) 얼굴 인식 크롭 룰 설정

이번엔 새로운 이미지를 가지고 얼굴을 중심으로 크롭하고 원본 사이즈에 맞춰 인식된 가로 300 px, 세로 400 px 로 리사이즈 해봅시다.

- 프로젝트에 룰 생성
[Image Optimizer] > [Project Management] 이동 후 이전 단계에서 생성한 프로젝트를 선택하여 이미지 가로사이즈를 300px,
세로 사이즈를 300px 로 얼굴 인식을 할 수 있도록 faceopt 룰을 설정합니다.
※ 변환 Rule Query String : type=f&w=300&h=400&faceopt=true
※ 메모 : 룰에 대한 설명을 입력합니다.

- 이미지 변환 링크 복사 및 워드프레스 게시물에 삽입
입력한 변환 룰 오른쪽 [미리보기] 버튼을 클릭한 후 변환할 이미지를 선택하고 [이미지 변환 링크 복사] 버튼을 클릭합니다.

- 게시물 발행 및 변환 결과 확인
복사한 링크를 인터넷 브라우저에 붙여 넣으면 아래와 같이 지정한 사이즈로 리사이즈 한 후 인물 위주로 크롭된 것을 확인할 수 있습니다.

(6) 워터마크 추가 룰 설정

다음은 사진을 리사이즈 한 후 특정 위치에 워터마크를 찍어봅시다.
우선 [All Products] > [Storage] > [Object Storage]에 접속하여 공개 설정되어 있는 버킷에 워터마크 이미지로 사용할 파일을 업로드 합니다. 워터 마크 이미지 파일도 공개로 설정해야 합니다.

- 프로젝트에 룰 생성
[Image Optimizer] > [Project Management] 이동 후 이전 단계에서 생성한 프로젝트를 선택하여 이미지 가로사이즈를 400px, 세로 사이즈를 400px 로 설정하고 이전 단계에서 업로드 한 워터마크를 사진의 어떤 위치에 표기할 지 룰을 설정합니다.
(워터마크 위치값은 아래 9분할 된 이미지의 위치 값을 참고하세요.)

※ 변환 Rule Query String :
type=f_wm&w=400&h=400&wm_path=https://kr.objectstorage.ncloud.com/image-optimzr/cat_wm.png&wm_align=4&wm_offx=10&wm_offy=10
※ 메모 : 룰에 대한 설명을 입력합니다.

- 이미지 변환 링크 복사 및 워드프레스 게시물에 삽입
입력한 변환 룰 오른쪽 [미리보기] 버튼을 클릭한 후 변환할 이미지를 선택하고 [이미지 변환 링크 복사] 버튼을 클릭합니다.

- 게시물 발행 및 변환 결과 확인
복사한 링크를 인터넷 브라우저에 붙여 넣으면 아래와 같이 지정한 사이즈로 리사이즈 한 후 인물 위주로 크롭된 것을 확인할 수 있습니다.

(7) Image 변환 이력 조회

마지막으로 Image Optimizer의 또 다른 유용한 기능인 조회 기능은 어떻게 사용하는지 알아볼까요?

- Usage Statistics에서 이력 조회
[All Products] > [Media] > [Image Optimizer] > [Usage Statistics] 에서 Image Optimizer 프로젝트 별 변환횟수를 조회할 수 있습니다. 조회기간을 선택하여 기간 별 변환 횟수를 조회할 수 있고, 그래프 우측 다운로드 버튼을 클릭하면 그래프 이미지를 내려 받을 수 있습니다.

네이버 클라우드 플랫폼 상품 및 서비스는 어떻게 사용할 수 있나요?

네이버 클라우드 플랫폼의 Media 상품 및 서비스 플랫폼을 사용하기 위해서는 아래와 같이 네이버 클라우드 플랫폼 포털 사이트 및 사용자 가이드를 참고하시면 쉽게 사용하실 수 있습니다.

- 네이버 클라우드 플랫폼 포털
: https://www.ncloud.com/?referer=blog
- 네이버 클라우드 플랫폼 사용자 가이드
: https://guide.ncloud-docs.com/docs
- Object Storage 상품 가이드
: https://guide.ncloud-docs.com/docs/storage-storage-6-1
- Image Optimizer 상품 가이드
: https://guide.ncloud-docs.com/docs/media-media-3-1

글을 마무리 하며…

네이버 클라우드 플랫폼의 미디어 상품인 Image Optimizer와 스토리지 상품인 Object Storage를 연동하여 게시물 섬네일을 다양한 방식으로 편집해보았는데요.

같은 이미지라도 섬네일에 어떤 부분을, 어떤 크기로, 어떤 방향으로 보여주느냐에 따라서 게시물에 대한 첫인상은 천차 만별로 바뀔 수 있습니다. 공들여 쓴 게시물이 더 돋보일 수 있도록 직접 섬네일을 제작해보세요. 네이버 클라우드 플랫폼과 함께라면 어렵지 않게 금방 만들 수 있답니다.

네이버 클라우드 플랫폼의 미디어, 스토리지 서비스를 통해 많은 분들이 많은 양의 사진도 안심하고 저장하며 원하는대로 손쉽게 변형하여 편리하게 이용하시기를 바랍니다.

[신규 상품] 모든 디바이스에 최적화된 섬네일로 손쉽게 변환하세요! “Image Optimizer”