UI에 아이콘 잘 적용하는 팁

구글이 아이콘을 사용하는 방법

Nov 17. 2025

잘 만들어진 아이콘을 UI에 적용해 봅시다.

좋은 아이콘을 잘 적용하는 방법

아이콘은 화면 속 복잡한 정보를 작은 형태로 전달하는 핵심 요소이며, UI 전반의 분위기와 사용성을 결정짓는 중요한 언어입니다. 특히 M3의 Material Symbols는 아웃라인·라운드·샤프 스타일과 가변 폰트 속성을 통해 다양한 상황에서 일관된 경험을 제공하도록 설계되었습니다.

하지만 이러한 유연함 속에서도 아이콘은 가독성과 의미 전달을 위해 명확한 기준을 따라야 합니다. 지난 글에서는 좋은 아이콘을 만드는 방법을 알아봤다면, 본 글에서는 Material Symbols가 제시하는 주요 스타일과 원칙을 바탕으로 구글이 아이콘을 더 정확하고 일관되게 사용하는 방법을 살펴보겠습니다.

고정 굵기와 형태를 가지는 기존 아이콘 셋(좌) / 굵기, 채움, 굵기 보정, 옵티컬 사이즈를 조절할 수 있는 심볼(우)

Material Symbol (머터리얼 심볼)

우선 구글의 아이콘 시스템인 Material Symbols에 대해 알아보겠습니다. Material Symbols는 Material Design에서 새롭게 도입된 기본 아이콘 세트로, 아웃라인(Outlined), 라운드(Rounded), 샤프(Sharp) 세 가지 스타일을 제공합니다. 기존의 Material Icons도 여전히 사용할 수 있지만, Material Symbols와는 구조와 기능이 다릅니다.

Material Icons는 고정 굵기와 고정 형태를 가진 정적(static) 아이콘 세트이며, 크기나 굵기를 자유롭게 조정할 수 없습니다. 반면 Material Symbols는 가변 폰트 기반으로 만들어져 굵기(Weight), 채움(Fill), 굵기 보정값(Grade), 옵티컬 사이즈(Optical size)와 같은 속성을 세밀하게 조절할 수 있습니다. 이를 통해 텍스트와의 조화나 다양한 화면 크기 대응 등 더 유연하고 일관된 아이콘 표현이 가능합니다.

Google의 Material Symbols와 Apple의 SF Symbols는 더 이상 아이콘이 아닌 심볼이 되었습니다.

왜 아이콘(Icon)이 아닌 심볼(Symbol)일까요?

예전의 아이콘은 말 그대로 픽셀 기반의 작은 그림이었습니다. 하나의 이미지를 찍어내듯 만들어 사용하는 개념이었습니다. (PNG 파일 / 정적 이미지 / 고정 스타일 / 고정 굵기 / 상태 변화 불가)

반면 SF Symbols나 Material Symbols는 아이콘이 아니라 ‘서체(font)’에 더 가까운 시스템입니다. 이런 특성 때문에 아이콘이 더 이상 그림이 아니라 UI 언어의 일부, 즉 ‘기호(symbol)’로 취급되는 방향으로 진화했다고 볼 수 있습니다.

스트로크와 채우기 속성을 활용한 아웃라인 심볼 예시

1️⃣ Outlined style (아웃라인 스타일)

Outlined 심볼은 스트로크와 채우기 속성을 사용하여 가볍고 깔끔한 스타일을 제공합니다. 이 스타일은 정보가 밀집된 UI에서 잘 작동합니다. 스트로크 두께는 타이포그래피의 굵기와 보완하거나 대비되도록 조정할 수 있습니다.

그리드에 배치된 아웃라인 아이콘(좌), 전신 인물 아이콘과 특정 고유 아이콘이 채워진 형태로 표시된 예시(우)

좌측의 2dp 아웃라인 아이콘은 다양한 크기와 용도에서 좋은 가독성을 유지합니다. 그러나 최적의 가독성과 인지성을 위해 전신 인물 아이콘이나 고유 아이콘과 같은 일부 심볼은 채워진 상태를 유지해야 합니다.

얇은 선과 잘 어우러지는 아웃라인 심볼

가벼운 스트로크 두께는 앱 타이포그래피의 가는 선과 시각적으로 유사하게 나타납니다.

