컬러 시스템, HSL vs RGB: AI로 접근성까지 잡는 팔레트

솔직히 말해봐요. 컬러 팔레트 짜는 거, 정말 피곤하지 않나요? 특히 AI 스타트업에서 제품 관리(PM)를 하면서 제 손으로 직접 코드를 짜는 건 아니지만, 디자이너와 개발자 사이에서 매일 같이 컬러에 대한 씨름을 해야 했어요. 머릿속으로는 완벽한 컬러 시스템을 그리지만, 막상 현실로 구현하려 하면 어디서부터 잘못된 건지 알 수 없는 오류와 마주치기 일쑤였죠. 특히 시맨틱 컬러, 즉 의미를 담은 컬러를 정의하는 작업은 끝없는 삽질의 연속이었어요. '이 버튼은 왜 이렇게 눈이 아프지?', '이 텍스트는 배경색 때문에 안 보이는 거 아냐?' 같은 질문들이 머릿속을 떠나지 않았죠.

저는 6년차 디자이너 출신 PM입니다. 개발자들의 언어를 이해하고, 때로는 그들보다 더 집요하게 기술적인 문제를 파고드는 것을 즐기죠. 이번 글에서는 제가 겪었던 컬러 시스템 설계의 고충과, HSL과 RGB의 차이점을 명확히 이해하고, 나아가 AI 도구를 활용해 접근성까지 고려한 팔레트를 만드는 실질적인 방법을 공유하려고 합니다. 더 이상 컬러 때문에 밤새 고민하지 마세요. 저와 함께 '컬러 시스템'이라는 괴물을 길들여 봅시다.

HSL vs RGB: 무엇이 우리의 밤을 더 길게 만들었나?

처음에는 RGB만 알면 되는 줄 알았어요. 웹에서 보이는 모든 색깔은 결국 빨강, 초록, 파랑 빛의 조합이니까요. 디자이너 시절에는 스포이드 툴로 찍어서 쓰는 게 전부였죠. 하지만 AI 스타트업에서 제품을 만들고, 브랜드 아이덴티티를 구축하며, 무엇보다 '일관성'이라는 끔찍한 단어를 마주하면서 RGB의 한계를 절감했습니다. RGB는 **값(Value)**으로 색을 표현하죠. 예를 들어 #FF0000은 빨강, #00FF00은 초록, #0000FF는 파랑입니다. 이 조합으로 모든 색을 만들 수 있지만, 문제는 **