새로운 구글 머티리얼 심볼 활용법: 웹아이콘의 모든 것

 

안녕하세요 찐망고입니다.

 

이전에 xeicon관련 포스팅을 했었는데요.

드디어 다음 포스팅을..

 

2021.07.23 - [WEB/CSS] - 웹에서 사용가능한 웹아이콘 적용방법 - XEIcon

웹에서 사용가능한 웹아이콘 적용방법 - XEIcon

 

 

요즘은 워낙 svg가 대세이긴 해서 웹에서 사용하는 아이콘들이 svg가 많은데요.

아직도 곳곳에선 xeicon이나 구글아이콘 폰트어썸 등을 사용합니다.

 

구글아이콘은 사용하기는 편한데 종류가 별로 없어서..ㅎㅎ 

 

워낙 다른 블로그 포스팅에 html을 이용하는 방법이 많은데

전 CSS로 적용시켜 볼게요~

 

https://fonts.google.com/icons

Material Symbols and Icons - Google Fonts

 

사이트에 접속합니다.

Material Symbols(new)이 새로 생겼어요 

구글 머티리얼 심볼 기본

 

이 부분을 변경할 때마다 아이콘의 그림들이 바뀝니다.

구글 머티리얼 심볼 옵션 수정

 

왼쪽 옵션을 볼까요? 

Weight(두께): 아이콘의 굵기를 의미합니다. 얇은 선은 더 세련된 느낌을 주고, 굵은 선은 강한 느낌을 줍니다.

Grade(등급): 아이콘의 시각적 무게를 조절한다고 생각하면 되는데요.

두께를 변경한 다기보단 아이콘의 강조를 조절한다고 생각하시면 됩니다.

Optical Size(광학크기): 아이콘의 크기가 변할 때 시각적으로 균형을 유지하기 위한 세부 디테일을 조정합니다.

작은 크기는 세부사항을 줄여서 아이콘이 더 단순하고 명확하게 보이게 하고, 

큰 크기로 표시될 때는 더 많은 옵션을 추가하여 아이콘을 더 풍부하고 세밀하게 표현할 수 있습니다.

 

기본의 머티리얼 아이콘과는 다르게 더 다양한 옵션이 있네요.

 

 

골라서 써볼까요.

구글 머티리얼 아이콘

 

아이콘을 골라서 선택하면 오른쪽 창에 코드가 뜹니다. 

 

위쪽의 Variable Icon Font의 링크를 복사하면

직접 style에서 fill, weight, grade, optical size를 변경할 수 있는데

아무래도 다양한 스타일의 아이콘을 하나의 폰트파일에서 관리할 수 있는 장점이 있겠죠.

 

특정 스타일의 아이콘을 한두 개만 사용하는 경우 Static Icon Font가 더 단순하고 직관적일 수 있습니다.

 

 

아래 예시에서 확인해 볼까요?

 

See the Pen 구글머터리얼심볼 by 찐망고 (@nnwbliyz-the-styleful) on CodePen.