웹사이트나 앱을 만들다 보면 아이콘 하나가 전체 분위기를 좌우할 때가 있습니다.
이미지 파일을 일일이 제작하거나 유료 라이선스를 걱정하던 시절은 이미 지났죠.
구글 머티리얼 아이콘은 그 고민을 단번에 해결해 주는 무료 공개 아이콘 라이브러리입니다.
2,500개 이상의 아이콘을 아파치 라이선스 2.0 하에 상업적, 개인적 목적으로 모두 사용할 수 있죠.
웹, 안드로이드, iOS 어느 플랫폼에서도 매끄럽게 동작하는 벡터 기반 설계가 강점입니다.
이번 글에서는 구글 머티리얼 아이콘의 개념부터 실제 적용법, 파일 다운로드 방법까지 순서대로 풀어드립니다.
구글 머티리얼 아이콘이란?
사진 출처 (google)
구글 머티리얼 아이콘은 구글이 머티리얼 디자인 가이드라인에 따라 제작하고 공개한 벡터 아이콘 시스템입니다.
Gmail, 구글 드라이브, 구글 지도 등 구글 주요 서비스 전반에 이미 적용돼 있는 아이콘들이죠.
아이콘 하나하나가 24px 그리드를 기준으로 설계됐고, 단순하면서도 의미 전달에 충실한 형태가 특징입니다.
현재 구글은 기존 Material Icons와 그 후속 버전인 Material Symbols 두 가지 시스템을 함께 운영하고 있습니다.
Material Icons는 안정된 클래식 버전이며, Material Symbols는 가변 폰트 기술을 도입한 최신 버전입니다.
Material Symbols 쪽이 더 많은 아이콘(2,500개 이상)과 다양한 스타일 옵션을 제공하므로 신규 프로젝트라면 후자를 권장합니다.
두 시스템 모두 Apache License 2.0을 따르며, 저작권 부담 없이 사용할 수 있습니다.
무료 아이콘이지만 강력하다 – 스타일과 커스터마이징
사진 출처 (martian36 블로그)
구글 머티리얼 아이콘의 진면목은 자유로운 커스터마이징에 있습니다.
무료 아이콘임에도 디자인 품질과 유연성은 유료 라이브러리 못지않죠.
Material Symbols는 3가지 기본 스타일을 지원합니다.
아웃라인 형태의 Outlined, 모서리가 부드러운 Rounded, 각진 느낌의 Sharp로 나뉩니다.
여기에 더해 4가지 가변 폰트 축(axis)으로 아이콘의 생김새를 세밀하게 조정할 수 있습니다.
Fill(채움) 값 0은 아웃라인 상태, 1은 꽉 찬 상태로 전환됩니다.
Weight(굵기)는 100(가늘게)에서 700(굵게)까지 선택 가능하고, Grade(그레이드)는 획 두께를 더 세밀하게 조정합니다.
Optical Size는 아이콘 크기에 따라 획 굵기를 자동으로 최적화해 줍니다.
권장 표시 크기는 18px, 24px, 36px, 48px 네 가지이며, 24px에서 가장 깔끔하게 보이죠.
색상 지정도 가능한 시스템
사진 출처 (martian36 블로그)
색상 지정도 CSS의 color 속성 하나로 처리됩니다.
밝은 배경에서는 불투명도 54%의 검정(rgba(0,0,0,0.54))을, 어두운 배경에서는 불투명도 100% 흰색을 권장 수치로 제시하고 있죠.
이미지 파일처럼 따로 리사이징이나 재색상 작업을 할 필요가 없다는 점에서 작업 효율이 크게 올라갑니다.
구글 아이콘 모음 – CDN으로 불러오기
구글 아이콘 모음을 프로젝트에 적용하는 가장 빠른 방법은 CDN 방식입니다.
HTML 파일의 head 태그 안에 아래 코드 한 줄만 추가하면 수천 개의 아이콘을 바로 불러올 수 있습니다.
link href=”https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined” rel=”stylesheet”
이후 원하는 위치에 span 태그를 배치하고 class에 material-symbols-outlined를 지정한 해야 합니다.
텍스트만으로 아이콘이 생성되는 시스템
사진 출처 (shootst의 브런치)
태그 내용에 아이콘 이름을 적으면 해당 아이콘이 표시되죠.
예를 들어 home이라고 입력하면 집 모양 아이콘이, search라고 쓰면 돋보기 아이콘이 나타나는 방식입니다.
Rounded 스타일을 쓰고 싶다면 클래스명을 material-symbols-rounded로 바꾸면 되죠.
Sharp 스타일은 material-symbols-sharp를 사용하시면 됩니다.
기존 Material Icons 버전을 사용하는 경우라면 head 태그에 아래 코드를 연결합니다.
link href=”https://fonts.googleapis.com/icon?family=Material+Icons” rel=”stylesheet”
이때는 i 태그에 class로 material-icons를 지정하고, 태그 내용에 아이콘 이름을 입력합니다.
지원 기능의 한계를 알아둬야
단, Material Icons는 순수하게 아이콘 폰트만 제공합니다.
그렇기에 크기·색상 같은 스타일 클래스는 별도로 CSS 파일에 직접 작성해야 합니다.
CDN 방식은 네트워크 연결이 필수이며, 인터넷 환경이 불안정한 환경에서는 폰트 로딩이 늦어질 수 있습니다.
구글 아이콘 다운로드 – 파일로 직접 저장하는 법
사진 출처 (webty 블로그)
서버에서 폰트를 직접 호스팅하거나 오프라인 환경에서 사용해야 한다면 구글 아이콘 다운로드가 필요합니다.
구글 폰트 공식 아이콘 페이지(fonts.google.com/icons)에서 개별 아이콘을 SVG 또는 PNG 형식으로 저장할 수 있습니다.
원하는 아이콘을 클릭한 뒤 오른쪽 패널에서 형식과 크기를 선택하면 개별 파일 다운로드가 가능합니다.
전체 아이콘 세트를 한꺼번에 내려받으려면 구글의 공식 GitHub 저장소를 이용합니다.
아래 명령어로 전체 저장소를 복사하면 SVG 형식의 완전한 아이콘 세트를 받을 수 있습니다.
git clone https://github.com/google/material-design-icons
다만 전체 저장소 용량이 상당히 크므로, GitHub 저장소의 variable font 폴더에서 필요한 폰트 파일만 고르는 것을 권장합니다.
TF 파일보다 용량이 가볍고 브라우저 호환성이 높은 WOFF2 형식으로 변환해 사용하는 것이 유리하죠.
로컬 다운로드 후 웹폰트로 등록할 때는 CSS 파일에 @font-face를 직접 선언해야 합니다.
그 뒤 .material-icons 또는 .material-symbols-outlined 클래스를 수동으로 정의하면 CDN 방식과 동일하게 사용할 수 있습니다.
구글 아이콘 무료 라이센스 확인하기
구글 아이콘은 Apache License Version 2.0에 의해 무료 사용이 가능합니다.
이 라이선스는 출처 표기 없이도 상업적 프로젝트와 개인 프로젝트 모두에서 자유롭게 활용할 수 있는 오픈소스입니다.
단, 아이콘 자체를 재배포하거나 다른 형태의 아이콘 팩으로 재가공해 판매하는 행위는 주의해야 합니다.
구글 폰트 공식 문서에 라이선스 전문이 공개돼 있으므로 상업적 사용 전 한 번 읽어두면 불필요한 분쟁을 피할 수 있습니다.
글을 마치며
영상 출처 (googledesign)
구글 아이콘 시스템이 오랫동안 웹 개발의 표준으로 자리잡아 온 데는 그럴 만한 이유가 있습니다.
무료이면서도 2,500개 이상의 방대한 모음, 3가지 스타일, 4가지 가변 축이 모두 담겨 있기 때문이죠.
CDN 한 줄로 생성이 가능하고, SVG 정밀 커스텀까지 가능한 유연성이 구글 머티리얼 아이콘의 경쟁력입니다.
처음 아이콘 폰트를 다루는 입문자에게도, 대규모 서비스를 운영하는 개발팀에게도 동일하게 적합한 선택지이인 이유죠.
fonts.google.com/icons에 접속하면 전체 아이콘 라이브러리를 직접 확인하고 바로 활용해 볼 수 있으니, 이를 참고해보시길 바랍니다.
