강의

멘토링

커뮤니티

Inflearn Community Q&A

gusdyd205023's profile image
gusdyd205023

asked

[UI3 Update] Building a Design System Using Figma Variables

[Theory📖] Color Variable Structure, Naming Convention

디자인 시스템 네이밍 순서에 대해 질문남깁니다!

Written on

·

54

0

섹션3을 수강중입니다. 강의의 내용은
category - property - role - variant - state - scale로 이어지고 vriant안에 primary등이 쓰여집니다.

이미지는 대한민국 정부 디자인 시스템의 내용인데
여기서 primary는 type이고 쓰는 순서나 역할군도 다른거 같아서 너무 헷갈리는 것 같습니다..
네이밍 순서를 어떻게 외워야할지 고민입니다..!

스크린샷 2026-02-16 오후 9.51.22.png.webp

 

웹-디자인figmafigma-tokens디자인-시스템아토믹-디자인figma-variable프로덕트디자인지금-베스트

Answer 2

0

bolduxlab님의 프로필 이미지
bolduxlab
Instructor

안녕하세요, gusdyd20님.

 

네이밍 순서에는 정답이 없습니다. 그리고 굳이 외우려고 하지 않으셔도 됩니다.

 

예를 들어 primary는 어떤 시스템에서는 variant로 정의되기도 하고, 다른 곳에서는 type으로 정의되기도 합니다. 결국 중요한 것은 용어 자체가 아니라, 그 팀이나 시스템 안에서 어떻게 정의하고 구조화했는지입니다.

 

사실 variant와 type도 완전히 다른 개념이라기보다, 상위 카테고리를 구분하기 위한 구조적 레이어라고 이해하시면 됩니다. 용어가 다를 뿐, 역할은 비슷한 경우가 많습니다.

 

따라서 네이밍을 외우는 것보다,

  • 각 레이어의 정의가 명확한지,

  • 같은 체계 안에서 일관되게 사용되고 있는지

이 두 가지를 더 중요하게 보시면 됩니다.

 

이와 관련된 원문 글이 매우 디테일하게 설명되어 있으니, 한글로 번역해서 천천히 읽어보시면 구조를 이해하는 데 큰 도움이 될 것입니다.

0

안녕하세요, 인프런 AI 인턴입니다. gusdyd20님, 디자인 시스템 네이밍의 순서 및 분류에 대해 헷갈리신 것 같습니다.

이 이미지는 디자인 시스템 네이밍 구조를 설명하고 있습니다. 각각의 구성 요소는 특정한 용도로 활용됩니다:

  1. kr - 네임스페이스(Namespace): 전체 디자인 시스템의 고유 식별자입니다.
  2. light - 테마(Theme): 디자인에서 사용하는 테마를 나타냅니다.
  3. color - 카테고리(Category): 스타일 요소의 카테고리입니다.
  4. button - 컴포넌트(Component): UI 컴포넌트의 유형입니다.
  5. primary - 타입(Type): 컴포넌트의 특정 스타일 혹은 역할을 나타냅니다.
  6. hover - 수정자(Modifier): 컴포넌트의 상태나 변형을 설명합니다.

각 부분은 특정 역할로 체계적으로 스타일을 식별하고 조직하는 데 도움을 줍니다. 사용자의 강의와 이미지에서 언급된 네이밍 순서는 약간의 차이가 있을 수 있으니, 자신이 속한 프로젝트나 시스템의 규칙에 맞게 네이밍 규칙을 조정하는 것이 중요합니다.

이해를 돕기 위해 주어진 이미지를 활용하면, 구체적인 예시를 통해 각각의 요소가 어떤 역할을 하는지 시각적으로 확인할 수 있을 것입니다. 네이밍 규칙은 일관성 있는 시스템 구축에 있어 중요한 부분이니, 이렇게 체계적으로 접근하는 방법을 계속 연습하시면 좋을 것 같습니다.

더 궁금한 점이 있으시면 언제든지 질문해 주세요!
이미지 출처

gusdyd205023's profile image
gusdyd205023

asked

Ask a question