[미디어 기술의 이해] Image Optimizer Query String 및 Filter 원리 집중 탐구
최근 쇼핑몰, 커뮤니티를 포함한 다양한 웹 사이트가 등장함에 따라 규격화된 사이즈로 이미지를 맞춰야 하는 경우가 많습니다.
이 경우 편리하게 사용할 수 있는 서비스. 네이버 클라우드 플랫폼 Media 카테고리 내에 있습니다. 바로 Image Optimizer(이미지 옵티마이저)! 원본 이미지를 다양한 디바이스 및 해상도에 맞게 변환해 주는 이미지 커스터마이징 서비스로, 래시가드로 유명한 배럴 등 다양한 브랜드에서 활용중인 서비스입니다.
이번 포스팅에서는 데이터를 전송하는 방식인 Query String(위키백과 링크)을 이해하고 Image Optimizer(이미지 옵티마이저)의 다양한 옵션(크기, 워터마크, 필터) 중 필터(Filter)에 대해 알아보겠습니다.
웹에서 특정 데이터를 전송하고 받을 때 어디에 요청하는지가 중요하며, 이러한 경로를 설정하는 방법은 2가지입니다. Query String 과 Path Variable인데요, 하나씩 살펴보도록 하겠습니다.
1. Query String
/user?id=navercloud
웹 서버에 정보를 요청할 때 정해진 방식으로 전달하는 데, 이때 위와 같이 사용하는 문자열을 질의 문자열이라고 합니다.
위 표현식처럼 물음표(?) 뒤에 ID란 변수에 값을 담아 백 엔드에 전달하는 방식이 Query String입니다. 즉, user에 담긴 정보 중에 id=navercloud의 정보를 요청하는 내용입니다.
2. Path Variable
users/navercloud
위 표현식처럼 경로를 지정하여 요청하는 방법도 있습니다. 이를 Path Variable이라고 합니다.
일반적으로는 데이터의 위치를 보여줘야 하는 경우는 Path Variable를 쓰지만, 정렬하거나 필터 해서 보여줘야 하는 경우에는 Query String을 쓰게 됩니다.
네이버 클라우드 플랫폼은 위 2가지 방식 중 Query String 방식을 통해 다양한 옵션 값을 정렬하여 요청합니다. 이렇게 데이터를 정렬하면, 요청 후 무엇을 할 것인지 알려줘야 합니다. 즉, Query String을 통해 데이터(명사)를 작성했다면 다양한 메소드(동사)를 통해 전달해야 합니다.
따라서 동사 역할을 하는 get, post, delete, put 와 같은 메소드를 활용하여 결합함으로써 프로세스가 실행됩니다.
[GET 방식을 이용한 정보 전달 예시(Query String)]
URL을 확인하여 정보를 가져오는 ‘GET’ 방식을 이용한 Query String의 예시입니다.
- 먼저 http://www.site.com/page.html 은 URL에 해당됩니다.
- 바로 뒤 물음표(?)는 Query String가 시작된다는 것을 의미합니다.
- Parameter1은 Parameter Name을 의미하며 value1은 Parameter1에 대한 Property Value에 해당합니다.
- 뒤에 따라오는 &은 Query String을 구분하기 위한 구분자(Separator)입니다. 이어 Parameter가 연속되는 것을 확인할 수 있습니다.
그럼 네이버 클라우드 플랫폼 Image Optimizer에서 Query String을 설정해 보겠습니다.
[Image Optimizer 사용법]
1. ncloud.com 로그인 > 우측 상단의 콘솔(Console) 진입 > Products & Services > Image Optimizer
2. ncloud.com Image Optimizer 소개 페이지 > 상단 ‘이용 신청하기’ 클릭
프로젝트를 생성하면 아래와 같이 ‘변환 Rule 설정’ 화면을 확인할 수 있습니다.
* 변환 Rule 설정에 대한 자세한 설명은 아래 유저 가이드를 참고해 주세요.
1) ‘쉬운 입력’ 버튼을 클릭한 뒤
2) 원하는 필터 선택하신 후 하단 ‘입력’ 버튼을 누르면
3) Image Optimizer에 적용될 Query String 손쉽게 생성할 수 있습니다.
아래 그림에서는 ‘리사이즈(가로= 10, 세로 10)’와 ‘흑백’을 설정한 결과,
type=m_bw&w=10&h=10로 Query String이 적용된 것을 확인할 수 있습니다.
* 변환 Rule 설정에 대한 자세한 설명은 아래 유저 가이드를 참고해 주세요.
https://guide.ncloud-docs.com/docs/media-media-3-1#%EB%B3%80%ED%99%98-rule-%EC%84%A4%EC%A0%95
생성한 Image Optimizer Query String을 이용하시면 다양한 옵션을 Image에 적용할 수 있습니다. 다양한 옵션 중 필터(Filter)에 대해서 자세하게 알아보도록 하겠습니다.
필터에는 3가지(흑백, 블러, 샤픈) 변환 효과가 존재합니다.
우선 흑백 기능을 먼저 소개해 드리겠습니다.
1. 흑백 기능
Image Optimizer를 이용하기 위한 각각의 이미지는 제한된 수의 픽셀(pixel)을 보유하고 있습니다.
여기서 말하는 픽셀은 사각형의 점으로, 디지털 이미지를 구성하는 기본적인 단위입니다. 스마트폰 카메라 화질을 비교할 때 빠짐없이 등장하는 단위이기도 하죠. 바로 그 ‘화소’가 픽셀입니다. 각각의 점에 해당하는 픽셀에는 해당 색의 정보(RGB, 밝기)가 담겨 있으며 이는 곧 용량과 직결됩니다.
또한 이미지에 따라 흑백(binary, grayscale) 혹은 컬러(RGB) 이미지가 존재합니다.
<binary image> (1pixel = 1bit)
binary image는 각 픽셀이 1bit로 이루어져 있으며, 각 픽셀은 오직 밝음(=1) 혹은 어두움(=0)으로만 표현됩니다. 이에 따라 명암의 정도를 선택할 수 없습니다. 보통 binary image의 경우 특정 임계 값을 선택하고 임계 값 이하일 경우 어두움(=0), 초과할 경우 밝음(=1)으로 분류합니다.
예를 들어 0-~255사이 값을 128이라는 임계 값을 설정하고 128을 기준으로 0/1값을 결정합니다.
<Gray Scale> (1pixel = 1byte)
반면 Grayscale의 경우 검은색(black)과 흰색(White)의 중간색인 회색(Gray)의 색상으로 이미지를 표현하며 빛의 강도(Intensity)를 기준으로 0~255까지 표현합니다. 이는 8bit=1byte의 메모리를 사용한 것이며 이에 따라 1pixel 은 1byte에 해당합니다. 픽셀 값들이 0~255까지로 표현되었으므로 흑백 영상의 모습이 binary image와는 다르게 선명하게 표현됩니다.
따라서 흑백의 경우 가장 작은 범위로 표현한 영상을 binary image(0~1사이의 값)라고 할 수 있으며 가장 큰 값으로 표현한 범위가 0~255bit로 표현한 Gray Scale이라고 표현할 수 있습니다.
<Color image> (1pixel = 3byte)
컬러 이미지는 빛의 원색인 빨강, 녹색, 파랑(RGB) — 총 3개의 채널로 표현됩니다.
- 각각의 채널은 0~255 사이의 숫자로 표현할 수 있으며 (1byte), 값으로 채널의 정도를 표현합니다.
- 즉, 2⁸ X 2⁸ X 2⁸ = 16,777,216개의 컬러 표현이 가능합니다(True Color).
- 따라서 1 픽셀은 3byte에 해당합니다.
이러한 컬러 영상을 흑백 영상으로 변환하기 위하여 YUV를 많이 사용합니다. (RGB to YUV)
Y(밝기) U(파란색 — 밝기) V(빨강색 — 밝기)는 사람 눈에 만감한 휘도(밝기) 성분과 상대적으로 덜 민감한 색상 성분을 분리하여 RGB 값을 YUV 값으로 치환합니다.
RGB를 YUV로 변환하는 공식은 다음과 같습니다.
Y = (0.257 X R) +(0.504 X G) + (0.098 X B) + 16
U =-(0.148 X R) — (0.291 X G) + (0.439 X B) + 128
V = (0.439 X R) — (0.368 X G) + (0.071 X B) + 128
Y는 흑백사진이 나오며, U는 파란색이 강조, V는 빨간색이 강조됩니다.
아래 첫 원본 사진과 비교해보면 명확하게 색의 차이를 알 수 있습니다. Y 적용 시(3번째), U 적용 시(2번째), V 적용 시(4번째) 강조되는 색의 차이, 보이시죠?
네이버 클라우드 플랫폼에서도 이와 같은 원리로 기존의 Object Storage에 있는 원본 컬러 사진을 흑백으로 변환된 것을 확인할 수 있습니다.
2. 블러(Blur)
블러(Blur)는 원본 이미지를 흐릿하게 하는 기법입니다.
주로 Average Filter(애버리지 필터) 혹은 Gaussian Filter(가우시안 필터)를 많이 사용합니다.
우선 Average Filter(애버리지 필터)는 주변의 평균으로 픽셀 값을 대체하는 기법입니다. Averaging Filtering은 전체적인 Kernel 값으로 원본 이미지를 변경하기 때문에, Random Noise를 줄 일수 있습니다.
다음으로 Gaussian Filter(가우시안 필터)는 분산을 통해 Kernel 값들을 채울 수 있습니다. Averaging Filter와 다르게 중앙에서 외각으로 값들이 분산되는 것을 확인할 수 있습니다.
따라서 분산의 정도에 따라 Kernel에 표현되는 값이 달라지며, 블러(blur)의 정도도 달라지게 됩니다.
네이버 클라우드 플랫폼 Query String Filter(blur)를 통해 이러한 블러 이미지를 구현할 수 있습니다.
- blur_rad는 이러한 kernel(window)의 사이즈를 정해주는 부분입니다.
- blur_sig는 분산의 정도를 정해주는 부분입니다.
분산은 커질수록 완만한 형태로 Kernel의 전체적인 값들이 비슷해지며 결과적으로 블러 효과가 강화될 것입니다. 반대로 분산이 작을수록 그래프는 좁고 평균값에 집중되는 형태로 커널의 값들이 중앙에 집중되고 blur 효과는 약해질 것입니다.
이렇게 분산이 적용된 kernel의 분산 값들이 각각의 픽셀에 형성되고, 이렇게 형성된 값들이 원본 데이터와의 연산을 통해 블러 된 데이터를 얻게 됩니다.
아래 사진은 Kernel Size는 100으로 통일한 뒤, 분산(0.1,1,2,10)을 다르게 표현한 결과입니다. 분산이 커질수록 kernel 값들이 비슷해지고 더욱더 blur 효과가 잘 나타나는 것을 확인할 수 있습니다.
3. 샤픈(Sharpening)
마지막으로 샤픈(Sharpen) 필터를 알아보겠습니다.
샤픈(Sharpen)이란 Intensity의 transition을 강조하는 것으로, 명도가 변화하는 부분을 강조하여 이미지를 보다 날카롭게 보이게 하는 기법입니다. 샤픈의 방법은 앞서 블러 부분에서 언급한 Averaging Filtering(애버리지 필터링)을 이용할 수 있습니다.
즉, 원본 이미지에서 흐릿하게 블러 처리된 부분을 빼면 날카로운 부분(sharp한 부분)만 검출할 수 있습니다.
Sharp Mask(Detail) = Original — Blurring
Sharpened = Original + K *sharp mask(detail) (K = 가중치)
네이버 클라우드 플랫폼 Query String Filter(Sharpen)에서도 위와 같은 결과를 도출할 수 있습니다.
Sharp_amt는 윤곽선 밝기 대비를 주는 정도로, 값이 커질수록 위의 식에서 K(가중치)가 높아집니다.
아래 사진은 K의 값들을 사진 순서대로 0.1 > 1 > 10 > 100으로 적용해보았습니다. K의 값이 커질수록 sharp mask가 강조되면서 더욱 날카로운 이미지로 변환되는 것을 확인할 수 있습니다.
지금까지 네이버 클라우드 플랫폼 Image Optimizer의 데이터 전송 방식인 Query String을 이해하고, 다양한 이미지 변환 옵션(크기, 워터마크, 필터) 중 Filter에 대해 알아보았습니다. 편리한 이미지 변환과 활용에 조금이나마 도움 되어드렸길 바라며, 글을 마칩니다.
위 과정 실행 어려움이 있으시면 댓글 또는 네이버 클라우드 플랫폼 페이스북 유저 그룹에 남겨주시면 빠르게 도와드리겠습니다.
Image Optimizer 관련 콘텐츠
- 클릭 시 해당 콘텐츠로 이동합니다.
