이 페이지는 Cloud Translation API를 통해 번역되었습니다.

Material 기호 가이드

Material 기호란 무엇인가요?

Material Symbols는 다양한 디자인 변형이 포함된 단일 글꼴 파일에 2,500개가 넘는 글리프를 통합한 최신 아이콘입니다. 기호는 3가지 스타일과 4가지 조정 가능한 가변 글꼴 축(채우기, 두께, 등급, 광학 크기)으로 제공됩니다. Material Symbols 라이브러리에서 Material Symbols의 전체 세트를 확인하세요.

`FILL`축

채우기를 사용하면 기본 아이콘 스타일을 수정할 수 있습니다. 하나의 아이콘이 채워지지 않은 상태와 채워진 상태를 모두 렌더링합니다.

상태 전환을 전달하려면 애니메이션 또는 상호작용에 채우기 축을 사용합니다. 값은 기본값의 경우 0이고 완전히 채워진 경우 1입니다. 가중치와 함께 채우기는 아이콘의 모양에도 영향을 미칩니다.

`wght`축

가중치는 기호의 획 두께를 정의하며, 가중치 범위는 얇음(100)과 굵음(700) 사이입니다. 가중치는 모델의 전체 크기에도 기호로 구분해야 합니다.

`GRAD`축

경사 축
시각화

두께와 등급은 기호의 두께에 영향을 미칩니다. 등급 조정은 다음과 같습니다. 가중치 조정보다 더 세분화되어 표시 영역 크기에 나타냅니다.

성적은 일부 텍스트 글꼴에서도 사용할 수 있습니다. 텍스트와 기호 간의 수준을 일치시켜 조화로운 시각 효과를 얻을 수 있습니다. 예를 들어 텍스트 글꼴이 등급이 -25인 경우 기호는 적절한 값(예: -25)과 일치시킬 수 있습니다.

다양한 필요에 따라 등급을 사용할 수 있습니다.

낮은 강조 (예: -25등급): 어두운 곳에서 밝은색 기호의 빛 반사를 줄이기 위해 낮은 등급을 사용하세요.

강조(예: 200도): 기호를 강조 표시하려면 양수 도를 높입니다.

`opsz`축

광학 크기의 범위는 20dp~48dp입니다.

이미지가 다양한 크기에서 동일하게 보이도록 하려면 획 두께(두께)가 아이콘 크기에 따라 변경됩니다. 광학 크기를 사용하면 기호 크기를 늘리거나 줄일 때 획 두께를 조정할 수 있습니다.

머티리얼 기호 가져오기

머티리얼 기호는 여러 형식으로 사용할 수 있으며 앱 개발자와 사용자 모두를 위해 모형이나 프로토타입에 사용하는 것이 좋습니다

라이선스

Material Symbols는 Apache 라이선스 버전 2.0에 따라 제공됩니다.

개별 아이콘 둘러보기 및 다운로드

전체 머티리얼 기호 세트는 머티리얼 기호 보관함 SVG 또는 PNG 형식으로 작성할 수 있습니다 웹, Android, iOS 또는 모든 디자이너 도구에 적합합니다.

Git 저장소

git 저장소 에는 SVG 형식의 머티리얼 기호 전체 세트가 포함되어 있습니다.

$ git clone https://github.com/google/material-design-icons

Material 기호 사용

웹에서 사용

Material Symbols 글꼴은 Material 기호를 통합하는 가장 쉬운 방법입니다. 웹 프로젝트로 가져올 수 있습니다

아이콘은 웹 개발자가 쉽게 작업할 수 있도록 단일 글꼴로 패키징되어 있습니다. 단 몇 줄의 코드로 이러한 아이콘을 통합할 수 있습니다.

Google Fonts의 정적 글꼴

웹페이지에서 사용할 아이콘 글꼴을 설정하는 가장 쉬운 방법은 Google 글꼴. 포함 HTML 한 줄:

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />

위의 스니펫에는 각 축 , 가중치 400에서 광학 크기 48세, 채점 0점 및 채우기 (0.)

글꼴 CSS 사용 API를 사용하여 다른 축 값을 구성할 수 있습니다. 다음 예를 살펴보세요.

