Show HN에 올라온 바이브 코딩 프로젝트들, AI 디자인 슬롭의 실체를 분석하다

"AI가 만든 티 나는 디자인" 다들 본 적 있죠?

요즘 Show HN이나 X(트위터)에 올라오는 사이드 프로젝트를 쭉 보면 이상한 기시감이 들어요. 배경은 어둡고, 보라색-파란색 그라데이션이 깔려 있고, 버튼엔 희미한 글로우가 있고, 폰트는 Inter나 Geist. 어디서 본 듯한 그 느낌, 바로 AI 디자인 슬롭(slop) 이에요. 슬롭이란 말은 "대충 쏟아낸 결과물"이라는 뜻인데, AI가 생성한 티가 팍팍 나는 비슷비슷한 디자인들을 가리키는 신조어거든요.

Adrian Krebs라는 개발자가 최근 Show HN에 올라온 프로젝트들을 긁어와서, 얼마나 많은 사이트가 이런 "AI 디자인 패턴"을 따르는지 정량적으로 분석한 글을 공개했어요. 단순한 감상평이 아니라 스크래퍼로 실제 사이트들을 크롤링하고 스크린샷을 찍어서 AI 모델로 점수를 매긴 진짜 데이터 분석이라는 게 재밌어요.

어떻게 점수를 매겼나

방법론이 꽤 흥미로워요. 일단 Show HN 페이지에서 최근 제출된 프로젝트 URL들을 전부 가져와요. 그다음 Playwright 같은 헤드리스 브라우저로 각 사이트에 접속해서 스크린샷을 찍죠. 여기까지는 흔한 스크래핑인데요, 그 다음이 핵심이에요.

스크린샷을 멀티모달 LLM(이미지를 이해하는 AI) 에 넣고, "이 사이트는 다음 중 몇 개의 AI 디자인 클리셰를 포함하나요?"라고 물어보는 거예요. 체크리스트에는 어두운 배경, 보라색 그라데이션, 유리 효과(glassmorphism), 과장된 그림자, 뜬금없는 별·반짝이 이모지, "Built with [AI tool]" 배지, 의미 없는 3D 구체 같은 항목들이 들어있어요. 그리고 각 항목의 해당 여부를 0/1로 집계해서 디자인 슬롭 점수를 산출하는 구조예요.

결과가 꽤 도발적인데요, 최근 Show HN 제출물 중 상당수가 여러 항목을 동시에 체크한다는 거예요. 특히 "바이브 코딩(vibe coding)"이라고 부르는, Cursor나 v0, Lovable 같은 AI 도구로 빠르게 만든 프로젝트일수록 패턴이 겹쳐요. 도구들이 비슷한 템플릿과 취향을 학습했기 때문에, 결과물도 자연스레 닮아가는 거죠.

왜 다 똑같이 생겼을까

이게 왜 일어나는지 생각해보면 흥미로워요. v0나 Lovable 같은 도구는 shadcn/ui 같은 인기 컴포넌트 라이브러리를 기본값으로 쓰거든요. 그리고 LLM은 학습 데이터에서 자주 본 스타일, 특히 Vercel이나 Linear 같은 트렌디한 스타트업 사이트의 미학을 "잘 만든 디자인"으로 인식해요. 그래서 "멋진 랜딩 페이지 만들어줘"라고 하면 저절로 다크 테마 + 그라데이션 + 글로우 조합이 튀어나오는 거예요.

문제는 이렇게 만든 사이트가 하나둘일 땐 멋있어 보이지만, 100개를 나란히 놓고 보면 차별성이 0 이라는 점이에요. 스타트업에게 랜딩 페이지는 첫인상인데, 그 첫인상이 옆 프로젝트와 구별이 안 간다면 꽤 치명적이죠. 저자는 "좋은 디자인이 민주화된 게 아니라, 평균적인 디자인이 강제 배포된 것"이라고 표현하는데 이 말이 핵심을 찌르는 것 같아요.

업계 맥락에서 보면

비슷한 문제 의식은 이전부터 있었어요. 예전에 Bootstrap이 유행하던 2013~2015년에도 "모든 사이트가 똑같이 생겼다"는 불만이 있었고, Tailwind CSS 초창기에도 비슷한 말이 나왔죠. 그때마다 결국 디자이너와 개발자가 커스터마이징을 얹어서 차별화를 만들어냈는데요, 지금 AI 디자인 슬롭은 커스터마이징 단계 자체가 생략된다는 게 달라요.

반대 흐름도 있어요. Anthropic의 Claude Artifacts나 Figma Make 같은 도구는 더 다양한 스타일을 시도하도록 유도하고 있고, 최근엔 오히려 "브루털리즘", 모노크롬, 타자기 폰트 같은 반-AI적 미학이 카운터컬처로 떠오르기도 해요. Pieter Levels처럼 일부러 투박한 디자인을 유지해서 "사람이 만든 티"를 내는 전략도 다시 주목받고 있고요.

한국 개발자에게 주는 시사점

한국에서도 사이드 프로젝트나 토이 프로덕트를 AI 도구로 빠르게 만드는 분이 많은데요, 그만큼 이 "슬롭 현상"에서 자유롭지 않아요. 만약 지금 만들고 있는 프로젝트의 랜딩 페이지가 다크 모드 + 보라 그라데이션 + Inter 폰트 조합이라면, 잠깐 멈추고 생각해볼 필요가 있어요. "이게 내 브랜드에 맞는 선택이었나, 아니면 AI가 자동으로 뽑아준 걸 그냥 수용한 건가?"

실무적으로는 이 글에서 보여준 LLM 기반 자동 UI 감사 기법 자체가 꽤 쓸만해요. 회사 내 여러 제품의 디자인 일관성을 검사하거나, 접근성 이슈(명도 대비 부족 같은)를 자동으로 찾아내는 도구로 응용할 수 있거든요. Playwright로 스크린샷 찍고 멀티모달 LLM에 던지는 파이프라인은 한 번 짜두면 여기저기 재활용이 가능해요.