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