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

> Clean Markdown view of GeekNews topic #26040. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=26040](https://news.hada.io/topic?id=26040)
- GeekNews Markdown: [https://news.hada.io/topic/26040.md](https://news.hada.io/topic/26040.md)
- Type: news
- Author: [whatsup](https://news.hada.io/@whatsup)
- Published: 2026-01-22T15:23:06+09:00
- Updated: 2026-01-22T15:23:06+09:00
- Original source: [blog.lemonbase.team](https://blog.lemonbase.team/ai-시대-리팩터링은-더-이상-노가다가-아니다-24f3cfae20b6)
- Points: 29
- Comments: 6

## Summary

대규모 Design System 교체 과정에서 **AI와 Codemod**를 결합해 레거시 컴포넌트를 자동 변환한 사례입니다. AST 기반 jscodeshift로 Deprecated Typography 패턴을 일괄 수정하고, AI가 변환 규칙 정리와 스크립트 초안을 보조했습니다. 그 결과 전체의 95% 이상을 자동화하며 코드 일관성과 유지보수 효율을 높였고, 이후 리팩터링에도 재활용 가능한 자동 변환 체계를 마련했습니다.

## Topic Body

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는 **일관된 대량 치환** 역할로 구분하는 것이 좋음

## Comments



### Comment 49745

- Author: hebu570
- Created: 2026-01-23T10:50:40+09:00
- Points: 1

아주 재미있는 글입니다..!  
현재 프로젝트의 프론트 코드가 엉망인데, 사용해봐야겠네요!

### Comment 49752

- Author: whatsup
- Created: 2026-01-23T13:50:33+09:00
- Points: 1
- Parent comment: 49745
- Depth: 1

반갑습니다. 재미있게 읽어주셔서 감사합니다!  
도입해보시면서 궁금한 점 있으면 언제든지 남겨주세요!!

### Comment 49727

- Author: shincad
- Created: 2026-01-23T09:31:20+09:00
- Points: 1

아주 유용한 글이네요. AST 규칙 정할때, 처음에 전부 자동화하려고 했다가 고생했던 기억이... 이게 하다보니, 애매한 케이스는 빼고 확실한 것만 정하는게 답이더군요.

### Comment 49735

- Author: whatsup
- Created: 2026-01-23T10:29:33+09:00
- Points: 1
- Parent comment: 49727
- Depth: 1

맞아요 ㅠㅠ 저도 똑같이 "모두 자동화해보자!" 했다가 고생했던 경험이 있습니다.  
이야기주신것처럼 애매한 케이스는 제외하고, 확실한 패턴을 우선적으로 처리하는것이 효율적이였습니다 ㅎㅎ  
  
- 명확한 패턴은 Codemod  
- 애매한 패턴은 수동 처리  
  
이렇게 투 트랙으로 가져가는것이, 구현/리뷰/버그 리스크까지 고려했을 때 효율적이더라고요!

### Comment 49724

- Author: aliveornot
- Created: 2026-01-23T08:45:51+09:00
- Points: 1

오 이런 거 좋네요

### Comment 49732

- Author: whatsup
- Created: 2026-01-23T10:18:07+09:00
- Points: 1
- Parent comment: 49724
- Depth: 1

좋게 봐주셔서 감사합니다!!