AI가 짠 UI, 그냥 믿어도 될까: Anti-AI-Slop 도구의 등장

AI가 짠 UI, 그냥 믿어도 될까: Anti-AI-Slop 도구의 등장

Hallmark의 57개 검증 게이트와 Kimi K3의 웹 코딩 1위 등극이 동시에 가리키는 질문—AI 코딩 에이전트 시대에 UI 품질은 누가, 어떻게 지키는가.

AI Slop Hallmark UI 품질 검증 AI 코딩 에이전트 Together AI Kimi K3 디자인 자동화 프론트엔드 AI
광고

Cursor에게 랜딩 페이지를 만들어달라고 하면 수초 안에 코드가 나온다. Claude Code에게 대시보드를 요청하면 기능은 동작한다. 그런데 완성된 화면을 보는 순간 어디선가 본 것 같은 기시감이 든다. 퍼플-블루 그라디언트, 가운데 정렬된 히어로 텍스트, 기본 Tailwind 카드 레이아웃. 개발자 커뮤니티는 이 현상에 이름을 붙였다. AI Slop.

문제의 본질은 AI 모델이 '평균'을 학습한다는 데 있다. 웹에 가장 많이 존재하는 UI 패턴을 학습했으니, 가장 무난하고 가장 흔한 결과물을 내놓는 건 어찌 보면 당연하다. 기능적으로 문제없는 코드지만, 브랜드 정체성이 없고 시각적으로 차별화되지 않는다. '동작하는 코드'에서 '좋아 보이는 코드'로 넘어가는 마지막 한 걸음이 AI에게는 여전히 높은 장벽이었다.

바로 이 지점을 정면으로 겨냥한 오픈소스 도구가 등장했다. Together AI의 Hassan El Mghari(Nutlope)가 만든 Hallmark다. dev.to에 소개된 이 도구는 AI 코딩 에이전트에 통합되는 '디자인 스킬' 레이어로, 에이전트가 UI를 생성하기 전에 57개의 디자인 품질 검증 게이트를 통과하도록 강제한다. 기본 Tailwind 카드, 과도하게 가운데 정렬된 텍스트 블록, 반복되는 색상 조합 같은 패턴이 감지되면 게이트는 코드 출력을 거부하고 모델에게 자기 비판과 수정을 요청한다.

Hallmark가 흥미로운 이유는 단순히 '나쁜 UI를 막는다'는 네거티브 접근에 그치지 않기 때문이다. 20개의 시각 테마와 21개의 매크로 구조를 내장해 동일한 요청에도 서로 다른 결과물이 나오도록 설계됐다. 기능도 실용적이다. Build(새 UI 생성), Audit(기존 코드 디자인 품질 채점), Redesign(제네릭 레이아웃 고품질로 재구성), Study(스크린샷이나 URL에서 레이아웃·팔레트·타이포그래피 추출) 네 가지 명령으로 에이전트 워크플로우에 자연스럽게 녹아든다. 설치는 npx skills add nutlope/hallmark 한 줄이면 끝난다.

이 흐름과 맞물려 주목할 또 다른 움직임이 있다. 중국 Moonshot AI의 Kimi K3가 Arena 웹 코딩 리더보드에서 1위를 차지하며 Claude Fable 5(1,631점)를 1,679점으로 제쳤다는 소식이다. BeInCrypto의 보도에 따르면 Kimi K3는 마케팅 페이지, 데이터 대시보드, 소비자 앱 등 7개 코딩 부문 중 6개에서 1위를 기록했다. 특히 96개 모델, 약 47만 표가 집계된 이 리더보드는 인간이 직접 두 모델을 비교 평가하는 방식이라 신뢰도가 상대적으로 높다는 점에서 의미가 크다.

두 흐름을 함께 읽으면 한 가지 맥락이 선명해진다. AI 코딩 모델의 성능 경쟁은 이미 '코드가 동작하는가'를 넘어 '코드가 얼마나 좋아 보이는가'로 이동하고 있다. Kimi K3의 웹 코딩 1위는 단순 로직 작성이 아니라 실제 웹사이트 품질을 사람이 평가한 결과다. 즉, UI 품질이 모델 경쟁력의 핵심 변수로 부상하고 있다는 신호다. 그런데 아이러니하게도, 가장 성능 좋은 모델조차 여전히 AI Slop 문제에서 자유롭지 않다. Hallmark의 존재 이유가 여기 있다.

프론트엔드 개발자 입장에서 이 구조는 다소 낯설지만 논리적으로 타당하다. AI 에이전트가 생성한 코드를 검토할 때 우리는 보통 기능의 정확성에 집중한다. 하지만 dev.to에서 소개된 또 다른 실천법처럼, AI에게 코드를 작성하기 전에 자신이 가정하는 전제를 먼저 나열하게 만드는 것이 중요하듯, UI 생성 단계에서도 '이 디자인이 어떤 기준을 만족하는가'를 사전에 명시하는 구조가 필요하다. Hallmark는 그 기준을 개발자가 매번 프롬프트로 설명하지 않아도 되도록 시스템 레벨에서 주입하는 접근이다.

결국 이 두 흐름이 가리키는 방향은 하나다. AI 코딩 에이전트 시대의 UI 품질은 더 좋은 모델이 자동으로 해결해주는 문제가 아니다. 검증 레이어, 디자인 룰셋, 그리고 에이전트 워크플로우에 내재된 품질 기준—이 세 가지를 함께 설계하지 않으면, 리더보드 1위 모델을 써도 결과물은 여전히 어디선가 본 듯한 화면에 머무를 수 있다. Hallmark는 완성된 솔루션이 아니라, 그 설계의 출발점을 제시하는 도구에 가깝다. 프론트엔드 개발자가 AI 에이전트를 '도구'로 쓰는 게 아니라 '협업 파트너'로 설계하기 시작해야 할 시점이 지금이다.

출처

더 많은 AI 트렌드를 Seedora 앱에서 확인하세요