계층 구조
Spaceship 디자인 시스템은 여러 계층으로 구성되어 있으며, 각 계층은 명확성, 구조, 목적을 더합니다. 이 계층들은 우리가 제품을 디자인하고, 구축하며, 확장하는 방식을 안내하는 계층 구조를 형성합니다 — 가장 작은 시각적 결정부터 가장 넓은 사용자 여정까지.
Atomic Design의 원칙을 따름으로써, 우리는 주요 리소스를 다음과 같은 카테고리로 구조화하여 모든 팀이 더 쉽게 사용할 수 있도록 했습니다.
Foundations
우리의 시각 언어의 핵심 규칙을 정의합니다 — 색상, 타이포그래피, 간격, 그리드, 모션, 토큰 등. 이는 일관된 기반을 제공합니다.
Components
기반 규칙을 일상적인 디자인 문제를 해결하는 재사용 가능한 인터페이스 요소로 구현합니다.
Templates
컴포넌트와 패턴이 맥락에서 어떻게 함께 작동하는지 보여주며, 완성된 페이지와 경험을 위한 준비된 구조를 제공합니다.
Patterns
검증된 솔루션과 모범 사례를 포착하여, 우리의 작업이 모든 접점에서 일관되고 접근 가능하며 사용자 중심으로 유지되도록 합니다.
Foundations
Spaceship 디자인 시스템의 필수적인 원자들입니다. 이들은 모든 컴포넌트와 패턴이 기반하는 시각적 및 구조적 규칙을 정의합니다.
Color
제품 전반에 걸쳐 조화, 접근성, 유연성을 보장하는 브랜드 및 기능 팔레트를 정의합니다.
Typography
계층 구조와 명확성을 확립하여, 콘텐츠를 읽고 스캔하기 쉽게 만듭니다.
Spacing
여백, 패딩, 레이아웃 리듬을 위한 체계적인 스케일을 제공하여 일관된 인터페이스를 유지합니다.
Grids
구조와 정렬을 유지하면서 기기별로 적응하는 반응형 레이아웃을 만듭니다.
Motion
전환과 애니메이션을 사용하여 주의를 유도하고, 상태를 전달하며, 상호작용을 자연스럽게 만듭니다.
Design Tokens
기초 값을 코드로 변환하여, 단일 진실의 원천 역할을 하며 빠르고 손쉬운 업데이트를 가능하게 합니다.
명확한 기반은 장벽을 줄이고, 포용성을 높이며, 처음부터 시작하는 대신 실제 문제 해결에 더 많은 시간을 쓸 수 있게 합니다.
Components
이들은 Spaceship 디자인 시스템의 재사용 가능한 요소입니다. 각각은 버튼, 입력란부터 내비게이션, 피드백 메시지에 이르기까지 특정 인터페이스 문제를 해결합니다. 모든 컴포넌트는 접근 가능하고 반응형이며 다양한 상황이나 기기에 쉽게 적용할 수 있습니다.
재사용 가능한 컴포넌트는 우리가 만드는 모든 제품이 더 빠르게 출시되고, 더 큰 그림과 연결되어 있음을 보장합니다.
Templates
템플릿은 빌딩 블록과 사용자 경험 사이의 다리 역할을 합니다. 기반과 컴포넌트를 결합하여 전체 페이지 맥락을 구성하며, 시스템이 실제로 어떻게 작동하는지 보여줍니다.
Product Page Templates
랜딩 및 제품 페이지를 위한 상위 수준의 페이지 구조로, 디자이너가 주로 콘텐츠를 업데이트하고 각 맥락에 맞게 모듈을 조정합니다.
Shareable components
비교표나 가격 카드와 같은 더 복잡하고 재사용 가능한 구조는 제품 전반에 걸쳐 특정 시나리오를 일관되게 처리하도록 설계되었습니다.
준비된 구조로 시작하면, 팀은 레이아웃 결정에 덜 집중하고 실제 사용자 요구를 해결하는 데 더 집중할 수 있습니다.
Patterns
패턴은 테스트, 피드백, 실제 사용에서 얻은 교훈을 포착하여 재사용 가능하고 표준화된 솔루션으로 만듭니다. 각 패턴은 사용자의 의도에 기반하며, 결제 과정을 단순화하거나, 오류를 처리하거나, 사용자가 폼을 작성하도록 안내하는 등 다양한 목적을 가집니다.
검증된 솔루션을 정의함으로써, 패턴은 우리의 작업에 목적성을 부여하고, 모든 경험이 단순히 기능적일 뿐만 아니라 신중하게 설계되었음을 보장합니다.