[7편] 도구는 버리고 지식만 뽑아냈습니다
카테고리: AI 기반 개발 / 디자인 시스템 태그: 디자인시스템, AI디자인, 안티패턴, 지식추출, 도구정리, 1인개발 시리즈: 도구 열 개를 정리하고 방법론 하나를 남겼다 (7/8)
지우기 전에 뜯어먹기
6편에서 디자인 도구 하나가 전역을 오염시켰고, 그래서 못 쓰게 됐습니다.
그런데 내용은 좋았습니다. 그대로 지우면 그것도 같이 사라집니다.
여기서 선택지는 두 개가 아니라 세 개였습니다.
A. 아까우니 그냥 둔다 → 전역 오염 유지 → 나중에 터짐
B. 위험하니 지운다 → 지식도 같이 날림
C. 지식만 뽑고 도구를 지운다 ← 이걸 했습니다C는 3편에서 만든 규칙에 이미 있었습니다.
주면 → 그 부분만 뜯어온다. 통째로 안 가져온다.
harness에 적용했던 걸 그대로 한 번 더 한 겁니다.
뭘 뽑았나
스킬 파일을 전부 읽고, 재설치 없이도 쓸 수 있는 것만 골라 파일 하나로 정리했습니다. 10.6KB짜리 노트 한 장입니다.
## 1. 안티패턴 (AI가 디자인할 때 반복하는 실수)
## 2. 검사 규칙 46개
## 3. 커맨드별 실제 지시 내용
## 4. 구체적 수치·기준 (색·타이포·간격·모션)
## 5. 우리 design.md 에 없는 것 (차이만) ← 제일 중요5번이 핵심입니다.
원문을 통째로 옮기면 그건 그냥 복사입니다.
제 design.md와 대조해서 우리한테 없는 것만 골라냈습니다.
이미 있는 건 안 적었습니다.
안티패턴 목록이 뼈아팠습니다
이 도구의 핵심 통찰은 한 문장입니다.
"AI가 만들었다"고 바로 알아채면 실패다.
그리고 AI가 반사적으로 쓰는 것들을 나열해놨는데, 읽으면서 계속 뜨끔했습니다. 제가 받던 결과물이 거의 다 여기 있었습니다.
| 안티패턴 | 왜 나쁜가 |
|---|---|
| 사이드 스트라이프 보더 | 카드 왼쪽 굵은 색 띠(border-left). 의도적인 적이 없다 |
| 그라디언트 텍스트 | background-clip:text. 장식일 뿐 의미가 없다 |
| 글래스모피즘 기본값 | blur 유리 카드를 목적 없이 남발 |
| 히어로-메트릭 템플릿 | 큰 숫자 + 작은 라벨 + 보조 통계. SaaS 클리셰 |
| 동일 카드 그리드 | 같은 크기 카드(아이콘+제목+텍스트) 무한 반복 |
| 작은 대문자 eyebrow | 섹션마다 위에 ABOUT PROCESS 같은 자간 넓은 소형 대문자 |
| 번호 마커 01/02/03 | 진짜 순서일 때만 정당. 아니면 장식 |
| 컨테이너 넘치는 텍스트 | 큰 clamp + 좁은 그리드 → 태블릿에서 헤드라인 오버플로 |
특히 eyebrow가 인상적이었습니다.
생성물의 55~95% 에 나타난다 = 사실상 AI 문법이다.
ABOUT, FEATURES, PROCESS. 제가 받은 시안마다 다 있었습니다.
"디자인이 왜 매번 비슷하지?"의 답이 이거였습니다.
AI 슬롭 2단 테스트
이건 자기 검열 도구인데, 발상이 좋았습니다.
1차 테스트
카테고리만 보고 테마+팔레트를 맞출 수 있으면 = 첫 반사
예) "AI 툴" → 다크 + 네온? → 맞으면 실패
2차 테스트
카테고리 + 안티레퍼런스로 미감을 맞출 수 있으면 = 한 단계 깊은 함정
예) "SaaS 아닌 AI 툴" → 에디토리얼 타이포그래픽? → 맞으면 역시 실패
둘 다 안 맞을 때까지 다시 짠다"예측 가능하면 진 것" 이라는 기준입니다.
제 design.md에는 이런 자기 검열 기준이 아예 없었습니다.
그리고 결정적인 발견
노트를 정리하다가 제가 몇 달째 헤매던 이유를 찾았습니다.
register 구분
디자인 규칙을 두 종류로 나눠야 한다는 겁니다.
| brand | product | |
|---|---|---|
| 대상 | 마케팅, 랜딩, 포트폴리오 | 앱 UI, 대시보드, 관리 도구 |
| 디자인의 역할 | 디자인이 곧 제품 | 디자인이 제품을 보조 |
| 모션 | 적극적으로 쓴다 | 억제한다 |
| 개성 | 기억에 남아야 한다 | 안 보여야 좋다 |
그리고 제 design.md를 열어봤습니다.
"transform 튀는 효과 금지"
"모션은 120~200ms 안에서"
"장식적 요소 최소화"전부 product 규칙입니다. 관리자 UI 문서니까 당연합니다.
그런데 저는 공개 랜딩 페이지를 이 문서로 만들려고 하고 있었습니다.
"화려하게 만들고 싶은데 어떻게 해야 할지 모르겠다"의 정체가 이거였습니다. 아이디어가 없었던 게 아니라, 모션 금지 규칙으로 화려한 걸 만들려고 했던 겁니다.
브레이크를 밟으면서 가속 페달을 찾고 있었습니다.
색 전략 4단계
두 번째로 값어치 있던 게 이겁니다.
색을 고르기 전에 커밋 수준부터 정하라는 겁니다.
Restrained 틴트 뉴트럴 + 강조색 ≤10%
Committed 한 색이 표면의 30~60%
Full 3~4개 색이 각자 역할을 가짐
Drenched 표면 자체가 색지금까지 저는 "무슨 색으로 할까"부터 생각했습니다. 그게 아니라 "색을 얼마나 쓸까" 를 먼저 정하는 겁니다.
이러면 "화려하게"가 감이 아니라 선택지가 됩니다. Full이나 Drenched로 가면 됩니다. 말로 설명할 필요가 없습니다.
바로 쓸 수 있는 숫자들
수치 기준도 꽤 건졌습니다.
색
본문 대비 ≥ 4.5:1
큰 텍스트 대비 ≥ 3:1
색공간 OKLCH
틴트 뉴트럴 chroma 0.005~0.015여기에 경고가 하나 붙어 있습니다.
크림/샌드 경고 대역: OKLCH L 0.84~0.97, C < 0.06, hue 40~100 이 대역의 body 배경은 2026년 AI 기본값이다. 피할 것.
AI가 반사적으로 고르는 색 영역을 좌표로 특정해놨습니다.
타이포
본문 줄길이 65~75ch
히어로 제목 max ≤ 6rem (약 96px)
display 자간 바닥 ≥ -0.04em
text-wrap balance (h1~h3) / pretty (긴 본문)
폰트 페어링 대비축으로. 비슷한 산세리프 둘 금지모션
이징 ease-out expo / quart / quint
금지 바운스, 엘라스틱 (촌스러움)
금지 레이아웃 속성 애니메이션
필수 @media (prefers-reduced-motion: reduce)여기 하나 중요한 게 있었습니다.
reveal 애니메이션은 이미 보이는 기본 상태 위에 얹는다. class로 콘텐츠 가시성을 막으면, 숨은 탭이나 헤드리스 환경에서 트리거가 안 걸려 빈 섹션이 배포된다.
이거 실제로 당해본 사람 아니면 못 쓰는 문장입니다.
그리고 도구는 지웠습니다
추출이 끝나고 롤백했습니다.
제거
~/.claude/skills/impeccable/ 2.5MB
전역 설정의 impeccable hook 1개
/root/test-impeccable/
npx 캐시의 impeccable 항목 8MB 회수
검증
JSON 문법 검사 통과
grep impeccable → 0건
새 세션에서 hook 에러 없음남은 것: 마크다운 노트 10.6KB 한 장.
2.5MB 도구와 전역 hook을 지우고, 10.6KB를 남겼습니다. 그리고 그 10.6KB가 도구보다 오래 갑니다. 버전 업데이트도, Node 버전 충돌도 없습니다.
남는 이야기
첫째, 못 쓰는 도구에서도 건질 게 있습니다.
전역을 오염시키고 Node 버전도 안 맞는 도구였지만, 그 안의 지식은 멀쩡했습니다.
도구가 나쁜 것과 도구가 담은 지식이 나쁜 것은 다릅니다. 지우기 전에 한 번 뜯어보세요.
둘째, "차이만" 뽑으세요.
원문을 통째로 옮기면 그건 복사고, 그러면 4편의 그 사고가 재현됩니다. 내 문서와 대조해서 없는 것만 골라내야 노트가 짧아지고 실제로 읽힙니다.
10.6KB니까 읽습니다. 100KB였으면 안 읽습니다.
셋째, 헤매고 있었다면 규칙이 잘못됐을 수 있습니다.
저는 몇 달간 "디자인 감이 없어서" 헤맨다고 생각했습니다. 아니었습니다. 관리자 UI 규칙으로 랜딩 페이지를 만들고 있었습니다.
일이 안 풀릴 때 실력을 의심하기 전에, 지금 쓰고 있는 규칙이 이 일에 맞는 규칙인지 를 먼저 보세요.
이전 편: [6편] 설치 로그가 거짓말을 했습니다 다음 편: [8편] 하루 만에 v1에서 v3이 됐습니다
이 글은 도구를 제거하기 전 지식을 추출한 기록입니다. 출처: [email protected] · 산출물: 추출 노트 10.6KB · 도구는 완전 제거
댓글 0