2️⃣ Rounded styles (라운드 스타일)

Rounded 심볼은 굵은 타이포그래피, 곡선형 로고, 원형 요소 등을 사용하는 브랜드와 잘 어울리도록 둥근 코너 반경을 사용합니다.

3️⃣ sharp styles (샤프 스타일)

Sharp 심볼은 직선 모서리를 사용해 작은 크기에서도 선명한 스타일을 유지합니다. 이러한 직사각형 형태는 라운드 형태와 잘 맞지 않는 스타일에 사용되기 적합합니다.

여행 앱에서 둥근 버튼과 라운드 아이콘이 함께 사용된 예시

둥근 버튼과 라운드 아이콘이 주변 요소와 잘 어우러져 사용되었습니다.

샤프 스타일을 적용한 여섯 개의 아이콘 예시

0dp 코너 반경을 가진 샤프 아이콘 세트는 이 앱의 직사각형 디자인 요소와 일관성을 이룹니다.

심볼 커스터마이징 (Customizing Symbols)

Material Symbols은 네 가지 가변 폰트 속성(축, axis)을 조정하여 스타일을 변경할 수 있습니다. 축(axis)은 심볼의 시각적 변형을 만들기 위해 조정 가능한 속성을 의미하는 타이포그래피 용어입니다.

각 스타일의 심볼은 weight, fill, grade, optical size 네 가지 축을 포함합니다.

100(얇음)부터 700(두꺼움)까지 다양한 굵기로 표현된 심볼 예시

1️⃣ Weight (굵기)

Weight는 심볼의 스트로크 두께를 의미하며, 100(얇음)에서 700(두꺼움)까지 범위가 있습니다. 또한 Weight 값은 심볼의 전체 크기에도 영향을 줄 수 있습니다.

400 굵기의 심볼

표준 내비게이션 드로어와 모달 내비게이션 드로어에서 사용되는 400 굵기의 아이콘입니다.

100 굵기 아이콘을 사용한 포토 갤러리 예시

❌ 표준 크기(24dp) 아이콘에는 가장 얇은 굵기를 사용하지 않습니다. 이 크기에서 사용 가능한 최소 굵기는 200입니다.

나란히 배치된 24dp 표준 심볼 세 개의 예시

표준 24dp 심볼에서 지나치게 두꺼운 굵기를 사용할 때 주의해야 합니다.

일관된 굵기의 심볼을 사용한 내비게이션 레일(좌), 서로 다른 굵기의 심볼을 사용한 내비게이션 레일(우) 예시

서로 다른 굵기를 섞어 사용하지 않고, 굵기를 일관되게 적용합니다.

Fill 값이 0인 비채움 심볼과 Fill 값이 1인 채움 심볼

2️⃣ Fill (채우기)

Fill 속성은 아웃라인 스타일에서 채워진 스타일로 전환할 수 있도록 합니다. Fill 값은 비채움 상태에서 채움 상태로의 전환을 표현할 때 사용할 수 있으며, 값은 0에서 1까지 설정됩니다. 1은 완전히 채워진 상태를 의미합니다. Fill은 Weight와 함께 심볼의 전체적인 스타일에 큰 영향을 주는 핵심 속성입니다.

선택됨 상태에서 채워진 심볼을 사용하는 하단 내비게이션 예시

선택됨 상태와 선택되지 않은 상태에서 채워진 심볼을 사용하는 하단 내비게이션 예시입니다.

3️⃣ Grade (굵기 보정)

Weight와 Grade는 모두 심볼의 두께에 영향을 줍니다. Grade는 Weight보다 더 미세하게 조정할 수 있으며, 심볼 크기에 미치는 영향도 더 작습니다.

일부 텍스트 폰트에도 Grade 속성이 제공되며, 텍스트와 심볼의 Grade 값을 맞춰 시각적으로 조화로운 효과를 만들 수 있습니다. 예를 들어 텍스트 폰트가 -25의 Grade 값을 사용한다면, 심볼도 이에 맞춰 -25 값을 사용할 수 있습니다.

1️⃣ 굵기 보정값이 0일 때는 심볼의 두께가 변하지 않습니다.

