yonathan-boop/Claude - antislop UI

antislop-ui

안티 슬롭: AI 코딩 에이전트를 위한 규칙. UI 및 시각적 역량

antislop 시스템의 일부입니다. antislop.md (핵심)와 함께 읽으세요. 이 스킬은 UI/시각적 영역(색상, 레이아웃, 컴포넌트, 장식, 구조적 흐름, 모션)을 심층적으로 다룹니다. 핵심 규칙을 번호로 참조하며 중복되거나 번호를 다시 매기지 않습니다. 웹사이트, 웹앱 또는 모든 인터페이스를 구축하거나 편집하는 작업에 로드하세요.

이 스킬 사용 방법

• 작업이 UI 또는 시각적 작업일 때마다 antislop.md와 함께 로드하세요. 핵심은 메커니즘(목적 테스트, 세 가지 계층, 전달 게이트)을 담고 있으며, 이 스킬은 UI 특화 심층 정보를 담고 있습니다.
• 모든 항목은 동일한 형식을 갖습니다: 패턴(패턴), 이유(슬롭으로 읽히는 이유), 해결책(대신 할 일). 해당하는 핵심 규칙이 R-XX로 인용됩니다.
• 핵심의 전달 게이트는 여전히 게이트 역할을 합니다. 이 파일 끝에 있는 "UI 스킬 체크리스트"는 전달 게이트와 함께 실행할 UI 특화 보충 자료입니다.

시각 및 색상

일반적인 파랑-보라 그라데이션

• 패턴: 기본 색상 처리 또는 전체 페이지 유색 글로우로 사용되는 파랑-보라, 파랑-청록, 보라-분홍 그라데이션.
• 이유: 학습 데이터에서 가장 과도하게 표현된 색상 처리입니다. "브랜드 정체성 없음"을 신호하며 "우리의 팔레트"가 아닙니다. 한눈에 AI 생성 디자인으로 표시됩니다.
• 해결책: DESIGN.md 또는 제품 고유의 정체성에서 팔레트를 가져오세요. 계층 기능으로만 그라데이션을 유지하고 그 이유를 기록하세요(R-01). 한 수준을 다른 수준과 구분하는 그라데이션은 장인 정신이지만, 모든 섹션에 동일한 그라데이션은 기본값입니다.
• 동일한 기본값 패밀리: 자극적이거나 무지개 그라데이션, 보라색-검정 구성, 네온 또는 파스텔 팔레트, 히어로 뒤의 흐린 방사형 오브. 이들은 모두 다른 옷을 입은 동일한 패턴입니다: 브랜드가 아닌 모델의 기본값에서 온 색상. 이 모든 것은 목적 없이 기본값으로 사용하는 것을 금지합니다(R-01).

과도한 유리 효과(Glassmorphism)

• 패턴: 내비게이션 바, 카드, 모달, 사이드바에 동시에 blur/backdrop-filter 사용.
• 이유: 블러는 질감을 제거하고 모든 표면을 동일한 서리 레이어에 배치하여 계층을 평평하게 만듭니다. 모든 표면이 유리이면 전경이 없습니다.
• 해결책: 유리를 성격 특성이 아닌 악센트로 취급하세요. 용량 제한: 최대 1-2개 요소(R-10). 주목이 필요한 표면이 유리를 얻고 나머지는 고체로 유지됩니다.

과도한 테두리 반경

• 패턴: 모든 요소가 알약 모양: 버튼, 입력 필드, 카드, 배지, 모달.
• 이유: 균일한 알약 모양은 "이것은 입력 필드, 이것은 카드"라는 시각적 언어를 지웁니다. 반경이 계층 도구 대신 장식이 됩니다.
• 해결책: 디자인 시스템에서 소수의 반경 세트를 설정하고 의도적으로 적용하세요(R-11). 기본 CTA에 하나의 넉넉한 반경은 의도적으로 읽히지만, 모든 요소에 동일한 반경은 기본값으로 읽힙니다.

