# AI 디자인 패턴으로 Show HN 제출물 점수화 > Clean Markdown view of GeekNews topic #28825. Use the original source for factual precision when an external source URL is present. ## Metadata - GeekNews HTML: [https://news.hada.io/topic?id=28825](https://news.hada.io/topic?id=28825) - GeekNews Markdown: [https://news.hada.io/topic/28825.md](https://news.hada.io/topic/28825.md) - Type: GN+ - Author: [neo](https://news.hada.io/@neo) - Published: 2026-04-24T05:38:35+09:00 - Updated: 2026-04-24T05:38:35+09:00 - Original source: [adriankrebs.ch](https://www.adriankrebs.ch/blog/design-slop/) - Points: 1 - Comments: 1 ## Topic Body - 최근 **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 제출을 제한](https://news.ycombinator.com/item?id=47300329)할 정도로 강화됨 - 2026년 3월의 감소 구간은 [dang](https://news.ycombinator.com/user?id=dang)이 지적한 대로 [/showlim](https://news.ycombinator.com/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**가 되면, 디자인의 중요성이 얼마나 남을지는 여전히 불확실함 ## Comments ### Comment 56165 - Author: neo - Created: 2026-04-24T05:38:36+09:00 - Points: 1 ###### [Hacker News 의견들](https://news.ycombinator.com/item?id=47864393) - 이제 **사이드 프로젝트** 대부분이 **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](https://webaim.org/resources/contrastchecker) - 개인 프로젝트엔 **AI를 쓰고 싶지 않음** 문제를 고민하고, 풀고, 직접 구현하고, 새로운 걸 배우고, 혹시 인기 있고 유용해질지 상상하는 과정 자체가 재미인데 AI로 손가락만 튕겨 결과를 만들면 그 재미가 사라짐 일상 업무에서야 지루한 일을 줄이려고 AI를 쓰면 되고, 사이드 프로젝트까지 그러고 싶진 않음 거기에 매달 **200달러**를 내고 개인 프로젝트에 AI를 쓰는 특권을 산다는 것도 내겐 너무 어리석게 느껴짐 - 목표가 뭐냐에 따라 다름 내 **사이드 프로젝트**는 전부 뭔가를 배우려고 시작한 거라, AI로 **끝으로 건너뛰기 버튼**을 누르는 건 전혀 맞지 않음 - AI가 시간을 아껴줄 수도 있지만, 종종 **도메인에서의 독창적 사고**까지 건너뛰게 만듦 그런데 "내 사이드 프로젝트를 보여준다"는 맥락에서 사람들이 궁금해하는 건 바로 그 사고 과정임 - 사이드 프로젝트에 무슨 **완료 긴급성**이 그렇게 큰지 잘 모르겠음 보통 진짜 급한 건 상업 프로젝트 쪽임 - 디자인 패턴 목록은 괜찮지만, 빠진 큰 요소로 **rounded rect 그리드**가 있다고 봄 [https://correctarity.com/roundedrects](https://correctarity.com/roundedrects) 아마 글에서 말한 "Icon-topped feature card grid"가 그 공식 명칭에 가까울 수도 있겠음 - **카드 UI**는 이미 한동안 유행이었고, 디자인 시스템에서 아주 각진 모서리를 마지막으로 본 게 언제인지 기억도 잘 안 남 적어도 Apple이 **rounded corners 특허**를 냈던 시절부터 이어진 흐름임 - 이건 LLM보다는 **NextJs 스타일** 영향이 더 커 보임 - 이것도 같이 봐야 함 [https://news.ycombinator.com/showlim](https://news.ycombinator.com/showlim) HN 이력이 많지 않은 계정은 지금 이 화면을 보게 되는 경우가 많고, OP 차트 오른쪽의 하락세에도 이게 영향을 줌 Ask HN: Please restrict new accounts from posting - [https://news.ycombinator.com/item?id=47300329](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](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 에이전트가 웹의 주 사용자가 되면 디자인이 얼마나 중요할지 모르겠다는 말엔 별로 끌리지 않음 질병과 전쟁으로 지상 세계가 망가지고, 혁신의 공수표와 중금속 잔해로 오염됐다면 새로운 **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 미학은 종종 "이게 실제로 어떻게 작동하는지 깊이 생각하지 않았다"는 신호처럼 보이고, 기반 기술이 탄탄해도 그건 충분히 **적신호**가 됨