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

허이짜님 안녕하세요.

말씀해주신 방향이 맞는 것 같습니다. 회사 프로덕트/서비스에 따르겠지만 결국 제품이 커지고, 다양한 UI가 생기다보면, 시맨틱 베리어블에 맞지 않는 것이 나오게 됩니다. 그때마다 새로 추가하거나 만들어진 규칙을 어긋내면서 하다보면 결국 일관성이 떨어지거나 일관성은 있는데 모두 주요색으로 뒤덮혀 있어서, 반복적인 지루한 UI가 만들어질 수 있습니다.

실제로 몇몇 회사 토큰 구조에서는 시맨틱을 넘어 컴포넌트 Level로 올라갑니다. 저도 서비스가 커지고, UI가 많아지고, 복잡해지면, 그것이 더 맞을 수 있다고 생각합니다.

그래서 그런 경우는 제 생각에는 개인적으로 콜랙션을 추가로 만들어, 시맨틱 단계를 넘어 컴포넌트 단계로 한층 더 만드시는 것을 추천드립니다. 그리고 컴포넌트 단계 베리어블에서 시맨틱에서 색을 가져다 쓰는 방법이 더 좋지 않을까 싶습니다.

감사합니다. 볼드 드림.

안녕하세요, 인프런 AI 인턴입니다. 허이짜님께서 질문해주신 내용을 바탕으로 도움이 될 만한 정보를 찾아보았습니다.

질문의 핵심:

• 디자인 시스템에서 변수(Variable) 를 어떻게 효과적으로 관리할지에 대한 고민입니다.
  
• 특정 컴포넌트(예: 세그먼트 버튼) 내에서의 변수 활용에 대한 질문입니다.
  

피그마의 변수 활용 요약:

1. 범용 변수와 컴포넌트 전용 변수:

   • 범용 변수를 사용하는 경우는 프로젝트 전반에 걸쳐 일관성이 유지될 수 있습니다. 이는 변수를 관리하고 유지 보수하는 데 시간을 절약할 수 있습니다.
     
   • 그러나, 다양한 컴포넌트 유형(예: CTA 버튼, 세그먼트 버튼)에서는 전용 변수 를 정의하여 각 컴포넌트의 고유한 스타일 요구를 충족할 수 있습니다. 예를 들어, 세그먼트 버튼의 흰색 배경에 맞추어 color/FAB/bg/primary 처럼 세분화된 변수를 사용하면 적절한 스타일링이 가능합니다.
     

2. 구체적인 변수 설정:

   • 초기에는 범용 변수를 사용하여 스타일을 적용하지만, 프로젝트가 발전하고 이슈가 발견되면 점진적으로 컴포넌트 전용 변수를 도입할 수 있습니다.
     
   • 이는 관리하기 어려운 스타일 시트를 피하고, 개발자와 디자이너 간의 의사 소통을 원활히 할 수 있도록 도와줍니다.
     

관련 정보:

• Design System Best Practices: 디자인 시스템에서 변수를 어떻게 설계하고 관리할지를 다루며, 다양한 컴포넌트에 맞춤형 변수를 적용하는 방법을 설명합니다.

• Figma Variables and Components: Figma에서 변수를 설정하고, 여러 컴포넌트에 대한 변수를 어떻게 설정하는지에 대한 예제를 제공합니다.

주의할 점:

• Consistency: 다양한 변수를 사용하면 스타일 일관성을 잃을 수 있습니다. 변수 구조를 계획할 때는 전체 디자인 시스템의 일관성을 고려하십시오.
  
• Scalability: 프로젝트가 확장될 때 수정할 수 있도록 유연한 구조를 가지는 것이 중요합니다.
  
• Collaboration: 팀 내 디자이너 및 개발자와 변수의 설정 및 구조에 대해 명확한 가이드를 마련하십시오. 이는 디자인 시스템의 채택과 유지 관리에 긍정적인 영향을 미칩니다.
  

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