지나치게 부드러운 그림자

• 패턴: 모든 컴포넌트가 큰 그림자를 가지고 있어 전체 페이지가 떠 있는 듯한 느낌.
• 이유: 모든 것이 부유하면 부유는 아무것도 전달하지 않습니다. 페이지는 바닥면을 잃고 일반적인 부드러움이 됩니다.
• 해결책: 그림자를 높이 마커로만 사용하고 높이 이유를 기록하세요(R-12). 대부분의 요소는 평평해야 합니다. 페이지 위로 올라가야 하는 한두 개만 그림자를 가집니다.

모든 곳에 글로우

• 패턴: 카드, 버튼, 아이콘, 배지, 배경, 테두리에 동시에 글로우 사용.
• 이유: 글로우는 주목 증폭기입니다. 모든 곳에 적용하면 아무것도 증폭되지 않으며 "AI가 만든" 것처럼 보이게 하는 가장 빠른 방법 중 하나입니다.
• 해결책: 글로우를 최대 1-2개의 중요한 요소를 위한 초점 악센트로만 예약하세요(R-13). 나머지는 모두 무광택으로 유지합니다.

배경 그리드

• 패턴: 콘텐츠 뒤의 격자 사각형, 청사진 선, 그래프 용지, 점 격자 또는 얇은 반복 선.
• 이유: 실제 작업 없이 평평한 페이지를 "기술적"으로 보이게 하는 기본 방법입니다. 의도 없는 질감으로 읽힙니다.
• 해결책: 제품의 정체성을 진정으로 지원할 때만 질감이나 패턴을 사용하고 그 이유를 기록하세요(R-07). 실제 정체성 모티프(핵심 파트 3)가 재고 그리드보다 항상 낫습니다.

이유 없는 다크 모드 기본값

• 패턴: 단순히 "기술적으로" 보이기 위해 전체 페이지가 어둡고 브랜딩 고려 없음.
• 이유: 다크는 결정이지 기본값이 아닙니다. 강제하는 것은 제품을 섬기는 것이 아니라 트렌드를 따르는 것으로 읽힙니다.
• 해결책: 브랜드 아이덴티티, 제품 유형 및 대상에서 테마를 선택하세요(R-21). 개발자 및 크리에이티브 도구는 다크에 대한 정당한 이유가 있습니다. 콘텐츠 우선 제품은 일반적으로 그렇지 않습니다. 고정 테마에 대한 강력한 이유가 없으면 작동하는 라이트/다크 토글을 구축하세요.

팔레트에 너무 많은 색상

• 패턴: 명확한 디자인 시스템 없이 한 페이지에 5-7가지 다른 색상.
• 이유: 분산된 팔레트에는 계층이 없습니다. 모든 요소가 모든 색상이 될 수 있으면 구별되는 것이 없습니다.
• 해결책: 활성 팔레트를 2-3개의 핵심 색상 + 1개의 악센트(R-29)로 제한하고 핵심 중 하나를 중립 베이스로 만드세요. 절제가 악센트를 돋보이게 합니다.

과도한 악센트 색상

• 패턴: 하나의 악센트 색상이 버튼, 아이콘, 배지, 링크, 선, 배경 및 글로우에 동시에 사용.
• 이유: 악센트가 모든 곳에 있으면 악센트가 아닙니다. 그냥 다른 색상이 되고 디자인은 초점을 잃습니다.
• 해결책: 악센트는 핵심 순간에만 속합니다(하나의 의도적인 악센트, 핵심 파트 3). 악센트가 없으면 불임이고, 모든 곳에 악센트는 슬롭입니다. 중요한 한두 곳을 선택하세요.

불임 기본값

