inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기

[실습✨] 색상 배리어블 등록하기

semantic 컬러 베리어블 정의 할때 왜 여기선 무조건 theme 컬러를 참조하는 이유가 무엇인가요?

해결된 질문

228

Son Byung Ho

작성한 질문수 3

0

semantic 컬러 베리어블 정의 할때 왜 여기선 무조건 theme 컬러를 참조하는 이유가 무엇인가요? primitive를 참조하지 않는 이유는 무엇인가요?

 

우선 강의를 들어주셔서 감사합니다. 강의 들으시면서 궁금하신 부분을 남겨주세요.

 

 

인프런 서비스 운영 관련해서는 1:1 문의하기로 인프런 쪽으로 연락 주시기 바랍니다.

웹-디자인 figma figma-tokens 디자인-시스템 아토믹-디자인 figma-variable

답변 2

1

볼드 UX

안녕하세요, Son Byung Ho님

말씀하신대로 만약 브랜드가 하나인 회사에서 다크모드, 라이트 모드를 구현하시고 싶으시다면, primitive와 semantic을 바로 연결하면 됩니다.

 

본 강의에서는 최대한 다양한 케이스를 보여드리고 싶어서 멀티 브랜드도 구현하고 시연하는 것을 보여드리기 위해서 중간에 theme을 넣어서 만들었습니다. theme에서는 브랜드 숫자 만큼 모드를 적용해서 다양하게 표현할 수 있고 라이트 다크모드도 따로 적용하지 않더라도 베리어블이 저절로 바뀌면서 구현됩니다.

 

섹션 9에서 4번째 세션인 "브랜드 구조와 모드 통합 브랜드 구현하기"를 한 번 맛보기로 살펴보시기 바랍니다.

 

언제든지 궁금한 질문 있으시면 남겨주세요.

질문 주셔서 감사합니다.

 

브랜드 구조와 모드를 활용한 통합 브랜드 구현하기

브랜드 구조와 모드를 활용한 통합 브랜드 구현하기

0

Son Byung Ho

빠른 답변 감사합니다.
말씀 주신대로 현재 작업중인 회사 프로덕트는
브랜드가 하나인 회사에서 다크모드, 라이트 모드를 구현하는 형태입니다. 그렇다면 primitive와 semantic을 바로 연결하려고 하는데요.
primitive - theme - semantic 3단계로 정의한 내용 중 theme의 속성 정의(brand, information, Success, warning..)가 이런식인데..
기존 primitive의 color/blue/50, color/blue/100 구조를 지우고 위에 말씀드린 theme의 속성 정의를 primitive에 적용해야 하는건가요?

0

볼드 UX

Byung Ho님 회사프로덕트를 예로 들자면, theme은 전혀 필요없습니다.

이런 경우는 theme은 제거하시고 primitive, semantic 두개만 생각하시면 됩니다.

 

primitive는 말 그대로 우리가 알고 있는 원색을 이름으로 넣으시면 됩니다.

예를 들어, color/blue/50, color/blue/100을 두시면 됩니다. 그래서 언급하신대로 지우시지 마시고 theme을 버리시면 됩니다.

 

Semantic에서는 역할을 부여하기 때문에 강의 처럼 text, bg, icon, border를 기준으로 그 다음에 속성 정의를 넣으시면 됩니다.

 

정답이라는 것은 없지만 이 것이 보편적으로 시작하는 기준이고 내부 디테일한 것은 프로덕트와 팀원들과 상의 하에 정하시면 됩니다.

 

궁금하신 점 있으시면 언제든지 질문 주세요!

 

 

0

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. Son Byung Ho님의 질문에 대해 도움이 될 만한 정보를 찾았습니다.

질문의 핵심:

  • Semantic 컬러 베리어블 정의 시, 왜 theme 컬러를 참조하는지와 관련한 질문입니다.
  • 추가적으로, Primitive 컬러를 참조하지 않는 이유에 대한 설명을 요구하고 있습니다.

관련 답변 링크 및 요약:

  1. “color variable 등록 시 naming 및 색깔 기준 문의…”에서는 color variable(색상 베리어블)을 등록하는 과정의 기준과 의미에 대해 설명하고 있습니다. 그러나 이 내용이 Semantic 컬러와 theme 컬러의 관계에 대한 구체적인 직접적 설명은 아니지만, 색상 베리어블의 개념과 네이밍 규칙, 세멘틱의 사용처에 대한 일반적인 이해를 돕는 내용을 포함하고 있습니다.

이 정보는 Semantic 컬러 베리어블을 정의할 때 theme 컬러를 참조하는 구체적인 이유와, Primitive 컬러를 직접 참조하지 않는 이유에 대해 직접적인 답변은 제공하지 않지만, 디자인 시스템 내에서 컬러 베리어블을 관리하는 일반적인 관행에 대해 이해하는 데 도움을 줄 수 있습니다.

직접적인 설명이 부족하므로, 이 주제에 대해 더 구체적인 정보와 설명을 원하실 경우, 강의 내 다른 자료를 참조하거나 추가적인 질문을 통해 구체적인 답변을 요청하시는 것이 좋습니다.

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

배리어블 Value에 관해 질문있습니다.

0

21

0

Body>font weight 에서 semibold에 짝대기가 생기는 이유?

0

26

1

Navigation Mobile 토글 베리어블이 안됩니당

1

25

2

Typography 모드 적용시 표현된 값과 우측에 표시되는 값다름

0

26

1

디자인 시스템에 그룹명을 숨길 수도 있나요?

0

39

2

디자인 시스템 네이밍에 관한 질문드립니다.

0

49

2

next step?

1

67

1

16강 Print Variables 출력 질문

0

79

2

open in Figma 누르고 ui kit 다운?받았을 때

0

62

2

variables 이름 지을때 소문자,대문자 사용에 관해..

0

89

2

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

0

111

2

이미지 캐러셀 영상

0

64

2

아이콘 사이즈 컴포넌트 구성 방식 관련

0

98

3

완강/리뷰 이벤트 후 강의자료

0

58

2

Stack 컴포넌트 관련하여 궁금한 점이 있습니다.

0

53

1

컴포넌트별 베리어블 구축

0

76

2

인풋 텍스트필드에서는 왜 'interactive/bg' 배리어블을 활용하지 않는 것인가요?

0

35

1

섹션 6 / 29.Button 강의의 아이콘 인스턴스 스왑 질문

0

49

2

UI Kit에서 배리어블 등록 안되는 문제

0

57

2

교육용 피그마 계정 문의

0

57

2

베리어블 등록했는데 스타일에 연결하려니까 안보여요..

0

81

3

폰트 웨이트 지정에서, '바디만 따로 웨이트를 시멘틱에 그룹핑 하는 이유'가 무엇인가요??

0

47

2

섹션 6 / 29.Button 강의 질문

0

63

2

67강, 70강, 75강 자료 다운로드

0

50

1