웹 페이지를 디자인할 때 가장 중요한 부분 중 하나가 그래픽 요소입니다. 이미지, 아이콘, 그래픽 버튼 등을 쉽게 만들 수 있고, 웹 페이지에 표시할 수 있어야 합니다. 웹 그래픽의 유형, 각 유형의 사용 사례, 그리고 각각의 장단점에 대해 알아보겠습니다.

인터렉티브 그래픽

인터렉티브 그래픽는 사용자가 그래픽 요소와 상호 작용할 수 있는 그래픽 유형을 말합니다. 주로 SVG(Scaleable Vector Graphics)와 Canvas가 사용됩니다.

SVG

SVG는 확장 가능한 벡터 그래픽(Scalable Vector Graphics)의 약자로 XML 형식으로 작성된 2차원 벡터 이미지를 나타냅니다. SVG는 확대 또는 축소하더라도 이미지의 품질이 훼손되지 않는 장점이 있으며, 웹 페이지에 표시할 수 있는 다양한 종류의 그래픽을 디자인하기에 적합합니다.

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

Canvas

Canvas는 동적으로 그래픽을 생성하기 위한 HTML5 요소입니다. Canvas를 사용하면 JavaScript를 통해 그래픽을 그릴 수 있으며, 그래픽을 조작하고 애니메이션을 만들 수 있습니다.

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>

래스터 그래픽

래스터 그래픽은 사진이나 색상이 많은 이미지와 같이 매우 복잡한 이미지를 다루는 데 사용되는 그래픽 유형입니다. 주로 JPEG, PNG, GIF가 사용됩니다.

JPEG

JPEG(제이펙)는 Joint Photographic Experts Group의 약자로, 사진이나 컬러 그림과 같은 복잡한 이미지를 압축하지만, 이미지 품질을 손상시키지 않습니다. JPEG는 사진 및 예술적인 그림에 주로 사용됩니다.

PNG

PNG(피엔지)는 Portable Network Graphics의 약자로, 손실이 없는 압축 방식을 사용하여 그래픽을 저장합니다. 투명도를 지원하며, 이미지를 여러 번 저장해도 품질이 훼손되지 않는 장점이 있습니다.

GIF

GIF(지프)는 Graphics Interchange Format의 약자로, 여러 프레임을 갖는 애니메이션을 만들 수 있으며, 간단한 그림 및 애니메이션에 주로 사용됩니다.

이번 글에서는 다양한 웹 그래픽 유형에 대해 알아보았습니다. 각 유형은 다양한 장단점을 가지고 있으며, 웹 페이지에 적합한 유형을 선택하여 사용해야 합니다.

참고: MDN Web Docs