AI가 만든 성의 없는 UI를 알아보는 징후 10가지

AI 요약

글쓴이는 대학 앱이 ‘사소한 UI 개선’을 거친 뒤 오히려 조잡해졌다고 말하며, 목적 없이 장식만 늘리거나 어디서나 본 듯한 AI 생성 UI를 ‘slop UI’라고 부릅니다. 바이브 코딩 자체를 반대하는 것은 아니지만, 디자인에 충분한 고민을 들이지 않은 결과물이 앱을 싸 보이게 만든다는 주장입니다.

반복되는 디자인 패턴

글은 열 가지 징후를 듭니다. 버튼과 배경을 가리지 않는 그라디언트, 어울리지 않는 색을 여러 개 늘어놓는 ‘무지개 범벅’, 어디서나 깜박이는 상태 배지가 대표적입니다. 대학 앱의 디지털 신분증에는 항상 활성 상태인 QR 코드에 ‘active’ 배지가 붙고, 프로필에는 ‘active student’가 표시됩니다. 대학 로고 옆의 ‘verified’ 배지도 실제 검증 여부와 관계가 없어 장식에 그친다고 지적합니다.

글쓴이는 손톱만 한 색상 장식이 들어간 카드, 이모지 남용, 정렬이 어긋난 SVG나 ASCII 아트도 꼽습니다. 글꼴은 대개 Inter이며, 프로그래밍 관련 사이트에는 JetBrains Mono를 붙이고 기술을 언급할 때 ‘//’를 덧붙이는 경향이 있다고 합니다. 사용자 요청에서 가져온 불필요한 문구도 문제로 듭니다. 예컨대 Hugo로 만들고 Neovim에서 작성했다는 설명은 방문자에게 쓸모가 없는데도 결과물에 들어갑니다.

나머지 징후는 ‘한 캠퍼스, 하나의 앱’ 같은 뻔한 슬로건, Glassmorphism과 비슷비슷한 Brutalism, ‘Elevate’, ‘Seamless’, ‘Next-Generation’ 같은 과장된 표현입니다. 모든 화면을 실제 도구가 아니라 랜딩 페이지처럼 꾸민다는 것이 글쓴이의 비판입니다.

Reddit 반응

• @u/corobo — 바이브 코딩의 첫 번째 징후는 vercel.app 하위 도메인입니다.
  • @u/maninas — Vercel은 정말 질색입니다.
  • @u/GenericAHHyoutuber — 저는 대학생이고 이미 가난합니다.
  • @u/corobo — 개인을 판단하려는 말은 아닙니다. 도메인을 설정하지 않고 바이브 코딩만 하는 사람이 아주 많다는 뜻입니다.
  • @u/Ambitious-Can-5074 — 학교에서 무료 웹 호스팅을 제공할 수도 있습니다. 그런 학교가 많습니다.
  • @u/_Kristian_ — .com 도메인은 1년에 9달러입니다.
• @u/TheRealYM — 섹션 제목 위에 대문자와 넓은 자간, 다른 색으로 섹션 이름을 적어 놓는 ‘눈썹’ 장식도 있습니다.
• @u/231497 — ‘AI slop UI 징후 10가지’라는 페이지는 하나같이 자기 글에서 비판하는 방식으로 만들어집니다. Vercel 하위 도메인과 어두운 히어로 영역을 쓰고, 실제 징후는 네 가지도 못 대면서 나머지는 호버 효과 이야기로 채웁니다. 진짜 징후는 그라디언트나 Inter 글꼴이 아니라, 누군가 이런 번호 목록을 만들고 그걸 결과물이라고 생각했다는 점입니다.
  • @u/electricity_is_life — 무슨 말인가요? 글을 실제로 읽었나요? 괜찮은 글이고 호버 효과 이야기는 전혀 없습니다.
  • @u/GenericAHHyoutuber — 제 대학 앱이 그렇게 엉망으로 만들어졌다는 이야기에 더 가까웠습니다.
• @u/SoliderFromHell — 깜박이는 ‘상태 표시’ 배지는 정말 지긋지긋합니다.
• @u/fisherman363 — 긴 대시, 매번 같은 글꼴을 쓰는 바보 같은 알약형 카드, 자간을 지나치게 벌린 글꼴도 있습니다.
  • @u/fucking_passwords — Brutalism 예시에서 빠진 징후가 하나 있습니다. LLM은 ASCII 글꼴이나 그림을 잘 만들지 못합니다. ‘Cake synthesis’를 ‘DAK8 SANTHESIS’라고 썼습니다.
  • @u/hypercosm_dot_net — LLM이 긴 대시를 너무 흔하게 써서 아쉽습니다. 글쓰기를 더 잘하려고 연습 중인데, 긴 대시를 쓸 때마다 조심하게 됩니다. 실제로는 꽤 편리한 문장부호인데도요.
• @u/electricity_is_life — “왜 넣는지 모르겠는데 그냥 넣는다”는 깜박이는 배지 말입니다. 정말 어디에나 있습니다. 페이지 맨 위에서 그런 배지를 보면 그다음부터 안 좋은 경험이 이어지겠구나 싶습니다.
• @u/wiznaibus — 이 말이 맞을 수도 있지만 AI 전에도 그랬습니다. Tailwind 같은 프레임워크가 나오자 모든 게 비슷해졌습니다.
  • @u/rayreaper — 늘 있던 일입니다. 지금은 shadcn이고, 그전에는 Bootstrap이었습니다.
• @u/bytepursuits — 제게 가장 확실한 징후는 어두운 테마만 제공하는 것입니다. 밝은 테마도 없고 시스템 색상 설정도 존중하지 않습니다. 어두운 방에서 비싼 OLED 모니터를 쓰는 개발자는 괜찮겠지만, 시력이 불편하거나 저렴한 VA 패널을 쓰는 사람은 힘듭니다. prefers-color-scheme을 존중하세요.
• @u/Snelly1998 — 고객이 실제로 그런 손톱 모양 카드 장식을 요청한 적이 있습니다. 기본 카드를 보여주면 “여기에 우리 브랜드 색을 넣을 수 있나요?”라고 묻습니다.
• @u/Coderado — 디자인을 비판하면서 고른 글꼴이 흥미롭네요.

원문: Reddit / 번역·요약: Trawling