핵심 아이디어
디자인 시스템에서 공간은 요소 간의 ‘관계성’을 기준으로 ‘near’와 ‘away’라는 두 가지 시맨틱 토큰으로 단순화될 수 있으며, 이를 통해 주관적 판단이 아닌 객관적 관계에 기반한 일관된 공간 사용이 가능해진다.
요약
이 접근법은 ‘density shift’ 개념을 도입하여 페이지 내 다양한 밀도 수준을 정의함으로써, 동일한 ‘near’와 ‘away’ 토큰이 컨텍스트에 따라 다른 물리적 값을 갖게 한다. CSS Custom Properties를 활용하여 [data-density-shift] 속성으로 밀도 변화를 트리거하고, 각 밀도 수준에서 --space-near와 --space-away 변수 값을 재정의함으로써 구현할 수 있다.
견해
이 접근법은 T-shirt 사이징 같은 기존 방식보다 결정 과정을 단순화하면서도, 디자이너에게 밀도 조절을 통한 창의적 자유를 제공한다. 공간을 관계의 표현으로 재해석함으로써 디자인 시스템에 더 심층적인 의미론적 구조를 부여한다.