인프런 커뮤니티 질문&답변

질문을 아주 잘 해주셨습니다.

오히려 여기서 헷갈리셨다는 건 앞부분의 맥락은 제대로 따라오셨다는 뜻입니다.

먼저 1번 질문부터 말씀드리면, 적어주신 예시는 쇼피파이(Shopify)의 토큰 네이밍 방식입니다.

앞에서 말씀드린 Namespace / Object / Base / Modifier는 절대적인 정답 공식이라기보다, 디자인 시스템을 분석한 사람들이 공통적으로 발견한 패턴에 가깝습니다. 즉, 모든 회사가 반드시 똑같이 쓰는 규칙은 아닙니다.

그래서 이번에 보신 Role도 “왜 갑자기 나오지?”가 아니라, 쇼피파이는 Base만으로 의미를 다 담지 않고, 중간에 Role이라는 의미 축을 하나 더 둬서 관리하는구나 정도로 이해하시면 됩니다.

예를 들어,

• Base(category): color

• Base(property): bg

• Base or Component(Role): interactive

• Modifier(variant): subdued

• Modifier(state): hover

   

이런 구조라면, 단순히 “배경색”이 아니라 인터랙션 가능한 요소에 쓰이는 배경색이고, 그중 subdued 변형이며, hover 상태의 값까지 단계적으로 설명하고 있는 것입니다.

즉, 여기서 Role은 갑자기 튀어나온 이상한 개념이 아니라,

이 토큰이 어떤 역할의 UI에 쓰이는지 설명하는 의미 단위라고 보시면 됩니다.

정리하면, 앞에서 배운 구조로 대부분 해석은 가능하고, Role은 쇼피파이에서 추가로 사용하는 의미 분류라고 이해하시면 충분합니다. 중요한 건 “이름이 왜 이렇게 생겼는가”를 읽어내는 것이지, 모든 시스템이 똑같은 문법을 쓴다고 생각하실 필요는 없습니다.

다음으로 2번 질문인 배리어블(토큰) 계층 구조에 대해 설명드리면, 이건 이름 짓는 순서만을 뜻하는 것도 아니고, 폴더 분류용 개념만을 뜻하는 것도 아닙니다. 핵심은 토큰을 추상화 수준에 따라 나누는 방식이라고 보시면 됩니다.

보통은 아래처럼 이해하시면 가장 쉽습니다.

1. Raw value

가장 실제적인 값 자체입니다. 예: #005BD3, 16px, 8px

2. Primitive

Raw value에 재사용 가능한 기본 이름을 붙인 단계입니다. 예: blue-500, spacing-2, gray-100

3. Theme

브랜드나 테마 맥락에 따라 Primitive를 묶어 적용한 단계입니다. 예: brand_a-500, brand_b-500

4. Semantic

실제 UI 의미 기준으로 이름 붙인 단계입니다.

예: color-bg-interactive, color-text-critical, space-button-padding-x

즉,

• Raw value는 진짜 값이고

• Primitive는 재료 이름이고

• Theme는 테마별 연결 단계이고

• Semantic은 실제 사용 목적을 기준으로 한 이름입니다.

   

그래서 이 계층 구조는

1. 토큰을 어떻게 관리할지 정리하는 기준이기도 하고,

2. 특히 시맨틱 토큰 이름을 어떻게 지을지 연결되는 개념이기도 합니다.

    

예를 들어:

• Raw value: #005BD3

• Primitive: blue-500

• Semantic: color-bg-interactive

• 실제 사용: 버튼 기본 배경색

이렇게 연결될 수 있습니다.

결론적으로 말씀드리면, 계층 구조는 토큰을 체계적으로 분류하고 관리하기 위한 큰 개념이고, 네이밍은 그중에서도 특히 Primitive와 Semantic 단계에서 중요하게 작동하는 것입니다.

즉, 폴더 구조 이야기이기도 하고, 이름 짓기 이야기이기도 하지만, 더 정확히는 “디자인 토큰을 어떤 추상화 단계로 관리할 것인가”에 대한 개념입니다.

지금 헷갈리시는 포인트는 아주 정상적입니다.

왜냐하면 실무에서는 이 두 개념이 자주 섞여서 설명되기 때문입니다.

그래서 지금 단계에서는 이렇게만 구분하시면 충분합니다. 그리고 다음에 컬러 부분에서 실습을 하면서 만들어보고, 적용해보다 보면, 더 이해가 되실 것 입니다. 이 강의를 한번 만에 이해하는 것은 경력 20년차 되신 분도 어려워하십니다. 계속 반복해서 들으시면서 배워나가시면 도움이 되실 것입니다.

그리고 헷갈리는 것은 언제든지 질문 게시판을 남겨주시기 바랍니다.

• 네이밍 구조: 토큰 이름을 어떤 규칙으로 읽고 쓸 것인가

• 계층 구조: 토큰을 어떤 추상화 단계로 나눠 관리할 것인가

이 둘은 연결되어 있지만, 같은 개념은 아닙니다.

안녕하세요, 인프런 AI 인턴입니다. gusdyd20님, 디자인 시스템의 네이밍 구조에 대해 혼란스러우신 점 이해합니다. 기존 답변에서 네이밍 구조와 관련된 설명과 링크를 찾아 도움을 드리겠습니다.

디자인 시스템에서 네이밍 구조는 매우 중요합니다. 각 요소들이 어떻게 연결되고 어떤 역할을 하는지 알면 전체 시스템을 이해하는 데 큰 도움이 됩니다.

네이밍 구조 이해하기

디자인 토큰의 네이밍에서 Role은 특정 디자인 요소가 어떤 역할을 하는지를 설명하는 부분입니다. 일반적으로 다음과 같은 식으로 구성됩니다:

1. System (Namespace): --p - 전체 시스템이나 브랜드를 식별하는 접두사입니다.
   
2. Category (Base): color - 디자인 속성의 범주, 예를 들어 색상, 크기 등이 있습니다.
   
3. Property (Base): bg - 디자인 속성의 세부항목, 여기서는 배경을 의미합니다.
   
4. Role: interactive - 요소가 어떤 역할을 하는지 설명합니다. 예를 들어, 사용자와의 상호작용 시 특정 동작을 나타낼 수 있습니다.
   
5. Variant (Modifier): subdued - 요소의 변형이나 스타일 유형 표시입니다.
   
6. State (Modifier): hover - 요소가 특정 상태에 있을 때의 모습입니다.
   

관련 질문과 답변

아래 링크에서 유사한 질문과 답변을 찾아보실 수 있습니다:

• 컬러 베리어블에서 semantic 관련: 네이밍 구조와 관련하여 semantic의 의미와 역할에 대해 논의된 내용입니다.
  

요약

디자인 시스템에서 Role은 특정 요소가 어떤 기능을 하는지 정의하는데, 이는 이러한 요소들이 UI에서 어떻게 행동해야 하는지를 더 명확히 설명할 수 있도록 합니다. 따라서, 네이밍 구조에서 Role은 특정 맥락이나 기능적 측면을 강조합니다.

이 정보가 도움이 되었길 바랍니다. 추가적으로 궁금한 점이 있으시면 언제든지 질문해 주세요. 곧 지식공유자께서도 추가적인 답변을 제공해 주실 것입니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.