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

Son Byung Ho님의 프로필 이미지
Son Byung Ho

작성한 질문수

피그마 배리어블을 활용한 디자인 시스템 구축하기

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

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

작성

·

63

0

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

 

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

 

  • 회사 일 관계로 빠른 답변이 어려울 수 있으며, 최대 3일 이내에 답변드리도록 하겠습니다.

     

  • 이해를 돕기 위해서 스크린샷 이미지, 피그마 파일 링크를 반드시 첨부해주세요.

     

  • 마지막으로 먼저 유사한 질문이 있는지 한번 찾아보시는 걸 권장 드립니다.

 

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

답변 2

1

볼드 UX님의 프로필 이미지
볼드 UX
지식공유자

안녕하세요, Son Byung Ho님

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

 

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

 

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

 

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

질문 주셔서 감사합니다.

 

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

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

Son Byung Ho님의 프로필 이미지
Son Byung Ho
질문자

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

볼드 UX님의 프로필 이미지
볼드 UX
지식공유자

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

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

 

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

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

 

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

 

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

 

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

 

 

0

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

질문의 핵심:

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

관련 답변 링크 및 요약:

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

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

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

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

Son Byung Ho님의 프로필 이미지
Son Byung Ho

작성한 질문수

질문하기