Scoring Show HN submissions for AI design patterns

개요

Show HN 게시물에서 AI 디자인 패턴을 탐지하기 위한 시도로, 500개의 Show HN 페이지를 평가하여 AI 생성 디자인의 특징을 정량화했습니다.

주요 내용

* AI 생성 디자인 패턴의 증가: Claude Code의 등장 이후 AI 생성으로 보이는 Show HN 프로젝트가 크게 증가했으며, 일부는 Hacker News의 moderators가 새로운 계정의 Show HN 제출을 제한해야 할 정도였습니다.
* 주요 AI 디자인 패턴:
* 폰트: Inter가 전반적으로 사용되고, 특히 중앙 정렬된 헤드라인에 자주 쓰이며, Space Grotesk, Instrument Serif, Geist Serif italic 등이 특정 단어 강조에 사용됩니다.
* 색상: "VibeCode Purple", 퍼마 다크 모드에 중간 회색 본문 텍스트 및 모든 대문자 섹션 라벨, 어두운 테마에서 겨우 통과하는 대비, 그라디언트, 큰 컬러 글로우 및 박스 섀도우 등이 관찰됩니다.
* 레이아웃 퀴크: 중앙 정렬된 영웅(hero) H1, 영웅 바로 위 배지, 카드 가장자리 (상단 또는 왼쪽)의 컬러 테두리, 아이콘이 위에 있는 동일한 기능 카드, 번호가 매겨진 "1, 2, 3" 단계 시퀀스, 이모티콘 아이콘이 있는 사이드바 또는 네비게이션, 모든 대문자 헤딩 및 섹션 라벨 등이 있습니다.
* CSS 패턴: shadcn/ui, 글래스모피즘(Glassmorphism) 등이 포함됩니다.
* AI 디자인 탐지 방법: Playwright를 사용한 헤드리스 브라우저로 각 사이트를 로드하고, 인페이지 스크립트로 DOM과 계산된 스타일을 분석하여 미리 정의된 CSS 또는 DOM 검사를 통해 각 패턴을 결정론적으로 점수화합니다.
* 평가 결과: 500개의 Show HN 제출물을 15가지 패턴에 대해 평가한 결과, 5개 이상의 패턴을 가진 "Heavy slop" 그룹이 21%(105개), 2~4개의 패턴을 가진 "Mild" 그룹이 46%(230개), 0~1개의 패턴을 가진 "Clean" 그룹이 33%(165개)를 차지했습니다.
* 결론 및 향후 전망: AI 생성 디자인 패턴이 많다는 것은 비즈니스 아이디어 검증 자체에 문제는 없지만, 독창적인 디자인보다는 LLM의 기본값에 의존하는 경향을 보입니다. 향후에는 독창적인 디자인으로 차별화하려는 노력이 늘어날 것으로 예상되지만, AI 에이전트가 웹의 주 사용자가 된다면 디자인의 중요성이 달라질 수 있습니다.

시사점

이 평가는 AI가 생성한 디자인의 일반적인 특징을 파악하고 이를 객관적으로 측정하려는 시도를 통해, 웹 디자인 트렌드 변화와 AI 기술이 디자인 분야에 미치는 영향을 보여줍니다.