확장성있는 시맨틱 스페이싱 정의하기

들어가며

V프로젝트를 진행하던 중 시맨틱 스페이싱에 대한 의문이 들었다. 아틀라시안 디자인 시스템의 시맨틱 스페이싱이 참고하기 좋아보여서 그걸 레퍼런스로 삼았지만, 이게 최선일까?라는 생각을 계속했다.

아틀라시안 디자인 시스템의 spacing

확장성도 없고 단순하지도 않다.

당시에는 문제가 있다는걸 알면서도 시간적 여유가 없어 바로 진행했지만, 이번에 조금 여유가 생겨 그 부분을 검토해보려 한다. 

우선은 당시에 사용했던 스페이싱을 검토해보고, 어떤 문제가 있었는지 확인한다. 이후 아티클 등을 통해 어떤 점을 개선할 수 있을지 보고. 이후 다음 프로젝트에서 적용해볼 스페이싱의 청사진을 만들어보려 한다. 

 

문제: 너무 작고 좁다

primitive		semantic
name	px	name	value
spacing-2	2px	container-center_gap	spacing-48
spacing-4	4px	contents_margin-top	spacing-120
spacing-8	8px	card-container_gap	spacing-32
spacing-12	12px	section-form_gap	spacing-48
...	...	...	...

무엇이 문제였는지 지금 다시 생각해보면 다음 세 가지 정도다. 

1. 시맨틱이 적용되는 범위가 작다.

• 레이아웃과 관련된 간격만 시맨틱으로 정의했다. 
• 컴포넌트는 프리미티브를 사용했다. 

2. 정의한 시맨틱은 좁은 범위에만 적용된다. 

• 다른 요소에서 활용할 수가 없다. 

 

Nate Baldwin은 When “semantic tokens” are no longer semantic에서 시맨틱 토큰은 너무 정확하지도, 너무 일반적이지도 않아야 한다고 말한다. 시맨틱 토큰은 명확한 의도가 없으면 의미가 없다. 반면, 너무 구체적이면 적용 범위가 매우 낮기 때문에 확장성이 없어진다. 따라서 팀과 디자인시스템에서 공통적인 개념을 간추려내고 공통 연관성을 식별해야 한다. 

 

가설: 공통된 공간을 정의하자 

Wise, Sproutsocial, Druids, Cloudscape, Carbon 등의 디자인 시스템을 살펴봤지만 Semantic Space에 관한 정의는 없거나 내가 원하는 것과 차이가 있었다. 그러던 중 Nathan Curtis가 Space in Design Systems에서 정리한 규칙을 발견했고, 이것을 참고해서 네 가지 시맨틱 스페이싱을 정의해봤다. 

1. Inset
- 네 면 모두에 적용되는 동일한 간격의 공간 

2. Squish Inset
- 좌우에 비해 상하의 간격이 50% 작은 공간 

3. Stretch Inset
- 상하에 비해 좌우의 간격이 50% 작은 공간 

4. Stack
- 요소가 쌓일 때 그 사이의 공간 

 

검증: 카드에 적용하기 

위의 개념을 적용해서 카드를 만들어봤다.

디자인의 결과는 다음과 같고,   

 

CodePen으로 작성해본 결과는 다음과 같다. 

See the Pen Untitled by 꾸이 (@xfkulvtz-the-animator) on CodePen.

실제로도 적용해봐야겠지만, 적어도 컴포넌트까지 적용할 수 있는 시맨틱 토큰이고, 한 번 정의한 토큰들을 다른 요소에도 활용할 수 있다는 사실을 알게 됐다. 

 

나가며 

Nathan님의 글은 이전에 디자인 시스템을 공부할 때도 자주 읽었었는데, 문제를 인식한 뒤에 (...) 글을 읽으니 다가오는게 다르다. 또 토큰 정의할 때와 다르게 실제로 디자인하다보면 시스템을 벗어나고 싶을 때도 있고 시스템이 과하다 싶을 때도 있기 때문에... 그 적정선을 잘 찾을 필요가 있어보인다.