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

darkmoon90님 안녕하세요, 정말 좋은 질문 주셔서 감사합니다.

1. 디자인에서 반드시라는 것은 없는 것 같습니다.

규칙은 있지만 만약 말씀하신대로 완성도가 떨어진다면, 당연히 바꿔야 겠죠.
개발자분들과 상의하에 임의에 컬러를 바로 가져오셔도 괜찮습니다. 대신 도큐먼트와 왜 그렇게 했는지 기술을 해놓으면 됩니다. 그래야지 다른 작업자가 와서도 왜 그렇게 했는지 의도를 알 수 있기 때문입니다.

2. 만약 다크모드 전용 색상이 따로 있고, 동일한 컬러색상 군에 완전히 다른 색이라고 한다면 개인적으로 따로 primitive에도 담아두면 관리하기 좋을 것 같습니다.
   
   예를 들어, pink_light, pink_dark 이렇게 해서 50~900 두시고

primary_text 라이트모드에서는 pink_light 쪽을 다크모드에서는 pink_dark를 선택하는 방법이 될 것 같습니다. 그리고 반드시 primitive의 컬러 스케일도 숫자형태로 하실 필요는 없으시고 darker, lighter 이런식으로 그레이딩을 하셔도 됩니다.

더 궁금하신 부분 있으면 말씀해주세요. 감사합니다!

안녕하세요, 인프런 AI 인턴입니다. darkmoon90님.

다크모드에서 컬러를 정의할 때의 궁금증에 대해 설명드리겠습니다.

1. 다크모드에서도 반드시 Primitive에 정의된 색상만 사용해야 할까요?

피그마에서 디자인 토큰을 정의할 때, Primitive는 기본적인 색상을 담고 있으며, 이러한 색상은 보통 다양한 모드(라이트/다크)에서 일관성을 유지하는 데 도움을 줍니다. 하지만 디자인의 목적에 따라 특정 모드에서 다른 색상을 사용하는 것이 필요할 수 있습니다.

• 채도/명도가 튀는 경우: 다크모드에서는 특히 이런 문제가 발생할 수 있어, 상황에 따라 커스터마이징된 색상을 사용하는 것이 자연스러운 디자인을 유지하는 데 도움이 될 수 있습니다. 따라서, 상황에 따라 Primitive에 정의되지 않은 색상(예: 특정 hex 코드)을 사용하는 것도 괜찮습니다.
  

2. 다크모드 전용 색상 처리 방법

다크모드에서 별도의 색상이 필요할 경우, 어떻게 등록할 것인지에 대해 고민이 되실 수 있습니다.

• Primitive에 등록: 다크모드에서 자주 사용하는 색상이라면, Primitive에 추가적인 다크모드 전용 색상 팔레트를 구성하여 관리하면 좋습니다. 이렇게 하면 다크모드 관련 작업이 더 체계적으로 이루어질 수 있습니다.

• Semantic 토큰에만 등록: 다크모드에서만 사용되는 특수한 경우라면, Semantic 토큰에서만 관리하더라도 큰 문제가 없습니다. 이 경우 “mode:dark”로 명확히 구분하여 나중에 유지보수 시 혼란을 최소화할 수 있도록 합니다.

추가 참고 내용

관련하여 알고 계시면 도움이 될 자료를 몇 가지 추천드립니다:

1. 디자인시스템 시멘틱 컬러 관련: 시맨틱 컬러 활용에 대한 심층적인 논의가 포함되어 있습니다.

2. darkmode에 기존 gray50~900을 사용하지 않으려면: 다크모드에서 다른 색상 팔레트를 사용할 때의 방법이 논의됩니다.

각각의 경우가 디자인의 맥락과 요구 사항에 따라 다를 수 있기 때문에, 이러한 선택은 팀 내 합의와 유지보수를 고려하여 결정하시는 것을 추천드립니다.

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