AI가 만든 슬롭 UI, 10가지 징후
10 Tells of a Slop UI
한 대학 앱이 '사소한 UI 개선' 후 AI가 생성한 슬롭 UI로 전락했다. 작성자는 그라디언트 남용, 무의미한 색상, 맥동하는 배지, 손톱 모양 카드, 이모지, 정렬 오류, Inter와 JetBrains Mono 폰트, 중복 텍스트, 글래스모피즘, 일반적인 태그라인 등 10가지 징후를 꼬집는다. 바이브 코딩 자체를 반대하는 건 아니지만, 노력 없는 AI UI가 앱을 싸구려로 만든다고 지적한다.
내 디지털 ID에 'verified' 배지가 붙어 있다. 왜? API 호출로 확인하는 것도 아니고, 설령 그렇다 해도 의미가 없다. 내가 위조 ID를 만든다면 'unverified'를 일부러 넣겠는가?
HN 토론
234- tlahtinen
올해 초에 나는 내가 작업하는 Unreal 게임의 화면 하나를 디자인하는 데 Claude를 사용했다. 처음에는 와, 정말 멋진 레이아웃이다, 이건 게임 체인저이고 나에게 엄청난 이점을 준다고 생각했다.
1년도 안 되어서 나는 그것이 얼마나 Claude스러운지 부끄럽다 - 구석에서 깜빡이는 점, 헤더 텍스트를 구분하는 이중 //, 폰트 선택... 이제 나는 같은 패턴을 어디서나 본다, 그리고 관객들도 그것을 눈치채고 있을 거라고 확신한다.
나는 여전히 내 작업에 Claude를 사용하지만, 훨씬 더 아껴서 사용한다; 색상 구성과 폰트 제안을 요청하지만 (Rajdhani나 Share Tech Mono는 안 된다!), 그것들은 대부분 영감을 위한 것이고 맹목적으로 따라 하지는 않는다. 내가 더 현명하게 하고 있는 것 같지만, 어쩌면 1년 후에는 내가 아직 그 함정에서 빠져나오지 못했다는 것을 깨닫게 될지도 모른다 :)
- weakfish
로봇이 "3 campuses, one app" 같은 예시를 쓸 때 무슨 일이 일어나는지 정확히 짚어내려고 노력해 왔는데, 저자가 그것을 채팅 컨텍스트가 새어 나오는 것으로 식별해낸 것이 기쁘다.
다른 버전은 로봇이 프롬프트의 일부에 과도하게 집중해서 여기저기 주석을 남기는 것이다. 예를 들어 내가 TestContainers를 사용한 통합 테스트를 선호하라고 요청하면, 모든 새 테스트에 "Real services, no mocks" 같은 주석을 추가하기 시작한다.
그리고 네, 나는 *.MD 파일에 그렇게 하지 말라고 하는 줄을 넣어 두었다.
- czhu12
적어도 이들 중 일부는 그냥 신경을 안 써서 그런 것이다. 나는 최근에 이 랜딩 페이지 https://tui2web.com/ 를 바이브 코딩했고, 몇 시간의 반복 끝에 LLM이 내놓은 많은 기본값들을 물리쳤다. 마음껏 비웃어도 된다, 나는 별로 애착이 없지만, 그래도 꽤 괜찮게 해냈다고 생각했다.
- vallerie
산문에 구현 세부 사항이 들어가는 문제를 언급한 이 블로그가 정말 좋다. 아마도 바이브 코딩된 앱에서 내가 가장 짜증나는 부분일 것이다.
이것의 상당 부분은 해결하기 쉬운 문제다 - 그냥 원하는 에이전트에게 "모든 사용자에게 보이는 텍스트를 i10n용 번역 파일에 넣어라"라고 프롬프트하고, 그런 다음 사람이 그 산문을 검토하고 편집하면 된다.
- zinoc
이것은 Bootstrap CSS 프레임워크의 빠른 초기 채택과 비슷하다. 많은 사람들이 똑같아 보이고 느껴지는 웹사이트가 갑자기 급증하는 것에 짜증을 냈지만, 나는 이것이 사용성과 접근성 측면에서 엄청난 진전이었고, 초기의 획일적인 웹사이트 물결은 충분히 가치가 있었다고 생각한다.
- jph
나는 이 규칙들로 시작해서 원하는 대로 조정한다...
강조:
- *요약.* 신문처럼 첫 문단 (누가, 무엇을, 어디서, 언제, 어떻게, 왜).
- *이점.* 독자에게 주는 이점에 초점을 맞춘다.
- *왜 중요한가* 독자에게 무엇을 더해 주는지에 초점을 맞춘다.
금지:
- *기술 스택 금지.* 기술 구현을 말하지 않는다; 다른 곳에서 다룬다.
- *숫자 금지.* 페이지 수, 부품 수, 장 수 등을 말하지 않는다.
- *특수 서식 금지.* 굵게, 기울임, 글머리 기호 목록을 쓰지 않는다.
- *"만약" 금지.* "만약 X를 하면 Y가 된다"라고 말하지 말고, 긍정문을 사용한다.
- *장황한 문장 금지.* 절을 많이 쓰거나 단어를 너무 많이 쓰지 않는다.
- *수동태 금지.* 수동태나 주어가 아닌 문장을 쓰지 않는다.
- mjr00
"형편없는 음악가"에서 "그럭저럭 괜찮은 음악가"(적어도 청취자와 팬이 있을 만큼 괜찮은)로 졸업할 때 내가 배운 가장 중요한 것은, 노래를 나쁜 것에서 좋은 것으로 바꾸는 단 하나의 큰 비법은 없다는 것이다: 100가지의 작은 비법들이 모여서 그렇게 되는 것이다. 그리고 그것들이 무엇인지 알려면 경험이 필요하다. 훈련된 청취자는 "중역대가 너무 압축됐다", "고음이 너무 많다", "드럼 트랜지언트가 뚫고 나오지 않는다"라고 말할 수 있지만, 평범한 일반 청취자는 그냥 "잘 모르겠는데, 그냥 소리가 맞지 않아"라고 말할 것이다.
이 UI 슬롭도 마찬가지다. 타임라인에서 살짝 어긋난 점, 웹사이트 전체를 고려할 때 별로 말이 안 되는 색상 선택, LLM스러운 텍스트 사용. 여기 있는 것 중 어느 하나도 그 자체로 명백히 큰 문제는 아니다. 하지만 웹사이트에 이런 것들이 50개쯤 쌓이면, 사용자들은 "이건 슬롭이다"라는 느낌을 받게 된다.
디테일이 중요하다. 개별적으로 보면 사소해 보이지만, 전체적으로 보면 그것이 어떤 것을 AI 슬롭 쓰레기 더미에서 실제로 좋은 것으로 끌어올리는 요소다.
- tptacek
"비활성" 학생은 등록은 되어 있지만 현재 수업에 출석하지 않는 학생이다.
이것은 매우 유용한 기사지만, 정렬 같은 것들에 대한 이런 불평 중 많은 부분은 프론트엔드 사람이 아닌 내가 어떤 종류의 웹 프론트엔드든 만들 때 자연스럽게 나오는 결과이기도 하다. 그러니 너무 걱정하지는 마라.