2️⃣ 굵기 보정값이 음수일 때는 심볼의 두께가 더 가볍게 보입니다.

라이트 모드에서 보정값 0이 적용된 아이콘과, 다크 모드에서 음수 보정값이 적용된 아이콘

굵기 보정값은 색 대비에 따라 아이콘이 실제보다 커 보이거나 작아 보이는 시각적 효과를 보정하는 데에도 사용됩니다. 이러한 보정으로 아이콘의 겉보기 크기를 맞출 수 있습니다. 밝은 배경에서 어두운 아이콘은 기본값 0을, 어두운 배경에서 밝은 아이콘은 -25를 사용합니다.

활성 상태의 사진 아이콘이 더 두껍게 보이는 예시

획을 더 두껍고 강조되게 만들고 싶다면 양수 굵기 보정값을 사용합니다. 이는 활성 상태 아이콘을 표현할 때 유용합니다.

20dp, 24dp, 40dp, 48dp의 옵티컬 사이즈 예시

4️⃣ Optical size (옵티컬 사이즈)

옵티컬 사이즈는 아이콘의 크기가 커지거나 작아질 때, 시각적으로 균형 있어 보이도록 스트로크 두께와 형태를 자동으로 보정하는 가변 폰트 축(axis)으로, 20dp에서 48dp까지 범위로 제공됩니다.

아이콘 크기가 변하더라도 동일한 인상을 유지할 수 있도록 스트로크 두께가 함께 조정됩니다. 옵티컬 사이즈는 심볼 크기를 확대하거나 축소할 때 스트로크 두께를 자동으로 보정하는 기능을 제공합니다.

옵티컬 사이즈를 지원하지 않는 아이콘(좌)과 옵티컬 사이즈를 지원하는 심볼(우)

전통적으로 아이콘은 24dp 소스 벡터를 기반으로 단순 확대되기 때문에, 크기를 크게 만들면 원본에 비해 스트로크가 지나치게 두꺼워 보이는 문제가 발생합니다.

하지만 옵티컬 사이즈 축을 사용하면 아이콘 크기가 커져도 스트로크 두께를 일정하게 유지할 수 있습니다.

1️⃣ Material 아이콘

2️⃣ Material 심볼

활성 상태 아이콘이 포함된 데스크톱 드롭다운 메뉴 예시(좌) / 기기에서 강조된 앞뒤 이동 심볼 예시(우)

데스크톱처럼 밀도가 높은 레이아웃에서는 20dp 옵티컬 사이즈 값을 사용합니다. 주요 작업을 강조해야 할 때는 40dp–48dp의 더 큰 옵티컬 사이즈를 사용합니다.

타이포그래피와 함께 사용하는 Material Symbols

Material Symbols은 타이포그래피와 유사한 기준으로 설계되며, 텍스트와 함께 배치되는 경우가 많습니다. 적절한 아이콘 세트를 선택하면 인터페이스의 내용이 자연스럽게 연결되어 제품 전반의 브랜드 일관성을 강화할 수 있습니다.

다양한 컴포넌트에서 사용된 Material Symbols 예시

텍스트와 아이콘의 옵티컬 웨이트와 크기를 맞춰 일관성을 유지합니다.

텍스트와 동일한 크기의 아이콘 예시(좌) / 큰 텍스트와 맞지 않는 작은 아이콘 예시(우)

텍스트와 Material Symbols를 동일한 크기로 사용합니다. 우측과 같이 아이콘과 텍스트의 크기를 섞어 사용하지 않습니다.

아이콘과 텍스트가 동일한 옵티컬 웨이트를 가진 예시(좌) / 아이콘과 텍스트의 옵티컬 웨이트가 맞지 않는 예시(우)

아이콘과 텍스트에 동일한 옵티컬 웨이트를 사용합니다. 우측과 같이 서로 다른 옵티컬 웨이트를 사용하지 않습니다.

ChatGPT의 말: 아이콘의 기준선을 약 11.5% 아래로 내린 예시(좌) / 서로 동일한 기준선을 사용

심볼의 기준선을 텍스트 크기의 약 11.5%만큼 아래로 조정합니다. 우측과 같이 심볼을 텍스트와 동일한 기준선에 맞추지 않습니다.

접근성 (Accessibility)

