10색을 주었음에도, AI는 절반밖에 칠하지 않았다

디자인 시스템에 10색 팔레트를 정성스럽게 정리하여 전달했습니다. AI는 그중 절반을 무시했습니다.

정확히 말하면, Claude, GPT, Gemini 3개 모델에 동일한 10색 토큰 (token)을 주고 동일한 대시보드 UI를 구현하게 한 결과, 실제로 생성된 CSS에 등장한 색상은 평균 5.3색이었습니다. 게다가 모든 모델이 '사용하는 색'과 '사용하지 않는 색'의 경향이 거의 동일했습니다.

"색을 늘리면 표현이 풍부해진다"는 것은 인간의 직관입니다. AI에게는 오히려 그 반대이며, 선택지가 늘어날수록 선택의 폭은 좁아집니다.

이 기사는 그 현상을 실측한 기록입니다.

실험 설계: 10색 × 3개 모델 × 5개 UI

저는 다음과 같은 설정으로 검증했습니다.

전달한 10색 팔레트 (CSS 변수로 _tokens.css에 정의)

지시는 공통 프롬프트(prompt) 1개입니다. "이 토큰을 사용하여 대시보드 스타일의 카드 UI를 구현해 주세요. 카드 5장, 헤더, CTA 버튼, 상태 배지(status badge)를 포함할 것". 추가 힌트는 주지 않고, 생성된 CSS/HTML을 정적으로 분석하여 어떤 토큰이 몇 번 참조되었는지 계산합니다.

이를 Claude Sonnet / GPT-5 / Gemini 2.5 3개 모델, 각각 서로 다른 5개의 UI 과제 (대시보드, 랜딩 페이지, 폼, 테이블, 알림 센터)로 진행했습니다. 총 15개 샘플입니다.

결과: 10색 × 3개 모델 사용 히트맵 (Heatmap)

생성된 CSS를 파싱(parse)하여 각 토큰의 참조 횟수를 계산한 결과를 집약합니다.

○는 "해당 UI에서 최소 1회 사용됨", -는 "한 번도 사용되지 않음"을 나타냅니다. 5개 UI를 합친 집약 뷰입니다.

미사용 색상이 완전히 일치한 5색: brand-muted, success, warning, 그리고 border와 text-secondary 중 하나 (모델에 따라 다름).

3개 모델 평균 사용 색상 수는 5.3색이었습니다. 전달한 10색 중 **53%**만 살아남았고, 47%는 죽었습니다.

흥미로운 점은 "어떤 색이 버려지는가"가 모델을 가로질러 일치했다는 것입니다. 만약 무작위로 5색씩 선택되었다면 이렇게 깔끔하게 겹치지 않았을 것입니다.

왜 절반의 색상이 버려졌는가

미사용 토큰을 살펴보며 공통점을 발견했습니다.

버려진 3색의 특징

