AI 슬롭 제거 (AI de-slop)은(는) 무엇을 하나요?

목표: 명확한 관점을 가진 사람이 디자인한 것으로 읽히는 페이지. 하나의 타이포그래피 음성, 레이블 대신 실제 콘텐츠, 의미를 전달하는 곳에만 장식. 특징을 제거하는 것이 작업의 절반; 나머지 절반은 그 자리에 있던 것들이 사라져도 아무것도 깨지지 않았음을 증명하는 것입니다.

이 순서대로 작업하고 단계를 건너뛰지 마세요: 범위 설정 → 감사 → 유지 목록 → 수정 → 복구 → 검증 → 보고. "완료 조건"의 모든 게이트가 충족되어야만 한 번의 패스가 완료됩니다.

1. 범위 설정

데모나 하위 페이지뿐만 아니라 상위 사이트를 포함하여, 범위 내의 모든 사이트, 페이지, 공유 컴포넌트, 데이터 파일, 썸네일을 나열합니다. 사용자가 "모두"라고 말하면 모두를 의미합니다. 하위 집합에서 멈추고 완료되었다고 보고하지 마세요.
콘텐츠는 세 곳에 있습니다. 세 곳 모두를 감사하세요: 스타일시트, 마크업/컴포넌트, 데이터 파일(제목 배열, 타이포그래피 사실, 내비게이션 레이블, 메타데이터).
범위가 명확히 모호한 경우에만 한 번 질문하세요. 그렇지 않으면 계속 진행합니다.

2. 스크립트로 감사한 다음, 직접 육안으로 확인

번들된 스캐너를 먼저 실행하세요. 각 후보를 파일:줄과 함께 나열하고, tell별로 그룹화하며, fix 수준의 tell이 남아 있으면 종료 코드 1을 반환합니다.

python3 <skill-dir>/scripts/audit.py <paths...> --keep-caps ".wordmark,.logo,.heroTitle"
python3 <skill-dir>/scripts/audit.py src --only caps,tracking,period      # 집중
python3 <skill-dir>/scripts/audit.py src --json > audit.json               # 기계 판독 가능

fix tell은 0에 도달해야 합니다 (또는 타당한 deslop-keep 마커를 포함해야 합니다). check tell(그라데이션, 글로우, counter-css, 눈썹, 줄무늬, 이모지 제목, 도형)은 각각 사람의 판정이 필요하며, 보고서에 기록됩니다.
스캐너는 주석과 node_modules/빌드 출력을 건너뜁니다. 의도를 판단하거나, 레이아웃 손상을 찾거나, 렌더링된 텍스트를 볼 수 없습니다. 이것이 5단계와 6단계가 있는 이유입니다.
스크립트가 다루지 않는 추가 검색은 references/audit.md에 있습니다.

3. 20가지 tell: 정확한 조치 및 유지 규칙

