AI 디자인 패턴으로 Show HN 제출물 점수화

3 days ago 7

최근 Show HN 제출 수 증가와 함께 비슷한 인상의 랜딩 페이지가 반복적으로 나타났고, 최신 Show HN 500개 페이지를 기준으로 공통 패턴을 점수화함
점수 기준은 폰트, 색상, 레이아웃, CSS 패턴에 걸친 15개 항목이며, 가운데 정렬 hero, VibeCode Purple, 왼쪽 컬러 보더, shadcn/ui, Glassmorphism 같은 요소가 포함됨
탐지는 Playwright 기반 headless browser로 페이지를 로드한 뒤 DOM과 계산된 스타일을 읽는 방식으로 처리했고, 스크린샷을 LLM이 판정하는 방식은 쓰지 않음
결과는 Heavy slop 21%, Mild 46%, Clean 33%로 나뉘었고, 단일 패턴만으로 AI 생성 사이트로 단정하지 않고 충족한 패턴 수로 구간을 나눔
이런 경향은 심각한 문제라기보다 영감 부족에 가까우며, 앞으로는 비슷한 출력물 사이에서 눈에 띄기 위해 더 공들인 디자인이 필요해질 수 있음

Show HN 증가와 디자인 패턴 점수화

Show HN 제출 수가 크게 늘었고, 새 계정에 대해서는 Hacker News 운영진이 Show HN 제출을 제한할 정도로 강화됨
- 2026년 3월의 감소 구간은 dang이 지적한 대로 /showlim 적용 시점과 맞물림
최근 Show HN 프로젝트들에서 일반적이고 무균질한 인상이 반복적으로 드러났고, 이를 주관적 느낌에만 두지 않고 500개 페이지 기준으로 점수화함
점수화 대상은 최신 Show HN 랜딩 페이지 500개였고, 공통적인 AI 디자인 패턴을 기준으로 분류함

AI 디자인 패턴 기준

공통 패턴은 대체로 폰트, 색상, 레이아웃 특이점, CSS 패턴으로 묶임
왼쪽 컬러 보더는 AI 생성 디자인을 가리키는 강한 신호로 작동했고, 실제 여러 페이지에서 반복적으로 나타남
폰트
- Inter가 전반적으로 쓰이지만, 특히 가운데 정렬된 hero 헤드라인에서 두드러짐
- LLM은 Space Grotesk, Instrument Serif, Geist 같은 조합도 자주 사용함
- Inter 중심 hero에서 한 단어만 serif italic으로 강조하는 구성도 포함됨
색상
- 이른바 VibeCode Purple이 반복적으로 나타남
- 상시 다크 모드와 중간 회색 본문 텍스트, 대문자 섹션 라벨 조합이 자주 보임
- 다크 테마에서는 본문 텍스트 대비가 간신히 기준을 넘는 수준인 경우도 들어감
- 전반적인 그라데이션 남용, 큰 컬러 글로우, 컬러 박스 섀도도 패턴에 포함됨
레이아웃 특이점
- 일반적인 sans 서체 기반의 가운데 정렬 hero가 반복됨
- hero의 H1 바로 위에 badge가 놓이는 구성이 자주 나타남
- 카드의 상단이나 왼쪽 가장자리에 컬러 보더가 붙는 패턴도 들어감
- 상단 아이콘이 달린 동일한 feature 카드가 반복 배치됨
- 숫자 1, 2, 3 단계 시퀀스, 통계 배너 행, 이모지 아이콘이 있는 사이드바나 내비게이션, 대문자 제목과 섹션 라벨도 기준에 포함됨
CSS 패턴
- shadcn/ui
  - Glassmorphism

탐지 방식과 결과

각 사이트는 Playwright 기반 headless browser로 로드했고, 페이지 내부의 작은 스크립트가 DOM과 계산된 스타일을 읽어 패턴을 검사함
- 모든 패턴은 결정적 CSS 또는 DOM 검사로 처리했고, 스크린샷을 찍어 LLM이 시각적으로 판정하는 방식은 쓰지 않음
이 방식은 오탐지를 만들 수 있지만, 수동 QA에서는 대략 5~10% 수준으로 확인됨
점수화 코드를 공개해 재현하거나 개선하거나, 자신의 사이트를 점수화하는 데 관심이 있으면 공개를 검토할 수 있게 해 둠
단일 패턴만으로 AI 생성 사이트로 단정하지 않고, 15개 패턴 중 몇 개를 만족하는지에 따라 3개 구간으로 나눔
- Heavy slop: 5개 이상 패턴 충족, 105개 사이트, 21%
- Mild: 2~4개, 230개 사이트, 46%
- Clean: 0~1개, 165개 사이트, 33%
이런 결과는 심각한 문제라기보다 영감 부족에 더 가까움
- 사업 아이디어 검증에서는 원래 화려한 디자인이 핵심이 아니었고, AI 이전에도 많은 사이트가 Bootstrap처럼 비슷하게 보였음
- 직접 디자인을 다듬는 경우와 LLM 기본 출력물을 거의 그대로 배포하는 경우 사이에 차이가 뚜렷함
- LLM 이전에도 CSS/HTML 템플릿을 그대로 쓰면 비슷한 현상이 나타남
앞으로는 이런 slop 속에서 눈에 띄기 위해 다시 더 공들인 디자인이 필요해질 수 있음
동시에 웹의 주요 사용자가 AI agent가 되면, 디자인의 중요성이 얼마나 남을지는 여전히 불확실함