NCP

[NCP] 삶의 질을 높여주는 Image Optimizer를 이용한 이미지 리사이징

안녕하세요. ManVSCloud 김수현입니다.

오늘은 Image Optimizer에 대한 포스팅을 해보았습니다.
Image Optimizer에 대한 글은 이미 네이버 클라우드 플랫폼에서도 많은 글과 영상으로 만들어두어 접근하기 쉬운 상태입니다.

제가 직접 Image Optimizer를 사용해본 소감에 대해 써보았으니 사용 전에 어떻게 사용하면 좋을지 참고하실 때 도움되리라 생각됩니다.


왜 Naver Cloud Platform의 IMAGE OPTIMIZER인가?

  • 쉬운 사용법
    (크기, 워터마크, 필터 등 UI를 통해 원하는 효과를 체크하고 수치만 입력하면 됩니다.)
    ([예시 보기]가 있어 예시를 통해 쉽게 사용할 수 있습니다.)
  • 미리 보기 제공
    (미리 보기를 제공하여 조금 더 간편함을 느낄 수 있었습니다.)
  • 콘솔에서 효과 추가
    (콘솔에서 원하는 효과만 선택하여 넣는 방식입니다.)

타 클라우드를 이용한 이미지 리사이징 경험

우선 이미지 리사이징에 대한 경험은 크게 네이버 클라우드 플랫폼과 AWS 에서 사용해보았습니다. AWS에서는 이미지 자동 리사이징을 진행해보았으며 Azure 역시 Azure Event Grid를 이용하여 이미지 리사이징이 가능한 것을 금방 찾을 수 있었습니다.

개발자가 아닌 입장에서 코드 개발 부분이 정말 막막했었습니다.

물론 이미지 자동 리사이징을 이용하여 이미지 사이즈가 고정적이지 않을 경우 개발적인 부분이 사용될 수 밖에 없겠지만 이미지 사이즈가 고정적으로 정해져있는 상태에서 빠르게 추가하는 방식으로 사용할 수는 없을까라는 생각을 하게되었습니다.

네이버 클라우드에서 Image Optimizer 서비스를 이용하면 가능합니다.
물론 자동 리사이징의 경우 동일하게 개발적인 요소가 사용되겠지만 Image Optimizer를 이용한다면 고정적인 사이즈에 대해서 리사이징은 충분히 쉽게 가능하겠다라고 생각했습니다.


Image Optimizer를 이용한 이미지 리사이징

? Object Storage

우선 Object Storage를 생성해주어야합니다.
Object Storage에 이미지를 업로드 하고 Image Optimizer를 이용하여 해당 이미지에 여러 효과를 줘보도록 하겠습니다.

버킷 이름은 고유합니다.
원하시는 고유한 버킷 이름을 정해주도록 합시다.
파일에 대한 공개 여부를 설정하는 곳입니다.
생성한 Bucket에 이미지를 리사이징 할 이미지를 업로드 해줍시다.

image 라는 폴더를 하나 생성한 후 image 폴더 안에 이미지를 업로드 했고
해당 폴더를 공개하여 외부에서 접근할 수 있도록 해주었습니다.


? Image Optimizer

이제 Image Optimizer를 생성해줄 차례입니다.

Image Optimizer 프로젝트를 생성해주고 프로젝트 이름을 입력한 뒤
원본 이미지 저장소는 위에서 만들어준 Object Storage를 선택해줍시다.

서비스 프로토콜과 서비스 도메인을 정해주어야합니다.

“고객 보유 도메인”을 선택할 경우 당연히 DNS와 연결도 해주어야합니다.
그리고 HTTP로 하니까 계속 오류가 발생해서 HTTPS로 설정해주었습니다.
HTTP로 설정하니까 CDN 도메인 접속 시 이미지를 정상적으로 불러오지 못해서 이런저런 테스트를 해봤는데 HTTPS에서만 정상 접근이 가능하다는 걸 알게됐습니다.
(음?.. HTTP는 왜 있는거지..? 내가 설정을 잘못한 부분이 있는건가..?)

위 이미지 처럼 다음 및 생성을 해주고 최종 설정은 다음과 같이 설정했습니다.
HTTP에서 이미지를 정상적으로 못불러와서 ALL로 설정하고 HTTPS에서 정상 이미지 출력이 확인되었습니다.

자, 그럼 이제 쿼리스트링을 만들어 봅시다.

크기, 워터마크, 필터 별로 원하는 쿼리스트링을 만들 수 있습니다.
리사이즈를 해주고 가로,세로 길이 변경 및 품질을 변경해줬으며 흑백으로 출력되도록 해줬습니다.
이게 참 마음에 들었던 게 이대로 클릭하고 수치만 입력했는데 쿼리스트링이 자동으로 만들어져서 자동 입력된다는게 좋았습니다.
쿼리스트링 입력 후 생성된 부분에 대해 변환 이미지 미리보기를 실행할 수 있습니다.
미리보기 결과입니다. 멋지지않나요?

미리 보기와 같이 이미지가 실제로 잘 반영되었을지 URL로 접속하여 결과를 보도록하겠습니다.


Result

제가 원하는대로 이미지가 잘 변환되었습니다.
잘 출력됐네요.

하지만 Image Optimizer에 등록되지 않은 쿼리스트링을 사용할 경우 404 Error가 발생하게됩니다.

쿼리스트링을 수동으로 입력하지 않고 자동으로 이미지를 변환하기 위해서는 Cloud Functions을 사용해야할 것으로 보입니다.


Personal Comments

Image Optimizer에 대한 포스팅을 8월부터 준비중이었으나 8월 말에 네이버 클라우드 플랫폼 공식 블로그에서 Image Optimizer에 대한 포스팅이 먼저 올라왔습니다.

아래 포스팅에서 이미 기능적인 설명이 다 적혀져있어서 오늘 포스팅은 기능적인 부분은 제외하고 AWS에서 이렇게 사용해봤는데 이런 경우엔 네이버 클라우드의 Image Optimizer가 좋은 것같다라는 경험을 이야기 해보고싶었습니다.

아래 네이버 클라우드 플랫폼 공식 블로그에 포스팅된 Image Optimizer에 대한 글도 참고하면 훨씬 사용에 도움될 것입니다.


Previous Post Next Post

You Might Also Like

No Comments

Leave a Reply