번호	Tell	정확한 조치	유지 조건
1	태그 및 알약	radius 999px → 3~4px, 또는 태그를 일반 컬러 텍스트로 변경	독자가 행동해야 하는 상태(긴급, 상태, 활성 필터)를 전달하는 경우
2	과도한 이탤릭체	`font-style: italic`, `italic` 유틸리티, 장식용 `<em>`/`<i>` 삭제	실제 작품 제목, 인용된 외국 용어, 워드마크
3	기본 AI 폰트	페이지의 목소리로 사용된 Instrument Serif, Instrument Sans, Geist, Geist Mono, Space Grotesk, IBM Plex Mono, JetBrains Mono, Space Mono 교체	목소리로 사용되는 경우는 절대 안 됨; 폰트 규칙 참조
4	음수 커닝	모든 음수 `letter-spacing` 및 `tracking-[-…]`, `tracking-tight(er)` 삭제	절대 안 됨
5	지나치게 복잡한 UI	가젯 삭제: 실시간 상태 점, 가짜 트래커, 커서 렌즈, 자기 버튼, 스크롤-스큐 마키, 회전 카운터, 장식용 레벨 미터	가젯이 제품 자체인 경우(계산기, 플래너, 구성기)
6	구분선 과사용	목록당 최대 하나의 구조적 규칙 유지; 분리만 하는 규칙 삭제	규칙이 테이블이나 목록의 행을 그룹화하는 경우
7	음영 및 불투명도	단색 색상 토큰; 글로우, 블러, backdrop-filter, 40px 이상의 그림자 블러 삭제	스크림이 사진 위에서 텍스트 가독성을 유지하는 경우; 실제 오버레이(대화상자, 메뉴)의 단일 미묘한 그림자
8	테두리 컨테이너	테두리가 장식일 뿐인 카드의 박스 해제; 왼쪽 강조 줄무늬(border-left ≥ 3px) 삭제	박스가 실제 객체(양식, 영수증, 티켓, 시트, 테이블)이거나 줄무늬가 상태(양식 성공/오류)를 나타내는 경우
9	지나치게 상세한 다이어그램	설명하지 않는 "Plate I", "Fig. 2", 범례, 레이블 제거	모든 요소가 실제 무언가에 매핑되는 경우
10	장황하고 중복된 텍스트	반복되는 "sample" 노트 대신 바닥글에 한 줄 공개; 제목을 다시 설명하는 문장 제거	노트가 다른 곳에 명시되지 않은 정보를 추가하는 경우
11	코드 빵부스러기	`// LABEL`, `/services` 링크 텍스트, `[1]`, `EV-01`, `R-03`, `STATUS:`, `TEL/MAIL/AREA` 대문자 레이블 삭제	실제 내비게이션 빵부스러기("Home / About")
12	섹션 번호 매기기	마크업과 CSS `counter()`에서 "01 /", "§", "Chapter 1", 로마 숫자, "Z1", 0으로 채워진 카운터 삭제	순서가 콘텐츠인 경우: 지침, 타임라인, 양식 단계, 퀴즈 질문, 다이어그램의 마커와 일치하는 숫자. 그런 경우 일반 `1.`( `01` 아님)
13	눈썹	제목 위의 작은 레이블 삭제; 사실(장소, 직종, 가격)을 담고 있었다면 제목 또는 첫 문장으로 이동	기능적 레이블인 경우: 양식 레이블, 범례, `dt`, 테이블 헤드, 바닥글 열 헤드
14	디더링, 노이즈	디더 및 노이즈 텍스처 삭제	텍스처가 아트 디렉션인 경우(risograph 인쇄, 종이 가장자리); `deslop-keep` 표시
15	ASCII 이미지	삭제	기본적으로 절대 안 됨
16	스퀘클	12px 이상의 radius → 4~6px (섹션, 카드, 이미지, 대화상자)	진짜 원(동일한 너비와 높이: 아바타, 아이콘 점, 둥근 체크), 의도적인 모양(아치형 창문, 파이프 끝)에 `deslop-keep`
17	모노 폰트	사이트의 텍스트 폰트와 `font-variant-numeric: tabular-nums`로 교체	페이지에 실제 코드가 있는 경우
18	모두 대문자 부제목	`text-transform: uppercase`, `uppercase` 유틸리티, 소스 문자열의 대문자 삭제; 양수 자간도 함께 삭제	워드마크, 실제 표지판(DANGER / WARNING / NOTICE, 파이프 마커), 압축된 디스플레이 헤드라인으로 구축된 브랜드(해당 선택자는 `--keep-caps`에 유지)
19	그라데이션 배경	단색	데이터 스케일(온도, 계절), 사진 스크림, 하드 스톱 헤어라인
20	제목의 마침표	h1~h3, 페이지 제목, 카드 및 데이터 제목, 디스플레이 크기의 한 문장 바닥글 줄의 마지막 마침표 제거	본문 문장, 여러 문장 단락, 약어("Co.", "Inc.")

