AI 시대, 리팩터링은 더 이상 노가다가 아니다
(blog.lemonbase.team)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는 일관된 대량 치환 역할로 구분하는 것이 좋음
아주 유용한 글이네요. AST 규칙 정할때, 처음에 전부 자동화하려고 했다가 고생했던 기억이... 이게 하다보니, 애매한 케이스는 빼고 확실한 것만 정하는게 답이더군요.
맞아요 ㅠㅠ 저도 똑같이 "모두 자동화해보자!" 했다가 고생했던 경험이 있습니다.
이야기주신것처럼 애매한 케이스는 제외하고, 확실한 패턴을 우선적으로 처리하는것이 효율적이였습니다 ㅎㅎ
- 명확한 패턴은 Codemod
- 애매한 패턴은 수동 처리
이렇게 투 트랙으로 가져가는것이, 구현/리뷰/버그 리스크까지 고려했을 때 효율적이더라고요!