dev

Open Color - CSS변수로 쉽게 쓰는 오픈소스 컬러 팔레트 라이브러리

Open Color는 13가지 컬러와 10가지 단계로 일관된 컬러팔레트 오픈소스 라이브러리입니다. 디자인 시스템을 구축하기 좋은 환경을 제공합니다. CSS 변수는 물론이고, 여러가지 디자인 소프트웨어에서 사용할 수 있는 컬러 스와치도 제공하고 있습니다.

Photo by Helena Lopes / Unsplash

컬러팔레트 / 컬러스와치

최근엔 오픈 소스의 의존도가 매우 높습니다. 작업하는 과정을 돌이켜보면, 오픈 소스 없이 제로베이스에서 할 수 있는 일이 얼마나 될까 싶을 정도입니다.

그럴 정도로 개발, 디자인을 비롯한 여러 소프트웨어 산업 분야에서 오픈소스 라이브러리를 활용해 작업에 속도를 더하는 경우가 많습니다.

프론트엔드 분야에서는 잘 알려진 Bootstrap이나 Tailwindcss와 같은 CSS 프레임워크를 사용하는 경우도 많은데, 이와 같은 도구들은 여러가지 기능들이 잘 준비되어 있기 때문에 상당히 많은 도움을 주곤 합니다.

그 중에서도 개인적으로 가장 마음에 드는 부분이 컬러팔레트 _{Color Palette} 혹은 컬러 스와치 _{Color Swatch} 라고 불리는 것들입니다.

컬러 팔레트를 제공하는 CSS 프레임워크

개인적으로 Tailwindcss에서 가장 마음에 드는 부분을 꼽으라면 컬러 팔레트를 뽑고 싶을 정도입니다. 컬러 팔레트 때문에 일부러 Tailwindcss 쓰는 경우도 있습니다.

Material 디자인이나, 부트스트랩에서도 컬러팔레트를 제공하지만, 가장 맘에 드는 팔레트는 TailwindCSS 였습니다.

더 자세한 내용은 아래에 Tailwindcss Color Palatte에 대한 공식 문서를 보면 알 수 있습니다.

Tailwind CSS가 안고 있는 한계

TailwindCSS는 최근 들어서 많은 사랑 받고 있는 CSS 프레임워크 중 하나인데, 사실 가독성이 많이 떨어진다는 것이 항상 발목을 잡는 문제입니다.

@apply와 같은 기능을 이용해서 단축해서 사용하는 방법도 있지만, 그렇게 만들다보면 이게 그냥 CSS와 달라지는게 무엇이 있나 싶어지죠.

이 부분이 TailiwindCSS가 갖고 있는 양면성이라고 봅니다.

Open Props - Tailwind CSS의 대안

그래서 대안으로 찾던것이 Open Props라는 오픈소스 프로젝트였습니다. TailwindCSS와 같이 잘 준비된 기능들이 풍부하면서도 HTML 문서를 오염(?)시키지 않고 쓸 수 있습니다.

필요한 부분만 불러와서 CSS에서 변수를 삽입하는 방식으로 사용할 수 있기 때문입니다.

더 자세한 내용은 아래 포스팅에서 볼 수 있습니다.

그러나 간혹 Open Props 조차 무겁게 느껴질 때가 있습니다.

단순하게 컬러 팔레트만 필요한 경우가 있단 말이죠.

Open Props에서 컬러 팔레트 부분에 설명을 보다보니 Open Color라는 오픈소스 라이브러리를 사용하고 있음을 알 수 있었습니다.

Open Color

Open Color는 오픈 소스 컬러 팔레트 라이브러리로, 일관된 디자인을 유지할 수 있도록 도와줍니다. 디자인 시스템 같은 것들을 구축할때 유용하게 좋겠죠.

10단계 표현되는 13가지의 색깔

컬러는 아래 목록과 같이 총 13가지가 제공되고 있습니다.

GRAY
RED
PINK
GRAPE
VIOLET
INDIGO
BLUE
CYAN
TEAL
GREEN
LIME
YELLOW
ORANGE

10단계로 표현되고 있어서 0부터 9라는 숫자로 할당 되어 있고, 예를 들어서 배경컬러를 violet의 6번째 단계 컬러를 사용하고 싶다면, CSS에서 아래와 같이 입력해주면 됩니다.

// open-color 파일 경로
@import 'path/to/open-color.css';

.box{ 
    background-color: var(--oc-violet-6);  
}

npm 라이브러리로 설치해서 사용할 수도 있고, 직접 다운로드해서 사용할 수도 있습니다.

SCSS ,LESS, STYLUS와 같은 CSS 전처리기에도 사용할 수 있고, TailwindCSS에 추가하는 방식으로 커스터마이징 하는 방법도 제공하고 있습니다.

뿐만 아니라 Adobe library, Photoshop swatches, Illustrator swatches , Sketch palette, Inkscape swatches, Mac OS palette, VS Code Snippets, Figma library 로 다양한 디자인 소프트웨어에서도 바로 적용할 수 있도록 컬러 스와치를 제공하고 있습니다.

정말 훌륭한 오픈소스 프로젝트입니다.
더 자세한 내용은 아래 링크에서 확인할 수 있습니다.