Extract

사용 시기

/impeccable extract은 코드베이스가 실수로 디자인 시스템이 되었을 때를 위한 것입니다. 12곳에 반복된 버튼 스타일. 같은 카드의 세 가지 변형. 곳곳에 흩어진 hex 색상. 우연히 스케일과 맞는 수제 간격. 이 어긋남을 재사용 가능한 프리미티브로 통합하고 싶을 때 사용하세요.

제품이 패턴을 드러낼 만큼 충분한 기능을 출시한 후에 사용하세요. 조기 추출은 현실과 맞지 않는 추상화를 만듭니다.

작동 방식

스킬은 먼저 디자인 시스템 구조를 발견한 다음 추출 기회를 식별합니다:

1. 토큰: 반복된 리터럴 값(색상, 간격, 라디우스, 그림자, 폰트 크기) 찾기. 토큰 이름 제안, 토큰 시스템에 추가, 사용처 교체.
2. 컴포넌트: 사소한 변형으로 반복되는 UI 패턴(버튼, 카드, 입력, 모달) 찾기. 변형이 있는 단일 컴포넌트로 추출, 호출부 마이그레이션.
3. 구성 패턴: 반복되는 레이아웃이나 인터랙션 패턴(폼 행, 툴바 그룹, 빈 상태) 찾기. 구성 프리미티브로 추출.
4. 타입 스타일: 반복된 font-size + weight + line-height 조합 찾기. 텍스트 스타일로 추출.
5. 애니메이션 패턴: 반복된 이징, 지속 시간, 키프레임 조합 찾기. 모션 토큰으로 추출.

스킬은 신중합니다. 같은 의도로 세 번 이상 사용된 것만 추출합니다. “나중에 재사용될 수 있으니까” 추출하지 않습니다. 조기 추상화는 중복보다 더 나쁩니다.

직접 해보기

/impeccable extract the button styles

예상 출력:

• 8개 파일에 14개 버튼 인스턴스 발견
• 4가지 구별된 변형: primary(채워진 액센트), secondary(보더), ghost(텍스트만), destructive(빨간 채움)
• 4가지 변형 모두 같은 크기 스케일 사용(small, default, large)
• 토큰 기반 스타일로 <Button variant="primary" size="default">에 추출
• 14개 호출부 마이그레이션, 약 180줄의 중복 CSS 제거
• 누락된 3개 토큰 추가: --button-radius, --button-padding-y, --button-padding-x

주의 사항

• 너무 이르게 추출하기. 두 번 사용은 패턴이 아닙니다. 세 번은 될 수 있습니다. 패턴이 명확해질 때까지 기다리세요.
• 과도한 일반화. 추출된 컴포넌트는 현재 사용 사례와 밀접하게 맞아야 하며, 가능한 모든 미래를 예상해서는 안 됩니다. 나중에 언제든 변형을 추가할 수 있습니다.
• 마이그레이션 잊기. 마이그레이션 없는 추출은 이전 중복 코드를 남기고 같은 것을 하는 세 번째 방법을 만듭니다. 항상 같은 패스에서 마이그레이션하세요.
• 의도가 다른 것 추출하기. 비슷해 보이지만 다른 목적을 제공하는 두 버튼(주요 액션 vs 버튼 스타일의 링크)은 아마도 분리되어야 합니다.