아이콘을 더 접근성 있게 만드는 방법에 대해 자세히 알아봅니다.

텍스트 레이블이 함께 있는 내비게이션 바(좌) / 텍스트 레이블이 없는 내비게이션 바(우)

레이블이 있는 아이콘 (Icons with a label text)

레이블 텍스트는 아이콘이 더 추상적일 때 짧고 의미 있는 설명을 제공하는 역할을 합니다. 특히 내비게이션처럼 의미를 명확하게 전달해야 하는 경우에 도움이 됩니다.

레이블 없이 아이콘만 표시할 경우 주의해야 합니다. 아이콘의 의미는 모든 사용자에게 명확하고 접근 가능해야 합니다. 다만 시각적 부담을 줄여야 하는 특정 상황에서는 텍스트 레이블을 생략할 수 있습니다.

48dp 영역 안의 24dp 아이콘, 모바일 UI 내 공유·저장·클립 아이콘 등

타깃 사이즈 (Target size)

아이콘 주변에는 충분한 공간이 확보되어야 가독성과 상호작용성이 보장됩니다. 24dp 심볼은 기본적으로 48dp의 타깃 사이즈를 사용해야 합니다.

40dp 영역 안의 20dp 아이콘, 데스크톱 UI의 공유·저장·클립 아이콘 등

마우스와 키보드가 기본 입력 방식인 환경에서는 더 밀도 높은 레이아웃을 위해 아이콘 관련 치수를 축소할 수 있습니다. 20dp 크기의 심볼은 40dp 타깃 사이즈를 사용할 수 있습니다.

결제 페이지에서 ‘장바구니 담기’, ‘가방 담기’, ‘바스켓 담기’를 각각 사용한 세 가지 UI 비교 예시

아이콘 로컬라이징 (Localizing icons)

아이콘이 다양한 지역 환경에서도 효과적으로 이해될 수 있도록 연령대, 문화, 언어를 고려해 테스트해야 하며, 다음의 모범 사례를 따릅니다:

아이콘이 더 추상적일 경우 레이블을 함께 사용합니다.

내비게이션 항목은 명확성과 접근성을 위해 반드시 레이블이 필요합니다.

인터넷 사용 경험이 많은 사람과 적은 사람은 아이콘을 다르게 이해할 수 있음을 고려합니다.

위 이미지와 같이 로컬 시장에 맞춰 아이콘을 조정합니다. 예를 들어, 지역에 따라 결제 경험에서 카트, 가방, 또는 장바구니 아이콘을 더 선호할 수 있습니다.

경고 색상으로 빨간색과 초록색을 사용하는 UI 비교 예시

색상과 심볼의 문화적 영향

색상은 문화적 의미를 지니며, 문화권에 따라 서로 다른 감정을 전달할 수 있습니다. 예를 들어 서양 문화에서 흰색은 순수를 상징하지만, 일부 동양 문화에서는 애도를 의미하기도 합니다.

심볼 역시 문화적 해석이 다를 수 있습니다. 많은 서양 문화에서 부엉이는 지혜를 나타내지만, 일부 동양 문화에서는 불길한 상징으로 여겨지기도 합니다. 따라서 아이콘을 사용할 때나 새롭게 만들 때에는 각 문화권에서 의미가 크게 달라질 수 있다는 점을 고려해야 합니다.

위 이미지와 같이 일부 지역에서는 빨간색을 경고 색으로 사용하지만, 다른 지역에서는 초록색을 경고 색으로 사용할 수 있습니다.

마치며

Material Symbols는 굵기, 채움, 굵기 보정값, 옵티컬 사이즈를 조절해 다양한 화면과 상황에서 일관된 아이콘 경험을 만들 수 있다는 점이 큰 강점입니다. 텍스트와도 자연스럽게 조화를 이루어 제품 전반의 완성도를 높일 수 있습니다.

다만 이러한 유연함은 기본 원칙을 지킬 때 비로소 효과를 발휘합니다. 아이콘과 텍스트의 크기나 옵티컬 웨이트가 맞지 않거나, 작은 크기에서 레이블이 제공되지 않으면 의미 전달이 약해질 수 있습니다. 또한 여러 스타일을 무분별하게 섞으면 전체 인터페이스의 통일성이 떨어집니다.