DELUJU

AI가 만든 UI에서 'AI 티'를 빼는 금지 목록

보라색 그라디언트, Inter 단독 사용, 3열 아이콘 카드. 생성형 UI가 통계적 평균으로 수렴하는 이유와, 그걸 막기 위해 스킬로 만든 규칙들.

Figma Make나 코드 생성 도구에 “랜딩 페이지 만들어 줘”라고 하면 거의 같은 화면이 나온다. 보라색에서 파란색으로 흐르는 그라디언트, Inter 서체, 아이콘·제목·설명이 세 번 반복되는 카드 그리드. 이걸 AI slop이라고 부른다. 모델이 학습 데이터의 평균으로 수렴한 결과다.

왜 생기는가

모델은 가장 흔한 답을 낸다. Tailwind 기본값의 indigo-500, 문서와 튜토리얼에 가장 많이 등장한 Inter, “기능 소개는 3열”이라는 수천 개의 템플릿. 누구도 고르지 않았지만 모두가 쓰는 기본값이다. 문제는 취향이 아니라 결정이 없다는 것이다.

금지 목록

스킬 파일에 다음을 명시적 요청이 없는 한 금지로 적어 두었다.

  • 색: indigo·purple·violet 계열 액센트, 보라→파랑 그라디언트, 네온 글로우, 순수 검정 #000
  • 타이포: Inter 단독 사용, 헤드라인 그라디언트 채우기, 한 페이지 5개 이상의 웨이트
  • 레이아웃: 뱃지 + H1 + 버튼 두 개 + 목업의 중앙정렬 히어로, 3등분 피처 카드, 카드 왼쪽 컬러 스트라이프
  • 컴포넌트: 필 형태 그라디언트 버튼, ✨ Introducing 뱃지, 99.99% 같은 임의 통계 섹션
  • 카피: Seamlessly, Effortlessly, Powerful, Next-generation, Elevate, Unleash

대체 원칙

금지만으로는 부족하다. 대신 이렇게 하라고 적었다.

  1. 색은 브랜드에서 출발한다. 이 사이트는 DuoTone 테마의 피치 #FFCC99와 잉크 #2A2734 두 톤만 쓴다.
  2. 서체는 본문과 라벨을 나눈다. Pretendard와 모노스페이스 하나.
  3. 같은 정보가 세 번 반복되면 그리드가 아니라 목록으로 쓴다. 비율은 일부러 비대칭으로.
  4. 모든 시각적 결정에 이유를 적을 수 있어야 한다. 이유가 없으면 기본값이다.

목적은 특정 트렌드를 강제하는 게 아니라 무의식적 기본값을 차단하는 것이다.

이 사이트에 적용한 것

히어로는 왼쪽 정렬이고, 강점 목록은 카드가 아니라 큰 글자와 작은 설명의 행이다. 버튼은 모서리 8px, 채우기는 잉크색 하나. 스킬 파일의 금지 목록을 하나씩 대조해 봤다.