픽토그램
주요 웹 구성 요소를 향상시키는 작고 단순한 그래픽 자산으로, 아이디어를 빠르고 효과적으로 전달합니다.
직관적이고 기능적이며 기하학적인 — 우리의 픽토그램은 아이디어를 가장 순수한 형태로 응축하여 명확한 목적과 시대를 초월한 단순함을 전달합니다.
유형
Spaceship 픽토그램은 두 가지 유형이 있습니다: regular 및 comp. comp 유형은 regular 픽토그램과 Spaceship의 아이콘 라이브러리에서 가져온 아이콘을 결합하여 더 복잡하고 구체적인 개념을 전달할 수 있습니다.
버전
모든 Spaceship 픽토그램은 두 가지 버전으로 제공됩니다: 채워진(기본) 및 외곽선(보조). 외곽선 버전은 픽토그램이 주변 픽토그램, 텍스트 또는 UI 구성 요소보다 시각적 무게가 덜 필요할 때만 사용해야 합니다. 이는 복잡한 레이아웃에서 시각적 계층 구조를 설정하는 데 도움이 됩니다.
구성
픽토그램은 일관되고 균형 잡힌 결과를 보장하기 위해 기본 그리드부터 그라데이션 및 스트로크 매개변수까지 일련의 규칙을 기반으로 합니다.
크기
Spaceship 픽토그램은 확장 가능하도록 설계되어 시각적 일관성을 유지하고 최고의 가독성을 보장합니다. 우리의 디자인 시스템에는 다섯 가지 픽토그램 크기가 있습니다.
색상
픽토그램은 일반적으로 단일 색조를 사용합니다. 유일한 예외는 comp 유형으로, 브랜드 또는 알림 색상이 포함될 수 있으며 이에 대한 자세한 정보는 아래에서 확인할 수 있습니다. UI 맥락에서 일관성을 보장하기 위해 픽토그램은 Spaceship 디자인 시스템의 색상 기준을 따릅니다.
기본 색상
회색은 픽토그램의 기본 색상이며, 메시지, 동작 또는 기능을 나타낼 때 사용해야 합니다. 예외적인 경우에는 제품에도 사용할 수 있습니다. 외곽선 픽토그램은 기본 색상으로만 제공됩니다.
브랜드 색상
SPS Blue, SPS Dark Gray 또는 흰색은 더 강한 시각적 효과가 필요하거나 Spaceship 아이덴티티를 강화할 때 기본 색상 대신 사용할 수 있습니다. 자세한 내용은 색상 페이지를 참고하세요.
제품 색상
주요 제품 색상은 제품 전용 맥락(제품 페이지, 제품 카드 등)에서 모든 현재 및 향후 제품의 픽토그램에 사용해야 합니다.
알림 색상
이 색상들은 알림 메시지를 강조하는 데 사용해야 합니다. comp 버전은 일반 시스템 메시지에서만 사용해야 하며, 경고 상태에서는 사용하지 않아야 합니다.
가이드라인
픽토그램을 만들고 사용할 때 피해야 할 예시들입니다.
regular 픽토그램의 주요 요소가 오른쪽 하단 모서리에 위치하지 않도록 하세요.
채워진 버전에서 복잡하거나 다채로운 그라데이션을 사용하지 마세요.
comp 유형에서 채워진 요소와 외곽선 요소를 혼합하지 마세요.
위에서 지정한 색상 이외의 색상을 채워진 버전에 사용하지 마세요.
외곽선 버전에는 기본 색상 이외의 색상을 사용하지 마세요.
기본 색상과 Spaceship 브랜드 기본 색상 및 알림 색상 이외의 색상을 결합하지 마세요.