아카마이 테크놀로지스 / 김현도 이사
3. 이미지 관리 프로세스와 예산
앞서 언급한 여러 고려사항들을 적용한 아키텍쳐를 구성하는 과정을 진행한다면 “이미지 최적화 예산" 이라는 것을 고려해야 한다. 이미지 최적화 예산은 성능과 품질에 영향을 미치는 다양한 변수들을 제어하는 최대치를 의미하는데, 예를 들면 아래와 같이 설정할 수 있다.
- 브라우져별 최적 포맷은 크롬, 사파리, 파이어폭스로 제공한다.
- 데스크탑, 타블렛, 모바일 접속을 구분하여 사이트 레이아웃을 구성한다.
- 각 레이아웃별 이미지 파일 크기는 합계 10MB이하로 제한한다
- 스크린 해상도는 고해상도 스마트폰을 고려하여 1x, 3x로 구분하여 제공한다.
웹서비스를 운영하는 팀과 개발팀, 디자이너에게 이미지 최적화 예산은 많은 영향을 주게되는데 이미지 생성 및 관리등의 업무에 어떤 기술을 적용할 것인지 어떤 이미지 압축 기술을 사용하게 될 것인지를 판단하는 기준이 된다.
맞춤형 이미지 포맷과 사이즈, 해상도 사용
JPG, PNG, GIF등의 다양한 이미지 포맷들은 각각의 장단점을 갖고 있으며 이후 개발된 새로운 이미지 포맷들은 기존보다 더 높은 이미지 압축을 지원하지만 모든 브라우저에서 호환되는 것은 아니다.
예를 들어 WebP는 구글이 개발했고 JPEG XR은 마이크로소프트에서 개발되었기 때문에 자사의 브라우저에서 우선 지원하게 된다. 따라서 한장의 원본 이미지 이외에 크롬 브라우저를 위한 WebP포맷과 인터넷 익스플로러 사용자를 위한 JPEG XR포맷을 별도로 준비하는 방법을 사용하면 된다.
하나의 이미지로 모바일과 데스크탑 접속을 포함한 다양한 스크린 사이즈에 대응하는 서비스를 하는 경우는 드물다. 데스크탑용도로 만든 고해상도 이미지를 모바일 기기 접속에도 사용하게 되면 불필요하게 큰 이미지를 다운받게 되어 응답속도가 느려지는 효과가 나타난다. 또한 목록화면에서 미리보기를 위한 전용이미지인 썸네일의 경우에도 원본 이미지의 가로와 세로 사이즈를 지정하는 것보다 300*300 사이즈 이하로 다시 이미지를 구성하기도 한다.
이처럼 스크린 해상도와 데스크탑, 모바일 접속등을 고려하여 이미지 스토리지를 구성하게 되면 경우의 수를 모두 곱한 만큼의 중복 이미지가 필요하게 된다. 위의 예제에서는 3가지의 브라우저별 포맷, 3가지의 레이아웃, 2개의 스크린 해상도를 고려해야 하므로 하나의 이미지당 18개를 셋트로 하는 이미지들을 보유하고 있어야 한다.
또한 새로운 스마트 기기들의 출시도 제조사마다 연례행사로 진행하고 있으며 서비스 국가에만 출시하는 스마트기가가 있는 경우는 해당 정보를 눈여겨 보고 있다가 이미지 관리 시스템에 반영해야하는 번거로움도 존재한다.
4. 이미지 최적화 솔루션별 특징
이러한 이미지 최적화 전송 관리를 위해 사용자의 스토리지나 서버에서 직접 처리하지 않고 클라우드 기반의 이미지 솔루션들이 대신 필요한 작업을 진행해주고 있다. 아래 목록은 해당 기능을 제공하는 클라우드 서비스들이며 주요 특징들을 나열했다.
- Adobe - Dynamic Media Scene7
○ Adobe의 Experience Manager의 기능중 일부이며 이미지 자산들에 대한 전반적인 관리 기능 제공하며 Workflow를 자동화 처리
○ Adobe의 Sensei AI를 기반으로 하는 스마트 이미징을 이용한 이미지 품질 최적화 지원
- Akamai의 Image Manager
○ Akamai의 Edge Platform 기반으로 최적의 이미지 압축품질 수준과 리사이징, 포맷변환작업 기능 제공
○ 워터마크, 얼굴 인식등의 변환처리를 쿼리스트링으로 지원
○ 5분 이하의 재생시간을 가지는 비디오에 대해서도 동일한 기능 제공
- AWS의 Serverless Image Handler
○ AWS클라우드에서 비용효율적인 이미지처리를 위한 서버리스 아키텍쳐 솔루션
○ 오픈소스 이미지 소프트웨어인 pixelplumbing의 sharp을 이용하여 동적 이미지 조정을 수행한다.
○ 고객의 디바이스에 따른 동적이미지 전송, Amazon Rekognition을 이용한 흐릿하고 부적절한 이미지 감지나 얼굴인식을 통한 이미지 자르기 지원
- Cloudflare의 Image Optimization
○ 웹사이트 최적화 서비스에 포함되는 기능으로 Cloudflare이미지 최적화 알고리즘을 기반으로 이미지 전송과정을 원활하게 만들고 복잡성을 제공하는 솔루션
○ 이미지 크게 조정 기능으로 하나의 기본 이미지로 여러 가지 버전을 생성하며 모바일 이미지 전송 효율을 높이는 기능인 Mirage와 이미지 압축 기능 제공인 Polish 제공
- Cloudinary의 Media Optimizer
○ 이미지와 비디오 포맷이나 품질, 크기등을 모두 자동으로 전환하여 최적의 환경을 이용해 전달하는 서비스
○ API기반의 정책 제어 기능 제공하며 이미지와 비디오 최적화 현황에 대한 전용 대쉬보드 제공
- imagekit.io
○ Image Transformation: URL파라메터를 통해 실시간 이미지 리사이징과 워터마크, 여러 이미지 조합들을 생성하는 기능 제공
○ Automate image optimization: WebP/Animated WebP를 지원하며 자동으로 최적의 이미지 포맷을 전환하고 압축하는 기능 제공. EXIF를 포함한 불필요한 이미지 Metadata 관리 기능 포함
○ Video API: URL파라메터를 통해 실시간 비디오 리사이징을 지원하며, 미리 정의한 템플릿에 맞는 변환 처리 기능 포함
- NAVER Cloud Platform - Image Optimizer
○ 원본 이미지를 모바일, 태블릿, PC 등 다양한 기기의 해상도에 맞게 손쉽게 리사이징 할 수 있는 클라우드 기반의 실시간 이미지 변환 서비스
○ 스토리지 ? 이미지 변환 ? CDN ? 로그 분석까지 이미지 변환을 위한 각 상품들을 편리하게 연동하여 이용할 수 있으며, 미리 설정한 타입으로만 변환을 허용
○ 현재 네이버 서비스에서 사용하는 것과 동일한 변환엔진
참고자료
- https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/
- https://www.opensignal.com/sites/opensignal-com/files/data/reports/global/data-2015-08/2015_08_fragmentation_report.pdf
- https://avif.io/blog/tutorials/netflix/
- https://tech.lezhin.com/2020/02/16/webp-resizing
- https://en.wikipedia.org/wiki/Structural_similarity
- https://imagekit.io/
- https://www.akamai.com
- https://www.cloudinary.com/
- https://www.ncloud.com/product/media/imageOptimizer
- https://aws.amazon.com/ko/solutions/implementations/serverless-image-handler/
- https://business.adobe.com/kr/products/experience-manager/adobe-experience-manager.html
저작권정책
K-ICT 클라우드혁신센터의 저작물인 『[3부] 클라우드 환경에서의 이미지 최적화 트렌드』는 K-ICT 클라우드혁신센터에서 아카마이 테크놀로지스 김현도 이사에게 집필 자문을 받아 발행한 전문정보 브리프로, 클라우드 지원포털의 저작권 정책에 따라 이용할 수 있습니다. 다만 사진, 이미지, 인용자료 등 제3자에게 저작권이 있는 경우 원저작권자가 정한 바에 따릅니다.