Show HN 제출이 세 배가 되었고 이제 대부분 같은 vibe-coded 모습을 가지고 있습니다
Source: Hacker News
Hacker News를 탐색하면서 최근 많은 Show HN 프로젝트가 일반적이고 무미건조한 느낌을 주어 순수히 AI가 만든 것처럼 보인다는 것을 눈치챘습니다. 500개의 Show HN 페이지를 AI 디자인 패턴에 따라 점수를 매겨 이 주관적인 느낌을 자동으로 정량화할 수 있을지 궁금해졌습니다.
Claude Code 덕분에 Show HN 프로젝트가 크게 증가했으며, 그 결과 HN 운영진은 새로운 계정에 대해 Show HN 제출 제한까지 해야 했습니다.
다음은 최근 몇 년간 Show HN 제출이 어떻게 증가했는지 보여줍니다:
이렇게 많은 페이지를 AI 디자인 패턴에 따라 점수를 매길 수 있게 되었습니다.
AI 디자인 패턴
디자이너가 최근에 “컬러 왼쪽 테두리는 텍스트의 em‑dash만큼 AI‑생성 디자인의 신호가 된다”라고 말해서 많은 페이지에서 눈에 띄기 시작했다. 다른 디자이너들에게 물어보니, 흔한 AI 패턴은 폰트, 색상, 레이아웃 특이점, CSS 패턴으로 구분할 수 있다.
폰트
- 모든 요소에 Inter 사용, 특히 가운데 정렬된 히어로 헤드라인
- LLM은 Space Grotesk, Instrument Serif, Geist 같은 특정 폰트 조합을 자주 사용
- 그 외는 Inter이지만 강조 단어에 Serif 이탤릭 사용
색상
- “VibeCode Purple”
- 중간 회색 본문 텍스트와 전체 대문자 섹션 라벨을 가진 영구 다크 모드
- 다크 테마에서 최소한의 본문 텍스트 대비
- 어디에나 그라디언트
- 큰 컬러 글로우와 컬러 박스‑쉐도우
레이아웃 특이점
- 일반적인 산세리프로 설정된 가운데 정렬 히어로
- 히어로 H1 바로 위에 배지
- 카드의 상단 또는 왼쪽 가장자리에 컬러 테두리
- 아이콘이 위에 있는 동일한 피처 카드들
- 번호가 매겨진 “1, 2, 3” 단계 순서
- 통계 배너 행
- 이모지 아이콘이 있는 사이드바 또는 네비게이션
- 전체 대문자 헤딩 및 섹션 라벨
CSS 패턴
shadcn/ui- Glassmorphism
예시 스크린샷
Inter 히어로 위의 배지.
같지만, 다른 페이지.
상단에 색상 테두리.
아이콘 상단 기능 카드 그리드.
그라데이션 배경 + 글래스모피즘 카드.
Show HN 제출물에서 AI 디자인 감지
이러한 패턴을 체계적으로 점수화하기 위해 최신 Show HN 제출물 500개를 처리했습니다:
- 헤드리스 브라우저(Playwright)가 각 사이트를 로드합니다.
- 페이지 내 스크립트가 DOM을 분석하고 계산된 스타일을 읽어냅니다.
- 모든 패턴은 결정론적인 CSS 또는 DOM 검사이며, 스크린샷을 찍지 않고 LLM이 시각을 판단하지도 않습니다.
이 방법은 불가피하게 일부 오탐을 발생시키며, 수동 QA에 따르면 오류율은 약 5‑10 % 정도입니다. 점수 매기기 코드를 오픈소스로 공개하여 재현하거나 개선하고 싶다면 알려 주세요.
결과
단일 패턴이 반드시 AI‑생성 디자인을 의미하는 것은 아니므로, 사이트들은 15가지 패턴 중 몇 개를 트리거하는지에 따라 세 단계로 구분되었습니다:
- Heavy slop (5 + 패턴) – 105개 사이트 – 21 %
- Mild (2–4 패턴) – 230개 사이트 – 46 %
- Clean (0–1 패턴) – 165개 사이트 – 33 %
이게 나쁜가요? 그렇지는 않아요—그냥 영감이 부족할 뿐입니다. 비즈니스 아이디어를 검증하는 것은 언제나 화려한 디자인과는 관계가 없었으며, AI 시대 이전에는 모든 것이 Bootstrap처럼 보였습니다. 맞춤 디자인을 만드는 것과 LLM이 출력하는 기본값 그대로 배포하는 것 사이에는 차이가 있습니다. 이는 CSS/HTML 템플릿을 사용할 때의 LLM 이전 상황과 마찬가지입니다.
디자이너들은 결국 슬롭에서 벗어나 아름답고 독특한 디자인을 만들기 위해 돌아올 것이라고 기대합니다. 반면, AI 에이전트가 웹의 주요 사용자가 되면 디자인이 얼마나 중요한지는 아직 불분명합니다.
이 게시물은 인간이 작성했으며, 점수 매기기와 분석은 AI의 도움을 받았습니다.