Material 기호란 무엇인가요?
Material 기호는 다양한 디자인 변형으로 하나의 글꼴 파일에 2,500개 이상의 글리프를 통합하는 최신 아이콘입니다. 기호는 세 가지 스타일과 4가지의 조정 가능한 가변 글꼴 축 (채우기, 두께, 등급, 광학 크기)으로 제공됩니다. Material Symbols Library에서 전체 Material 기호 세트를 참고하세요.
FILL축
채우기를 사용하면 기본 아이콘 스타일을 수정할 수 있습니다. 단일 아이콘은 채워지지 않은 상태와 채워진 상태를 모두 렌더링할 수 있습니다.
상태 전환을 전달하려면 애니메이션 또는 상호작용에 채우기 축을 사용합니다. 값은 기본값인 경우 0, 완전히 채워진 경우 1입니다. 가중치 축과 함께 채우기는 아이콘의 모양에 영향을 줍니다.
wght축
두께는 얇은 (100)~굵은 (700) 사이의 두께로 기호의 획 두께를 정의합니다. 무게는 기호의 전체 크기에 영향을 미칠 수도 있습니다.
GRAD축
무게와 등급은 기호의 두께에 영향을 줍니다. 등급 조정은 가중치 조정보다 더 세분화되어 기호의 크기에 약간의 영향을 미칩니다.
일부 텍스트 글꼴에서도 성적을 사용할 수 있습니다. 텍스트와 기호 간의 경사 수준을 일치시켜 조화로운 시각 효과를 얻을 수 있습니다. 예를 들어 텍스트 글꼴의 등급 값이 -25이면 기호는 이를 적절한 값(예: -25)과 일치시킬 수 있습니다.
다양한 필요에 맞게 성적을 사용할 수 있습니다.
낮은 강조 (예: -25 등급): 어두운 배경에서 밝은 기호의 빛 반사를 줄이려면 낮은 등급을 사용하세요.
높은 강조 (예: 200점): 기호를 강조표시하려면 양수 성적을 높입니다.
opsz축
광학 크기의 범위는 20dp~48dp입니다.
이미지가 여러 크기에서 동일하게 표시되도록 하려면 아이콘 크기가 조정됨에 따라 획 두께 (두께)가 변경됩니다. 광학 크기를 사용하면 기호 크기를 늘리거나 줄일 때 획 두께를 자동으로 조정할 수 있습니다.
Material 기호 가져오기
Material 기호는 여러 형식으로 사용할 수 있으며 앱의 개발자와 모형 또는 프로토타입의 디자이너 모두에게 적합합니다.
라이선스
Material 기호는 Apache 라이선스 버전 2.0에 따라 제공됩니다.
개별 아이콘 탐색 및 다운로드
전체 Material 기호 세트는 Material Symbols Library에서 SVG 또는 PNG 형식으로 사용할 수 있습니다. 웹, Android, iOS 또는 모든 디자이너 도구에 적합합니다.
Git 저장소
git 저장소에는 SVG 형식의 전체 Material 기호 세트가 포함되어 있습니다.
$ git clone https://github.com/google/material-design-icons
Material 기호 사용
웹에서 사용
Material Symbols 글꼴은 Material Symbols를 웹 프로젝트에 통합하는 가장 쉬운 방법입니다.
아이콘은 웹 개발자가 단 몇 줄의 코드로 이러한 아이콘을 쉽게 통합할 수 있도록 단일 글꼴로 패키징됩니다.
Google Fonts가 적용된 정적 글꼴
웹페이지에서 사용할 아이콘 글꼴을 설정하는 가장 쉬운 방법은 Google Fonts를 사용하는 것입니다. 다음 HTML 행 한 줄을 포함:
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
위의 스니펫에는 각 축의 기본 구성이 포함되어 있습니다. 가중치는 400, 광학 크기는 48, 등급은 0, 채우기(역시 0)입니다.
Fonts CSS API를 사용하여 다양한 축 값을 구성합니다. 다음 예를 참조하세요.
Google Fonts를 사용한 가변 글꼴
CSS를 통해 아이콘을 애니메이션으로 만들거나 아이콘 기능을 더 세밀하게 제어하려면 Google 기호 가변 글꼴을 사용하세요. 범위를 사용하여 number..number 형식의 전체 가변 글꼴을 로드할 수 있습니다. 사용자가 가변 글꼴을 로드할 수 있는지 알아보려면 Can I Use의 가변 글꼴 지원을 확인하세요. 예를 들면 다음과 같습니다.
또는 애니메이션을 적용할 수도 있습니다.
글꼴 자체 호스팅
애셋을 업데이트할 시기를 결정하기 위해 관리하는 위치에 아이콘 글꼴을 호스팅합니다. 예를 들어 URL이 https://example.com/material-symbols.woff이면 다음 CSS 규칙을 추가합니다.
@font-face {
font-family: 'Material Symbols Outlined';
font-style: normal;
src: url(https://example.com/material-symbols.woff) format('woff');
}
글꼴을 올바르게 렌더링하려면 아이콘 렌더링을 위한 CSS 규칙을 선언합니다. 이러한 규칙은 일반적으로 Google Fonts API 스타일시트의 일부로 제공되지만 자체 호스팅 시 프로젝트에 수동으로 포함해야 합니다.
.material-symbols-outlined {
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
}
HTML에서 아이콘 사용
위에 제공된 예에서는 합자라는 서체 기능을 사용합니다. 이 기능을 사용하면 텍스트 이름을 사용하여 아이콘 글리프를 렌더링할 수 있습니다. 웹브라우저는 텍스트 합자를 아이콘 벡터로 자동으로 바꾸고 동등한 숫자 문자 참조보다 더 읽기 쉬운 코드를 제공합니다. 예를 들어 HTML에서  대신 아이콘을 나타내는 arrow_forward가 있습니다. 다른 아이콘의 경우 아이콘 이름의 스네이크 표기법을 사용합니다(공백을 밑줄로 대체).
이 기능은 데스크톱과 휴대기기의 최신 브라우저에서 대부분 지원됩니다. 사용자가 합자를 처리할 수 있는지 확인하려면 Can I Use’s ligatures 지원을 참조하세요.
합자를 지원하지 않는 브라우저를 지원해야 하는 경우 아래 예와 같이 숫자 문자 참조 (코드 포인트라고도 함)를 사용하여 아이콘을 지정하세요.
아이콘을 선택하고 아이콘 글꼴 패널을 열어 Material Symbols Library에서 아이콘 이름과 코드 포인트를 모두 찾습니다. 각 아이콘 글꼴에는 Google Fonts git 저장소의 코드 포인트 색인이 있으며, 이를 통해 전체 이름과 문자 코드 세트를 확인할 수 있습니다.
Material Design의 아이콘 스타일 지정
이러한 아이콘은 Material Design 가이드라인을 따르도록 디자인되었으며 권장 아이콘 크기 및 색상을 사용할 때 가장 보기 좋습니다. 아래 스타일을 사용하면 권장 크기, 색상 및 활동 상태를 쉽게 적용할 수 있습니다.
Android에서 사용
Material Symbols Library에서 모든 아이콘은 벡터 드로어블 형식입니다. 자세한 내용은 Android Vector Asset Studio 문서를 참고하세요.
iOS에서 사용
아이콘은 Apple 기호 형식으로도 제공됩니다. 자세한 내용은 공식 Apple Symbols 개요 및 사용 안내를 확인하세요.
Flutter에서 사용
Material Symbols를 위한 Flutter 지원을 계획하고 있습니다. 조금만 기다려 주시기 바랍니다.