AI가 UI를 만들었을 때는 언제나 알 수 있습니다. 하지만 항상 그 '이유'를 말할 수 있는 것은 아닙니다.
저는 StyleSeed를 관리하고 있습니다. 이는 Claude Code, Cursor, Codex가 자동으로 읽을 수 있는 오픈 소스 디자인 규칙 세트로, AI가 만든 UI가 생성된 것처럼 보이지 않게 해줍니다. 지난 몇 달 동안 저의 실제 업무는 그 "이유"를 기록하는 것이었습니다. 모든 특징(tell)을 목록화하고, 각각을 에이전트(agent)가 준수할 수 있는 규칙으로 변환한 다음, 그 규칙들이 유효한지 확인하기 위해 직접 사용(dogfooding)해 보는 것이었습니다.
하지만 규칙들은 계속해서 유효하지 않았습니다. 세 번이나 저를 당황하게 만들 정도로 말이죠. 이 포스트는 바로 그 이야기에 관한 것입니다. 왜냐하면 그 실패들이 규칙들보다 더 유용하다는 것이 밝혀졌기 때문입니다.
카탈로그: 1세대 특징들
이것들은 디자이너가 아닌 사람들도 모두 알아차리는 것들입니다:
- 기본 인디고(The default indigo).
#4F46E5 / #5E6AD2 — Tailwind와 모든 에이전트가 편안하게 느끼는 색상입니다. 어떤 브랜드도 이 색상을 선택하지 않았지만, 가이드가 없는 모든 에이전트는 이 색상을 내보냅니다.
- 연한 칩 안의 아이콘(The icon-in-a-pale-chip). 모든 기능 카드에 파스텔 배경의 동일한 둥근 사각형 안에 들어있는 일반적인 Lucide 라인 아이콘이 반복됩니다. 하나는 괜찮지만, 일곱 개는 특징이 됩니다.
- 무지개색 상태 목록(Rainbow status lists). 모든 행에 서로 다른 색상의 배지가 붙습니다. 회색이어야 할 "일반(normal)" 상태를 포함해서 말이죠. 색상은 "여기를 보세요"라는 의미를 가져야 합니다. 모든 행에 색을 칠하면 아무것도 의미가 없게 됩니다.
- UI 아이콘으로서의 이모지(Emoji as UI icons). 🚗🧺⭐는 각각 다섯 가지의 통제되지 않은 색상을 주입하여 단일 강조(single-accent) 규칙을 즉시 깨뜨립니다.
- 모든 요소 중앙 정렬 + 그라데이션 헤드라인 + ✨ 배지. 전형적인 히어로 섹션(stock hero) 스타일입니다.
- 4개의 동일한 KPI 카드. 3개의 동일한 가격 책정(pricing) 열. 1440px 화면에서의 14px 본문 텍스트. 순수한 #000 텍스트.
개별적으로는 각각 방어할 수 있는 요소들입니다. 하지만 이들이 모이면 "AI가 이것을 만들었다"는 느낌을 증폭시킵니다.
그래서 저는 모델이 단순히 패턴 매칭을 하는 대신 규칙을 적용할 수 있도록, 각 요소에 대한 근거와 함께 이를 금지하는 규칙을 작성했습니다. 그러고 나서 테스트를 진행했습니다.
실패 #1: 제가 만든 규칙이 오히려 무지개를 '가르치고' 있었습니다
모바일 대시보드를 직접 사용(Dogfooding)해 본 결과, 상태 목록이 무지개색으로 나타났습니다. 이는 프로젝트가 방지하고자 했던 바로 그 현상이었습니다. 모델의 실패를 예상하고 원인을 파고들던 중, 제가 작성한 DESIGN-LANGUAGE.md 파일의 규칙 65번에서 이를 발견했습니다.
목록의 상태(status states)를 다양하게 변화시켜 **색상의 다양성을 통한 시각적 흥미(visual interest)**를 유발할 것.
저는 말 그대로 에이전트에게 무지개색 목록을 만들라고 지시하고 있었습니다. 에이전트는 제 규칙을 완벽하게 따랐던 것입니다. 규칙이 틀렸던 것이죠.
Before: every status row a different color,
규칙 65번을 다시 작성하고(상태 색상 = 심각도(severity), 장식용 사용 금지), 동일한 빌드를 다시 실행했습니다. 결과는 두 개의 회색 "정상(normal)" 행, 한 개의 호박색(amber), 한 개의 빨간색 행이 나왔습니다. 동일한 에이전트, 동일한 프롬프트였지만 오직 규칙만 바뀌었을 뿐입니다.
실패 #2: 제 랜딩 페이지가 제가 만든 품질 게이트(quality gate)에서 58/100점을 받았습니다
StyleSeed는 점수가 매겨지는 품질 게이트(quality gate)를 제공합니다. 에이전트가 규칙에 따라 UI를 검토하고, 사용자에게 보여주기 전에 최소 80/100점 수준까지 수정합니다. 어느 시점에 저는 당연하면서도 불편한 일을 저질렀고, StyleSeed 자체의 랜딩 페이지에 이 게이트를 실행했습니다.
58/100점. "모든 카드에 연한 칩(chip) 형태의 아이콘을 배치"한다는 헤드라인 카피를 사용한 페이지에 정작 12개의 아이콘 칩이 박혀 있었습니다. 4가지의 강조 색상(accent colors), 곳곳에 배치된 11~13px 크기의 텍스트까지. 리뷰어라면 "너 자신부터 고쳐라(physician, heal thyself)"라는 캡션을 달아 스크린샷을 찍었을 것입니다.
우리는 통과를 위해 페이지를 다시 구축했습니다(강조 색상 하나로 제한, 칩 제거, 타이포그래피 하한선 충족). 하지만 교훈은 명확했습니다. 일관성 규칙(coherence rules)은 스스로 강제되지 않습니다. 게이트는 여러분의 마케팅 페이지를 포함한 모든 것에 실행되어야 합니다.
실패 #3: 탈출구(escape hatches)가 클리셰가 되었습니다
이 부분은 제가 진심으로 흥미롭다고 느끼는 지점입니다. 1세대 AI 생성물 특유의 징후들을 금지하고 나면, 에이전트들은 모두 동일한 출구로 도망치게 됩니다. 그리고 그 출구들은 다음 세대의 징후가 되어가고 있습니다:
- **유령 인덱스 번호(Ghost index numbers)**가 모든 아이콘 칩을 대체함
- 모든 KPI에 동일하게 반복되는 대문자 오버라인 + 큰 숫자 카드
- 모든 제품 사이트의 텍스트 왼쪽 / 시각적 오른쪽 히어로 섹션과 두 개의 피일(pill) CTA
- 그리고 과도한 경향: '평범함'에서 **'구식임'**으로 탈출하는 것 — 모든 것에 베이지색 종이 배경 + 세리프체를 사용하는데, 이는 읽는 것을
- 코드 작성 전 제약 사항 (Constraints before code). 에이전트가 매 프롬프트마다 다시 읽는
STYLESEED.md 잠금 장치(분위기, 핵심 색상, 글꼴, 표면(surface))를 설정합니다. 잠금 장치가 없으면 스타일이 표류(drift)하게 됩니다.
- 최저 기준점이 있는 점수 기반 게이트 (A scored gate with a floor). "작업물을 검토하세요"라는 지시는 무시될 수 있지만, "점수를 매기고 80점 이상으로 수정한 뒤 보여주세요"라는 지시는 무시할 수 없습니다.
- 이유를 명시한 금지 목록 (Ban lists with reasons). 긍정적인 조언("적절한 간격을 사용하세요")은 아무런 효과가 없습니다. 명시적인 금지 사항("
#4F46E5 사용 금지, 아이콘 칩(icon-chips) 금지, 기본값은 회색")은 즉각적으로 결과물을 변화시킵니다.
이 모든 것은 MIT 라이선스입니다: github.com/bitjaru/styleseed — 74개의 규칙과 게이트, 스킨(skins)이 포함되어 있으며, Claude Code / Cursor / Codex에서 한 문장만 붙여넣으면 바로 읽을 수 있습니다. 라이브 데모는 styleseed-demo.vercel.app에서 확인하세요.
당신이 보자마자 "이건 AI가 만들었네"라고 생각하게 만드는 결정적인 특징은 무엇인가요? 저는 그것들을 수집하고 있습니다. 누군가 새로운 특징을 말해줄 때마다 이 카탈로그는 계속해서 늘어날 것입니다.