• 패턴: 평평한 흰색 또는 거의 흰색, 얇은 회색 테두리, 작은 반경, 질감 없음, 일반 글꼴, 정체성 없음.
• 이유: 방향 없이 과도하게 필터링한 결과인 "안전한" 결과입니다. 슬롭은 아니지만 디자인도 아닙니다: 디자인이 있어야 할 공허입니다.
• 해결책: 이것은 필터 문제가 아닌 방향 문제입니다. DESIGN.md를 추가하거나 디자인 읽기(핵심 파트 3)를 해결한 다음 활기 다이얼을 높이세요. 해결책은 더 많은 금지가 아닙니다. 목적을 명시하고 에너지를 추가하는 것입니다.

레이아웃 및 컴포넌트

단조로운 템플릿 레이아웃

• 패턴: 히어로, 부제목, 2개의 CTA, 스크린샷, 기능 그리드, 사용후기, FAQ, CTA, 바닥글(항상 이 순서).
• 이유: 순서는 제품의 내러티브가 아닌 학습 데이터 기본값입니다. 콘텐츠에 필요해서가 아니라 템플릿에 있기 때문에 섹션이 나타납니다.
• 해결책: 실제 콘텐츠 요구 사항에 따라 구조를 구축하세요(R-05, C-3). 제품에 사용후기가 없으면 사용후기 섹션이 없습니다. 섹션 순서는 제품의 이야기를 따릅니다. RHYTHM 다이얼과 일치하세요: 3이면 섹션이 눈에 띄게 다양합니다.

복사-붙여넣기 기능 카드

• 패턴: 모든 기능 카드의 크기, 높이, 아이콘, 레이아웃 및 패딩이 동일.
• 이유: 균일한 카드는 콘텐츠를 평평하게 만듭니다. 모든 기능이 아이콘이 있는 카드이면 실제 가중치가 있는 기능과 없는 기능이 동일하게 보입니다.
• 해결책: 콘텐츠 계층을 반영하는 변형을 만들고 그 이유를 기록하세요(R-14). 모든 기능이 카드일 필요는 없습니다. 주력 기능은 전체 너비 처리가 필요할 수 있고, 보조 기능은 목록이 필요할 수 있습니다.

벤토 그리드

• 패턴: 다양한 크기의 카드 모자이크로 구성된 섹션, 일부는 두 열 또는 두 행에 걸쳐 타일 대시보드처럼 공간을 채움.
• 이유: 지난 몇 년간 기본 "앱 같은" 랜딩 레이아웃이므로 제품에 대해 아무것도 신호하지 않습니다. 모든 섹션이 벤토일 수 있으면 레이아웃은 결정이 아닌 템플릿입니다.
• 해결책: 콘텐츠에 실제로 다른 크기의 요소가 있을 때만 벤토 그리드를 사용하세요(R-05). 모든 셀이 대략 동일하면 단순한 그리드 또는 목록이 더 정직합니다. RHYTHM 다이얼이 섹션이 전혀 다양하지 않은지 결정합니다.

균일한 간격

• 패턴: 패딩, 마진, 갭이 모든 섹션에서 동일.
• 이유: 리듬은 도구이며 단일 간격 값이 이를 제거합니다. 섹션은 서로 관계를 멈추고 페이지는 하나의 평평한 스트립으로 읽힙니다.
• 해결책: 공백을 구조(핵심 파트 3)로 사용하고 RHYTHM 다이얼에 따라 다양하게 만드세요. 간격 척도를 설정한 다음 다른 수준을 사용하여 분리하고 연결하세요. 균일한 리듬은 다이얼이 그렇게 말할 때만 의도적인 선택입니다(R-05).

"작동 방식" 항상 3단계

• 패턴: 둥근 아이콘 + 숫자 1, 2, 3 + 짧은 텍스트, 항상 세 단계, 항상 동일한 모양.
• 이유: 제품의 실제 프로세스는 깔끔한 3단계 목록인 경우가 드뭅니다. 템플릿이 프로세스를 그 반대가 아닌 자신의 모양으로 강제합니다.
• 해결책: 프로세스를 실제 그대로 제시하세요(R-05). 세 단계와 둥근 아이콘이 진정으로 프로세스라면 괜찮습니다. 그렇지 않으면 실제 워크플로가 취하는 어떤 모양이든 사용하세요(2단계 또는 5단계 포함).