<ph type="x-smartling-placeholder">를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">

Google Fonts의 가변 글꼴

CSS를 통해 아이콘에 애니메이션을 적용하거나 아이콘 기능을 더 세부적으로 제어하려면 Google Symbols 가변 폰트를 사용하세요. number..number 형식의 범위를 사용하면 전체 가변 글꼴을 로드할 수 있습니다. Can I Use의 가변 글꼴 지원을 확인하여 사용자가 가변 글꼴을 로드할 수 있는지 확인합니다. 대부분의 경우 가능합니다. 예를 들면 다음과 같습니다.

아니면 애니메이션을 적용할 수도 있습니다.

아이콘 글꼴 최적화

애플리케이션과 관련된 아이콘만 포함하도록 글꼴을 세분화합니다. 알파벳순으로 정렬된 &icon_names 쿼리 매개변수 사용 쉼표로 구분된 아이콘 이름 (합자) 목록

권장되지 않음: 기본 설정을 사용하면 3,800개가 넘는 모든 아이콘이 로드됩니다. 글꼴 페이로드: 295KB
```
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined
```
권장: 아이콘 이름을 지정하여 필요한 아이콘만 로드합니다. 글꼴 페이로드: 1.7KB
```
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&icon_names=home,palette,settings&display=block
```
애플리케이션에서 사용할 가변 글꼴 축만 포함하도록 인스턴스화합니다. 대부분의 애플리케이션에는 축의 몇 가지 변형만 필요합니다.

권장되지 않음 — 축 구성이 누락되면 기본 정적 글꼴 (두께 400, 광학 크기 24, 반올림 50, 등급 0, 채우기 0) 모든 가변 글꼴 축을 전체로 포함하는 것은 일반적으로 필요하지 않으며 페이로드를 늘립니다. 글꼴 페이로드: 7.9MB
```
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD,ROND@20..48,100..700,0..1,-50..200,0..100
```
권장 - 특정 축 조합을 사용합니다. 예를 들어 전체 'FILL'은 축은 상태 간에 CSS 전환을 제공하며 'ROND' 100이 선택되었으며 설계했습니다. 글꼴 페이로드: 2.6KB
```
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL,ROND@0..1,100&icon_names=home,palette,settings&display=block
```

를 통해 개인정보처리방침을 정의할 수 있습니다.

글꼴 자체 호스팅

저작물을 업데이트할 시기를 결정하기 위해 제어 가능한 위치에 아이콘 글꼴을 호스팅합니다. 예를 들어 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의 리그처 지원에서 사용자가 리그처를 처리할 수 있는지 확인합니다. 대부분의 경우 처리할 수 있습니다.

연결 문자를 지원하지 않는 브라우저를 지원해야 하는 경우 아래 예와 같이 숫자 문자 참조(코드 포인트라고도 함)를 사용하여 아이콘을 지정합니다.

아이콘을 선택하고 아이콘 글꼴 패널을 열어 Material Symbols Library에서 아이콘 이름과 코드 포인트를 모두 찾습니다. 각 아이콘 글꼴에는 Google Fonts git에서 코드 포인트 색인 생성 저장소 전체 이름 및 문자 코드 세트를 보여줍니다.

Material Design에서 아이콘 스타일 지정

이 아이콘은 Material Design 가이드라인에 따라 설계되었으며 권장 아이콘 크기와 색상을 사용할 때 가장 잘 보입니다. 스타일 아래의 권장 사이즈, 색상 및 활동 상태를 쉽게 적용할 수 있습니다.

Android에서 사용

머티리얼 기호 라이브러리에서 모든 아이콘은 벡터 드로어블 형식을 사용합니다. 자세한 내용은 Android Vector Asset Studio 문서를 참고하세요.

iOS에서 사용

아이콘은 Apple 기호 형식으로도 사용할 수 있습니다. 이에 관한 자세한 내용은 공식 Apple 기호 개요 및 사용 안내를 참고하세요.

Flutter에서 사용

Flutter의 머티리얼 기호 지원이 계획되어 있습니다. 최신 소식을 계속해서 확인해 주시기 바랍니다.