인프런 커뮤니티 질문&답변
작성한 질문수
primitive 지정이 필수인지 궁금합니다.
해결된 질문
작성
·
442
·
수정됨
0
안녕하세요! 강의 너무 잘듣고 있습니다.
지금 회사에서 사용하는 기본 설정을 이번 강의를 통해 디자인시스템으로 만드는 걸 목표로 수업을 듣고 있습니다. 다만 이를 진행함에 있어서 궁금한게 있어서 질문을 드립니다.
현재 저희 회사는 제가 혼자 디자인을 하다보니 따로 primitive에 해당하는 컬러값을 지정하지 않고 바로 semantic으로 이름을 설정해서 사용하고 있었는데요!
primitive는 결국 기본 컬러값의 나열이라고 생각하는데, 이걸 필수적으로 설정해야하는 것인지 궁금합니다!
--------------------------------------------------------
학습 관련 질문을 남겨주세요. 영상이나 스크린샷 이미지도 첨부해서 작성하시면 도움이 됩니다.
먼저 유사한 질문이 있는지 한번 찾아보시는 걸 권장 드려요.
최대한 빨리 답변드리도록 노력하겠습니다.
인프런 서비스 운영 관련해서는 1:1 문의하기로 인프런 쪽으로 연락 주시기 바랍니다.
답변 1
0
안녕하세요.
우선 이 질문에 답하기 전 몇가지 고려해야할 사항이 있습니다.
왜 스타일이 아니라 베리어블인가?
회사의 프로덕트 방향
답변:
왜 스타일이 아니라 베리어블인가?
지금 현재 만드신 것은 스타일일 경우 참조가 필요없는 시맨틱 형태입니다. 이 경우는 베리어블과 다르게 참조도 안되고 모드도 적용이 안되기 때문에 수정하기가 어려워서 확장이 어렵습니다. 예를 들어 다크모드를 만들고 싶으면 새로운 시맨틱 컬러 세트를 만들어야 하죠.
하지만 베리어블에서는 기본 컬러(Primitive)를 정하고 난 다음 시맨틱(Semantic)에서 모드에 따라서 참조색을 바꿀 수 있어 확장성 측면에서 스타일보다 훨씬 유리합니다.
회사의 프로덕트 방향
만약 회사에서 다크/라이트모드, 멀티브랜드 등 다양한 속성에 따라 바뀌는 경우가 아닌 정적인 경우라면 제 생각에는 스타일로 시맨틱으로만 가는 것도 추천드립니다. 왜냐하면 스타일을 베리어블로 바꾸는 것은 굉장한 노력과 시간이 요하기 때문입니다. 하지만 회사 프로덕트가 앞으로 시맨틱 컬러의 확장을 준비하고 있다면 베리어블로 바꾸시는 것을 추천드립니다.
정리하자면 회사의 프로덕트 방향을 우선 고려하셔서 만약 확장이 가능한 색상 배치를 고려하신다면 참조, 모드를 사용할 수 있는 베리어블 사용하는 것을 추천드립니다.
뉴트럴 색상을 선택할 경우 고려해야할 사항은 많습니다.
어디서 부터 시작할 것인가(offset) - 정말 밝은 회색부터 시작할 것인지?
어느 구간을 시작할 것인가(Range) - 범위 설정은 어떻게 할 것인가?
채도는 어떻게 할 것인가?(Saturation) - 회색도 종류가 많겠죠?
위에 소개된 웹사이트에서 찾아보시는 것을 추천드립니다. 색을 바꾸는 것은 당연히 할 수 있을 것 같습니다.색상을 최적화한다고 볼 수 있을 것이며, 프로덕트, 웹접근성 등을 고려해서 바꾸시면 될 것 같습니다. 관련된 해외 아티클 공유해드려요.
https://onesignal.com/blog/11-shades-of-gray-a-color-system-story/
혹시 다크모드 수업은 들어보셨는지요? 한번 들어보시는 것을 추천드리며, 다크모드의 경우에는 쉐도우를 써도 주로 톤으로 구분이 됩니다. 그 이유는 쉐도우를 써도 배경이 너무 어두우면(iOS의 경우는 완전 블랙) 앞/뒤 디자인 요소의 차이가 잘 구분 되지 않기 떄문입니다. 그리고 머티리얼 디자인 규칙 상 톤도 디자인 요소의 높이를 구분하는 요소로 사용될 수도 있습니다. 그리고 사용하시는 그레이톤에 따라도 달라질 수 있습니다.
지금 Shun0325님이 협의해서 진행하시는 대로 계속 하시면 될 것 같습니다.
감사합니다!
친절한 답변 감사합니다!
이어서 수업을 듣다보니깐 또 궁금한게 생겨서 추가 질문을 드립니다!
1. 기존 프로덕트에서 쓰던 뉴트럴톤을 0-900과 같은 primitive로 정의내리기가 좀 애매한데, 0, 100, 200, 300-- 이렇게 숫자가 올라갈 때 무조건 점진적으로(Ex.일정한 b값의 변화)색상이 바뀌어야 하는건지, 아니면 어두워지기만 한다면 제가 임의로 값을 조정해도 되는건지 궁금합니다.
2. 다크모드에서의 엘리베이션
보통 일반적으로 다크모드의 위계상 앞에 있는걸 밝게 표시하는 경우가 많다보니, 아래에 있는 백그라운드랑 그림자로 구분이 안되는 경우가 많은데 이런 경우는 어떤식으로 해야할지 궁금합니다.
현재 프로덕트에선 웬만하면 톤으로 구분하고 쉐도우를 쓰지 않는 방향으로 협의해서 진행하고 있긴합니다!