Claude Code의 UI Slop에 질려 Go 언어 기반의 CLI 도구 uislop를 개발한 이유
요약
Claude Code와 같은 AI 도구가 생성하는 랜딩 페이지의 정형화된 디자인 패턴(UI Slop)을 분석하고 점수화하는 Go 언어 기반의 CLI 도구 'uislop'를 소개합니다. 이 도구는 특정 폰트, 색상 그라데이션, shadcn/ui 사용 여부 등을 정규 표현식으로 검사하여 해당 페이지가 얼마나 AI에 의해 생성된 것처럼 보이는지를 0에서 100 사이의 점수로 출력합니다.
핵심 포인트
- AI 생성 웹 디자인의 특징적인 패턴(Inter 폰트, Lucide 아이콘, 글래스모피즘 등)을 식별
- uislop은 Go 언어를 사용하여 단일 바이너리로 어디서나 실행 가능한 CLI 도구로 구현됨
- 정규 표현식을 활용해 디자인 요소의 빈도를 측정하고 AI 유사도 점수를 산출
- 디자인의 획일화가 새로운 형태의 '스타일 없음'으로 간주될 수 있음을 시사
Claude Code에게 "랜딩 페이지를 만들어줘"라고 요청할 때마다, 저는 항상 똑같은 페이지를 받았습니다. 중앙 정렬된 히어로(Hero) 섹션. 모든 곳에 사용된 Inter 폰트. 예술적인 느낌이 필요할 때면 Space Grotesk 폰트. H1 태그에 적용된 보라색에서 파란색으로 이어지는 그라데이션(Gradient). 헤드라인 위에 떠 있는 작은 알약 모양의 배지("New", "Beta", "Now with AI"). 그 아래에는 상단에 Lucide 아이콘(주로 zap, shield-check, sparkles)이 달린 동일한 형태의 기능 카드 세 개. 1-2-3 단계로 구성된 번호 매겨진 행. 네비게이션(Nav)에 적용된 글래스모피즘(Glassmorphism). 어디에나 쓰이는 shadcn/ui. 대비(Contrast) 검사를 통과하지 못하지만 "깔끔해 보이는" 어두운 배경에 진한 회색 본문 텍스트의 다크 모드(Dark mode). 약 20번째쯤 되었을 때, 저는 꿈에서도 이런 페이지들이 보이기 시작했습니다. 그래서 불평을 멈추고 도구를 만들었습니다.
uislop: 페이지가 얼마나 AI에 의해 생성된 것처럼 보이는지를 점수로 매기는 Go CLI 도구입니다. URL을 입력받아 HTML과 연결된 JS를 가져온 뒤, 일련의 정규 표현식(Regex)을 실행하여 0에서 100 사이의 단일 숫자를 출력합니다.
$ uislop https://some-ai-startup.ai
font:Inter hits=12 weight=2 add=24 color:purple hits=8 weight=3 add=24 color:gradient hits=14 weight=2 add=28 css:shadcn hits=4 weight=4 add=16 icon:svg_lucide hits=11 weight=2 add=22 layout:centered hits=7 weight=2 add=14 layout:allCaps hits=9 weight=1 add=9
87
0은 "사람이 만들었거나 2022년 이전 스타일"임을 의미합니다. 100은 "지난주 화요일에 바이브 코딩(Vibe-coded)된 것"을 의미합니다.
왜 Go인가요? 제가 새로운 프로젝트의 기본 언어로 Go를 선택하는 것과 같은 이유입니다. 단일 바이너리(Binary), 어디서나 실행 가능, 가상 환경(Virtualenv) 불필요, 의존성 드리프트(Dependency drift) 없음. 무엇이든 scp로 전송할 수 있고 웹 전체를 grep 할 수 있습니다.
제가 결정화(Crystallized)한 신호들
수백 개의 AI 스타트업 랜딩 페이지를 눈으로 훑어본 결과, 패턴들이 이상할 정도로 일관적이라는 것을 발견했습니다.
폰트: 거의 모든 곳에 Inter, 화려함을 더하고 싶을 땐 Space Grotesk, Vercel의 해(year)에는 Geist Sans / Geist Mono
모든 모델의 기본 출력물이 동일한 미학(aesthetic)으로 수렴할 때, "다른 이들과 똑같아 보인다"는 것은 새로운 "스타일이 적용되지 않은 것처럼 보인다"는 의미가 됩니다. 점수는 그저 거울일 뿐입니다. 점수를 떨어뜨리는 한 가지 기묘한 방법은 다음과 같습니다: Inter 대신 실제 서체(typeface)를 사용하고, 보라색 계열(violet wheel)에 없는 색상을 선택하며, 기능 카드(feature card) 하나를 삭제하는 것입니다. 3분 만에 10점이 깎일 것입니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 Dev.to AI tag의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기