"신뢰하는 기업" 로고 바

• 패턴: 히어로 바로 아래에 있는 일반 회사 로고 행.
• 이유: 증거 없는 신뢰 주장: 일반 로고, 실제 고객 이름 없음, 사용 증명 없음.
• 해결책: 실제이고 확인 가능한 로고만 표시하세요(R-18, R-36, C-5). 제품에 아직 그러한 고객이 없으면 로고 바를 조작하지 마세요. 실제 사회적 증거가 일반적인 것보다 항상 낫습니다.

"가장 인기 있는" 가격표 카드

• 패턴: 중간 가격 등급이 항상 캡슐 배지로 강조.
• 이유: 기본 패턴이므로 결정이 아닙니다. 모든 가격 섹션이 그렇게 하면 강조된 등급은 의미가 없습니다.
• 해결책: 실제로 제품의 목표를 제공하는 등급을 강조하고 그 이유를 기록하세요(R-31). 어떤 등급도 강조할 가치가 없으면 강조하지 마세요.
• 세 열이 패턴의 일부입니다: 실제 구조와 관계없이 가격을 세 등급으로 표시하고 중간 것이 강조됩니다. 그 모양은 기본값이므로 결정이 아닙니다(R-05). 제품이 실제로 가진 만큼의 등급을 사용하고 그것을 제공하는 등급을 강조하세요.

제품 없는 데모

• 패턴: 페이지는 실제로 작동하는 모습을 보여주지 않는 제품을 판매합니다: 실제 데모 없음, 이용약관 없음, 개인정보 처리방침 없음, 약속만 있음.
• 이유: 제품의 옷을 입은 데모입니다. 모든 주장은 뒤에 아무것도 없는 신뢰이며, 누락된 법적 페이지는 아직 실제가 존재하지 않는다는 조용한 신호입니다.
• 해결책: 실제 제품이 작동하는 모습을 보여주거나 아직 출시되지 않았음을 정직하게 말하세요(R-38, C-5). 페이지가 가입 또는 결제를 요청하면 이용약관과 개인정보 처리방침이 존재해야 합니다. 정직한 "출시 예정"이 설득력 있는 데모보다 낫습니다.

4열 템플릿 바닥글

• 패턴: 제품 / 회사 / 리소스 / 법률 열(변형 없음).
• 이유: 사이트에 링크 그룹이 많아서가 아니라 템플릿에 있기 때문에 열이 존재합니다.
• 해결책: 제품이 실제로 링크하는 것에 따라 바닥글을 구성하세요(R-05). 단일 열 링크가 반쯤 비어 있는 네 개 열보다 더 유용할 수 있습니다.

균일한 섹션 리듬

• 패턴: 모든 섹션이 중앙 정렬 제목 + 부제목 + 동일한 카드 그리드(변형 없음).
• 이유: 동일한 구성은 섹션을 흐릿하게 만들고 페이지가 반복적이고 평평하게 느껴집니다.
• 해결책: RHYTHM 다이얼(R-05)로 구성을 다양하게 만드세요. 텍스트 위주와 시각적 섹션, 비대칭과 대칭 레이아웃을 번갈아 사용하세요. 모든 섹션이 동일한 템플릿을 따르는 페이지는 템플릿에 의해 디자인된 페이지입니다.

장식 요소

일반적인 AI 아이콘

