2022. 9. 12. 22:45ㆍProduct 디자인
https://fonts.google.com/icons
Material Symbols and Icons - Google Fonts
Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants.
fonts.google.com
*2022년 12월 19일 업데이트
기본적인 시스템 아이콘은 material icon을 사용하면 디자이너 입장에서는 화면마다 아이콘을 만들지 않아도 되며, 개발자 입장에서는 화면마다 디자인 이미지 파일을 관리할 필요가 없을거라 예상한다. 개발자는 구글의 머터리얼 라이브러리를 사용한다면 웹/앱 전부 대응 가능하다!
시스템 아이콘이란? 설정, 검색, 체크박스 아이콘 처럼 설정은 톱니바퀴 모양, 검색은 돋보기 모양 등등 익숙하고도 가장 기본적인 아이콘이다.
이렇게 시스템 아이콘을 머터리얼 아이콘 라이브러리를 사용하기로 했다면.. 가장 중요한 크기를 어떻게 적용해서 디자인에 적용시킬것인가.. 고민하게 되는데.. 모든 아이콘은 터치영역까지 포함해서 정의된 크기로 맞춰줘야 한다.
| 18 | 20 | 24 | 32 | 36 | 48 | 72 | |
| iOS | O | O | O | O | O | O | O |
| Android | O | O | O | O | O | ||
| Web | O | O | O | O |
안드로이드의 경우 mdpi 기준으로 dp와 px이 같다고 나와 mdpi 사이즈로 화면 작업시 저 사이즈 그대로 px으로 적용해서 아이콘 사이즈를 18/20/24/36/48 터치영역 포함 다섯가지로 사용하면 될 듯 싶다.
디바이스 사이즈 하나로 ios와 and를 전부 대응하는 경우엔 공통된 사이즈를 기준으로 아이콘을 작업하고 있는데, 나는 ios 기준으로 작업을 하다보니 and도 대응 가능한 18/20/24/36/48 px 으로 아이콘 사이즈를 진행하고있다. (사실 이 사항은 추후 업뎃 예정이라 아직 개발자의 피드백을 모르겠다.. 나중에 개발자 피드백을 논하겠다.)
위 그림처럼 아이콘 터치영역을 신경써야한다. 또한 크기가 터치영역 포함 21, 23 이렇게 홀수단위로 떨어지거나, 0.00 같은 소수점 단위로 떨어지는것을 조심해야한다.
'Product 디자인' 카테고리의 다른 글
| [디자인 시스템/스타일 가이드] tabs UI에 대해서 (0) | 2023.05.23 |
|---|---|
| 토스 증권 클론 디자인! 라이트/다크모드 1:1 테마 적용해보기 (0) | 2023.05.22 |
| 탈중앙화 블록체인 지갑 디자인, 니모닉 더블체크 인터페이스에 대한 정성적 조사 (1) | 2022.08.23 |
| 데이터 드리븐 디자인? 정량적 데이터로 디자인 개선하기 (0) | 2022.08.22 |
| 디자이너와 Flutter 협업하기, 피그마에서 띄어쓰기된 Material Design 아이콘 (0) | 2022.06.08 |