아이콘

대부분의 이미지는 콘텐츠의 일부이지만 아이콘은 사용자 인터페이스의 일부입니다. UI의 텍스트가 확장되고 조정되는 것과 동일한 방식으로 확장되고 조정되어야 합니다.

Scalable Vector Graphics

사진 이미지의 경우 이미지 형식으로 JPG, WebP, AVIF 등 다양한 선택지가 있습니다. 사진이 아닌 이미지의 경우 Portable Network Graphics (PNG) 형식과 Scalable Vector Graphics (SVG) 형식 중에서 선택할 수 있습니다.

PNG와 SVG는 모두 단색 영역을 처리하는 데 적합하며 이미지를 투명한 배경으로 만들 수 있습니다. PNG를 사용하는 경우 다양한 크기의 이미지 버전을 여러 개 만들고 img 요소에서 srcset 속성을 사용하여 이미지를 반응형으로 만들어야 할 수 있습니다. SVG를 사용하면 기본적으로 반응형입니다.

PNG (및 JPG, WebP, AVIF)는 비트맵 이미지입니다. 비트맵 이미지는 정보를 픽셀로 저장합니다. SVG에서는 정보가 그리기 명령으로 저장됩니다. 브라우저가 SVG 파일을 읽으면 명령어가 픽셀로 변환됩니다. 무엇보다도 이러한 명령어는 상대적입니다. 선과 도형을 설명하는 데 사용하는 치수와 관계없이 모든 항목이 적절한 선명도로 렌더링됩니다. 크기가 다른 SVG를 여러 개 만드는 대신 모든 크기에서 작동하는 SVG를 하나 만들 수 있습니다. srcset 속성을 사용할 필요가 없습니다.

<img src="image.svg" alt="A description of the image." width="25" height="25">
<img src="image.svg" alt="A description of the image." width="250" height="250">

XML은 SVG 파일에 명령어를 작성하는 데 사용됩니다. 이는 HTML과 같은 마크업 언어입니다.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="-21 -21 42 42" width="100" height="100">
  <title>Smiling face</title>
  <circle r="20" fill="yellow" stroke="black"/>
  <ellipse rx="2.5" ry="4" cx="-6" cy="-7" fill="black"/>
  <ellipse rx="2.5" ry="4" cx="6" cy="-7" fill="black"/>
  <path stroke="black" d="M -12,5 A 13.5,13.5,0 0,0 12,5 A 13,13,0 0,1 -12,5"/>
</svg>

픽셀화 없이 확대되는 노란색 웃는 얼굴 이모티콘

HTML 내부에 SVG를 넣을 수도 있습니다.

<figure>
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="-21 -21 42 42" width="100" height="100">
    <title>Smiling face</title>
    <circle r="20" fill="yellow" stroke="black"/>
    <ellipse rx="2.5" ry="4" cx="-6" cy="-7" fill="black"/>
    <ellipse rx="2.5" ry="4" cx="6" cy="-7" fill="black"/>
    <path stroke="black" d="M -12,5 A 13.5,13.5,0 0,0 12,5 A 13,13,0 0,1 -12,5"/>
  </svg>
  <figcaption>
  A description of the image.
  </figcaption>
</figure>

이와 같이 SVG를 삽입하면 브라우저에서 요청해야 하는 횟수가 한 번 줄어듭니다. 이미지가 HTML과 함께 도착하므로 HTML에 이미지를 다운로드하기 위해 기다릴 필요가 없습니다. 또한 곧 알게 되겠지만 이와 같이 SVG를 삽입하면 스타일을 더 세밀하게 관리할 수 있습니다.

아이콘 및 텍스트

아이콘 이미지는 투명한 배경에 단순한 모양을 사용하는 경우가 많습니다. SVG는 아이콘에 적합합니다.

텍스트와 아이콘이 내부에 있는 버튼이나 링크가 있는 경우 아이콘은 표현적입니다. 중요한 것은 텍스트입니다. img 요소를 사용하는 경우 빈 alt 속성은 이미지가 표현용임을 나타냅니다.

<button>
<img src="hamburger.svg" alt="" width="16" height="16">
Menu
</button>

CSS는 프레젠테이션용이므로 CSS에 아이콘을 배경 이미지로 넣을 수 있습니다.

