AI가 만든 UI가 어딘가 어색한 이유 — 정합성으로 푸는 74가지 규칙

AI가 만든 UI가 어딘가 어색한 이유 — 정합성(coherence)으로 푸는 74가지 규칙

2026년 6월 현재, Claude Code·Codex·Cursor로 만든 UI는 컴포넌트는 멀쩡한데 합치면 어딘가 "생성된 티"가 납니다. 원인은 못생긴 부품이 아니라 부품들이 서로 안 맞는 것, 정합성(coherence)의 부재입니다. bitjaru가 공개한 오픈소스 StyleSeed는 이 문제를 74가지 디자인 규칙으로 풀어냅니다. AI 코딩 도구 안에 Toss·Stripe·Linear 디자이너의 판단력을 주입하는 2,200줄짜리 규칙 모음입니다.

AI가 만드는 UI가 어색한 진짜 이유

LLM은 기능적으로는 올바른 결과를 내면서 시각적으로는 아마추어처럼 보이는 결과를 만듭니다. 텍스트는 무조건 #000으로 잡고, 간격은 py-4로 통일하고, 제목은 전부 text-xl로 설정합니다. 기술적으로는 유효하지만 시니어 디자이너의 손을 거친 결과물과는 거리가 멉니다.

비교 실험이 이를 잘 보여줍니다. Toss의 디자인 토큰 JSON을 그대로 LLM 프롬프트에 넣어봐도 출력은 여전히 평범합니다. 회색조만 쓰는 시니어 디자이너가 같은 도구로 훨씬 정제된 결과물을 냅니다. 차이가 무엇이냐고요. 가진 데이터가 아니라 그것을 다루는 판단력입니다. StyleSeed는 이 판단력을 74가지 규칙으로 명시화합니다. 6개 카테고리(색상 원칙, 공간 리듬, 정보 계층, 그림자·고도, 컴포넌트 변주, 모션·피드백)로 정리한 뒤 Claude·Codex·Cursor가 자동으로 읽을 수 있도록 마크다운 파일로 전달합니다.

StyleSeed가 LLM에 주입하는 74가지 디자인 규칙

StyleSeed의 핵심 통찰은 데이터와 판단을 분리한 점에 있습니다. 다른 "AI를 위한 디자인" 프로젝트는 브랜드 팔레트·폰트 스펙·그림자 토큰 같은 데이터를 더 줍니다. StyleSeed는 판단 엔진을 줍니다.

대표적인 규칙 몇 가지를 소개합니다.

• "가장 세련된 검정은 #000이 아니라 #2A2A2A다. 5단계 그레이스케일: #2A → #3C → #6A → #7A → #9B"

• "앱 전체에서 강조색은 단 하나. 나머지는 모두 그레이스케일. 절제가 우아함의 조건이다"

• "그림자 농도는 4% 이하. 보일 정도면 이미 과한 것이다"

• "숫자와 단위는 2:1 비율. 48px 숫자, 24px 단위. 항상"

• "같은 섹션 타입을 연속으로 반복하지 마라. 키 → 그리드 → 차트 → 캐러셀 → 리스트처럼 시각 리듬을 만들어라"

• "카드와 배경의 분리가 어떤 테두리보다 우선이다"

이런 규칙들은 시니어 디자이너의 머릿속에만 있던 노하우입니다. StyleSeed는 이를 명문화하고 LLM이 읽을 수 있는 단일 마크다운 파일로 정리합니다. 규칙은 특정 색을 강요하지 않고 의미 토큰(semantic token)만 참조하기 때문에, Toss든 Vercel이든 클라이언트의 보라색이든 같은 규칙북이 그대로 작동합니다.

30초 만에 시작하는 설치 방법

설치는 의외로 단순합니다. 가장 빠른 방법은 이 한 문장을 Claude Code, Codex, Cursor 등 AI 에이전트에 붙여넣는 것입니다.

https://styleseed-demo.vercel.app/llms.txt를 읽고 이 디자인 룰을 적용해줘

이게 끝입니다. 에이전트가 규칙을 읽고 다음에 만드는 모든 UI에 적용합니다. Claude Code는 CLAUDE.md, Codex·Amp·Gemini CLI는 AGENTS.md, Cursor는 .cursorrules로 자동 인식되며 StyleSeed는 이 세 가지 형식을 모두 제공합니다. 별도 설치나 권한 없이 마크다운 파일만 복사하면 90%가 적용됩니다.