• 패턴: 스파클, 별, 마법, 번개, 다이아몬드, 큐브, 로봇 또는 AI 오브를 기능 아이콘으로 사용.
• 이유: 이 글리프는 "AI 제품"의 일반적인 어휘입니다. 특정 기능에 대해 아무것도 전달하지 않습니다.
• 해결책: 콘텐츠에 진정으로 관련된 아이콘을 사용하고 글리프가 일반적일 때 관련성을 기록하세요(R-04). 적절한 아이콘이 없으면 사용하지 마세요. 기능 레이블이 작업을 수행합니다.

Lucide 아이콘

• 패턴: 모든 아이콘이 동일한 얇은 선, 둥근 모서리 라이브러리(Lucide 또는 시각적 클론)에서 비롯되어 모든 아이콘이 하나의 인식 가능한 모양을 공유.
• 이유: 단일 기본 아이콘 라이브러리는 모든 AI 사이트의 아이콘을 동일하게 만들어 아이콘이 제품에 대해 아무것도 알려주지 않습니다. 글리프는 관련될 수 있습니다. 균일한 라이브러리 모양이 패턴입니다.
• 해결책: 아이콘 세트는 시각적 선택이지 기본값이 아닙니다(R-04). 먼저 관련성을 위해 아이콘을 선택하세요. 그런 다음 라이브러리의 두께와 획이 제품의 성격에 적합한지 결정하세요. "비슷해 보이는" 두 아이콘도 설정이 가져오기가 아닌 결정이라면 당신의 것으로 읽힐 수 있습니다.

장식으로서의 이모지

• 패턴: 카피, 제목, 배지, 버튼에 문자 그대로의 이모지 흩어져 있음: 제목에 🚀, 모든 기능 글머리 기호 옆에 ✅, CTA에 🔥, 차트 제목 위에 📈.
• 이유: 이모지는 "생성된 것이지 작성된 것이 아님"을 나타내는 가장 큰 약어입니다. UI에서는 콘텐츠와 주목을 위해 경쟁하며 제품의 목소리를 다른 모든 AI 사이트와 동일한 쾌활한 기본값으로 평평하게 만듭니다.
• 해결책: UI 텍스트에서 이모지를 제거하세요. 개념에 표시가 필요하면 실제 관련 아이콘을 이유와 함께 사용하거나(R-04) 표시를 전혀 사용하지 마세요. 카피가 의미를 전달하며 이모지는 아무것도 추가하지 않습니다.

모든 버튼의 작은 화살표

• 패턴: → 또는 ↗가 순수 장식으로 거의 모든 버튼에 배치됨.
• 이유: 화살표는 신호가 아닌 패턴이 됩니다. 모든 CTA에 화살표가 있으면 어느 것도 특정 방향을 가리키지 않습니다.
• 해결책: 화살표는 버튼의 기본 정체성이 아닙니다(R-08). 방향 신호의 이점을 진정으로 얻는 작업에 대해 비례적으로 크기를 조정하고 목적을 기록하여 보관하세요.

색상이 있는 왼쪽 줄무늬

• 패턴: 카드, 목록 행 또는 섹션 헤더의 왼쪽 가장자리에 있는 얇은 색상 수직 막대(장식으로 사용).
• 이유: 줄무늬는 의미를 추가하지 않고 색상을 추가합니다. 카드를 "디자인된 것처럼" 보이게 하는 가장 저렴한 방법이므로 모든 곳에 나타나며 아무것도 말하지 않습니다.
• 해결책: 줄무늬는 장식입니다. 정보를 전달하거나 없애야 합니다(R-01, R-31). 실제 상태(활성, 경고, 새 항목)를 표시하는 왼쪽 가장자리는 신호입니다. 디자인된 것처럼 존재하기 위해 존재하는 줄무늬는 기본값입니다.

AI 캡슐 배지

• 패턴: 알약 모양, 얇은 테두리, 글로우, 작은 점, 대문자, "AI 기반", "베타", "새" 포함.
• 이유: 캡슐-플러스-글로우-플러스-점 조합은 "AI가 만들었고, AI에 의해 만들어지는 것에 관한" 자기 참조적 배지입니다.
• 해결책: 배지는 정보를 전달하거나 없애야 합니다(R-01). 배지가 기능에 대해 실제로 알려주는 것이 없으면 없애세요. 제품이 AI 기반이고 그것이 혜택이라면 UI 외부의 카피가 그 작업을 합니다.

