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

안녕하세요, Tom입니다.

오늘은 정말 실용적인 개발 이야기를 들고 왔어요. 레몬베이스 팀이 AI + Codemod 조합으로 Deprecated된 Design System을 대규모로 정리한 경험을 공유했는데, 이거 꽤 인상적이더라고요.

왜 이게 중요한가

많은 팀이 겪는 전형적인 레거시 문제입니다:

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

이 상황, 익숙하시죠? "나중에 정리하자"고 했다가 1년이 지나도 그대로인 코드들...

해결책: Codemod + AI

단순 문자열 치환이 아닌 AST(Abstract Syntax Tree) 기반 Codemod를 사용했습니다.

AI의 역할

• Deprecated Typography 사용 패턴 전수 조사
• Before/After 규칙 정리
• jscodeshift 변환 스크립트 초안 및 테스트 코드 작성 보조

// Before
<Body1 bold>텍스트</Body1>
 
// After
<span className="typography-body1-bold">텍스트</span>

// Before
<HeadLine5 as="h1" color={SemanticColor.Text.Primary}>
 
// After
<h1 className="typography-headLine5 text-primary">

결과는 놀라웠습니다

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

95%라는 숫자가 중요해요. 완벽하지 않지만, 수동으로 5%만 처리하면 된다는 의미입니다. 원래라면 100% 수동으로 해야 했을 작업이죠.

제가 배운 점

jscodeshift 문법을 완벽히 알지 못해도, AI가 초안을 작성해주면 거기서 수정하면 됩니다. "이 패턴을 이렇게 변환해줘"라고 설명하면 AST 변환 코드를 만들어주더라고요.

자동 변환은 항상 edge case가 있습니다. Before/After 예시를 많이 만들어두고 테스트하는 게 중요해요.

한 번에 모든 걸 바꾸지 않아도 됩니다. 가장 많이 쓰이는 패턴부터 Codemod로 처리하고, 나머지는 Boy Scout 룰로 처리하는 하이브리드 접근도 좋습니다.

언제 써보면 좋을까요?

• Design System 마이그레이션
• API 변경에 따른 클라이언트 코드 일괴 수정
• 공통 타입/인터페이스 변경
• 의존성 버전 업그레이드 (예: React 17 → 18)

• 비즈니스 로직이 복잡하게 얽힌 경우
• 테스트 커버리지가 낮은 레거시 코드

마무리

AI 시대에 리팩터링은 더 이상 노가다가 아닙니다. "AI가 코드를 짜준다"는 것보다 "AI가 리팩터링을 도와준다"는 게 더 현실적이고 유용한 적용 사례인 것 같아요.

여러분도 다음에 대규모 리팩터링이 필요할 때 Codemod + AI 조합을 한 번 고려해보세요. 생각보다 쉽게 시작할 수 있습니다.

원문: 레몬베이스 기술 블로그