AI 시대, 리팩터링은 더 이상 노가다가 아니다

AI + Codemod로 Design System 레거시를 정리한 글입니다.
대규모 리팩터링을 앞두고 있는 분들께 참고가 되었으면 합니다.

문제 발생 배경

• 사내 Design System에서 Typography 등 다수 컴포넌트가 Deprecated
• 새 Design System + Tailwind 도입 후 한 코드베이스 안에 Deprecated 패턴이 혼재
• Boy Scout 룰로 조금씩 정리하기엔
  • 파일 수가 너무 많고
  • 기능 변경 PR과 리팩터링 PR 분리 원칙 때문에 우선순위에서 계속 밀림

접근 방법: Codemod + AI

• 문자열 치환이 아닌 AST 기반 Codemod(jscodeshift) 사용
• AI를 활용해:
  • Deprecated Typography 사용 패턴 전수 조사
  • Before/After 규칙 정리
  • jscodeshift 변환 스크립트 초안 및 테스트 코드 작성 보조
• 핵심 변환 예시:
  • <Body1 bold>텍스트</Body1>
    → <span className="typography-body1-bold">텍스트</span>
  • <HeadLine5 as="h1" color={SemanticColor.Text.Primary}>
    → <h1 className="typography-headLine5 text-primary">

결과

• Typography 관련 Deprecated 패턴 약 95% 자동 변환
• 혼합 패턴이 크게 줄어 코드 일관성과 온보딩 경험 개선
• “다음 Design System 교체도 Codemod로 한다”는 옵션을 확보

배운 점

• 생각보다 많은 리팩터링 작업이 AST + Codemod로 자동화 가능
• 대규모 자동 변환에서는 “파일 diff 리뷰”보다 “변환 규칙 + 테스트 리뷰”가 더 효율적이고 안전
• AI는 패턴 분석·초안 작성 보조, Codemod는 일관된 대량 치환 역할로 구분하는 것이 좋음