모션

기본 페이드 인

• 패턴: 섹션이 들어올 때 동일한 fade-in 또는 fade-in-up 애니메이션, 모두 동일한 지속 시간과 타이밍.
• 이유: 균일한 모션은 모션의 목적을 무효화합니다. 모든 것이 동일하게 페이드 인되면 어느 것도 주목을 끌지 않습니다.
• 해결책: 계층과 의도와 일치하는 모션 어휘로 주목을 유도하세요(R-16). 느린, 넓은 페이드는 기본 섹션을 위한 것입니다. 활기찬 스케일 또는 스트레치는 중요한 전환을 위한 것입니다.

항상 스크롤 애니메이션

• 패턴: 모든 섹션은 스크롤 시 fade-in slide scale하면서 onscroll을 트리거로 사용.
• 이유: 모든 것을 스크롤 시 애니메이션하는 것은 모든 것을 결코 움직이지 않는 것만큼 평평합니다. 모션은 상수, 즉 배경 소음이 됩니다.
• 해결책: 스크롤 트리거를 절약하여 여정의 중요한 순간을 표시하세요(R-16). 대부분의 요소는 정적이어야 합니다. 중간에 애니메이션 하나가 두 개보다 더 많은 영향을 미칩니다.

느리고 일정한 애니메이션

• 패턴: 모든 모션은 300ms에서 500ms이며 동일한 ease 타이밍.
• 이유: 자연스러운 모션은 가속 및 감속합니다. 일정한 속도는 로봇처럼 읽히며 기계적입니다.
• 해결책: 속도와 타이밍을 다르게 하여 모션에 개성을 부여하세요(R-16). 진입은 빠르고 부드럽게, 퇴장은 느리게, 강조는 적절한 지속 시간으로.

짝수 그리드 아이템

• 패턴: 2열 또는 3열 그리드가 완벽하게 짝수 행으로 채워져 있음.
• 이유: 실제 콘텐츠는 거의 완벽하게 짝수로 나오지 않습니다. 짝수 그리드는 가져오기가 아닌 의도적인 선택처럼 보이기 위해 콘텐츠를 잘라내거나 채웁니다.
• 해결책: 콘텐츠가 자연스럽게 배열되도록 하세요(R-05). 마지막 행에 불완전한 행이 있으면 괜찮습니다. 균일성을 위해 콘텐츠를 잘라내거나 채우지 마세요.

UI 스킬 체크리스트

핵심 전달 게이트(R-32)와 함께 실행하세요.

• 색상은 브랜드, 제품 및 대상에서 비롯됩니까? (기본값 R-01 방지)
• 그림자는 최소화되고 의도적입니까? (R-12)
• 글로우는 1-2개 요소로 제한됩니까? (R-13)
• 장식 질감 또는 패턴은 목적이 있습니까? (R-07)
• 모션은 부드럽고 의도적이며 다양한가요? (R-16)
• 아이콘은 관련성이 있으며 기본 라이브러리입니까? (R-04)
• UI에 이모지가 없습니까? (R-04)
• 레이아웃이 콘텐츠 계층과 일치하며 템플릿이 아닙니까? (R-05)
• 가격 등급은 콘텐츠가 필요로 하는 만큼이며 기본 세 열이 아닙니까? (R-05)
• 악센트 및 강조는 절약되고 의도적입니까? (R-01, R-29)
• 모든 기호 및 배지는 실제 정보를 전달합니까? (R-01)
• 모든 경고, 알림 및 상태는 실제이며 생성되지 않았습니까? (R-36)
• 제품이 존재하지 않으면 데모가 없고 약속만 있습니까? (R-38)