slopslap — 같은 슬롭, 열 개의 결말
vibedesignlab의 slopslap은 AI가 짠 UI의 슬롭 신호(오버라인·오브·글래스·그라디언트 텍스트·무지개 팔레트)를 문답 없이 병렬 점검 파이프라인으로 걷어내는 Claude Code 플러그인입니다. 소개만 하지 않고 직접 돌렸습니다: 대표 슬롭을 일부러 전부 심은 baseline 랜딩 1종을 만들고, 같은 카피(불가침)를 유지한 채 slopslap의 규율로 결말을 만들었습니다. 1기는 방식 비교 4종(기본 모드 1 + transform 3), 2기는 A~E 전 규율과 실측 계약 스냅을 전부 결합한 5종 — 총 10개 변형입니다.
쇼케이스 랜딩 열림. 이 실험을 재료로 slopslap 홍보 랜딩을 만들었습니다 — 페이지 자체가 데모입니다: 슬롭을 입혀보고, SLAP 한 방으로 걷어내 보세요. 슬롭은 한 대 맞아야 합니다 →
1기 — 방식 비교 (baseline + 4종)
0 · baseline
다크 mesh 배경, 떠다니는 오브 3개, 글래스 카드, 그라디언트 텍스트, 이모지 아이콘, 무지개 좌측 보더, 전 간격 16px 균일, 세리프 이탤릭. 택소노미의 대표 텔을 검출 가능하게 전부 심었습니다.
슬롭 보러 가기 → 기본 모드 · 삭제 > 축소 > 교체1 · reductive
장식은 전부 삭제, 단문 카드는 구분선 행으로. 간격은 base 24 × 고정 배수 사다리, 팔레트는 Radix 중립 + 파랑 1역할, 대비는 WCAG로 스냅. slopslap이 기본으로 하는 일입니다.
걷어낸 결과 → transform · apple.com 실측 계약2 · refined-minimal
타입 스케일 1.235(17→56), 간격 8·17·40·53·84, measure 980, 흰/회 밴드 교차, 필 버튼. transform 모드는 실제 사이트를 헤드리스 실측한 contract에 값만 스냅합니다.
애플 방향 → transform · linear.app 실측 계약3 · tech-dark
bodyBg #08090a, 미세 타입 스케일 1.111, 좁은 measure 566, 모노 라벨. 같은 다크인데 baseline의 네온 다크와 무엇이 다른지 비교해보세요.
리니어 방향 → transform · posthog.com 실측 계약 · BOLD=on4 · brutalist
크림지 #eeefe9, 3px 하드 보더, blur 0 하드 섀도, 주황 CTA. BOLD 게이트(투박 어휘 ∧ 저밀도)가 on일 때만 허용되는 "과감히 키우기" 분기입니다. 인접 gap ≥ 섀도 offset 규칙 준수.
브루탈리스트 방향 →2기 — 전 기준 결합 5종
1기가 "기본 모드 vs transform"의 방식 비교였다면, 2기는 기준을 다 합쳤습니다: 다섯 변형 모두 A~E 전 규율(장식 삭제 · 단일 measure · 간격 사다리 · 역할 고정 타이포 · 시맨틱 색/WCAG)을 지키면서, 각자 다른 실측 계약(referenceMatrix styleTag)에 값을 스냅했습니다. 같은 규율에서 얼마나 다른 얼굴이 나오는지가 관전 포인트입니다.
5 · organic
크림지 #fffcec, 블루 단일 액센트, 2px 잉크 보더의 라운드 표면, 도트 구분선. 장난기는 hue가 아니라 형태에서 옵니다.
아크 방향 → clerk.com 계약 · clean-light6 · clean-light
#f7f7f8 위 흰 카드 + 1px 보더, 미세 타입 스케일 1.071, 텍스트 컬럼 672. 유채색 0에 잉크 CTA 하나로 끝나는 SaaS 라이트.
클럭 방향 → framer.com 계약 · bold-design7 · bold-design
순흑 배경, -0.03em 자간의 54px 디스플레이, 보더 없는 #111 표면 블록, 블루 CTA 1역할. 같은 다크인데 tech-dark·mono와 전부 다릅니다.
프레이머 방향 → mailchimp.com 계약 · playful-illustrative8 · illustrative
세리프 디스플레이 + 산세리프 본문 + 모노 라벨 3계열 — 역할 고정 bijection이라 D 규율 통과. 옐로 CTA와 딥 틸 링크 2역할.
메일침프 방향 → resend.com 계약 · minimal-mono9 · mono
순흑 + 모노 디스플레이 84px + 헤어라인 룰만. 표면 0, 유채색 0, 중립 3계조. 가장 적게 쓰고 가장 멀리 갑니다.
리센드 방향 →실측 — 스캐너를 실제로 돌렸습니다
slopslap 리포지토리의 scan-slop-signals.mjs(택소노미 검출기 66개)를 열 개 변형에 그대로 실행한 결과입니다.
플래그는 "후보"입니다 — 스캐너 스스로 각 항목에 오탐 조건 note를 달고, 최종 판정은 측정으로 하라고 말합니다.
| 검출기 (대표 텔) | baseline | reductive | refined-minimal | tech-dark | brutalist |
|---|---|---|---|---|---|
| 총 플래그 항목 (66개 중) | 24 | 11 | 13 | 11 | 11 |
| 오버라인·eyebrow (A1) | 6 | 0 | 0 | 0 | 0 |
| 플로팅 그라디언트 오브 (A2) | 9 | 0 | 0 | 0 | 0 |
| 글래스모피즘 (A4) | 5 | 0 | 0 | 0 | 0 |
| 균일 소프트 섀도 (A5) | 10 | 0 | 0 | 0 | 0 |
| 그라디언트 텍스트 (A6) | 3 | 0 | 0 | 0 | 0 |
| 이모지 아이콘·남발 (A7) | 5 | 0 | 0 | 0 | 0 |
| 스파클 AI 브랜딩 (A8) | 3 | 0 | 0 | 0 | 0 |
| 세리프 이탤릭 강조 (D) | 2 | 0 | 0 | 0 | 0 |
| 무지갯빛 팔레트 (E) | 4 | 0 | 0 | 0 | 0 |
| 한글 fallback 폰트 튐 | 1 | 0 | 0 | 0 | 0 |
| 간격 사다리 이탈 후보 | 28 | 1 | 2 | 2 | 4 |
| 2기 변형 | 실측 계약 | 총 플래그 (66개 중) | 시그니처 텔 (A1~A8·D·E) | 간격 사다리 이탈 후보 |
|---|---|---|---|---|
| organic | arc.net | 14 | 0 | 2 |
| clean-light | clerk.com | 11 | 0 | 3 |
| bold-design | framer.com | 11 | 0 | 2 |
| illustrative | mailchimp.com | 12 | 0 | 2 |
| mono | resend.com | 11 | 0 | 2 |
잔여 11~14개는 무엇인가. de-slop 변형에 남은 플래그는 대부분 후보 수집 성격입니다 —
단일 액센트도 "hue 열거" 후보로 잡히고(판정: 역할 1~2개뿐이므로 정당), 역할 고정된 모노 라벨,
keep-all이 있는지 확인하는 존재-확인 히트, 제목의 em-dash 같은 것들입니다.
transform 변형의 간격 히트는 Tailwind 사다리가 아니라 레퍼런스 사이트의 실측 사다리(apple 17·53·84)에
스냅했기 때문에 나오는 정직한 차이입니다. 이 구분이 slopslap의 핵심 주장입니다:
플래그는 상태 선언이 아니라 매번 다시 계산되는 후보이고, 판정은 측정으로 합니다.
관전 포인트
카피는 한 글자도 안 바뀝니다
다섯 페이지의 헤드라인·본문·순서는 동일합니다. 사라진 것은 "INTRODUCING SLOPSLAP" 같은 재진술 오버라인과 장식 이모지뿐 — slopslap의 카피 불가침 + 장식 삭제 규칙 그대로입니다.
다크 ≠ 슬롭
baseline과 tech-dark는 둘 다 다크입니다. 차이는 hue입니다: baseline은 보라·핑크·시안 네온이 동시에 뜨고(무지갯빛 팔레트 검출), tech-dark는 linear.app 실측 텍스트 3계조 + 흰 CTA 하나로 끝냅니다.
브루탈리스트가 통과하는 이유
두꺼운 보더와 하드 섀도는 화려하지만 슬롭 검출기에 안 걸립니다. blur 0 하드 섀도는 소프트 섀도 남발이 아니고, 주황·노랑은 CTA·강조라는 역할이 있으며, BOLD 게이트가 "저밀도 + 투박 어휘"를 먼저 판정했기 때문입니다. 슬롭의 반대는 밋밋함이 아니라 규율입니다.
실험 방법: baseline에 택소노미 대표 텔을 의도적으로 주입 → 기본 모드(reductive)는 삭제 > 축소 > 교체로 집행,
교체 값은 Tailwind 간격·Radix 팔레트·WCAG 대비에 스냅 → transform 3종은 리포지토리의
referenceMatrix(실사이트 헤드리스 실측 contract 16유닛)에서 fetch-answer.mjs로 조회한
계약(타입 스케일·간격 사다리·팔레트·measure)에 값만 스냅했습니다.
서체는 실측 서체(SF Pro·Inter·Berkeley Mono 등)의 시스템 스택 근사입니다.
실험 페이지는 본채 디자인 계약(DESIGN.md) 밖의 별도 공간이며, slopslap의 리뷰·설치법은
도구 생태계 참고.