Overview
Spatial에서 디자인 시스템을 처음부터 구축하는 과정에서 로고, 타이포그래피, 버튼 등 제품의 시각적 정체성을 만드는 요소들을 설계했습니다. 당시 디자인 시스템이 따로 존재하지 않았던 Spatial의 볼륨이 점차 커져가면서, 여러 곳의 디자인 스펙들이 제각각 파편화되어 디자인 팀 내, 그리고 엔지니어와의 협업에서 컴포넌트들에 대한 불필요한 논의가 늘어가고 있었습니다.
따라서 이 프로젝트의 가장 큰 목적은 가상 공간 경험을 지원하는 웹, 모바일 그리고 3D공간 내 디자인의 일관된 경험을 제공할 수 있도록 하며 보다 효율적인 협업환경을 만드는 것이었습니다.
Role
Team
3 Designers
Timeline
Background
Spatial이 웹과 모바일, 3D 공간으로 확장되면서 비슷한 UI 요소들이 별다른 규칙없이 모든 플랫폼의 곳곳에서 서로 다른 형태로 사용되기 시작했습니다. 공통된 디자인 시스템이 없어 일관성을 유지하기 어려웠고, 디자이너와 엔지니어가 각 요소를 관리하는 데에도 점점 더 많은 노력이 필요했습니다.
Challenge and Approach
01
Spatial은 웹과 모바일, 3D 공간까지 서로 다른 환경을 지원합니다.
각 플랫폼에 적합하면서도, 일관성 있는 시스템이 필요했습니다.
01
공통된 시각적 기준을 정의하고, 3D 공간에서도 여러 차례 이터레이션하며 각 환경에 적합한 값을 찾아갔습니다.
02
제품의 기능이 늘어나면서 더 다양한 UI가 필요해졌습니다.
일관성을 유지하면서도 새로운 요구사항에 유연하게 대응해야 했습니다.
02
반복되는 UI를 공통 컴포넌트로 만들고, 속성과 상태를 정의해 다양한 상황에 맞게 활용할 수 있도록 했습니다.
03
디자이너의 의도가 실제 제품에도 일관되게 반영되도록, 디자이너와 엔지니어가 함께 이해하고 사용할 수 있는 기준이 필요했습니다.
03
Raw한 값이 아니라 의미에 따라 구분한 토큰과 일관된 이름, 상세 스펙을 정의해 디자인과 개발 과정에서 같은 기준을 사용할 수 있도록 했습니다.
What I value here
Token Structure
Raw한 값의 토큰을 기본(Primitive)과 의미(Semantic) 두 단계로 나누고, 각 토큰의 역할을 쉽게 알 수 있도록 이름을 정의했습니다. 이를 통해 디자인의 일관성을 유지하고, 디자이너와 엔지니어가 같은 기준으로 소통할 수 있도록 했습니다.
Structure
primitive
to semantic
semantic
to component
Token to Component
컴포넌트에 Raw한 값이나 Primitive한 컬러 네임을 지정하는 대신 Semantic토큰을 연결해,
해당 토큰만 수정해도 시스템 내 관련 컴포넌트들이 일관되게 반영되도록 했습니다.
Typo
상세 스펙을 추가로 명시해 한 눈에 타이포그래피 체계와 값을 쉽게 이해하고 보다 정확하게 구현할 수 있도록 했습니다.
Configurability
디자이너가 컴포넌트를 직접 수정하지 않고도, 컴포넌트 별 필요한 속성들을 설정해 원하는 형태로 사용할 수 있도록 설계했습니다.
이를 통해 중복 작업을 줄이고 디자인의 일관성을 유지하면서, 새로운 요구사항에도 쉽게 확장할 수 있도록 했습니다.
Button
Toast
Icon Instance
Modal Instance
Input
System to Product
3D 공간 위에 배치된 UI가 시각적으로 은은하게 어우러지면서도, 필요한 정보는 명확하게 읽을 수 있도록 했습니다.
UI와 배경 사이에 미묘한 구분을 주는 효과와 값을 여러 차례 이터레이션하며, 공간의 몰입감과 가독성의 밸런스를 고민했습니다.
디자이너의 의도가 실제 제품에도 일관되게 반영되도록, 디자이너와 엔지니어가 함께 이해하고 사용할 수 있는 기준이 필요했습니다.