Material UI 아이콘 사용하기

Material UI 아이콘 사용하기

npm install materialuiicons 사용 방법은 간단합니다. 에서 희망하는 아이콘을 검색합니다. 그 다음, 해당 아이콘 컴포넌트를 불러와서, React 컴포넌트 안에서 바로 사용하면 됩니다. import React from reactimport EcoIcon from materialuiiconsEcoexport default 아이콘 색상은 color prop으로 바꿀 수 있습니다. 아이콘의 크기는 fontSize prop으로 바꿀 수 있습니다.

한 페이지에 여러 icon을 사용할 경우 오류가 뜰 수 있습니다.

누구나 알아보는 아이콘 디자인

언제, 어디서, 누구나 보아도 동시에 그 자리에서 바로 이해할 수 있는 아이콘 디자인을 해야합니다. 지나치게 단순화하거나 디자이너 본인만 이해하는 아이콘 디자인은 무조건적으로 해선안됩니다. 내 체험 상 휴지통은 심플해 라는 생각으로 위와 같이 휴지통 아이콘 디자인을 하면 심플한 성격의 사람들은 아 이게 휴지통이구나 라고 고민하며 삭제 행위를 진행합니다. 그러나, 세상의 모든 사람들이 심플하진 않습니다. 모든 사람들이 이해하기엔, 심플한 휴지통은 이해하기 힘들 있습니다.

우리는 누구나 아는 휴지통을 형상화해서 휴지통 아이콘 디자인을 해야합니다.

통일된 스타일 아이콘

모든 아이콘의 디자인 스타일은 통일되어야합니다. 하나의 사례를 살펴봅시다. 저희들이 흔히 접했던 일상의 도심가 골목을 상상해보자. 모든 가게가 자신만의 스타일로 간판을 디자인했기에 한 도심가의 골목은 전혀 통일되지 않고 여러가지 스타일의 간판이 존재합니다. 도심가 골목에서 모든 가게 중 희망하는 가게를 방문할 때 어떤가 ? 아쉽겠지만, 쉽지않습니다. 도심가 골목의 간판들처럼 아이콘 디자인도 통일된 스타일로 디자인이 이뤄져야됩니다.

단순한 아이콘

동시에 알아볼 수 있는 아이콘이면 더할나위 없이 좋습니다. 그러나, 너무나 과도하게 아이콘 디자인을 해버리면. 그것또한 좋지 않을 있습니다. 아래의 사례를 살펴봅시다. 다음은 두개의 앱의 영상녹화 버튼 아이콘입니다. 누구나 보아도, 영상녹화 버튼이라고 바로 생각합니다. 우리는 아이콘을 어디서보아도 급속도로 이해할 수 있어야합니다. 아래는 두 아이콘을 실제 앱에 넣어보았습니다. 이젠 어떤가. 과도하게 아이콘 디자인을 해도 불필요합니다.

단순하게 아이콘 디자인을 해 언제 어디서든 급속도로 이해할 필요만 있다면야 됩니다. 아이콘 디자인은 정보 전달이 목적이지, 예술로써 평가받기 위해 사용되는 게 아닙니다.

부피에 따른 다른 느낌

동일한 100 X 100 사이즈의 아이콘임에도 크기가 달라보입니다. 사각형 아이콘이 원형 아이콘보다. 훨씬 커보입니다. 시스템 문제일까? 아쉽지만. 아닙니다. 우린 매순간 착시를 경험하고 있습니다. 위의 사례, 사각형과 원형과 같이 동일한 표준의 도형이어도 생김새에 따라 착시가 일어나 크기가 달라보이는 느낌이드는 것입니다. 디자이너는 이런 현실 속 어떠한 방식으로 대처해야 할까? 놀랍게도 앞선 디자이너분들은 이를 시각보정 기법을 이용해서 착시를 극복해 통일된 크기의 아이콘을 만드는 방법을 구현했다.

데이터의 유효성에 따른 아이콘

데이터의 유효성에 따른 아이콘은 여러가지 여건에서 데이터의 신뢰성을 나타내기 위해 사용됩니다. 아이콘은 사용자에게 쉽게 정보를 전달하고, 데이터의 유효성을 급속도로 파악할 수 있도록 도와줍니다. 다음은 데이터의 유효성에 따른 아이콘에 대한 내용입니다. 1. 체크 아이콘 데이터가 정확하고 유효한 경우에 사용되는 아이콘입니다. 데이터가 입력되거나 처리된 후에 체크 아이콘이 나타나는 경우, 사용자는 해당 데이터가 올바르게 입력되었지만 처리되었다는 것을 알 수 있습니다.

2. 불가 아이콘 데이터가 부적절하거나 유효하지 않은 경우에 사용되는 아이콘입니다. 예를 들어, 잘못된 형식의 이메일 주소나 유효하지 않은 스마트폰 번호 입력 시 불가 아이콘이 나타납니다. 이를 통해 사용자는 입력한 데이터가 유효하지 않음을 급속도로 인지할 수 있습니다. 3. 경고 아이콘 데이터가 확실하지 않거나 주의를 필요한 경우에 사용되는 아이콘입니다.

특정 조건에 따른 아이콘

특정 조건에 따른 아이콘은 사용자에게 어떤 상황인지 알려주기 위해 사용되는 그래픽 표시물입니다. 아이콘은 일반적으로 작고 간결한 디자인으로 표현되며, 이해하기 쉽고 직관적인 메모를 전달하기 위해 사용됩니다. 다음은 특정 조건에 따른 아이콘의 일부 예시입니다1. 경고 아이콘 느낌표 모양이 들어간 삼각형 아이콘이 주로 사용됩니다. 주의해야 할 사항이 있거나 잠재적인 문제가 발생할 수 있다는 경고 신호로 사용됩니다.

2. 에러 아이콘 빨간색 원 안에 X 마크가 들어간 아이콘이 일반적으로 사용됩니다. 작업 중에 오류가 발생했거나 잘못된 입력 등의 문제가 있을 때 표시됩니다. 3. 확인 아이콘 체크 마크가 들어간 초록색 원이 일반적으로 사용됩니다. 작업이 성공적으로 수행되었지만 허용된 조건에 부합하는 경우에 표시됩니다. 4. 정보 아이콘 물음표 모양이 들어간 원이 주로 사용됩니다.

자주 묻는 질문