AI 디자인 패턴으로 Show HN 제출물 점수화
(adriankrebs.ch)- 최근 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 제출을 제한할 정도로 강화됨
- 최근 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가 되면, 디자인의 중요성이 얼마나 남을지는 여전히 불확실함
Hacker News 의견들
-
이제 사이드 프로젝트 대부분이 AI 도움으로 만들어진다고 봄
보통 시간 제약이 있으니 AI가 시간을 아껴주면 안 쓸 이유가 크지 않음
게다가 회사 일에서는 실험하기 어려운 새 AI 도구를 시험해보기에도 딱 좋은 장소임
이 글 제목은 처음엔 핵심을 잘 못 짚었고, vibe coded를 오용해서 실제로 더 흥미로운 주제인 AI 생성 프런트엔드의 시각적 공통점을 제대로 전달하지 못했음
지금은 제목이 더 나아졌고, "Show HN submissions tripled and now mostly have the same vibe-coded look" 쪽이 훨씬 정확해 보임- LLM 보조 웹페이지에서 가장 거슬리는 건, 특히 Claude Code에서 두드러지는데 기본적인 웹 접근성 가이드라인을 너무 무시한다는 점임
다크 모드 사이트인데 본문과 보조 텍스트가 어두운 갈색이나 베이지 톤이라 가독성이 처참한 경우를 너무 자주 봄
안전하게 가려면 텍스트와 배경의 대비비가 최소 4:1 정도는 되어야 함
이건 고치기도 어렵지 않고, Web Content Accessibility Guidelines를 skill에 넣기만 해도 됨
https://webaim.org/resources/contrastchecker - 개인 프로젝트엔 AI를 쓰고 싶지 않음
문제를 고민하고, 풀고, 직접 구현하고, 새로운 걸 배우고, 혹시 인기 있고 유용해질지 상상하는 과정 자체가 재미인데 AI로 손가락만 튕겨 결과를 만들면 그 재미가 사라짐
일상 업무에서야 지루한 일을 줄이려고 AI를 쓰면 되고, 사이드 프로젝트까지 그러고 싶진 않음
거기에 매달 200달러를 내고 개인 프로젝트에 AI를 쓰는 특권을 산다는 것도 내겐 너무 어리석게 느껴짐 - 목표가 뭐냐에 따라 다름
내 사이드 프로젝트는 전부 뭔가를 배우려고 시작한 거라, AI로 끝으로 건너뛰기 버튼을 누르는 건 전혀 맞지 않음 - AI가 시간을 아껴줄 수도 있지만, 종종 도메인에서의 독창적 사고까지 건너뛰게 만듦
그런데 "내 사이드 프로젝트를 보여준다"는 맥락에서 사람들이 궁금해하는 건 바로 그 사고 과정임 - 사이드 프로젝트에 무슨 완료 긴급성이 그렇게 큰지 잘 모르겠음
보통 진짜 급한 건 상업 프로젝트 쪽임
- LLM 보조 웹페이지에서 가장 거슬리는 건, 특히 Claude Code에서 두드러지는데 기본적인 웹 접근성 가이드라인을 너무 무시한다는 점임
-
디자인 패턴 목록은 괜찮지만, 빠진 큰 요소로 rounded rect 그리드가 있다고 봄
https://correctarity.com/roundedrects
아마 글에서 말한 "Icon-topped feature card grid"가 그 공식 명칭에 가까울 수도 있겠음- 카드 UI는 이미 한동안 유행이었고, 디자인 시스템에서 아주 각진 모서리를 마지막으로 본 게 언제인지 기억도 잘 안 남
적어도 Apple이 rounded corners 특허를 냈던 시절부터 이어진 흐름임 - 이건 LLM보다는 NextJs 스타일 영향이 더 커 보임
- 카드 UI는 이미 한동안 유행이었고, 디자인 시스템에서 아주 각진 모서리를 마지막으로 본 게 언제인지 기억도 잘 안 남
-
이것도 같이 봐야 함
https://news.ycombinator.com/showlim
HN 이력이 많지 않은 계정은 지금 이 화면을 보게 되는 경우가 많고, OP 차트 오른쪽의 하락세에도 이게 영향을 줌
Ask HN: Please restrict new accounts from posting - https://news.ycombinator.com/item?id=47300329 - March 2026 (515 comments)
Is Show HN dead? No, but it's drowning - https://news.ycombinator.com/item?id=47045804 - Feb 2026 (425 comments) -
사람들은 2026 도구로 코드를 쓰면서도 2016 기준으로 평가받고 싶어 함
2016년에 1만 줄 코드를 보면 그 자체로 일정한 proof-of-work가 있었고, 그만큼 테스트와 사고, 몇 달간 부딪히며 다듬은 시간이 자연스럽게 따라왔음
하지만 2026년의 1만 줄 코드는 토큰에 돈을 조금 썼다는 뜻일 뿐일 수 있고, 큰 OpenAPI 스펙을 특정 언어 API로 바꾸는 식이면 한 번에 아주 빨리 생성되기도 함
프로젝트의 90% 이상이 실제 시나리오에서 한 번도 돌아본 적 없고, AI가 스스로 작성한 단위 테스트만 통과했을 가능성도 충분함
그 자체가 본질적으로 틀린 건 아니지만, 평가 기준은 바뀌어야 함
Show HN의 문턱이 아주 높을 필요는 없더라도, "텍스트 박스에 몇 줄 쳤다"보다 조금은 높아야 함
그게 나빠서가 아니라, 귀한 사람의 주의를 끄는 비용이 너무 싸졌기 때문임
좀 씁쓸하긴 하지만, 사실 아이디어와 몇 개 프롬프트만으로 만들 수 있는 종류의 프로젝트는 AI 이전에도 이미 꽤 많이 나와 있었음
AI 코딩 도구는 "너무 많이 본 프로젝트" 목록을 조금 더 키웠을 뿐이고, 실제로는 예전부터 넘치던 같은 종류의 프로젝트가 더 거세게 밀려오는 느낌임- 이건 사실상 지금 AI 업계 전반에 그대로 들어맞음
주말 동안 제품 하나 만들어 놓고 몇 년 전 그 제품군이 받던 가격을 근거로 터무니없는 가격을 붙이는 걸 자주 봄
그 가격이 원래는 거기까지 가는 데 들던 노력의 반영이었다는 사실을 잘 못 받아들이는 듯함
이제 상황은 달라졌음 - 이건 코딩보다 더 넓은 영역에도 적용됨
지나치게 화려한 슬라이드 덱이나 새 브랜딩을 만들고도 예전 기준의 성취처럼 평가받고 싶어 하는데, 결국 스스로 업적을 만들어내는 셈임
- 이건 사실상 지금 AI 업계 전반에 그대로 들어맞음
-
AI 에이전트가 웹의 주 사용자가 되면 디자인이 얼마나 중요할지 모르겠다는 말엔 별로 끌리지 않음
질병과 전쟁으로 지상 세계가 망가지고, 혁신의 공수표와 중금속 잔해로 오염됐다면 새로운 Eden을 지어야 함
Gemini라는 개념은 좋아하지만, 여전히 시각 매체로 표현하고 싶음
Dillo 정도 제약 안에서도 아름다운 걸 만들 수 있을 것 같고, Wireguard mesh를 운반층으로 쓰고 초대를 개인적 신뢰에 따라 주고 거두는 식이면
거대한 플랫폼이 모든 걸 증폭하고 평균화해 버리지 않는 곳에서 다시 아이디어가 살아날 수도 있겠다고 봄 -
디자인 얘기라면, solo founder SaaS부터 YC에서 20억 달러 받은 회사까지 기술 프로젝트 사이트는 수년째 다 비슷하게 보여왔음
이제는 LLM이 가끔이라도 조금 다른 CSS를 환각해 주길 바랄 뿐임- 소프트웨어 업계는 원래부터 트렌드 추종이 심했음
Bootstrap, Web 2.0, Tailwind, Material UI, Rails, NextJS 같은 흐름이 계속 돌았고 지금은 그게 AI일 뿐임
업계가 예전엔 지름길을 안 썼던 것처럼 굴 필요는 없음
장인 정신 코드를 자랑할 수는 있겠지만, 비즈니스 용도로 소프트웨어를 쓰는 쪽은 원래 그런 데 큰 관심이 없었음
게다가 컴퓨터 과학의 철학 자체가 결국 누구나 코딩할 수 있어야 한다는 쪽 아니었나 싶음
라이선스 장벽도 반대해 왔고, 그래서 지금 코드가 commodity가 되고 진입장벽이 거의 사라진 것도 그 연장선처럼 보임
- 소프트웨어 업계는 원래부터 트렌드 추종이 심했음
-
어떤 Show HN 제출물은 처음엔 인상적이었는데 들여다보면 아예 동작하지 않거나, 누군가가 직접 쓴 척하는 AI 코드인 게 너무 티 남
예전엔 GitHub가 이력서 신호로 어느 정도 통했지만, 이제 AI가 대부분을 해버리면 그 신호 가치가 사실상 사라짐 -
요약만 보여주지 말고 상세 결과도 같이 보여줬으면 좋겠음
예를 들면 점수가 높고 낮은 제출물 목록을 같이 내서 방법론이 맞는지 직접 vibe check할 수 있어야 함
그리고 한 시점의 임의적 카테고리 파이차트보다, 시간에 따른 추세 변화를 보여주는 편이 더 나음 -
MVP나 탐색 단계라면 LLM이 만든 UI도 충분히 받아들일 만함
다만 장난감이 제품이 되기 시작하면 진지하게 가져갈 시점에 UI를 다시 손봐야 함
사람을 위한 인터페이스에는 결국 사람 손맛이 값어치를 함
AI가 HN을 봇으로 범람시키는 문제는 관련은 있지만, 성격이 좀 다른 별도 이슈임 -
문제의 핵심이 AI 생성 자체라고 보진 않음
하지만 대충 만든 AI 생성 UI/UX는 정말 문제임
vibe-coded 미학은 종종 "이게 실제로 어떻게 작동하는지 깊이 생각하지 않았다"는 신호처럼 보이고, 기반 기술이 탄탄해도 그건 충분히 적신호가 됨