로그인 / 등록 Account
Jump to section

아이콘은 추상적인 개념과 직설적인 개념을 상징적으로 표현하므로 다양한 아이디어 및 기술을 묘사하는 데 도움이 됩니다. Red Hat 아이콘 세트의 각 아이콘에는 특정한 의미와 일관된 디자인이 있으므로 비즈니스 전반에 걸쳐 일관성 있고 효율적으로 의사소통할 수 있습니다.

규모에 따라 다양한 유형의 아이콘 또는 삽화가 필요할 수 있습니다.

UI 아이콘

사용자 인터페이스(UI) 아이콘은 매우 작으며 웹사이트나 제품의 인터페이스에 사용됩니다.

표준 아이콘

아이콘은 단일 개념이나 2가지 요소 간의 관계를 표현합니다.

미니 스팟

미니 스팟은 단일 개념을 나타내는 작은 삽화입니다.

삽화

삽화는 서사 구조가 있거나 복잡한 개념을 보여줍니다.

Red Hat에는 표준 및 Ux의 2가지 아이콘 유형이 있습니다. 표준 아이콘은 마케팅 자료, 슬라이드, 인포그래픽, 다이어그램에 사용되는 반면, UX 아이콘은 인터페이스에 사용됩니다.

표준 아이콘

Red Hat의 아이콘 체계는 단순하고 깔끔하며 개방적입니다. 모든 아이콘은 동일한 스트로크 굵기와 모서리 반경을 사용하고, 물체를 정면에서 보여주고, 평면화된 관점을 사용하며, 기하학적 형상으로만 만듭니다. 기본적으로 Red Hat의 표준 아이콘은 색을 채운 것과 색을 채우지 않은 것 2가지 버전으로 제공됩니다. 빨간색, 검은색, 흰색 3가지 색상으로도 제공되지만 Red Hat 브랜드 팔레트에서 어떤 색상으로든 변경할 수 있습니다.

마케팅 자료, 프레젠테이션, 웹 콘텐츠, 인포그래픽, 다이어그램에서 표준 아이콘을 사용하세요. 표준 아이콘은 크기가 32~100픽셀일 때 가장 효과적입니다.

표준 아이콘 만들기

Red Hat의 아이콘 라이브러리는 시간이 지나면서 협업을 통해 만들어집니다. 새 아이콘을 만든 경우 Red Hat과 공유해 주세요. 새로 만든 아이콘을 기존 세트와 함께 사용하려면 템플릿을 사용하고 아래 지침을 따르세요.

1. 36픽셀 아트보드에 아이콘을 그립니다. 필요에 따라 안쪽 여백으로 늘려 각 아이콘의 비슷한 비율 및 크기를 유지하되 바깥쪽 여백은 비워두세요.

2. 모든 각도를 0°, 45°, 90°가 되게 하거나 이 각도 중 하나에 12°를 더하거나 뺍니다. 12° 각도가 Red Hat 글꼴의 어센더 및 디센더 각도와 일치하므로 Red Hat은 12° 각도를 사용합니다.

3. 색을 채우지 않은 아이콘을 먼저 만듭니다. 1.5 스트로크 굵기를 사용하고, 끄트머리와 모서리는 둥글려야 합니다.

4. 아이콘의 기본 형태를 구성할 때는 기하학적 형상만 사용하세요.

5. 세부 사항을 추가하려면 점과 직선을 사용하세요. 스트로크에서 1.5포인트 공백을 사용해 공간을 열어 주거나 깊이를 표시하세요. 점선의 경우 0포인트 대시와 2.5포인트 공백을 사용하세요.

6. 작은 화살표는 90°가 되어야 하고 양쪽 끝의 길이는 2픽셀이어야 합니다. 큰 화살표는 작은 화살표와 동일한 비율을 사용해야 합니다.

색을 채운 아이콘 만들기

1. 색을 채운 아이콘을 만들려면 윤곽이 있는 버전으로 시작하여 스트로크와 동일한 색상을 채우고 스트로크의 크기를 동일하게 유지하세요.

2. 모든 세부 사항을 흰색으로 변경하세요.

3. 모든 세부 사항의 크기를 수정하여 요소 간 공백을 1.5 또는 0.5포인트로 유지하세요. 아이콘에 따라 선을 확장해야 할 수도 있습니다.

UI 아이콘

화면 기반 인터페이스는 아이콘 디자인(특히 크기 및 규모)과 관련해 특수한 어려움을 겪을 수 있습니다. 인터페이스의 경우 크기가 매우 작아도 즉시 이해할 수 있고 또렷하게 보이는 아이콘이 필요합니다. 이처럼 크기가 작은 경우 UI 아이콘에 표준 아이콘과 동일한 원칙, 즉 12° 및 적합한 각도, 둥글린 모서리 및 끄트머리, 기하학적 형상을 사용하세요. 

Red Hat의 UI 아이콘은 납작하고 단순하며 16픽셀에서도 또렷하게 보입니다. 일반적으로 회색 또는 흰색으로 사용됩니다.

1. 16픽셀 아트보드와 1포인트 스트로크로 시작합니다. 디자인 주위에 1픽셀의 여백을 설정합니다.

2. 아이콘이 14픽셀 그리드 안에 들어가는지 확인합니다.

3. 표준 아이콘을 참조하고 기존 아이콘에서 가져옵니다. 아이콘을 식별하는 데 필수적인 요소만 사용합니다.

패턴 형태의 아이콘

패턴은 Red Hat의 아이콘을 사용해 매력적이고 시각적으로 흥미로운 그래픽을 빠르게 만들 수 있는 방법입니다. 배경에 패턴을 사용하거나 공간을 채웁니다.

패턴 사용 방식

패턴을 만들 때는 패턴 내에 있는 요소 1개 또는 2개를 변경하여 패턴을 더 동적인 모습으로 표현해 보세요. 패턴은 지루하거나 단조로운 대신 동적이고 흥미로워야 합니다. 

아이콘 1개를 사용하여 크기, 색상 또는 채우기를 변경해 보세요. 

서로 관련이 있는 동일한 크기의 아이콘 세트를 사용하세요.

세트에 속한 아이콘에 연결선을 추가하세요.

다양한 색상과 규모로 시험해 보세요.

아이콘 실제 활용 사례

최소한의 디자인 요소로 아이콘을 2차원으로 만드세요.

아이콘을 복잡하게 만들거나 3차원으로 만들지 마세요.

모든 아이콘에 하나의 선 굵기를 사용하세요.

여러 가지의 선 굵기를 사용하지 마세요.

추상적인 아이디어의 경우 이를 구체적으로 표현할 수 있는 이미지를 찾아보세요.

너무 추상적이어서 사용자가 의미를 이해할 수 없는 아이콘은 만들지 마세요.

아이콘을 사용해 한 번에 하나의 개념만 표현하세요.

더 복잡한 개념을 나타내기 위해 2가지 개념을 결합하지 마세요.

패턴에서 1개 또는 2개의 요소를 변경하여 리듬을 만들고 흥미를 유발하세요.

변화가 없는 동일한 패턴을 사용하지 마세요. 지루하고 반복적입니다.

너무 복잡하지 않고 텍스트를 방해하지 않는 패턴을 사용하세요.

메시지 중간에 끼어드는 패턴을 사용하지 마세요.

프레젠테이션 덱에서 표준 아이콘을 이용해 간편하게 시각 효과를 추가하고 주요 항목을 강조 표시할 수 있습니다.

사용자는 redhat.com 인터페이스의 UI 아이콘을 통해 더 빠르고 직관적으로 사이트를 탐색할 수 있습니다.