안티-슬롭 웹 디자인
원칙: 기본 모델은 자신이 본 모든 것의 평균으로 수렴합니다. 이 스킬은 구축 전에 결정을 강제하고, 구축 후 증거로 검증함으로써 그 수렴을 깨뜨립니다.
활성화 시점
- 페이지, 섹션, 히어로, 카드, 내비게이션 또는 모든 UI를 구축하거나 재설계할 때.
- "이건 AI가 만든 것처럼 보이나요?"라는 질문으로 웹사이트나 캡처를 감사할 때.
- 새 프로젝트의 타이포그래피, 팔레트, 간격 또는 모션을 선택할 때.
Design DNA (코드를 건드리기 전에 필수)
모든 프로젝트는 먼저 다음을 선언합니다:
- 명명된 팔레트 (예: "통제실"): 잉크/베이스 색상 1개, 표면 색상 1개, 신호 강조 색상 1개, 데이터 강조 색상 1개, 경고 색상 1개. HEX 또는 OKLCH + AA 대비 검증 완료.
- 역할이 있는 타이포그래피 쌍: 디스플레이, 본문, 모노 기술체, 숫자체. 절대 하나의 글꼴로 모든 것을 해결하지 않음.
- 주요 섹션의 ASCII 스켈레톤.
- 히어로 구성: 1280x720 노트북에서 스크롤 없이 보이는 내용.
- 시그니처 요소: 이 사이트에만 있는 독특한 요소 (라이브 그래픽, 그리드 패턴, 커서, 고유 전환 효과).
- 모션 레벨(0-10) 및
prefers-reduced-motion에 대한 동작.
이는 프로젝트의 docs/design-dna.md에 기록되며, 빌드 중간에 즉흥적으로 변경하지 않습니다.
두 가지 안티-슬롭 테스트
- 테스트 1: 제품 카테고리만 알고도 팔레트를 추측할 수 있는가? 그렇다면 다시 만듭니다.
- 테스트 2: 카테고리 + 안티-참조를 알고도 미적 패밀리를 추측할 수 있는가? 그렇다면 다시 만듭니다.
하드 밴 (하나라도 나타나면 해당 축을 재생성)
타이포그래피 영역: Inter, Roboto, Open Sans 또는 주연 역할의 모든 시스템 기본 글꼴; 모든 섹션이 동일한 제목 크기를 사용.
색상 영역: 보라색/인디고/바이올렛 그라데이션; 순수 #fff 및 #000; "개발자 포트폴리오"로서의 검정 배경에 네온 그린; 크림색 + 테라코타 + 세리프; 페이지당 두 개 이상의 장식용 그라데이션.
레이아웃 영역: 중앙 정렬 스택 히어로(킥커 + H1 + 부제목 + 버튼 2개); 아이콘이 있는 동일한 3열; 카드 안에 카드가 있는 벤토; 카드의 측면 강조 테두리; 글래스모피즘; 장식용 스파크라인이 있는 가짜 대시보드; 모든 것이 페이드인업; 연속적으로 동일한 구조의 섹션.
시각 콘텐츠 영역: 가짜 스크린샷 또는 플로팅 목업; 스톡 이미지; 실제 제품을 대체하는 AI 생성 이미지; 기능 아이콘으로서의 이모지; 맥락 없는 "함께하는 로고" 줄.
카피 영역: "Elevate your...", "Unlock", "Supercharge", "Take your X to the next level", "The future of...", "Seamlessly", "Effortless"; 장식용 엠 대시; 녹색 점이 있는 "Available for work" 배지; 2가지 이상의 다른 버튼 유형.
구축 규칙
- 텍스트는 실제 HTML(색인 가능)이며, 캔버스, SVG 또는 이미지 내부의 텍스트가 절대 아님.
- 의도가 있는 그리드: 콘텐츠 유형에 따라 다른 너비, 의도적으로 깨진 정렬, 상자가 아닌 크기와 두께에 의한 계층 구조.
- 선언된 스케일(4/8)에 의한 간격; 임의의 값 없음.
- 실제 상호작용: 호버, 포커스, 키보드, 로딩 및 빈 상태. 응답하지 않는 장식 요소 없음.
- 목적이 있는 모션: 한 번 진입, 반복 없음;
transform및opacity애니메이션;prefers-reduced-motion을 명시적으로 존중. - 독창성보다 접근성: AA 대비, 가시적 포커스, 44px 터치 영역, 최소 너비 375px.
안티-슬롭 감사 (캡처 포함)
- Playwright CLI로 데스크톱 1440 및 모바일 375 캡처(캡처 없이 절대 의견 제시 금지).
- 밴 목록을 검토하고 감지된 패턴을 증거(선택자/캡처)와 함께 명명합니다.
- 두 가지 테스트를 적용합니다.
- 포커스, 키보드, 계산된 대비 및 reduced-motion을 확인합니다.
- 출력: 패턴 → 증거 → 구체적인 수정. 패턴 0개 = 통과.
지원 도구
- 캡처 및 검증을 위한 Playwright CLI:
web-qa-visual스킬 참조. - 실제 애셋 및 로고:
web-assets-reales스킬 참조. - 텍스트:
no-ai-slop게이트. - 이전 빌드 기록(스켈레톤/팔레트 재사용 방지): 프로젝트의
docs/design-dna.md(추가 전용).