• brand-muted (#fef7ed): surface (#fafaf9)와의 차이가 너무 작습니다. 인간이라면 "섹션 배경으로 사용한다"라고 판단할 수 있지만, AI에게는 surface로 충분해 보입니다.
• success (#16a34a): 상태 표현 색상이지만, AI가 생성한 UI에는 애초에 "성공 계열 상태"를 표현하는 요소가 적습니다. 카드에 "활성(active)" 라벨을 붙이더라도 accent 색으로 칠해버립니다.
• warning (#d97706): accent (#ea580c)와 계통이 비슷한 오렌지색입니다. AI가 보기에는 accent의 아종(subspecies)으로만 보이며, 통합되어 accent 쪽으로 흡수됩니다.

즉, AI는 "인접한 색은 같은 역할", "시맨틱한 색 (semantic color, success/warning)은 구체적인 UI 요소가 명시되지 않는 한 호출하지 않는다"라는 두 가지 절약 규칙에 따라 움직이는 것으로 보입니다.

이것은 악의적인 것이 아닙니다. AI는 "주어진 소재로 완성도 높은 아웃풋을 최단 시간에 내놓는다"라는 최적화(optimization)를 수행하고 있습니다. 선택지가 너무 많으면, 확실히 안전한 선택으로 쏠리게 됩니다.

또 다른 흥미로운 관찰 결과가 있었습니다. border와 text-secondary는 "모델에 따라 사용하는 방식이 다른" 색상입니다. Claude는 border를 적극적으로 사용하여 카드에 테두리를 그리지만, Gemini는 대부분 shadow로 경계를 표현하며 border를 호출하지 않습니다. 반대로 GPT는 text-secondary를 무시하고 text-primary의 opacity(불투명도)를 사용하여 보조 문구를 만듭니다.

모든 모델이 "경계"와 "보조 문구"라는 기능 자체는 구현하지만, 이를 위한 도구는 선호하는 하나를 선택합니다. 디자인 토큰(Design Token)을 전달한 설계자 입장에서는 배신감을 느낄 수 있지만, 모델 내부의 "자주 생성하는 CSS 패턴"에 가까운 것이 우선시된다고 생각하면 납득할 수 있습니다.

Choice Overload의 역현상

심리학자 Iyengar와 Lepper가 2000년에 발표한 "When Choice is Demotivating"의 유명한 잼 실험이 있습니다 [1]. 시식 코너에 6종류의 잼을 진열했을 때와 24종류를 진열했을 때, 구매율은 24종류일 때가 10분의 1로 떨어졌습니다. 선택지가 많으면 사람은 결정을 내리지 못해 구매하지 않는다는 결과입니다.

제가 관찰한 AI의 거동은 이와 비슷하면서도 조금 다릅니다.

인간은 "선택지가 많으면 선택하지 않는다". AI는 "선택지가 많으면 일부만을 반복해서 선택한다".

결정하지 못해서 이탈하는 것이 인간이라면, 결정 비용을 최소화하기 위해 색상을 좁히는 것이 AI입니다. 팔레트가 10색이 되는 순간, AI는 "안전하게 배치할 수 있는 5색"을 선택하고 나머지 5색은 생성물에 등장하지 않습니다.

서두에 쓴 역설(Paradox)의 정체가 바로 이것입니다. 팔레트의 풍부함은 자유도가 아니라, 무시되는 색상의 재고로서 축적됩니다.

저는 이를 **색 수렴 (Color Convergence)**이라고 부르고 있습니다. 전달된 색 공간(Color Space)의 넓이와 관계없이, AI는 자신에게 다루기 쉬운 5색 전후로 자연스럽게 수렴시킵니다. 이러한 현상이 존재하는 한, 팔레트를 풍부하게 만드는 것은 AI 생성 UI의 변동성을 늘리는 수단이 되지 않습니다. 오히려 "사용되지 않는 색"만 늘어나는 결과를 초래합니다.

Anthropic의 frontend-design skill이 "4-6색"을 권장하는 이유

2026년 시점에서 공개된 Anthropic의 frontend-design skill 가이드라인에는 팔레트에 대해 다음과 같이 적혀 있습니다. "4-6개의 이름이 지정된 hex 값으로 구성된 배색을 정의하라" [2].

10개도 8개도 아닌 4-6개. 이는 저의 실험 결과와 일치합니다. AI가 확실하게 사용할 수 있는 색상 수의 상한선이 대략 이 범위인 것입니다.

shadcn/ui의 기본 테마도 같은 사상으로 만들어졌습니다. background / foreground / primary / secondary / muted / accent / destructive / border의 8개 변수 구성이지만, 실용적으로는 더욱 압축하여 사용됩니다. 테마 설계 숙련자일수록 전달하는 토큰을 좁히는 경향이 있습니다.

대책: "늘려서 기대"하기보다 "줄여서 강제"하기

반년 동안 AI에게 프론트엔드 구현을 시키며 알게 된 점을 대책으로 정리합니다.

대책 1: 팔레트를 5색으로 압축해서 전달하기

"일단 warning도 정의해 둘까" 하는 식의 '일단'을 버려야 합니다. 사용하지 않는 색을 전달하는 것은 AI에게 노이즈입니다. 대시보드 용도라면 primary / accent / surface / text / border의 5색만으로도 충분히 구성할 수 있습니다.

시맨틱 컬러(Semantic Color)가 필요하다면, 별도 파일로 분리하여 "사용할 UI에만 전달"하는 방식으로 전환합니다. 폼 유효성 검사(Form Validation) 화면에는 error를 추가하고, 알림 센터에는 success/warning을 추가하는 식입니다.

대책 2: 사용하길 원하는 색상은 이름으로 강제하기

토큰 이름을 범용적으로 설정하면, AI는 자신의 재량으로 색상을 선택하기 시작합니다. 반대로 UI 요소와 1대1로 이름을 매칭하면 AI는 도망갈 수 없습니다.

/* ✗ 범용: AI가 사용할지 말지 망설임 */
--color-warning: #d97706;
/* ✓ 강제: AI가 사용할 수밖에 없음 */
...

"배지(Badge)·대기 상태(Pending)의 배경색"까지 이름으로 고정해 버리면, AI는 멋대로 accent 쪽으로 통합하지 않습니다. 토큰 이름이 디자인 의도를 전달하는 벨트 역할을 하게 됩니다.

대책 3: 60-30-10 배분을 명시적으로 지시하기

배색의 고전적인 규칙에는 60-30-10 규칙이 있습니다. 60%를 지배색(Dominant color), 30%를 보조색(Secondary color), 10%를 강조색(Accent color)으로 할당하는 비율입니다.

AI 프롬프트에 이 비율을 덧붙이는 것만으로도 생성물의 배색 밸런스가 명확하게 바뀝니다. "brand-primary를 CTA와 주요 헤딩에만 사용(10%), surface와 surface-raised로 전체의 60%를 구성, text-primary/secondary로 30%를 구성"이라고 작성하면, AI는 지시된 비율에 가깝게 맞추려고 노력합니다.

대책 4: 미사용 토큰 경고를 CI에 통합하기

대책 1-3을 잘 지켰다고 생각해도, 다음 스프린트에서 정신을 차려보니 success 토큰이 아무에게도 호출되지 않은 채 정의 파일 속에 잠들어 있는 일은 흔히 발생합니다. 저는 앞서 언급한 Python 스크립트를 가볍게 확장하여 CI에 배치했습니다. 정의되어 있음에도 CSS/TSX에서 한 번도 참조되지 않는 토큰이 있다면 경고를 띄우는, 아주 단순한 체크입니다.

"미사용이 악(惡)이다"라고 말하려는 것이 아니라, "미사용이 남아 있다면 AI에게 전달할 팔레트에서 제외해도 좋다"라는 판단의 트리거로 삼고 있습니다. 토큰을 늘릴 때는 신중하게, 줄일 때는 대담하게. 이러한 비대칭적인 운용이 AI 시대의 디자인 시스템에는 적합하다고 느낍니다.

실측 재현 절차

동일한 검증을 시도해보고 싶은 분들을 위해 간단한 스크립트를 올려둡니다. 생성된 CSS 내의 토큰 참조 횟수를 세는 것뿐인 Python 스크립트입니다.

import re
from pathlib import Path
TOKENS = [
...

samples/에 각 모델이 생성한 CSS를 나열하면 사용 횟수가 목록으로 출력됩니다. 1회라도 사용된 색은 ○, 0회는 -로 집계하면 이 기사의 히트맵을 재현할 수 있습니다.

나의 운용 방식: "AI에게 전달할 팔레트"를 분리하기

현재 저는 디자인 시스템의 컬러 토큰을 두 계층으로 나누어 관리하고 있습니다.

• 완전판 팔레트: 사람이 편집 및 확인하는 용도. 10~15색 존재.
• AI 전달용 팔레트: 생성 태스크에 따라 4~6색을 선발. 프롬프트와 함께 전달.

이렇게 2계층으로 나눈 뒤부터 생성된 UI의 재작업이 눈에 띄게 줄었습니다. "왜 success 색상을 써주지 않느냐"며 한탄하는 시간이 사라졌습니다. 처음부터 전달하지 않으니 기대도 하지 않게 된 것입니다.

구체적으로는 Figma의 컬러 스타일을 두 그룹으로 나누고 있습니다. brand/ 그룹은 AI 전달용 5색, extended/ 그룹은 사람의 수작업으로만 사용하는 나머지 색상들입니다. 프롬프트 생성 스크립트는 brand/만 읽어 들여 CSS 변수로서 AI에게 전달합니다. 운용이 분리된 순간, AI의 생성물을 바라볼 때 느꼈던 작은 스트레스가 사라졌습니다.

디자인 토큰을 전달할 때의 의식은 "있는 것을 전부 전달한다"에서 "사용해주길 바라는 것만 전달한다"로 전환하는 것이 좋습니다. 이것이 지난 반년 동안의 결론입니다.

관련된 검증으로, AI에게 이미지의 컬러 코드를 물었을 때의 정확도를 측정한 글도 있습니다: [AI에게 색을 물어서는 안 되는 이유 -- Vision Model의 색 인식 한계와 정확하게 취득하는 방법]

더 넓은 의미에서 "AI 생성 UI가 왜 모두 똑같아 보이는가"를 추적한 검증은 이쪽을 참고하세요: [Anthropic의 frontend-design skill을 1주일간 몰아 썼더니, AI Slop UI에서 탈출할 수 있었다]

요약: 색은 "전달하는 수"가 아니라 "전달하는 방법"의 문제

• 10색을 전달해도 AI가 실제로 사용하는 것은 평균 5.3색
• 버려지는 색은 모델을 관통하여 일치함: 세만틱 컬러 (success/warning) 및 지배색에 가까운 연한 색
• 원인은 AI의 절약 규칙: 인접한 색을 통합하고, 명시되지 않은 의미는 호출하지 않음
• Anthropic frontend-design skill이 "4~6색"을 권장하는 것은 이러한 현실에 맞춘 기준
• 대책: 팔레트를 5색으로 압축하기, 이름으로 용도를 강제하기, 60-30-10 비율을 프롬프트에 적기

선택지를 늘려주면 AI가 알아서 잘해줄 것이라는 생각은 환상입니다. 전달하는 색을 좁히고, 이름으로 사용법을 강제하십시오. 이것이 AI 시대의 배색 토큰 설계의 핵심입니다.

즐겁게 작업합시다.

Discussion