RSS
디자인 시스템

AI 디자인 스킬의 모순: 안티 slop 규칙이 새 기본값이 되는 과정

작성자
듀오랩스 대표·8분 읽기

AI 코딩 에이전트에게 랜딩 페이지를 만들라고 하면 거의 같은 화면이 나옵니다. 보라색에서 파란색으로 넘어가는 그라디언트, 모든 글자에 Inter, 가운데 정렬된 히어로 아래 둥근 카드 세 장. 그래서 "AI 티 안 나게" 해 주는 디자인 스킬이 GitHub에서 가장 빠르게 스타를 모으는 분야 중 하나가 됐습니다. 9월 말 기준 impeccable은 7만 개, taste-skill은 9만 개를 넘었습니다.

그런데 이 스킬들의 원문을 나란히 놓고 읽으면 이상한 점이 보입니다. 한 스킬이 해결책으로 권하는 것을 다른 스킬은 AI 티로 분류합니다.

금지 목록을 따르면 AI 티가 사라진다는 오해

디자인 스킬 대부분은 하지 말 것의 목록으로 시작합니다. Inter를 쓰지 마라, 보라색 그라디언트를 쓰지 마라, 카드 안에 카드를 넣지 마라. 목록을 지키면 AI가 만든 것처럼 보이지 않으리라는 기대가 깔려 있습니다.

작은 스킬 avoid-ai-design의 README는 이 기대가 어떻게 무너지는지를 한 문단으로 보여 줍니다. 모델에게 AI 티가 덜 나게 고쳐 달라고 하면 다음번의 똑같은 페이지가 나온다는 것입니다. 따뜻한 크림색 배경에 테라코타 강조색, 또는 거의 검은 배경에 형광 초록 하나, 전부 대문자인 고정폭 라벨, 제목에서 한 단어만 색을 바꾸기, 01 / 02 / 03으로 번호 붙인 기능 소개.

README는 이것을 "AI 디자인은 두 번 수렴한다"고 부릅니다. 그리고 이 스킬의 첫 데모도 바로 그 두 번째 기본값에 빠졌고, 그래서 다음 버전부터 그것들을 이름으로 검사하게 됐다고 적어 두었습니다.

보라색 그라디언트 다음에 온 두 번째 기본값