또한 제거: 헤드라인 내 강조 색상 구절(#2와 동일한 tell), 외곽선 또는 선이 있는 거대 워드마크, 장식용 블롭과 원, 빈 프레임 및 필름 스트립.

4. 폰트

기본 AI 폰트(#3)를 목소리로 절대 배포하지 마세요. 주제에 맞게 선택하세요. 페이지가 무엇에 관한 것인지 기준: 간판 거래는 고속도로 또는 압축 서체, 유산 거래는 Caslon 또는 Didone, 스튜디오는 조용한 산스와 함께하는 편집용 세리프.
하나의 디스플레이 서체와 하나의 텍스트 서체, 또는 하나의 패밀리. 레이블용 세 번째 패밀리는 없음.
숫자는 텍스트 서체에 font-variant-numeric: tabular-nums를 사용하며, 모노는 절대 사용하지 않음.
교체 시 다음도 업데이트: 폰트 임포트, CSS 변수, 레이아웃 클래스 리스트, 폰트 이름을 언급하는 헤더 주석, 폰트 이름을 표시하는 모든 데이터(카탈로그 카드, 스타일 가이드). 그런 다음 너비나 줄 수가 이전 폰트에 의존했던 모든 헤드라인을 다시 확인하세요.
이탤릭체 제거 후에는 이탤릭체나 사용하지 않는 가중치를 로드하지 마세요.

5. 카피 규칙

제목: 마침표 없음, <em> 없음, 강조 span 없음, 문장 케이스.
두 문장으로 된 staccato 제목을 하나의 자연스러운 문장으로 다시 작성:
- "Close the valve. Then call." → "Close the valve, then call"
- "Find the leak. Plan the roof." → "Find the leak, then plan the roof"
- "Fast, contained, explained." → "Fast, contained and explained"
- "A professional website. A clear price." → "A professional website at a clear price"
- "Seven layers. One you see." → "Seven layers, and you see one"
- 질문과 지시는 두 부분으로 유지 가능: "Water off? Book a morning visit".
사실을 담고 있는 눈썹을 제거할 때, 그 사실은 보이는 곳에 남아 있어야 합니다.
프로젝트 자체 스타일 규칙(철자 변형, 금지어, 대시 스타일)을 따릅니다. 수정 후 철자 일관성을 확인합니다.
증거를 절대 만들어 내지 마세요: 가짜 리뷰, 카운트, 로고, 수상 없음. 샘플은 바닥글에 한 번만 레이블을 붙입니다.

6. 수정

기계적 변경(대문자, 자간, 이탤릭체, 모서리, 제목 마침표)은 스크립트로; 판단이 필요한 변경(재작성, 가젯, 레이아웃)은 수동으로.
작은 파서를 사용하여 CSS를 규칙별로 수정합니다(selector { body } 블록 일치, body 변경, 다시 쓰기). 전체 스타일시트에 대해 하나의 큰 역추적 정규식을 절대 실행하지 마세요.
먼저 유지 목록을 만들고, 그 다음 수정합니다. 대문자를 유지할 선택자와 숫자를 유지할 숫자를 기록한 다음, 그 목록을 스크립트에 전달합니다.
의도적인 예외는 인라인으로 표시하여 향후 감사에서 건너뛰도록 합니다: CSS에서는 /* deslop-keep: reason */, JSX에서는 {/* deslop-keep: reason */}, 동일한 줄 또는 이전 줄에 작성합니다.

7. 제거로 인한 손상 복구

모든 제거는 구멍을 남길 수 있습니다. 각 사이트에 대해 다음을 모두 확인하세요:

숫자나 코드를 담고 있던 작은 첫 번째 열(44px 1fr, 80px 1fr 360px, 90px 1fr 1.4fr)이 있는 그리드: 모든 중단점에서 해당 열을 제거합니다.
제거된 숫자 뒤로 텍스트를 정렬했던 p, dd, h3, li의 왼쪽 여백 또는 패딩 28~60px: 0으로 설정.
남은 counter-reset / counter-increment, li > span / dt span 규칙, 숫자 간격만을 위해 사용된 display: flex; gap on headings.
마크업에서 더 이상 참조되지 않는 죽은 클래스(동적 클래스 s[\badge_${x}`]등은 건너뜀), 빈 규칙, 사용되지 않은index` 매개변수 및 props, 사용되지 않은 임포트 및 폰트 변수, 오래된 주석.
폰트 변경 후 이미지와 겹치거나 줄 수에 의존했던 헤드라인.
::before / ::after 내부의 테두리를 규칙을 읽지 않고 제거하지 마세요: 왼쪽 및 하단 테두리를 45° 회전하면 체크 표시가 그려집니다.

8. 검증

각 페이지를 1440px 및 390px 너비에서 prefers-reduced-motion: reduce로 렌더링 확인하여 애니메이션 섹션이 완료된 상태로 렌더링되도록 합니다. 캡처하기 전에 전체 페이지를 스크롤하여 느리게 로드되는 이미지가 로드되도록 하고, 개발자 오버레이를 제거합니다. 빈 이미지 영역은 반대 증거가 있을 때까지 느린 로딩 또는 막힌 개발 이미지 최적화 프로그램입니다. 프로덕션과 비교하여 버그라고 단정하지 마세요.
모든 경로에서 두 너비로 자동화된 패스: 콘솔 오류 0개, 수평 오버플로우 0개(scrollWidth > innerWidth).
프로젝트 검사: 타입 검사, 린트(새로운 경고 0개), 프로젝트의 카피 또는 금지어 검사, 프로덕션 빌드.
감사 스크립트 재실행: fix 총계는 0이어야 함.
이전 디자인을 보여주는 썸네일, 미리보기, 쇼룸 이미지 새로고침 및 재확인.
빌드나 개발 서버가 다시 쓰는 파일(예: tsconfig.json, next-env.d.ts)을 커밋 전에 복원합니다.

9. 완료 조건

모두 참이어야 합니다:

범위 내의 모든 항목이 감사되었습니다(스타일시트, 마크업, 데이터, 썸네일).
audit.py가 fix: 0을 보고합니다. 남은 모든 check hit에 판정이 있습니다.
모든 예외는 유지 목록에 있거나 이유와 함께 deslop-keep 마커를 가지고 있습니다.
모든 페이지가 1440px 및 390px에서 렌더링되고 확인되었습니다.
모든 경로에서 콘솔 오류 0개 및 수평 오버플로우 0개.
타입 검사, 린트, 카피 검사, 프로덕션 빌드 통과.
미리보기 및 썸네일이 새로고침되었습니다.
사용자의 승인 없이 푸시 또는 게시하지 않았습니다.

10. 보고서

다음 형식의 짧은 보고서로 마무리합니다:

범위: 다루어진 내용(사이트 및 페이지 수).
제거됨: tell별로 변경된 내용과 대략적인 인스턴스 수.
의도적으로 유지됨: 각 예외와 그 이유.
복구됨: 발견 및 수정된 레이아웃 손상.
검증됨: 각 검사와 그 결과.
미해결 항목: 완료되지 않거나 검증되지 않은 모든 것, 명확히 명시.

실제 경험에서 발견된 함정

헤드리스 브라우저 프로필로 디스크가 빨리 채워집니다. 한 번에 한 페이지씩 캡처하고, 각 프로필을 삭제하며, 여유 공간을 확인하세요. 디스크가 가득 차면 셸과 개발 서버가 중단됩니다.
사용자의 개발 서버를 종료하지 마세요. 다른 포트에서 자신의 서버를 시작하고 완료되면 중지하세요.
클래스 이름만 일치시키면 기능적 레이블이 제거됩니다. 위치와 요소 유형으로 일치시키세요.
데이터 기반 제목과 템플릿 리터럴 페이지 제목은 JSX 전용 제목 스캔에서 누락됩니다. 스크립트는 title:, heading: 및 title=도 확인합니다.
상위 사이트, 데이터 파일 또는 썸네일을 건너뛰는 패스는 완료되지 않은 것입니다.

tell 없는 새 작업 디자인

템플릿이 아닌 주제에서 시작하세요: 직종이나 대상에 맞게 선택된 하나의 디스플레이 서체와 하나의 텍스트 서체, 의미를 가진 하나의 강조 색상, 0~6px 모서리, 문장 케이스 레이블, 마침표 없는 제목, 눈썹 없음, 순서가 중요하지 않은 한 번호가 매겨진 섹션 없음, 플레이스홀더 레이블 대신 실제 카피, 그리고 비즈니스에 관한 실제 무언가와 연결된 모든 장식 요소. 작업을 넘기기 전에 audit.py를 실행하세요.

AI 슬롭 제거 (AI de-slop)