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