<button class="menu">
Menu
</button>

.menu {
  background-image: url(hamburger.svg);
  background-position: 0.5em;
  background-repeat: no-repeat;
  background-size: 1em;
  padding-inline-start: 2em;
}

HTML 내부에 SVG를 배치하는 경우 aria-hidden 속성을 사용하여 보조 기술에서 숨깁니다.

<button class="menu">
  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 80" width="16" height="16">
    <rect width="100" height="20" />
    <rect y="30" width="100" height="20"/>
    <rect y="60" width="100" height="20"/>
  </svg>
  Menu
</button>

독립형 아이콘

버튼과 링크의 용도를 명확하게 하려면 버튼과 링크 내에 텍스트를 사용하세요. 텍스트 없이 아이콘을 사용할 수 있지만 모든 사람이 특정 아이콘의 의미를 이해한다고 가정하지는 마세요. 확실하지 않은 경우 실제 사용자를 대상으로 테스트하세요.

텍스트 없이 아이콘을 사용하기로 결정하면 아이콘은 더 이상 표현용이 아닙니다. CSS의 배경 이미지는 아이콘을 표시하는 적절한 방법이 아닙니다. 아이콘에 HTML로 액세스 가능한 이름을 지정해야 합니다.

img 요소를 사용하면 아이콘이 alt 속성에서 액세스 가능한 이름을 가져옵니다.

<button>
<img src="hamburger.svg" alt="Menu" width="16" height="16">
</button>

또 다른 옵션은 링크나 버튼 자체에 액세스 가능한 이름을 배치하고 이미지가 표현용이라고 선언하는 것입니다. aria-label 속성을 사용하여 액세스 가능한 이름을 제공합니다.

<button aria-label="Menu">
<img src="hamburger.svg" alt="" width="16" height="16">
</button>

HTML 내부에 SVG를 배치하는 경우 링크 또는 버튼에 aria-label 속성을 사용하여 액세스 가능한 이름을 지정하고 아이콘에 aria-hidden 속성을 사용합니다.

<button aria-label="Menu">
  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 80" width="16" height="16">
    <rect width="100" height="20" />
    <rect y="30" width="100" height="20"/>
    <rect y="60" width="100" height="20"/>
  </svg>
</button>

아이콘 스타일 지정

SVG 아이콘을 HTML에 직접 삽입하면 페이지의 다른 요소와 마찬가지로 아이콘의 일부에 스타일을 지정할 수 있습니다. img 요소를 사용하여 아이콘을 표시하는 경우에는 이렇게 할 수 없습니다.

다음 예에서 SVG 내부의 rect 요소는 버튼 텍스트의 스타일과 일치하도록 fill 값이 blue입니다.

button {
 color: blue;
}
button rect {
  fill: blue;
}

hover 및 focus 스타일도 적용할 수 있습니다.

button:hover,
button:focus {
  color: red;
}
button:hover rect,
button:focus rect {
  fill: red;
}

리소스

아이콘은 사이트 브랜딩의 중요한 부분입니다. 다음으로 테마 설정을 통해 브랜딩의 다른 측면을 반응형으로 만드는 방법을 알아봅니다.

이해도 테스트

아이콘에 대한 지식 테스트

SVG는 단일 파일 또는 <svg> 코드 블록으로 모든 픽셀 밀도를 처리할 수 있습니다.

참
SVG에는 픽셀 밀도, 크기 또는 확대/축소에 관계없이 도형과 선을 그리는 방법이 포함되어 있습니다.
거짓
.png 또는 .jpg와 달리 SVG에는 srcset 또는 <picture> 요소가 필요하지 않습니다.

HTML에 직접 있는 SVG 코드에는 어떤 장점이 있나요?

CSS에서 스타일 지정 가능
SVG 아이콘 모양을 버튼 및 브랜드 색상과 일치시킵니다.
다운로드가 필요하지 않습니다.
모든 안내가 나와 있습니다.
기본적으로 지연 로드됩니다.
다운로드할 필요가 없습니다.
CPU 사용량 감소
이건 내가 지어낸 거야.
새 확장 소재 없이 밝은 테마 또는 어두운 테마
미디어 쿼리는 인라인 SVG 스타일을 변경할 수 있습니다.
이전
사진 요소
다음
테마 설정