슬롭 UI를 알아보는 10가지 징후

슬롭 UI는 AI가 만든 인터페이스 중 어색하거나, 맥락에 맞지 않거나, 목적이 없거나, 지나치게 획일적인 UI를 뜻하며, 방향성 없는 바이브 코딩은 앱을 저렴해 보이고 쓰기 싫게 만들 수 있음 그라데이션과 색상 남용, 반복되는 카드 형태와 이모지 등은 사용 목적보다 어디서나 비슷한 장식을 앞세우는 대표적인 징후임 상태 배지는 실제로 구별할 상태나 확인할 정보가 없으면 불필요하며, 대학 앱의 디지털 ID에 붙은 “active” 배지가 이런 사례임 정렬 오류와 상투적인 글꼴, 개발 대화에서 끌어온 불필요한 문구는 실제 사용자에게 필요한 화면보다 생성 과정의 흔적을 드러냄 비판의 대상은 바이브 코딩 자체가 아니라 디자인에 들이는 노력의 부족임. 잘 만든 바이브 코딩 UI는 보기 좋을 수 있지만, 과장된 홍보 문구로 모든 화면을 랜딩 페이지처럼 취급해서는 안 됨 슬롭 UI의 범위와 문제의식 대학 앱이 “사소한 UI 개선”이라는 이름으로 업데이트됐지만, 결과는 이전의 투박한 UI가 더 나을 정도로 AI가 대충 만든 듯한 인터페이스였음 슬롭 UI는 AI가 만든 UI가 어색하거나, 들어갈 자리에 맞지 않거나, 목적이 없거나, 지나치게 획일적인 경우를 가리킴 방향성 없는 바이브 코딩에서 이런 문제가 나타나며, 바이브 코딩도 제대로 하면 좋은 UI를 만들 수 있지만 그렇지 못한 결과물은 앱을 저렴해 보이고 매력 없게 만듦 Cloudflare가 최근 만든 웹사이트도 슬롭 코딩 사례로 비판받으며, 이런 웹사이트는 요즘의 AI 영상처럼 보면 알아볼 수 있음 1. 어디에나 들어가는 그라데이션 가장 크고 눈에 띄는 징후는 그라데이션 남용으로, 버튼과 배경을 비롯해 넣을 수 있는 거의 모든 곳에 들어감 특히 보라색을 반복적으로 사용하는 경향이 있음 2. 의미 없이 뒤섞인 색상 색상에 의미를 부여하지 않은 채 서로 어울리지 않는 여러 색을 화면에 배치함 UI의 항목을 구별한다는 이유 등으로 색을 늘리며, 70-30-10 규칙을 따르지 않고 곳곳에 색상을 추가함 3. 불필요하게 깜박이는 배지 여러 요소에 깜박이는 배지를 붙이며, 학습 데이터의 영향일 수 있다는 추측도 있지만 이유는 확실하지 않음 대학 앱의 디지털 ID는 QR 코드와 얼굴을 보여주는데, 여기에 “active” 배지가 붙어 있음 비활성 상태가 되면 앱에서 로그아웃되므로, 화면 안에서 이 배지는 구별할 정보를 제공하지 않음 프로필의 “active student” 배지도 무엇과 ...