디자인시스템 구축에서 디자인과 코드를 연결하는것은 매우 중요한 작업 중 하나입니다. 이를 통해 디자이너가 만든 시각적 요소와 개발자가 구현하는 실제 코드가 동일한 기준과 데이터를 공유하게 되고, 변경 사항도 상호 일관성 있게 반영되게 할 수 있습니다. 이번 글에서는 KRDS의 사례를 통해 이 부분에 대해 이야기해보려 합니다.
어떤 효과가 있을까요?
- 일관성 극대화
디자이너의 의도가 코드에 정확히 반영됩니다. - 개발 속도 향상
생산성· 확장성 개선으로 추후 업데이트나 확장 작업도 신속하게 처리 가능해집니다. - 커뮤니케이션 개선
디자이너와 개발자가 같은 언어로 소통할 수 있게됩니다.
KRDS는 어떻게 디자인 토큰을 연결하나요?
KRDS에서는 Figma의 Local Variable 기능을 활용해 디자인 토큰을 관리하고 있습니다. 이를 통해 생성된 디자인 토큰은 Figma 플러그인을 통해 JSON 형식의 텍스트 파일로 추출한 후, 이를 다시 CSS Variable 형태로 변환하여 개발에 적용하고 있습니다.
❔ 디자인 토큰을 왜 JSON 형식으로 추출하는 걸까요?
- 디자인시스템에서 변수는 종종 계층적 구조를 가지는데, JSON은 이러한 중첩된 데이터 구조를 자연스럽게 표현할 수 있습니다.
- JSON은 대부분의 프로그래밍 언어에서 지원되므로 디자인 변수를 Web, Android, iOS 등 다양한 플랫폼에서 요구하는 포맷(CSS, XML, Swift 등)으로 손쉽게 변환할 수 있습니다.
변환 과정이 쉽지는 않아요
- 피그마 Local Variable → JSON 추출
KRDS에서는 Tokens Studio for Figma플러그인을 사용하여 추출하였습니다.
그런데 이 과정에서 이슈가 발생합니다.
🔸 이슈
🗸 복잡한 계층구조 지원 한계
대부분의 플러그인이 단순한 구조의 Local Variable은 JSON파일로 잘 추출하지만 컬렉션/그룹/모드등이 모두 포함된 복잡한 구조인 경우에는 계층구조대로 추출이 잘 되지 않았습니다.
🗸 참조값 추출 누락
디자인 토큰을 적용할 때는, 먼저 글로벌 또는 원시 수준의 상위 레벨 토큰을 정의한 후, 이후 계층(시멘틱 혹은 컴포넌트 레벨)에서는 이러한 상위 레벨 토큰의 값을 참조하여 토큰 간의 유기적인 연결성을 확보하는것이 매우 중요한 작업입니다. 그런데 local variable에서 참조값을 사용하였더라도 JSON으로 추출된 파일은 value값이 참조값이 아닌 원시값인 경우가 많았습니다.
🔹 해결방법
수많은 플러그인을 테스트 해봤습니다만 개발 당시에는 모든 조건을 충족하는 플러그인이 존재하지 않아서 추출한 JSON 파일을 스크립트로 한번 더 가공하여 오류를 수정했습니다.
(현재 피그마는 빠른 속도로 성장하며 지속적으로 업데이트되고 있습니다. 이러한 변화에 맞춰 다양한 플러그인들도 계속해서 새롭게 개발되고 있으니, 여러 플러그인을 직접 테스트해보고 본인의 프로젝트에 가장 적합한 도구를 선택하는 것을 추천합니다.) - CSS Variable로 변환
추출된 JSON파일을 CSS Variable로 바꿔 웹에서 사용합니다. KRDS에서는 Style DIctionary(스타일 딕셔너리)를 사용하여 이 작업을 간단하게 처리할 수 있었습니다. - 컴포넌트 토큰 제작
KRDS에서는컴포넌트 토큰을 코드에서 정의합니다. 각 컴포넌트별 SCSS 파일에 컴포넌트 토큰을 정의해준 뒤 컴포넌트 토큰을 이용해 스타일을 정의했습니다.
하지만 고생은 여기까지!
일단 디자인 토큰과 코드 연동이 완료되고나면, 디자인이 변경되더라도 개발자는 복잡한 수정 작업에 신경 쓸 필요가 없습니다. 단순히 Figma에서 최신 디자인 토큰을 JSON 파일로 다시 추출하고, 이를 CSS Variable 형식으로 변환하여 기존 파일을 덮어쓰기만 하면 되죠.
그 결과, 디자인과 코드는 항상 일관성을 유지하며, 디자이너와 개발자 모두 작업 부담을 크게 줄일 수 있습니다. 새로운 디자인 요구사항이 생기더라도 효율적으로 대응할 수 있으니, 양쪽 모두 안심할 수 있는 안정적이고 유연한 시스템이 완성되는 셈입니다.
더불어, 디자이너의 의도가 코드에 그대로 구현되므로 결과물의 정확도가 크게 향상됩니다. 디자이너와 개발자가 동일한 토큰 언어로 소통하게 되어 해석 차이나 커뮤니케이션 오류도 자연스럽게 감소합니다.
이 모든 변화를 여러분의 프로젝트에서도 꼭 경험해보시길 바랍니다! 😁
디자인시스템 Publishing Engineer 이희정