Anthropic도 같은 현상을 인정합니다. Claude Code의 공식 frontend-design 스킬은 지금 AI가 만든 디자인이 모이는 특징 다섯 가지를 직접 나열합니다. 그 첫 번째가 크림색 배경(#F4F1EA 근처)에 대비가 강한 세리프 제목, 테라코타 강조색(#D97757 근처)입니다. 스킬은 이 색이 Anthropic 자신이 Claude 인터페이스에 쓰는 강조색이라서 사용자의 작업물에 나타나면 AI 티로 읽힌다고 설명합니다.

나머지도 구체적입니다. 거의 검은 배경에 형광 초록이나 주홍 하나, 가는 선과 모서리 없는 신문 조판 흉내, 같은 둥근 카드와 같은 옅은 회색 그림자를 반복하는 SaaS 카드 세트, 그리고 주제와 상관없이 붙는 장식들입니다. 모든 제목 위의 대문자 라벨, 가운데 점으로 이은 메타 문자열, 버튼 글자 끝의 화살표가 여기에 들어갑니다.

avoid-ai-design은 여기에 폰트까지 더합니다. Space Grotesk, Geist, Instrument Serif, Fraunces를 "세련된 무료 폰트 세트"라고 묶어 AI 티 목록에 올렸습니다. Inter를 피하라는 조언을 받은 모델이 다음으로 고르는 폰트들입니다.

두 스킬이 정반대로 말하는 검은색

가장 선명한 모순은 검은색입니다. impeccable은 README의 금지 목록에 순수한 검정이나 회색을 쓰지 말고 항상 색을 섞으라(always tint)고 적었습니다. Anthropic의 frontend-design은 AI 티 목록의 다섯 번째 항목에 검정 대신 쓰인 색 섞인 거의-검정(#0B0B0B, #111)을 넣었습니다.

impeccable은 README에서 스스로 frontend-design에서 출발했다고 밝힌 프로젝트입니다. 같은 뿌리에서 나온 두 스킬이 1년도 안 되어 같은 색을 두고 정반대의 판정을 내리고 있습니다. 저는 이것을 어느 한쪽이 틀렸다는 뜻으로 읽지 않습니다. 금지 목록이 얼마나 빨리 낡는지를 보여 주는 증거로 읽습니다.

금지 목록이 새 기본값이 되는 구조

원리는 단순합니다. 모델은 확률이 가장 높은 선택으로 기웁니다. "Inter를 쓰지 마라"는 가장 확률 높은 선택 하나를 지울 뿐이고, 모델은 그다음으로 확률 높은 선택으로 옮겨 갑니다. 같은 금지 목록을 받은 수많은 모델이 같은 두 번째 선택에 도착합니다.

스킬이 인기를 얻을수록 이 효과는 커집니다. 스타 수가 곧 설치 수는 아니지만, 수많은 프로젝트가 같은 스킬을 쓰면 그 프로젝트들이 같은 두 번째 기본값에 모입니다. 그 기본값이 충분히 흔해지면 누군가 그것을 다음 금지 목록에 올립니다. 목록은 계속 길어지지만 수렴은 멈추지 않습니다.

세 스킬이 결국 같은 곳으로 가는 결론

흥미로운 것은 세 스킬이 금지 목록에서는 갈라져도 결론에서는 같은 곳으로 간다는 점입니다.

frontend-design은 코드를 쓰기 전에 색 4~6개, 폰트와 역할, 레이아웃 개념을 담은 작은 토큰 체계부터 세우라고 합니다. 그리고 그 계획이 비슷한 요청에 누구나 내놓을 기본값인지 브리프에 비춰 검토한 뒤에야 만들라고 합니다. impeccable은 처음에 제품의 사실을 PRODUCT.md에, 시각 체계를 DESIGN.md에 따로 기록하게 합니다. avoid-ai-design은 여러 페이지를 만들 때 방향을 DESIGN.md에 한 번 적어 두어 두 번째 페이지가 첫 페이지에서 벗어나지 못하게 합니다. 그리고 방향은 스타일 목록이 아니라 제품에서 끌어내라고 합니다.

셋 다 같은 말을 합니다. 기본값을 피하는 방법은 다른 기본값이 아니라 결정입니다. 그리고 그 결정을 파일로 남겨 매번 다시 고르지 않게 하라는 것입니다.

결정을 파일로 남긴 것이 디자인 시스템

그 파일에는 이미 이름이 있습니다. 디자인 시스템입니다. 색 토큰, 타이포 스케일, 간격, 컴포넌트 규칙을 정해 두고 모든 화면이 그것을 따르게 하는 일은 AI 이전부터 있었습니다. 달라진 것은 이제 그것을 읽는 쪽에 에이전트도 있다는 점입니다.

저는 여기서 순서가 중요하다고 봅니다. 디자인 시스템이 있는 팀이라면 에이전트에게 "취향을 가져라"보다 "이 토큰과 이 컴포넌트만 써라"가 훨씬 강하게 듣습니다. 모델이 두 번째 기본값을 고를 여지 자체가 없어지기 때문입니다. 범용 디자인 스킬은 디자인 시스템이 아직 없는 새 프로젝트에서 첫 결정을 돕는 도구이고, 이미 결정한 팀에는 오히려 그 결정을 흔드는 목소리가 될 수 있습니다. frontend-design이 과감한 미적 모험을 권하는 부분이 그렇습니다. 토큰을 어떤 순서로 잡는지는 디자인 시안을 웹으로 옮기는 순서에 따로 정리했습니다.

검사기가 할 수 있는 일과 없는 일

그렇다고 이 스킬들에서 가져올 것이 없다는 뜻은 아닙니다. 가장 오래 쓸모 있는 부분은 규칙보다 검사기입니다. impeccable은 LLM 없이 도는 결정적 검사 규칙 61개를 CLI와 브라우저 확장으로 제공합니다. avoid-ai-design은 67가지 특징을 목록으로 두고, 소스에서 확실히 잡히는 것은 의존성 없는 스크립트로 검사합니다. 심각한 항목이 나오면 종료 코드 2를 돌려주니 CI에 바로 걸 수 있습니다.

avoid-ai-design의 설계에서 제가 가장 좋게 본 부분은 예외 처리입니다. 브리프가 일부러 요구한 선택이면 주석 한 줄로 그 항목을 검사에서 뺄 수 있습니다. 그리고 README는 이렇게 선을 긋습니다. 이 특징들은 아무도 고르지 않은 기본값의 증거일 뿐, 모델이 그 페이지를 만들었다는 증거가 아니라는 것입니다.

이 문장이 이 흐름 전체를 정확하게 요약한다고 저는 봅니다. 크림색 배경이 문제인 것이 아니라, 아무도 그것을 고르지 않았다는 것이 문제입니다. 디자인 시스템에 크림색을 적어 둔 팀의 크림색은 AI 티가 아니라 그 팀의 색입니다.

마지막 수정:

공유하실 때는 출처(Duolabs)와 원문 주소를 표시해 주세요.