AI가 만든 UI가 어딘가 어색한 이유 — 정합성(coherence)

2026-06-17 · 2026-06-17_why-ai-ui-feels-off-coherence.md

#ai #ui #design-system #coherence #styleseed #vibe-coding

원문 출처

AI가 만든 UI가 어딘가 어색한 이유 — 정합성(coherence)

GeekNews(hada.io)의 bitjaru님이 쓴 글. AI 코딩 에이전트가 만드는 UI가 개별 컴포넌트는 멀쩡한데 합치면 "생성된 티"가 나는 이유를 정합성(coherence)의 관점에서 분석하고, StyleSeed라는 오픈소스 디자인 엔진을 통해 해결책을 제시한다.

1. 원문 핵심 내용

"생성된 티"의 진짜 원인: 부품이 못생겼기 때문이 아니다

AI에게 UI를 시키면 버튼, 카드, 입력창 같은 개별 컴포넌트는 각각 괜찮게 나온다. 하지만 화면 전체를 보면 어딘가 어색하다. 글쓴이는 이 원인이 개별 부품의 미적 결함이 아니라 부품들끼리 서로 안 맞기 때문이라고 지적한다.

예를 들어:

  • 카드 모서리는 둥근데 버튼 모서리는 뾰족함
  • 강조색으로 파랑을 썼는데 다른 곳에서는 초록을 씀
  • 간격은 여기서는 8px, 저기서는 12px로 불규칙함

이것들이 각각 나쁜 선택은 아니다. 하지만 서로 약속을 지키지 않았기 때문에 전체가 "어설프게 만든 것"처럼 보인다.

정합성(coherence)이 무엇인가

정합성이란 디자인의 여러 축(모서리·강조색·간격·그림자 등)마다 값을 하나만 정하고, 모든 컴포넌트가 그 값에 따르는 상태를 말한다. 글쓴이는 해법이 의외로 단순하다고 강조한다:

"축마다 값을 하나만 정하고, 전부 거기 맞추는 거죠."

즉, "어떤 색을 쓸까"보다 "몇 가지 색만 쓸까"가 더 중요한 질문이다.

StyleSeed — 규칙의 데이터베이스, 아닌 판단 기준

StyleSeed(bitjaru의 오픈소스 프로젝트, MIT 라이선스)는 단순히 컴포넌트 라이브러리가 아니다. 74개의 디자인 규칙과 48개의 컴포넌트, 7개의 브랜드 스킨(Toss/Stripe/Linear/Notion/Raycast/Arc/Vercel), 명명된 모션 시스템(5개의 Seed + 20개 이상의 키워드)으로 구성되어 있다.

핵심 철학:

  • Data vs Judgment: 다른 도구들이 색상·폰트 같은 정적 데이터를 제공하는 반면, StyleSeed는 AI에게 디자인 판단(judgment)을 가르친다. "이럴 땐 이렇게"라는 기준.
  • 일문장 통합: "https://styleseed-demo.vercel.app/llms.txt 읽고 이 디자인 룰 적용해줘"라는 한 문장으로 Claude Code, Codex, Cursor 등 AI 에이전트에 규칙을 적용 가능.
  • 기존 시스템 위에 얹기: 특정 색이나 컴포넌트를 강요하지 않고, 기존 디자인 시스템 위에 판단 기준만 추가한다.

데모 페이지에서 보여주는 구체적인 규칙들

StyleSeed의 데모 페이지(how-it-thinks)는 한 화면의 모든 디자인 결정에 대한 이유를 하나씩 설명한다:

  1. 숫자 대 단위 비율 2:1 — 48px 숫자 / 24px 단위. 비율이 없으면 숫자가 그냥 노이즈로 평평해진다.
  2. 강조색은 하나만 — 파랑 하나만 쓰고 나머지는 회색. 두 번째 강조색이 생기면 시선이 갈라진다.
  3. 테두리 대신 톤 차이 — 카드 구분은 선이 아닌 배경 톤과 미세 그림자로. 테두리가 많으면 어수선해 보인다.
  4. Tabular figures(동일 폭 숫자) — 재무 데이터에서 각 숫자가 같은 폭을 가져야 소수점이 수직으로 정렬되고 한 번에 스캔 가능.
  5. 모서리 일관성 — 카드, 썸네일, 버튼이 같은 모서리 반경을 공유. 중첩 요소는 inner = outer - padding 공식으로 모서리 중심을 맞춤.
  6. 빈 상태(empty state) 디자인 — 데이터가 없을 때 공백 사각형이 아닌 아이콘+문구+액션으로 구성.
  7. 모션 시드 하나 — 모든 상호작용이 같은 "성격"의 애니메이션을 공유. 무작위 페이드는 무지개 팔레트와 같은 수준으로 나쁨.

