대부분의 이미지는 콘텐츠의 일부이지만 아이콘은 사용자 인터페이스의 일부입니다. UI 텍스트가 조정되고 조정되는 것과 동일한 방식으로 확장되고 조정되어야 합니다.
확장 가능한 벡터 그래픽
사진 이미지의 경우 JPG, WebP, AVIF 등 다양한 이미지 형식을 선택할 수 있습니다. 사진이 아닌 이미지의 경우 PNG (Portable Network Graphics) 형식과 SVG (Scalable Vector Graphics) 형식 중에서 선택할 수 있습니다.
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 속성을 사용하여 보조 기술로부터 SVG를 숨깁니다.
<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>
SVG를 HTML에 넣는 경우 링크 또는 버튼에 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;
}
자료
- CSS에서 배경 이미지인 SVG의 스타일을 지정해야 하는 경우 SVG 배경 색상 지정에 관한 Una의 도움말을 읽어보세요.
- 사라 수에이단은 액세스 가능한 아이콘 버튼에 대해 작성했습니다.
- 스콧 오하라는 액세스 가능한 이미지와 SVG를 컨텍스트에 따라 마크업하는 방법을 썼습니다.
- 그래픽 디자인 도구를 사용하여 SVG를 내보내는 경우 SVGOMG를 사용하여 출력을 최적화하세요.
아이콘은 사이트 브랜딩에서 중요한 부분입니다. 이제 테마 설정을 사용하여 브랜딩의 다른 측면을 반응형으로 만드는 방법을 알아보겠습니다.
학습 내용 확인하기
아이콘에 관한 지식 테스트
SVG는 단일 파일 또는 <svg> 코드 블록으로 모든 픽셀 밀도를 처리할 수 있습니다.
.png 또는 .jpg와 달리 SVG에는 srcset 또는 <picture> 요소가 필요하지 않습니다.HTML에 직접 포함된 SVG 코드는 어떤 이점이 있나요?