피드로 돌아가기
Dev.toFrontend
원문 읽기
How We Generated 3,066 Colors Algorithmically — No Database Needed
ColorArchive가 수동 큐레이션 팔레트 대신 HSL 기반 알고리즘으로 3,066개 색상을 빌드 타임에 생성하면서 데이터베이스 제거
AI 요약
Context
기존 색상 도구들은 수백 개의 손선택 팔레트를 데이터베이스나 JSON 파일에 저장하고 있었다. 수동 큐레이션은 선택지가 너무 적거나 (Material Design 256색은 갭이 있음) 구조화되지 않은 채로 네비게이션이 어려웠다.
Technical Solution
- 색상 공간을 3개 차원으로 구성: 36개 명명된 색상근(Crimson, Ruby 등) + 14개 명도 밴드(Veil, Whisper, Nocturne, Ink) + 6개 채도 밴드(Faint, Muted, Pure)로 HSL 모델 매핑
- 단일 flatMap 함수로 3,066개 색상(36 × 14 × 6 = 3,024 색상 + 중성 회색 42개) 생성: 각 색상에 결정론적 ID 할당 (예: amber-pearl-muted)
- 색상 간 관계를 수학으로 계산: 유사색(인접 색상근), 보색(180도), 톤 컴패니언(명도·채도 동일, 색상근 변화)
- Next.js generateStaticParams()로 3,066개 색상 상세 페이지를 빌드 타임에 정적 HTML로 사전 렌더링
- 내보내기 형식 생성을 선언적으로 처리: CSS 커스텀 프로퍼티, Tailwind 설정, Figma 토큰, SwiftUI Color(), Jetpack Compose 값을 동일한 데이터셋에서 map() 호출로 출력
Impact
빌드 시간 수 분 정도 소요되며 모든 색상 페이지는 CDN에서 인스턴트 로딩됨. 3,066개 레코드 필터링이 메모리 내 배열 연산으로 충분해 검색 서버 불필요.
Key Takeaway
명사형 명명 규칙(Veil, Nocturne, Pure 등)이 수치 레이블보다 설계자 기억력을 크게 향상시킨다. 알고리즘 기반 시스템이 단순해 보여도 빌드 파이프라인과 페이지 아키텍처는 초기부터 확장성 있게 설계해야 한다.
실천 포인트
색상, 토큰, 설정 같이 조합 가능한 다차원 데이터를 다루는 서비스에서 고정 데이터베이스 대신 재현 가능한 생성 함수로 정의하면 내보내기·관계 계산·컬렉션 중복 제거를 모두 선언적으로 처리할 수 있다. HSL은 OKLCH보다 브라우저 호환성이 높으므로 설계자 직관성과 현재 지원도를 동시에 고려해서 색상 공간을 선택해야 한다.