애니메이션 이미지, 투명도 및 배경

웹사이트에서는 래스터 포맷과 벡터 포맷의 각종 이미지 형식이 사용됩니다. 다양한 옵션을 선택할 수 있어 개발자에게는 좋지만, 언제 어떤 형식을 사용해야 하는지 판단하기 어려울 수 있습니다.

아래에서는 일반적인 사용 사례를 살펴보고, 각각의 사례에 대한 권장 사항과 고려해야 할 요인을 짚어 보겠습니다.

애니메이션

애니메이션 그래픽은 프레임이 두 개 이상이고 어떤 식으로든 움직임을 보여 주는 그림을 지칭합니다.

애니메이션에는 다양한 포맷(GIF, PNG, WebP)이 있지만, 그중에서도 가장 많은 브라우저를 지원하는 GIF가 자주 사용됩니다. (물론 GIF에는 1비트 투명도로 256색까지만 표현할 수 있다는 한계가 있습니다.)

투명도

투명도가 적용된 이미지는 이미지가 표시될 배경 색을 미리 확실히 모르는 경우에 유용합니다. 이진 투명도를 사용하면 인덱스 색상표 중 하나의 색이 투명색으로 지정됩니다. 반면 알파 투명도의 경우 투명도 정보가 별도의 알파 채널에 저장되어 이진 투명도보다 고급 설정을 사용할 수 있습니다.

이진 투명도를 지원하는 GIF로는 간단한 투명도 기능을 사용할 수 있습니다. PNG, WebP, JPEG 2000, JPEG XR은 알파 채널을 사용하기 때문에 더 많은 기능을 사용할 수 있습니다.

배경 그라데이션

CSS에서 요소의 배경을 단색으로 지정할 수 있듯이 그라데이션으로도 지정할 수 있습니다. 그라데이션은 일반적으로 하나의 색이 점진적으로 다른 색으로 변하는 것을 가리키는데, CSS에서는 색이 변하는 방향, 색(원하는 만큼 여러 색 사용 가능), 그라데이션이 표시되는 영역 등을 지정할 수 있습니다.

이미지 파일을 사용하는 것보다 CSS에서 지정된 그라데이션을 사용하는 것이 성능과 관리 측면에서 더 바람직합니다.

로고

로고는 심볼, 아이콘 등의 그래픽을 가리키며, 조직의 이름(로고타입 또는 워드마크)을 나타내는 경우가 많습니다.

로고에는 가장자리를 부드럽게 처리하고 화질 저하 없이 크기를 변경할 수 있으며 파일 크기가 작은 벡터 포맷(SVG)을 사용하는 것이 가장 좋지만, 고해상도 래스터 이미지 포맷(typically PNG)도 사용할 수 있습니다.

클립 아트

클립 아트는 문서 또는 여타 프로그램으로 가져올 수 있는 그림이나 이미지의 컬렉션을 뜻합니다. 이때 래스터 그래픽과 벡터 그래픽을 모두 이미지로 사용할 수 있습니다.

(카툰이나 클립 아트의 경우에서 볼 수 있는) 단색 이미지에는 GIF가 가장 적합합니다. 투명한 배경의 웹 페이지에서 GIF 이미지를 사용하면 중첩이 가능합니다.

메자닌 이미지

메자닌 이미지는 일반적으로 최소 300dpi(인치당 화소 수)의 해상도를 가지며, 사진에서 자주 사용됩니다.

웹 기반 메자닌(오리지널)에는 손실 허용 압축 기법으로 품질과 크기 사이의 좋은 균형을 보이는 고해상도 JPEG가 자주 사용됩니다. 무손실 압축된 높은 품질의 이미지가 필요하면 PNG를 사용하는 것이 좋습니다. 웹, 인쇄본 등 다양한 매체에서 이미지를 사용할 때는 오리지널로 TIFF(Tagged Image File Format)를 사용하는 것이 좋습니다. TIFF를 사용할 때는 웹용 포맷으로 변환해야 하는 점에 유의하십시오.

반응형

반응형 이미지는 크기, 자르기, 이미지 소스 등 다양한 환경 조건에 따라 변하는 이미지를 가리킵니다. 반응형 이미지를 사용하면 연결 속도가 느린 모바일 사용자에게는 크기가 작은 파일을 전송하여 웹 성능이 개선되는 효과를 볼 수 있습니다.

각종 브라우저의 호환성을 고려하여 디자인할 때는 JPEG가 적합합니다. 호환되는 특정 브라우저에 이미지를 표시할 때는 WebP(Chrome 및 Opera), JPEG 2000(Safari), JPEG XR(Internet Explorer 및 Edge)가 적합합니다.

스프라이트

스프라이트는 웹 디자인에서 여러 개의 작은 이미지나 아이콘을 스프라이트 시트 또는 타일 세트라 불리는 하나의 큰 이미지로 결합하여 성능을 개선하는 방안으로 사용됩니다.

스프라이트는 아이콘에도 자주 사용됩니다. 아이콘에는 GIF/PNG가 가장 적합하며, JPEG도 종종 사용됩니다.

이미지를 표시하는 데 종종 CSS(Cascading Style Sheets)가 사용되며, 스프라이트 자체는 PNG나 JPEG인 경우가 많습니다.

아이콘

아이콘은 웹사이트에서 버튼이나 비주얼 표시기로 사용됩니다. 스프라이트처럼 아이콘도 여러 개가 하나로 그룹화되는 경우가 많습니다. 용도에 따라 다양한 이미지 형식을 사용할 수 있지만, SVG가 가장 적합합니다. 페이지 로드 시 제대로 관리가 가능한 경우 아이콘 폰트의 사용도 가능합니다. 그 외에도 GIF나 PNG도 사용할 수 있습니다. 아이콘 세트(글꼴 또는 스프라이트)를 로드할 때는 사용하지 않는 아이콘까지 모두 로드하기 위해 성능이나 시간에 얼마나 영향이 가는지 확인해야 합니다.

둥근 모서리 또는 레이아웃 피스

웹사이트에서는 스타일, 높이, 너비를 변경하거나 둥근 모서리와 같은 효과를 적용하기 위해 이미지가 사용되는 경우가 많습니다. 여기에는 이미지 대신 CSS를 사용하는 것이 더욱 바람직합니다.

둥근 모서리는 모든 브라우저에서 문제없이 지원되며, 아래에서 볼 수 있듯이 몇 가지 고급 설정도 사용할 수 있습니다.

요약

사용 사례에 맞는 최적의 포맷을 선택해야 이미지가 주는 영향을 극대화할 수 있습니다. 각 포맷마다 장단점을 파악하고, 이를 감안하여 가장 적합한 쪽으로 결정하는 것이 중요합니다.

Akamai Image Manager로 다양한 온라인 이미지 사용 사례를 관리하는 방법을 알아보십시오.