본문 바로가기
Smart Office/Google

심플하여 강력하다. 머티리얼 디자인((Material Design) 아이콘 다운로드 사이트

by 둠두미 2017. 9. 19.



구글에서 운영하는 머티리얼 디자인(Material Design) 아이콘 사이트가 있습니다.



https://material.io/icons/



머티리얼 디자인(Material Design) 이라는 것은 Windows8 버전부터 마이크로소프트가 차용한 것으로 플랫 디자인(Flat Design)의 장점을 살려 좀 더 입체적으로 디자인 하는 것을 말합니다.


플랫 디자인은 Windows 8 때부터 적용되기 시작한 아래와 같은 디자인을 떠올리시면 될 것 같습니다.






다시 Material Design에 대해 설명 드리면 2014년 경 구글의 안드로이드 스마트폰에 적용한 것으로 그림자 효과 같은 것을 넣어서 좀 더 입체적인 효과를 주는 것입니다.





위에서 보는 바와 같이 Floating Button 이라든지 레이어를 띄울 때 그림자 효과 같은걸 넣고 modal overlay 처리를 하면서 표현하고자 하는 콘텐츠에 집중하게 해 주는 디자인을 말합니다.



웹의 생태계가 모바일 생태계로 바뀌게 되면서 최소한의 요소만을 사용하여 직관적 표현을 하게 되었고, 이에 따라 아이콘도 다양하고 심플해 지게 되었네요.








위에 언급한 링크로 들어가시면 다양한 아이콘을 다운로드 받을 수 있습니다. 공짜이고, 계속 업데이트 됩니다.


무엇보다 아이콘 디자인의 스타일이 유사하여 없는 것 새로 만들어 내거나 할 필요 없이 이질감 없이 사용할 수 있다는게 장점입니다.



 아이콘을 선택해 보면 하단에 옵션을 선택할 수 있습니다.


* 이미지 크기: 18dp, 24dp, 36dp, 48dp

* 이미지 색상: Black, White 

* 파일포멧: SVG, PNG



아이콘 색상은 배경에 따라 검은색 혹은 희색을 선택해서 다운로드 받아야 합니다. 배경이 검은색인데 default로 된 검은색 아이콘을 다운로드 받으면 아이콘이 보이지 않게 됩니다.


SVG 파일은 Scalable Vector Graphics 의 약자로 어도비 일러스트레이터와 같은 벡터 드로잉 프로그램으로 편집이 가능합니다. 이 파일은 일반 탐색기 상에서는 미리보기가 되지 않는데... svg 뷰어를 다운받아 보시거나, 그냥 웹브라우저에서도 확인은 가능합니다.(더블클릭하면 웹브라우저로 실행됨)


png 파일은 투명 배경시에 사용하는 파일로 일반적인 유저라면 png 파일을 사용하면 될 것입니다.


ICON FONT의 경우 코딩을 통해 자신의 사이트에 바로 적용시키는 방법이며, 이는 일반적 사용자는 사용할 일이 없어 보이네요.



__________



저야 스토리보드를 쓰기 때문에 거의 매일 사용하지만 일반적인 사람들은 평소에 이런 아이콘을 쓸 일이 있겠나 싶지만... 이런 아이콘들은 프리젠테이션 할 때 사용하면 효과가 아주 좋습니다.


조잡하지 않고, 깔끔하면서 직관적으로 내가 말하고자 하는 것들을 표현하기에 아주 적합합니다.


인포그래픽도 결국 이런 요소들을 잘 조합해서 사용하는 것이고, 이런 요소들을 통해 세련된 PT를 할 수 있을 것입니다. 

댓글