zakklee

ProjectsBlogAIAbout

오래된 숙제를 해치웠다

마이그레이션은 왜 미루게 될까

백로그에 오래 쌓여 있는 작업들이 있다. 기능 개발은 아니고, 그렇다고 버그도 아닌 것들. "언젠가는 해야 하는데"라고 생각하면서도 계속 뒤로 미루는 작업들이다.

마이그레이션이 그렇다. 테스트 프레임워크를 바꾼다거나, 린트/포맷 도구를 교체하는 일은 명백히 해두면 좋다. 그런데 실제로 손이 가질 않는다. 이유는 단순하다. 기존에 돌아가던 게 갑자기 안 돌아갈 수 있고, 설정 파일을 건드리다 보면 예상치 못한 곳이 터지고, 거기다 시간도 꽤 걸린다. 그러면 결국 "지금 당장 급한 일도 많은데"라는 말로 마무리된다.

이번에 그 숙제 두 개를 끝냈다. Cypress에서 Playwright로, ESLint와 Prettier에서 Oxc로.

Cypress에서 Playwright로

Cypress를 오래 써왔는데, 사실 불편함이 없었던 건 아니다. 테스트 실행 속도도 그렇고, 브라우저 지원 방식도 그렇고, 조금씩 거슬리는 부분들이 쌓여 있었다. 그래도 지금 돌아가고 있으니까 굳이 바꾸지 않았다.

결정적인 계기는 MCP였다. Playwright에는 공식 MCP가 있다.1 AI 에이전트가 브라우저를 직접 조작하면서 테스트를 작성하고 실행할 수 있다. Cypress에는 없다. AI로 E2E 테스트를 자동화하고 싶다면 Playwright가 사실상 유일한 선택지였다.

예전에 Cypress에서 Playwright로 마이그레이션하는 일은 꽤 고통스러운 작업이었다고 들었다. 두 프레임워크는 문법이 다르고, 설정 방식이 다르고, 비동기 처리 방식도 다르다. 파일 하나하나 손으로 고치면서 테스트가 깨질 때마다 원인을 찾아야 한다. 잘못하면 한 달짜리 작업이다.

이번에는 AI에게 맡겼다. Cypress 테스트 파일들을 읽히고 Playwright 문법으로 변환해달라고 했다. 설정 파일도 알아서 고쳐줬고, 파일 확장자 변경(*.cy.ts to *.spec.ts)도 일괄로 처리했다. 중간에 패턴이 잘 안 잡히는 부분은 한두 번 추가 지시를 줬지만, 대부분은 한 번에 됐다.

실제 코드에 손을 댄 건 하루였다. 나머지 이틀은 혹시 기존 서비스에 영향이 있는지 확인하는 기간이었다. 3일이면 끝났다.

이 글을 쓰면서 조사하다 보니 cy2pw.com이라는 사이트가 있었다.2 Cypress에서 Playwright로 전환한 팀들의 가이드와 커뮤니티 글을 모아놓은 곳인데, Playwright 팀이 공식으로 제공하는 변환 도구도 소개하고 있다.3 예전에 이걸 알았더라면 더 빨리 시작했을 것 같다.

ESLint/Prettier에서 Oxc로

이쪽은 여러 문제가 한꺼번에 겹쳤다.

먼저 Next.js 16이 나오면서 next lint 명령어가 사라졌다. 어차피 린트와 포맷 설정을 직접 새로 추가해야 하는 상황이 됐다. 때마침 ESLint와 Prettier를 같이 쓰면서 충돌 때문에 골치 아픈 상황이 이어지고 있었다. 포맷 규칙이 서로 겹치고, 플러그인 구성에 따라 설정이 꼬인다. 거기다 쓰고 있던 IDE가 Prettier를 제대로 처리하지 못하는 버그까지 겹쳤다.

이 참에 Oxc를 써보기로 했다. Rust로 작성된 JavaScript 도구 모음인데, Oxlint와 Oxfmt를 각각 ESLint와 Prettier 대체재로 쓸 수 있다. 공식 마이그레이션 가이드에서 AI와 함께 마이그레이션하는 방법을 별도로 안내한다.45 처음부터 이 과정을 AI 친화적으로 설계했다는 게 느껴지는 부분이다.

마이그레이션은 점심 시간 정도면 충분했다. AI가 기존 ESLint 설정 파일을 읽고 Oxlint 형식으로 옮겨줬다. 기존 업무를 진행하면서 병행했는데도 하루 만에 완료됐다.

결과가 좋았다. 같은 코드베이스, 같은 머신에서 hyperfine으로 측정한 수치다.6

작업Before (ESLint/Prettier)After (Oxlint/Oxfmt)배율
Lint (turbo 3-way 병렬)20.05 s1.03 s약 19.4×
Format check11.25 s1.23 s약 9.2×

CI에서 린트가 20초 걸리던 게 1초로 줄었다. 숫자를 보기 전에도 빠르다는 건 느꼈는데, 수치로 보니 체감보다 차이가 훨씬 컸다.

마이그레이션의 비용 계산이 달라졌다

두 작업 모두 예전 기준으로는 한 달 이상 잡아야 할 일이었다. 아니면 아예 손을 안 대거나. 그게 며칠 안에 끝났다.

어떤 일이 "할 수 있는 일"의 범위에 들어오느냐가 달라지고 있다. 이전에는 시간 대비 효과를 따졌을 때 우선순위에서 밀리던 일들이, 이제는 계산 자체가 바뀐다. 하루짜리 작업이라면 이번 주에 할 수 있다.

마이그레이션뿐만 아니라 이런 종류의 결정을 내리는 방식 자체가 달라진 것 같다. 예전에는 "언젠가"라고 뒤로 밀었던 이유가 진짜 이유가 아니었을 수도 있다. 시간이 없었던 게 아니라, 그 시간을 쓸 만큼 확실하지 않았던 것일 수도 있다. 지금은 시도해보는 비용이 워낙 낮아서, 일단 해보고 판단하는 게 더 쉬워졌다.

Footnotes

  1. Playwright MCP, Microsoft. Playwright를 MCP 서버로 실행해 AI 에이전트가 브라우저를 직접 조작할 수 있게 한다. Cypress에는 공식 MCP가 없다. ↩

  2. cy2pw.com. Cypress에서 Playwright로 마이그레이션하는 가이드, 성능 비교, 커뮤니티 사례를 모아놓은 큐레이션 포털. ↩

  3. Playwright 공식 Cypress 변환 도구. Playwright 팀이 제공하는 Cypress 코드 자동 변환 도구. ↩

  4. Oxlint 마이그레이션 가이드. ESLint에서 Oxlint로 전환하는 공식 가이드. ↩

  5. Oxfmt 마이그레이션 가이드. Prettier에서 Oxfmt로 전환하는 공식 가이드. ↩

  6. hyperfine. 커맨드라인 벤치마크 도구. --warmup 2 --runs 5 옵션으로 측정했다. ↩