디자인 시스템 개선 #1 – Figma 토큰(Spacing/Radius) 구조 정리하기
YJ
Field Notes
카테고리
- 디자인시스템
- 실무
AI 기반 화면 자동화와 디자인 시스템 개편을 준비하면서, 기존 디자인 토큰 구조를 다시 점검하게 되었습니다.
특히 자동화를 고려할수록 UI를 구성하는 값들이 단순한 숫자에 머무르지 않고, 의미와 규칙을 가지고 있는지가 중요하다고 느꼈습니다.
이 과정에서 여백과 radius와 관련해 다음과 같은 질문들이 계속 생겼습니다.
이 위치의 여백은 왜 16px인지
카드 내부 여백과 섹션 내부 여백이 같은 개념인지
카드 가로 리스트와 세로 리스트에서 동일한 spacing을 사용해도 되는지
값은 이미 Figma와 코드에 정의되어 있었지만, 해당 값을 사용하는 기준을 명확하게 설명하기 어려운 상태였습니다.
이 문제를 정리하기 위해 디자인 시스템의 Figma 토큰 구조를 다시 살펴보게 되었습니다.
기존 DS 상태
•
값은 있지만 판단 기준이 부족한 구조
•
기존 spacing과 radius 토큰은 크기 단계(xs, sm, md 등) 위주로 정의
B2B 특성상 예외 화면이 많기도 하고 여러 구조가 존재하기 때문에 화면을 만들 때마다 여기는 '16px인가, 12px인가' 와 같은 쓸모없는 고민이 반복되었고 디자이너들끼리도 정리를 해두었지만 헷갈릴 때마다 확인해야 하는 불필요한 시간이 있었습니다.
개인의 감각이나 경험에 따라 판단이 달라질 수 있는 구조였고, 디자인 시스템 차원에서 사용 맥락을 충분히 설명하지 못하고 있다는 느낌이 들었습니다.
접근 방식
•
숫자보다 '의미'를 먼저 정리
•
문제의 핵심은 숫자 자체가 아니라 이 여백이 어떤 관계의 공간인지를 설명하지 못하고 있다는 점
→ 이에 따라 spacing과 radius 토큰을 값(primitive) 과 의미(semantic) 로 나누어 정리하기로 했습니다.
Radius 토큰 구조 정리
기존
•
대부분의 컴포넌트에서 동일한 radius 값을 사용
변경
•
Radius를 컴포넌트의 역할 기준으로 나누었습니다.
control : 버튼, 인풋 등 조작 요소
container : 카드, 패널 등 콘텐츠 컨테이너
overlay : 모달, 시트 등 상위 레이어 요소
control : 버튼, 인풋 등 조작 요소
container : 카드, 패널 등 콘텐츠 컨테이너
overlay : 모달, 시트 등 상위 레이어 요소
실제 수치 값은 base 토큰에서 관리하고, 컴포넌트에서는 semantic radius를 사용하도록 구조를 조정했습니다.
그 결과, 중첩된 UI에서도 자연스럽게 레이어 구분이 되는 것을 확인할 수 있었습니다.
Spacing 토큰 구조 정리
Spacing은 특히 헷갈리는 경우가 많았던 영역이었습니다.
이에 공간의 성격에 따라 다음과 같이 정리했습니다.
1.
inset (안쪽 여백)
박스 내부에서 콘텐츠를 띄우는 여백입니다.
•
전체 화면 또는 섹션 콘텐츠 여백 → inset/section
•
카드 내부 콘텐츠 여백 → inset/container
2.
gap (요소 간 여백)
요소와 요소 사이의 간격입니다.
•
가로 방향 나열 → gap/inline
•
세로 방향 쌓임 → gap/stack
•
섹션과 섹션 사이 → gap/section
3.
콘텐츠 관계 여백
특히 자주 헷갈렸던 부분은 타이틀 하단 여백이었습니다. 이에 타이틀과 바로 아래 콘텐츠 사이의 관계를 content/title로 정의했습니다.
이후에는 "타이틀 밑은 몇 px인지"를 고민하기보다는 "이 위치가 타이틀과 콘텐츠의 관계인지"를 기준으로 판단할 수 있게 되었습니다.
실제 화면 적용 예시
화면을 기준으로 보면 다음과 같이 정리할 수 있습니다.
•
전체 화면 패딩 → inset/section
•
상단 카드 가로 리스트 → gap/inline
•
카드 내부 콘텐츠 여백 → inset/container
•
섹션 타이틀 아래 차트 영역 → content/title
•
섹션과 섹션 사이 간격 → gap/section
숫자를 외우지 않아도 각 여백의 역할을 설명할 수 있는 구조가 되었습니다.
정리하며
이번 정리를 통해 느낀 점은 반복적으로 헷갈리는 값일수록 귀찮더라도 의미를 부여해 정리할 필요가 있다는 것입니다.
Figma 토큰을 활용하면 자동화까지 가능하기 때문에 변수 값만 잘 정리해도 어느 정도 화면을 빠르게 구현할 수 있다는 점에서 더 잘 디벨롭해봐야겠다는 생각이 들었습니다.
특히 헷갈리던 값들을 토큰화해 화면에 녹여냈을 때 깔끔한 UI가 나오는 순간이 굉장히 짜릿..!@🤩
이처럼 다른 토큰들도 같은 방식으로 점차 고도화 나갈 계획입니다.
Subscribe to 'yj-archive'
Subscribe to my site to be the first to receive notifications and emails about the latest updates, including new posts.
Join Slashpage and subscribe to 'yj-archive'!
Join Slashpage and subscribe to 'yj-archive'!
