보통 사이트나 앱에 사용할 색상들은 미리 정의해서 사용을 합니다.
밝기와 채도는 같고 색상(Hue)만 다르게 구성된 컬러 팔레트를 결정하는 것은 어렵지 않습니다.
그런데 점점 흐려(밝아)지는 글자, 점점 진해(어두워)지는 배경 처럼 채도와 색상은 같지만 여러 단계의 밝기가 필요한 경우가 있습니다.
이때 글자·배경·테두리는 각각 서로 다른 단계의 밝기로 선언해야 합니다. 100%가 가장 밝은 밝기 수치라고 했을 때 흰색 위에서 96% 밝기의 배경색을 가진 상자는 티가 나지만 96% 밝기를 글자색에 적용하면 보이지가 않습니다.
또한 글자·배경·테두리는 각각 단독으로 사용하는 것이 아닙니다. 이 셋은 조합되어 사용됩니다. 각각의 색상을 선언 후 조합해 보면 배경에 글자가 보이지 않거나 배경과 선이 구분되지 않기도 합니다. 이를 조율하는 것은 쉽지가 않습니다.
글자·배경·테두리 각각 4단계의 밝기를 도입한다면 그 조합은 무려 64가지이며, 여기에 다크 모드까지 고려하면 64가지 조합을 두 벌 만들어야 합니다.
그래서 저는 글자·배경·테두리의 색상과 밝기 단계를 설정할 수 있고 모든 조합을 한 눈에 볼 수 있는 CLI 도구를 만들었습니다.
YAML 포맷의 설정 파일을 기반으로 CSS 색상 코드를 생성합니다.
라이트/다크 모드에서의 글자·배경·테두리의 모든 단계가 한 눈에 보이고 조합도 해볼 수 있는 미리보기 기능을 제공합니다.
부수적으로 이 프로그램은 로컬 LLM을 사용하여 AI와 짝(Pair) 프로그래밍으로 개발하였습니다. 코드를 어떻게 구현할지는 제가 지시하고 물리적 코딩 노가다는 AI 시켰습니다.
로컬 LLM 환경은 다음과 같습니다.
- CPU: Apple M3 Max 64GB
- 주 코딩 모델: Qwen3.6-35B-A3B
- 실제 사용하는 양자화된 모델: Qwen3.6-35B-A3B-oQ4e-fp16-mtp
- 주 LLM 실행기: oMLX
- 코딩 에이전트: Pi Coding Agent