Token 등록 방법 문의

Question

안녕하세요. 배리어블 작성법 관련하여 궁금한 점이 있습니다. 강의에서는 모든 컴포넌트에 대하여 배리어블 값을 쪼개서 등록하는것으로 이해하였는데요. 토큰에 대해 리서치 했을 때, Primitive와 Semantic을 따로 활용하라는 권장도 있었어서 실무에서 어떻게 쓰는게 좋은지 궁금합니다. 예시 상황 : Component의 상단 Padding이 20, 하단 Padding이 10일 경우 -> TypeA (현재 강의안) : margin-top-section 20, margin-top-bottom 10으로 각각 등록 -> TypeB : Primitive로 padding 20px, 10px으로 등록 후 margin-top-section-> padding 20px margin-bottom-section -> padding 10px

J.영 · Answer

안녕하세요? 혜령님 좋은 질문 감사드립니다. 결론부터 말씀드리면, 강의 방식(TypeA)과 Primitive/Semantic 방식(TypeB)은 서로 틀린 것이 아니라 목적이 다른 구조입니다. 본 강의에서는 요소를 기준으로 값을 쪼개는 방식(TypeA)을 사용했습니다. AI가 디자인 구조를 헷갈리지 않고 정확하게 읽도록 만들기 위함입니다. 예를 들어 section-padding-top = 20 section-padding-bottom = 10 이렇게 정의하면 AI 입장에서는 “이 값이 어디에 쓰이는지”를 바로 이해할 수 있어서 구현 정확도가 높아집니다. 반면에 실무 디자인 시스템에서는 보통 Primitive + Semantic 구조(TypeB)를 많이 사용합니다. Primitive spacing-10 = 10px spacing-20 = 20px Semantic section-padding-top = spacing-20 section-padding-bottom = spacing-10 이 방식은 값 재사용, 유지보수, 확장성에 더 유리해서 실제 실무에서는 보통 이렇게 많이 사용하기도하는데요 둘 중 하나가 정답이 아니라, 상황에 따라 선택하거나 혼합해서 사용하는 것이 가장 좋은 방법이라 생각됩니다 감사합니다^^ J.영드림