TailwindCSS 스타일 컬러 팔레트

디자인 시스템이 유행하기 전부터 디자인 토큰, 즉 컬러 팔레트와 타이포그래피 정리는 기본 중의 기본이지만, 가끔 다른 디자이너의 디자인 시스템을 보게 되는 경우가 있다. 그때 Surface, Primary 컬러를 각각 3~5개 정도로만 정리하는 경우를 많이 보았다.

 

보기에는 심플하고 충분해 보이겠지만, 실무에서 최소 퍼블리싱이나 UI를 구현해본 경험이 있다면 현실과 괴리가 있다는 느낌을 받을 것이다. 특히 다크 모드를 고려하는 프로덕트라면 더욱 그렇다. 프로덕트의 구조적 특징에 따라 다르겠지만, 시각적 구분이 명확해야 하는 경우, 예를 들어 대시보드 형태의 화면 구성이 필요하다면 Surface 컬러 3~5개로는 너무 부족한 것이 사실이다.

TailwindCSS의 인기

최근 TailwindCSS의 인기가 많다고 느낀다. Next의 기본 CSS 프레임워크로 사용되거나 주변 개발자 분들의 긍정적인 반응 등으로 알 수 있다. 개인적으로 사용해보면서 느낀 점은 높아진 생산성, 클래스 명세 불필요 및 훌륭한 프리셋 등이 있다. HTML에 인라인으로 작성되다 보니 코드 가독성이 떨어지는 단점이 있지만, 코드 작성 규칙만 정리하면 큰 문제는 아니라고 생각한다. 참고로 개인적으로 작업한 모바일 앱의 경우 TailwindCSS의 RN용 버전인 NativeWind를 사용했는데 문제가 거의 없었다.

 

다시 디자인 이야기로 돌아와서, TailwindCSS에서 기본적으로 제공하는 컬러 팔레트는 하나의 컬러를 11단계로 나누어 제공하며, HSL을 기준으로 Lightness의 단계를 나누어 구성되어 있어서 시각적 위계를 정리하는 데 도움을 준다. 체계도 직관적이라 수정도 용이하고, 특히 피그마의 Variables와의 궁합이 훌륭하다.

커스텀 컬러 팔레트

백그라운드 컬러인 Surface는 TailwindCSS의 프리셋을 사용한다고 치더라도, 프로덕트의 이미지인 Primary 컬러까지 프리셋을 사용하지는 않을 것이라 생각한다. 그럼 직접 만들기 위해서는 기준이 되는 컬러를 Primary/600 혹은 Primary/700 정도로 설정하고, HSL 기준으로 그라디언트 팔레트를 생성하면 된다. 아래의 링크는 개인적으로 자주 사용하는 컬러 팔레트 생성기이다. 디자인의 기본기가 있고 HSL의 개념을 아는 디자이너라면 별도의 추가 설명 없이 이해하리라고 생각한다.

 

Coolors 링크

마무리

가끔 다른 디자이너가 작업했던 작업물을 이어받아 디자인을 하는 경우가 있는데, 디자인 시스템 및 컴포넌트 관리는 고사하고 기본적인 디자인 토큰 정리, 즉 컬러 및 타이포그래피까지 정리가 되어있지 않은 경우를 많이 보았다. 이는 디자인 퀄리티 유지 및 개발의 용이성에도 문제가 발생하고, 더 나아가 프로덕트 완성도에도 악영향을 미치니 처음부터 기준을 잡아서 일관된 디자인 및 퀄리티를 유지하도록 하자.