디자인 시스템 개편의 시작 첫 번째
1. Semantic 컬러 설정
색은 정의돼 있었지만,
사용 규칙은 정의되지 않았다
기존에 작업되어 있던 디자인 시스템은
Common, Primary, Cgrey... 등은
단계 기반의 컬러 팔레트를 사용하고 있었다.
색상 자체는 충분했고,
각 팔레트 내에서의 관계도 잘 정리되어 있었다.
기존 작업되어 있던 컬러 디자인 시스템하지만
어떤 기준으로 색을 선택해야 하는지는
명확하지 않았다.
화면을 만들 때마다
비슷한 고민이 반복됐다.
브랜드 컬러를 어디까지 사용해도 되는지?
텍스트를 어디까지 강조로 봐야 하는지?
매번 기준 없이 결정해야 했다.
문제는 색이 아니라,
색을 사용하는 기준이 없다는 점이었다.
그래서 Semantic 컬러를 도입했고,
색을 언제·어디서 사용할지를
색상의 역할 기준으로 다시 정의했다.
컬러 시스템의 재정의로
달라진 점
Semantic 컬러를 도입한 이후,
색을 선택하는 기준이 명확해졌다.
색상값을 비교하던 방식에서 벗어나,
어떤 역할의 색이 필요한지를
먼저 판단하게 되었다.
다만 같은 역할 안에서도
시각적 강도에 따른 기준이 필요했다.
기준이 없으면 디자이너들이
각자 다른 해석으로 색을 선택할
가능성이 있었기 때문이다.
그래서 Semantic 컬러에
시각적 강도(Level) 기준을
명확히 정의했고,
팀이 같은 기준으로 색을
이해하고 선택할 수 있도록 했다.
정리하며
컬러 시스템을 역할과 강도 기준으로 재정의하면서,
색 선택은 더 이상 개인의 감각이나 해석에 의존하지 않게 되었다.
대신 공통된 기준 위에서
판단하고 선택하는 구조로 바뀌었다.
이 과정을 거치며 한 가지가 더 분명해졌다.
컬러뿐 아니라 컴포넌트 역시
같은 문제를 안고 있었다는 점이다.
컴포넌트는 이미 존재했지만,
어떤 상황에서 어떤 컴포넌트를 써야 하는지,
각 컴포넌트가 어떤 역할을 맡고 있는지에 대한 기준은
명확하게 정리되어 있지 않았다.
따라서, 다음 단계에서는
컬러 시스템과 마찬가지로
컴포넌트의 정의와 역할을 다시 정리하고,
플랫폼 환경에 따라,
또 어떤 상황에서 사용되는 컴포넌트인지에 따라
적절한 선택이 가능하도록
하나의 기준으로 정리해보려 한다.