색감각 없는 개발자라서 팔레트 뽑아주는 도구를 만들었습니다
스페이스바 누르면 어울리는 5색 조합이 나오는 Gradient Lab. 색 이론은 코드로 배웠습니다.
자랑 포인트
- 색 변환과 6종 조화 알고리즘(유사색·삼각·보색·분할보색·사각·단색조)을 외부 라이브러리 없이 순수 함수로 직접 구현했어요.
- 스페이스바 한 번이면 조화 팔레트 생성, 색 잠금으로 마음에 드는 색만 고정 — 디자인 흐름이 끊기지 않아요.
- 서버·DB 없는 완전 클라이언트 앱이라 빠르고, localStorage로 작업 상태가 새로고침해도 그대로 남아요.
저는 개발은 하는데 색을 못 고릅니다. 사이드 프로젝트 만들 때마다 버튼 색 하나 정하는 데 30분씩 쓰고, 결국 매번 파란색으로 돌아와요. 개발자분들 공감하실 겁니다. 그래서 색 조합을 대신 뽑아주는 도구를 만들었습니다. Gradient Lab이라고, 스페이스바 누르면 어울리는 5색 팔레트가 나오는 물건이에요.
동작은 단순합니다. 스페이스바를 누를 때마다 새 팔레트가 나오고, 마음에 드는 색이 하나 걸리면 자물쇠로 잠급니다. 그럼 그 색은 유지된 채 나머지만 다시 뽑혀요. 이 잠금-리롤을 반복하다 보면 어느 순간 "어 이거 괜찮은데" 싶은 조합이 나옵니다. 색 고르기가 고민이 아니라 뽑기가 되는 거죠.
뽑기라고 해서 완전 랜덤은 아니고, 색상환 기반 조화 규칙 6가지(유사색·보색·분할보색·삼각·사각·단색조)로 계산해서 나옵니다. 이 부분을 라이브러리 안 쓰고 직접 구현했는데, HEX를 HSL로 바꾸고 색상환을 몇 도씩 돌리는 순수 함수들이에요. 만들면서 색 이론을 처음 제대로 공부했습니다. 디자인 책으로는 안 읽히던 게 코드로 짜니까 이해되더라고요. 보색이 왜 보색인지 이제 압니다. 180도였어요.
완성된 팔레트는 블록 클릭 한 번으로 HEX가 복사되고(HSL 값도 같이 보여줍니다), CSS 변수나 Tailwind 컬러 설정으로도 내보낼 수 있습니다. 그라데이션 만드는 화면도 있어서 각도 슬라이더 돌려가며 linear-gradient CSS를 바로 뽑아갈 수 있고요. 사실 이 기능 때문에 이름이 Gradient Lab인데, 만들다 보니 팔레트 쪽이 더 커졌습니다. 이름은 그냥 두기로 했어요.
Next.js(App Router) + TypeScript + Tailwind v4 조합이고 서버는 없습니다. 팔레트, 잠금 상태, 그라데이션 각도까지 localStorage에 저장돼서 새로고침해도 작업하던 그대로예요. 데스크톱에선 색 블록이 가로로, 모바일에선 세로로 펼쳐집니다.
색상 대비(접근성) 체크 기능을 넣을까 고민하다가 일단 뺐는데, 만들고 보니 이게 제일 아쉽습니다. 배경색이랑 텍스트색 조합이 WCAG 기준을 통과하는지 보여주는 기능인데, 다음 업데이트 1순위로 올려놨어요. 팔레트 공유 URL도 만들고 싶고요. 역시 도구는 만들고 나서가 진짜 시작인 것 같습니다.
요즘은 사이드 프로젝트 시작할 때 여기서 팔레트부터 뽑고 들어갑니다. 색 고민이 30분에서 3분으로 줄었어요. 저처럼 색감각이 아쉬운 개발자분들, 색 조합 고민될 때 한번 눌러보세요.
- 라이브 데모: https://gradient-lab-chi.vercel.app
- GitHub: https://github.com/seokjinjeong-cod/gradient-lab
덧. 스페이스바 연타하다 보면 시간이 순식간에 사라지니까 마감 직전엔 열지 마세요. 색 고르려고 켰다가 30분 동안 뽑기만 하고 있는 저를 발견한 적이 한두 번이 아닙니다. 경험담입니다.