슬래시 커맨드 스킬 15종을 추가로 설치하면 자동화의 완성도가 한 단계 올라갑니다. npx skills add bitjaru/styleseed로 모든 스킬을 한 번에 받을 수 있고, /ss-setup 마법사가 앱 타입·브랜드 색·폰트를 선택해 첫 페이지를 생성해줍니다. /ss-review는 디자인 컴플라이언스를 검사하고 /ss-score는 UI를 0~100점으로 채점해 우선순위별 수정 목록을 만들어줍니다.

데이터 저장소·모션 시스템과 StyleSeed의 차이

awesome-design-md 같은 데이터 저장소는 브랜드의 디자인 사양 파일을 제공합니다. StyleSeed는 어떤 브랜드든 동작하는 앱으로 바꾸는 엔진을 제공합니다. 둘은 경쟁 관계가 아니라 보완 관계입니다. 데이터 저장소가 스킨을 주고 StyleSeed가 두뇌를 주는 구조입니다. 비유하자면 데이터 저장소는 물감이고 StyleSeed는 물감을 어디에 칠할지 알려주는 규칙책입니다. StyleSeed의 7개 내장 스킨(Toss·Stripe·Linear·Notion·Raycast·Arc·Vercel)에 awesome-design-md의 58개 브랜드를 더하면 65개 이상의 시각 정체성을 즉시 전환할 수 있습니다. 새 브랜드를 만들고 싶다면 theme.css 하나 복사해 --brand 색상만 바꾸면 됩니다.

AI가 만든 모션은 대부분 똑같은 기본 페이드입니다. StyleSeed는 모션에 어휘를 부여합니다. 5개의 시드(Spring·Silk·Snap·Float·Pulse)와 20개 이상의 키워드(toggle-flip, reveal-blur, pop-in, tilt-3d, magnetic, glow-pulse 등)로 의도된 일관된 애니메이션을 만듭니다. 예를 들어 CTA 버튼은 Spring(탄성 300, 감쇠 18)으로 누르는 순간 살아나는 느낌을 주고, 카드 진입은 거의 무음으로 콘텐츠를 먼저 보여주고, 잔액은 모션 없이 숫자 자체를 핵심으로 만듭니다. 모든 시드는 prefers-reduced-motion을 자동 존중해 접근성을 깨지 않습니다. /ss-motion toggle-flip처럼 키워드를 말하면 같은 레시피가 코드에 그대로 들어옵니다.

디자인 시스템 위에 얹는 호환성

이미 디자인 시스템이 갖춰진 프로젝트에도 StyleSeed는 그대로 얹힙니다. 룰을 떼어 쓸 수 있고, 특정 색이나 컴포넌트를 강요하지 않고 "이럴 땐 이렇게"라는 판단 기준만 담겨 있어 기존 시스템과 충돌하지 않습니다.

설치 없이 적용하려면 프롬프트 한 줄이면 충분합니다. 기존 디자인을 시스템화하고 싶다면 이미 정한 결정(간격·라운드·강조색 등)을 llms.txt에 한 줄씩 적어두면 에이전트가 새 화면마다 재사용해 일관된 시스템처럼 굳힙니다. 기본 룰은 출발점이고 안 맞는 부분은 고쳐 쓰면 됩니다.

2026년 6월을 기준으로 본 디자인 판단의 시대와 운영자용 가드레일

AI 코딩 도구가 더 똑똑해질수록 결정적인 차이는 모델의 성능이 아니라 모델을 둘러싼 컨텍스트 품질에서 나옵니다. StyleSeed는 그 컨텍스트의 표준을 제시합니다. 색상 팔레트와 컴포넌트 라이브러리를 넘어서, LLM이 읽고 적용하고 반복할 수 있는 판단의 언어를 제공합니다.

운영자 관점에서 StyleSeed를 안전하게 도입하려면 다음 가드레일을 권장합니다. 먼저 기존 디자인 시스템이 있는 프로젝트라면 engine/DESIGN-LANGUAGE.md만 복사하고 스킨은 강제하지 마세요. 슬래시 커맨드 15종은 옵션이므로 처음에는 /ss-review와 /ss-score만 사용해 컴플라이언스 점수를 추적하세요. 마지막으로 업데이트 시에는 theme.css(브랜드 색)와 프로젝트별 CLAUDE.md(컨텍스트)는 덮어쓰지 말고 engine/과 .claude/skills/만 갱신하면 됩니다.

Claude Code·Codex·Cursor로 대시보드를 만들었는데 아마추어처럼 보인다면, 더 많은 템플릿이 아니라 74가지 규칙이 필요합니다. StyleSeed를 프로젝트에 얹고 다음 화면을 만들어보세요. AI가 만든 티가 빠진 결과물을 단 한 줄의 프롬프트로 만나게 됩니다. MIT 라이선스 오픈소스이므로 비용 부담 없이 오늘부터 적용 가능합니다.