이번 프로젝트에 구글 머티리얼 디자인 아이콘을 사용하기로 했다. 원래 Fontawesome을 사용하려고 했는데 대부분 fill 아이콘만 무료고 outline 아이콘은 유료였다. 처음에 무료 탭에 있는 건 다 사용할 수 있는 줄 알고 같은 아이콘 디자인도 다양하게 고를 수 있어서 좋다고 생각했는데 아니나다를까 유료였음.ㅋㅋㅋ
Material Symbols and Icons - https://fonts.google.com/icons
Google Fonts의 'Icons' 탭으로 가면 드롭다운으로 'Material Symbols'와 'Material Icons' 중에 하나를 선택할 수 있다. 둘은 필터칩이 다른 것을 확인할 수 있는데 material symbol은 Outlined, Rounded, Sharp가 있고, material icon은 Outlined, Filled, Rounded, Sharp, Two tone이 있다.
Material Symbol과 Icon의 차이
Material icon은 일반적인 아이콘이고 Material symbol은 가변 아이콘이다. 가변 글꼴처럼 굵기를 조절할 수 있고, 크기를 조절할 때 단순하게 커지고 작아지는 일반 아이콘과 다르게 굵기가 자동으로 조정되는 시각적 보정 효과가 포함되어 있다.
Symbol 목록에는 Icon과 달리 Customization 옵션이 있다. 옵션은 Fill, Weight, Grade, Optical sizes로 총 4가지이다.
Fill: 아이콘 내부가 채워진 것을 사용할 것인지 설정할 수 있다. 1은 채워진 아이콘, 0은 테두리만 있는 아이콘.
Weight: 두께에 영향을 미친다. 얇게 사용할 것인지 굵게 사용할 것인지 100~700 사이의 값으로 설정한다.(font-weight와 같은 역할)
Grade: 두께에 영향을 미친다. 어두운 배경에서 낮게, 밝은 배경(대비가 강해야 하는 경우)에서 높게 설정한다. 아이콘 모양에 따라 큰 변화가 없기도 한 것 같다.
Optical sizes: 아이콘 크기에 따라 두께가 자동으로 조정된다. 일반 아이콘처럼 단순하게 작아지지 않는다.
Outlined, Rounded, Sharp 각각의 경우에 대해 채워진 아이콘까지 사용할 수 있기 때문에 결과적으로 material icon보다 사용할 수 있는 아이콘이 많다.
Figma의 iconify 플러그인에는 있는데 막상 icon 목록에는 채워진 둥근 아이콘이 없어서 당황했던 적이 있었는데 symbol에서 Rounded 아이콘을 삽입한 뒤에 Fill을 1로 설정하면 된다.
따로 Figma에서 Material Symbols의 사용자 설정을 조정해서 디자인에 활용하고 싶다면 'Material Symbols' 플러그인(링크)을 사용하면 된다.
Material Symbols 아이콘 사용 방법
Material symbol은 Google Fonts 사이트에 있는 메타 코드를 html <head>에 추가하면 사용할 수 있다. Vue 프로젝트에서는 index.html 파일에 추가하면 된다.
//빨간색 부분이 옵션 - Outlined, Rounded, Sharp <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
'Inserting the icon'에 있는 <span>코드를 삽입하면 아이콘을 사용할 수 있다.
//Outlined 돋보기 아이콘 삽입
<span class="material-symbols-outlined">search</span>
<span>을 사용하기 때문에 혹시나 아이콘이 로드되지 못한 경우 텍스트가 나타나게 된다.
다양한 아이콘을 오픈소스로 공개해줘서 좋다. 대기업이라서 이렇게 베푸는 구나...😇
0 댓글