AI 코딩 도구가 어떻게 천편일률적인 UI를 만드는가 (그리고 해결 방법)
요약
AI 코딩 도구가 생성하는 UI가 천편일률적인 'AI 슬롭(AI Slop)' 문제를 다룹니다. Together AI의 Hallmark 프로젝트는 모델이 학습 데이터의 기본값에 의존하지 않고 차별화된 디자인을 생성하도록 돕는 엔지니어링 솔루션을 제시합니다.
핵심 포인트
- AI 코딩 도구의 결과물이 특정 디자인 패턴에 매몰되는 'AI 슬롭' 현상 발생
- LLM이 학습한 데이터 분포(Tailwind, shadcn/ui 등)에 따른 미적 천편일률성
- Hallmark 프로젝트는 디자인 품질을 검증하는 57개의 slop-test 게이트 도입
- 단순 컴포넌트 라이브러리가 아닌 에이전트/프롬프트 계층에서의 디자인 기술 구현
개발 도구 분야에서 아무도 이야기하지 않는 'AI 슬롭 (AI Slop)' 문제
Claude Code, Cursor, 그리고 Codex는 작동하는 UI의 스캐폴딩 (scaffolding)에 걸리는 시간을 며칠에서 몇 분 단위로 단축시켰습니다. 하지만 이러한 속도에는 숨겨진 비용이 따릅니다. 바로 결과물이 모두 똑같아 보인다는 점입니다. 둥근 모서리의 카드, 차분한 회색 배경, Inter 또는 Geist 서체, 두 개의 CTA 버튼 위에 중앙 정렬된 헤드라인이 있는 히어로 섹션(hero sections) — 기계가 생성한 인터페이스의 특징적인 지문은 소프트웨어를 전문적으로 만드는 사람이라면 누구나 즉각적으로 알아챌 수 있게 되었습니다.
디자이너와 개발자들은 이를 설명하기 위해 콘텐츠 세계에서 빌려온 용어를 사용하기 시작했습니다. 바로 'AI 슬롭 (AI Slop)'입니다. 글쓰기에서 '슬롭'은 유창하고 그럴듯하지만, 완전히 기억에 남지 않는 텍스트를 의미했습니다. UI에서 이는 기술적으로는 기능적이지만(접근성, 반응성, 버그 없음), 여전히 "여기서 인간의 의사결정은 이루어지지 않았다"라는 신호를 보내는 것을 의미합니다. 이러한 미학은 정의상 분포 내에 존재합니다(on-distribution). 왜냐하면 모든 대규모 언어 모델 (LLM)은 동일한 GitHub 리포지토리 (repos), 컴포넌트 라이브러리 (component libraries), 그리고 디자인 시스템 문서의 코퍼스 (corpus)를 기반으로 학습되었기 때문입니다. 모델은 가장 자주 본 것을 선택하게 되며, 가장 자주 본 것은 Tailwind 기본 설정과 shadcn/ui 템플릿입니다.
도구에 관한 논의는 아직 이를 따라잡지 못했습니다. AI 코딩 어시스턴트의 벤치마크 (benchmarks)는 정확성, 지연 시간 (latency), 그리고 토큰 효율성 (token efficiency)을 측정합니다. 제품 리뷰는 모델이 버그를 수정할 수 있는지 또는 코딩 인터뷰 문제를 통과할 수 있는지를 묻습니다. 발표된 평가 중 생성된 인터페이스가 중간 수준의 프로덕트 디자이너를 당황하게 만들지 여부를 묻는 평가는 거의 없습니다. 이 격차는 매우 중요합니다. 시각적 천편일률성은 실제 비즈니스 문제이기 때문입니다. 이는 브랜드 차별화를 약화시키고, 사용자에게 낮은 숙련도를 암시하며, AI 코딩이 제공하기로 했던 생산성 이득을 갉아먹는 수정 작업을 만들어냅니다.
Claude Code, Cursor, Codex를 위해 Together AI에서 구축한 오픈 소스 프로젝트인 Hallmark는 이를 명시적으로 해결해야 할 엔지니어링 문제로 취급합니다. 이 프로젝트는 생성된 출력물에 대해 57개의 slop-test (slop-test) 게이트를 실행하며, 기반 모델이 학습된 분포 내의 기본값(on-distribution defaults)을 능동적으로 거부하는 pre-emit (pre-emit) 자기 비판 단계를 추가합니다. 'AI가 생성한 것처럼 보이지 않음'이라는 기준을 통과하기 위해서만 50개 이상의 별도 실패 모드(failure modes)를 열거해야 하는 이토록 특화된 도구의 존재 자체가, AI 코딩 생성 기술이 그동안 얼마나 많은 미적 디자인 부채(aesthetic design debt)를 조용히 축적해 왔는지를 보여주는 정밀한 척도입니다.
Hallmark가 실제로 하는 일 — 그리고 그 아키텍처가 영리한 이유
Hallmark는 컴포넌트 라이브러리(component library)가 아닙니다. 테마 팩(theme pack)이나 Tailwind 프리셋(preset)도 아닙니다. Together AI는 이를 "디자인 기술 (design skill)"이라고 설명합니다. 즉, Claude Code, Cursor, Codex와 같은 AI 코딩 도구가 단 한 줄의 코드가 작성되기 전에 시각적 의사결정에 접근하는 방식을 재구성하는, 에이전트(agent) 또는 시스템 프롬프트(system-prompt) 계층에서 작동하는 명령 세트입니다.
아키텍처는 세 가지 뚜렷한 단계로 실행됩니다. 첫째, Hallmark는 특정 브리프(brief)에 적합한 매크로 구조(macrostructure)를 선택합니다. 이는 일반적인 hero-features-CTA 스택이 아니라, 콘텐츠를 위해 선택된 레이아웃입니다. 둘째, 해당 구조에 20가지의 별도 시각적 테마 중 하나를 적용합니다. 셋째, 가장 중요한 단계로, 57개의 slop-test 게이트를 실행한 후 pre-emit 자기 비판 루프를 수행합니다. 마지막 단계는 대부분의 AI 코드 생성 방식과는 확연히 다른 지점입니다. 표준 도구들은 한 번의 패스(pass)를 거쳐 출력합니다. 반면 Hallmark는 출력을 내보내기 전에 스스로의 결과물을 심문하며, 결과물이 대규모 언어 모델(LLM)이 선호하도록 학습된 분포 내의 기본값들 — 즉, 모든 AI 생성 인터페이스를 서로의 사촌처럼 보이게 만드는 둥근 카드, 파란색 기본 버튼, 부드러운 그림자의 히어로 섹션(soft-shadow hero sections) — 으로 다시 회귀하지 않았는지 확인합니다.
해당 프로젝트에 따르면, 그 결과로 Hallmark가 서로 다른 두 개의 기획안(briefs)을 바탕으로 구축한 두 페이지는, 단순히 색상만 바꾼 동일한 템플릿이 아니라 서로 다른 사이트처럼 느껴집니다.
네 가지 동사가 디자인 로직을 지배하며, 각 동사는 새로운 UI를 구축하는 것부터 기존 작업물을 수정하는 것에 이르기까지 서로 다른 작동 모드를 지시합니다. 사용자들은 또한 데모 환경에서 'T' 키를 눌러 20개의 모든 테마를 실시간으로 전환해 볼 수 있으며, 이는 Hallmark가 코드 생성기(code generator)인 동시에 디자인 탐색 도구(design exploration tool)로서 기능하게 만듭니다.
그 기원(provenance)이 중요합니다. Together AI는 빠른 추론(inference) — 즉, 경쟁력 있는 비용으로 토큰을 빠르게 출력하는 것 — 을 통해 상업적 명성을 쌓아왔습니다. '안티 슬롭(anti-slop)' 디자인 시스템을 출시하는 것은 회사가 개발자들에게 제공하는 가치를 정의하는 방식에 있어 의도적인 전환을 시사합니다. 이제 속도는 기본 요건(table stakes)입니다. 다음 차별화 요소는 취향(taste)입니다. 더 넓은 AI 코딩 도구 시장에 대해 Hallmark는 명확한 논거를 제시합니다. 즉, LLM 학습 데이터에 내재된 누적된 디자인 부채(design debt)는 제품의 문제이며, 프롬프트 계층(prompt-layer)의 개입은 이를 해결할 수 있는 신뢰할 만한 방법이라는 것입니다.
누락된 맥락: 이것은 기본 모델 동작에 대한 기소(indictment)이다
Hallmark의 존재는 조용한 기소와 같습니다. Claude, GPT-4o, Codex는 고장 난 도구가 아닙니다. 하지만 이들의 기본 디자인 동작은 시각적 독창성(visual distinctiveness) 측면에서 매우 조정되지 않은(uncalibrated) 상태입니다. 이 모델들은 모두 동일한 UI 패턴 분포를 기반으로 학습되었으며, 그 학습은 일종의 중력장(gravity well)을 형성했습니다. 이들 중 어떤 모델에게라도 개입 없이 랜딩 페이지를 만들어 달라고 요청하면, 모두 동일한 둥근 카드, 동일한 히어로 섹션(hero section), 동일한 차분한 색상 팔레트(muted palette)를 내놓습니다. Hallmark가 존재하는 이유는 바로 그 중력장이 실재하며, 어떤 모델 제공업체도 기본 설정으로 그 중력장에서 벗어나려 하지 않았기 때문입니다.
이 프로젝트는 Together AI가 구축하여 GitHub에 오픈 소스 저장소 (open-source repository)로 운영됩니다. 이러한 구조는 매우 중요합니다. 개발자들은 본질적으로 폐쇄적인 상용 모델 (closed commercial models) 위에 커뮤니티가 유지 관리하는 교정 레이어 (correction layer)를 설치하는 셈입니다. 이는 프롬프트 엔지니어링 (prompt engineering) 시대에 익숙한 패턴입니다. 즉, 벤더(vendor)들이 인지하고는 있지만 해결을 우선순위에 두지 않았던 모델의 한계점을 극복하기 위해 수많은 실무자들이 임시방편 (workarounds)을 만들어냈던 것과 같습니다. Hallmark를 차별화하는 점은 이러한 교정 작업을 단순히 영리한 프롬프팅 (prompting)이 아니라, 명시적으로 '안티 AI 슬롭 (anti-AI-slop)' 디자인 인프라로 정의한다는 것입니다. Hallmark의 57개 슬롭 테스트 게이트 (slop-test gates)와 출력 전 자기 비판 파이프라인 (pre-emit self-critique pipeline)은 임시방편 (ad hoc)이 아닌 체계적인 방식입니다.
이는 대부분의 보도 매체가 완전히 간과하는 질문을 던집니다. AI가 생성한 UI의 디자인 품질에 대한 책임은 실제로 누구에게 있는가? Anthropic이나 OpenAI와 같은 모델 제공업체들은 시각적 독창성이 아닌 능력 벤치마크 (capability benchmarks)를 최적화합니다. Cursor와 같은 코딩 도구 벤더들은 디자인 결과물을 자신들이 감싸고 있는 모델의 하류 (downstream) 결과물로 취급합니다. 개별 개발자들은 빠르게 결과물을 배포하며, 제품화 단계에 이르기 전 디자인의 균질화 (homogenization)를 포착할 만한 안목이나 시간을 갖기 어렵습니다. Hallmark의 아키텍처 (architecture)는 이 세 당사자 모두를 해결책으로 간주하기를 거부함으로써 이러한 책임의 공백에 답합니다. 대신, Hallmark는 전용 디자인 기술 레이어 (design skill layer)를 제안합니다. 이는 개발자의 의도와 모델의 출력 사이에 위치하는 별도의 구성 가능한 컴포넌트 (composable component)로, 20개의 뚜렷한 테마와 4개의 구조화된 생성 동사 (generation verbs)를 강제합니다. 이를 통해 서로 다른 두 개의 기획안으로 만들어진 두 페이지가, 단순히 색상만 바뀐 동일 템플릿의 변형이 아니라 진정으로 다른 사이트처럼 보이도록 보장합니다.
이것은 가시화된 디자인 부채 (design debt)입니다. 그리고 마침내 누군가가 그 패치 (patch)를 작성했습니다.
'20개의 테마와 4개의 동사'가 체계적 디자인 사고에 대해 말해주는 것
Hallmark은 정확히 20개의 테마를 제공합니다. 이 숫자는 제약이 아니라 디자인 결정입니다. 솔루션 공간을 20개로 제한하는 것은 진정한 큐레이션 (curation)을 강제합니다. 즉, 각 테마는 생성이 저렴하기 때문에 존재하는 것이 아니라, 그 자리에 있을 가치를 증명하며 자리 잡습니다. 무제한의 테마 생성은 Hallmark가 해결하기 위해 만들어진 바로 그 문제, 즉 편집적 판단(editorial judgment)이 없는 선택권은 다양성이 아닌 노이즈(noise)를 생성한다는 문제를 재현할 뿐입니다. 20개 테마라는 상한선은 좋은 UI 디자인이 무한한 슬롯머신을 돌리는 것이 아니라, 의도된 팔레트(palette) 내에서 선택함으로써 탄생한다는 철학적 입장을 담고 있습니다.
4개의 동사 프레임워크 (four-verb framework) 또한 동일한 논리로 작동합니다. 하부 모델이 학습된 기본값(defaults)으로 수렴해버리는 개방형 자연어 프롬프트 (natural language prompts)를 수용하는 대신, Hallmark는 네 개의 개별적인 동사를 중심으로 상호작용을 구조화합니다. 이는 구성 규칙이 진정한 다양성을 만들어내는 디자인의 문법 (grammar of design)입니다. 정확한 동사들은 공개된 자료에 완전히 문서화되어 있지는 않지만, 아키텍처 (architecture)는 명확합니다: 고정된 어휘 (fixed vocabulary), 가변적인 출력 (variable output). 이는 대부분의 AI 코딩 어시스턴트 (AI coding assistants)가 디자인 작업을 처리하는 방식과 정반대입니다. 대부분의 도구는 자유 형식의 프롬프팅 (freeform prompting)을 허용하며, 이로 인해 모델의 통계적 중력 (statistical gravity)이 모든 결과물을 동일한 히어로 섹션 (hero section), 동일한 카드 그리드 (card grid), 동일한 산세리프 (sans-serif) 중립 팔레트로 끌어당깁니다.
라이브 데모는 단 한 마디의 설명 없이도 '안티 슬롭 (anti-slop)' 논거를 입증합니다. T를 누르면 키보드가 실시간으로 테마를 순환합니다. 개발자들은 기능 목록을 읽는 것이 아니라, 서로 다른 시각적 정체성들이 차례대로 딱딱 맞아떨어지는 것을 지켜봄으로써 단 몇 초 만에 시스템의 범위를 체감합니다. 이러한 상호작용은 심도 있는 UX 작업을 수행하고 있습니다. 즉, Hallmark가 서로 다른 두 개의 브리프 (briefs)를 위해 생성한 두 페이지가 동일한 템플릿의 색상 교체(color-swaps)가 아니라, 서로 다른 사이트처럼 느껴진다는 것을 보여줍니다. 이 데모는 디자인 다양성에 대한 개념적 주장을 촉각적이고 즉각적인 경험으로 전환합니다.
20개의 테마, 4개의 동사, 그리고 T-to-cycle 데모는 하나의 일관된 디자인 철학을 나타냅니다. 즉, 체계적인 제약(systematic constraint)이 제약 없는 생성(unconstrained generation)보다 더 창의적인 결과물을 만들어낸다는 것입니다. 브리프(brief) 내용과 상관없이 모두 똑같아 보이는 AI 생성 UI에 좌절감을 느끼는 개발자들에게, AI 디자인 툴링에 대한 이러한 구조적 접근 방식은 에이전트 기반 코딩 환경(agentic coding environments)이 시각적 의사결정을 처리해야 하는 방식에 있어 의미 있는 변화를 시사합니다.
이것이 지금 중요한 이유: '바이브 코딩(Vibe-Coding)'의 숙취가 다가오고 있다
바이브 코딩(vibe-coding)의 물결은 빠르게 정점에 도달했습니다. 2025년 초, Claude Code, Cursor, Codex를 사용하는 개발자들은 2년 전에는 상상할 수 없었던 속도로 제품을 출시했습니다. 하지만 지나고 보니 문제는 명확합니다. 취향(taste)이 결여된 속도는 식별 가능한 잔여물을 남깁니다. 둥근 카드, 그라데이션 배경이 있는 히어로 섹션(Hero sections), 어디에나 쓰이는 Inter 폰트 같은 것들 말입니다. 사용자들은 이미 이러한 패턴을 보는 즉시 알아챌 수 있을 만큼 날카로운 AI 탐지 본능을 발달시키고 있으며, 이러한 인지는 해당 패턴으로 구축된 제품들에게 브랜드 리스크(brand liability)가 되고 있습니다.
이 지점이 바로 Hallmark가 대표하는 카테고리가 상업적으로 중요한 의미를 갖는 이유입니다. 가공되지 않은 생성 속도는 이미 상당 부분 해결된 문제입니다. 다음 경쟁의 최전선은 출력 품질(output quality), 특히 AI의 도움을 받았음을 스스로 광고하지 않는 AI 지원 인터페이스를 생성하는 능력입니다. Hallmark의 아키텍처는 그 논리를 명시적으로 보여줍니다. 57개의 슬롭 테스트 게이트(slop-test gates), 방출 전 자기 비판 레이어(pre-emit self-critique layer), 그리고 두 개의 서로 다른 브리프가 동일한 템플릿의 색상만 바꾼 버전이 아니라 진정으로 다른 두 개의 사이트를 생성하도록 설계된 20개의 별도 테마가 그것입니다. 이것은 메타 툴링(meta-tooling)입니다. 즉, AI가 얼마나 빨리 생성하느냐가 아니라 AI가 생성하는 결과물의 질을 개선하는 소프트웨어입니다. 프론티어 모델(frontier models) 간의 성능 격차가 좁혀지고 차별화 요소가 취향과 판단력으로 이동함에 따라, 이 카테고리는 더욱 성장할 것입니다.
하한선을 높인다는(floor-raising) 논거는 디자인 배경이 없고 AI 코딩 도구를 주요한, 때로는 유일한 디자인 리소스로 취급하는 비전문가 개발자들에게 가장 중요합니다. 해당 집단에게는 거대 언어 모델 (LLM)의 기본 출력값이 무엇을 출시할지에 대한 기준을 설정합니다. Hallmark, 또는 이와 구조적으로 유사한 무언가는 그 기준을 높일 실질적인 기회를 가지고 있습니다. 하지만 이는 niche한 GitHub 프로젝트의 궤적에서 벗어나 주류 AI 개발 워크플로우 (workflows)에 흡수될 때만 가능합니다.
Hallmark가 운영되는 오픈 소스(open-source) 및 커뮤니티 주도 모델은 구조적 이점이자 동시에 핵심적인 리스크입니다. 테마 라이브러리를 확장하는 기여자 기반의 성장은 집단적인 취향 형성 메커니즘(taste-making mechanism)을 생성하며, 이는 규정(prescription)보다는 실천(practice)에서 발생하는 디자인 표준(design standard) 역할을 효과적으로 수행합니다. 만약 채택이 임계 질량(critical mass)에 도달한다면, 이 라이브러리는 10년 전 Bootstrap이 웹 기본값(web defaults)을 정의했던 것과 동일한 방식으로 AI 보조 개발의 미적 기준선(aesthetic baseline)을 정의할 수 있습니다. 만약 그렇지 못한다면, anti-AI-slop 문제는 대규모로 해결되지 않은 채로 남을 것이며, vibe-coding의 후유증은 나아지기 전에 더 악화될 것입니다.
원문은 Newzlet에 게시되었습니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 Dev.to AI tag의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기