근거

글쓴이는 Refactoring UI(실무 UI 책), Material 3(Google 디자인 가이드라인), Apple HIG, WCAG(접근성 표준)를 근거로 들며, 복붙 가능한 CSS도 함께 제공한다.

2. 커뮤니티 반응

HN(Hacker News)에서 이 글과 직접 관련된 게시물을 찾지 못했다. GeekNews(hada.io) 본문에 달린 댓글은 다음과 같다:

  • 디자인 시스템이 이미 갖춰진 상태에서 적용 가능 여부: 이미 정한 간격·라운드·강조색 등을 StyleSeed 파일에 한 줄씩 적어두면 에이전트가 재사용하여 일관성을 유지한다. 기본 룰은 출발점이고 수정 가능.
  • 도움이 되었다는 감사 댓글

댓글 수는 많지 않지만, 핵심 질문은 "기존 시스템과의 호환성"이다. 이에 대한 답변은 StyleSeed가 특정 디자인을 강요하지 않고 판단 기준만 제공한다는 점에서 긍정적이다.

3. 새로운 시각

(1) "정합성"은 AI 시대에 더 중요한 디자인 미덕이 되었다

과거에는 디자이너가 직접 모든 컴포넌트를 만들었기 때문에 자연스럽게 일관성이 유지되었다. 하지만 AI 코딩 에이전트가 각 컴포넌트를 독립적으로 생성하는 시대에는 정합성을 명시적인 규칙으로 정의하는 것이 필수적이다. StyleSeed의 존재 이유 자체가 이 패러다임 전환을 반영한다.

(2) 디자인 규칙을 LLM이 읽을 수 있는 형식으로 제공하는 것이 혁신

llms.txt 파일 하나에 모든 규칙을 담고, AI 에이전트가 이를 자동으로 읽어 적용하는 방식은 디자인 시스템의 전달 매체 자체를 바꾼다. Figma 파일이나 문서가 아닌, AI가 파싱할 수 있는 텍스트가 새로운 디자인 시스템의 표준이 될 수 있다.

(3) "판단(judgment)"과 "데이터(data)"의 구분은 다른 분야에도 적용 가능

StyleSeed가 강조하는 "데이터가 아닌 판단을 가르친다"는 철학은 디자인을 넘어 AI 교육 전반에 시사점을 준다. LLM에게 사실만 주입하는 것이 아니라 상황에 따른 선택 기준을 제공하는 것이 진정한 보조가 된다. 이 원칙은 코드 리뷰, 문서 작성, 의사결정 지원 등 다양한 영역에 확장 가능하다.

4. 자녀/미래 영향

아인(딸)

디자인에 관심이 생길 나이가 되면, "예쁘다/못생겼다"보다 "일관성이 있다/없다"는 기준으로 UI를 평가하는 눈을 기를 수 있다. 일상에서 보는 앱이나 웹사이트를 볼 때 "강조색이 몇 개야?", "모서리 크기가統一되어 있어?" 같은 질문을 해보는 것이 디자인 감각을 키우는 첫걸음이다.

석현, 은한(아들들)

AI 코딩 도구를 사용할 때, 단순히 "이 기능 만들어줘"라고만 하는 것이 아니라 디자인 규칙을 함께 지정하는 습관이 필요하다. StyleSeed처럼 한 줄의 프롬프트로 일관된 디자인을 유지하는 방법을 알면, 나중에 프론트엔드 개발이나 제품 기획을 할 때 큰 장점이 된다. 특히 "정합성"이라는 개념은 코드의 일관성(변수 명명 규칙, 함수 구조 등)과도 연결되므로 프로그래밍 전반에 도움이 된다.

관련 노트

  • 아직 연결된 노트 없음