AI, 코드, 인간의 협업을 통한 대용량 JS 파일 리팩토링 경험

(아침에 일어나서 다시 보니 기존 글에 포맷팅 오류가 있고, 또 너무 길게 썼길래 요약본으로 다시 올립니다)

ChatGPT 초심자들이 ‘복잡한 문제’를 ChatGPT와 풀고자 할 때 흔히 3가지 실수를 범하는 걸 봤음

1. ChatGPT가 ‘정답을’ 단번에 줄 거라고 기대
2. ChatGPT가 정답을 ‘단번에’ 줄 거라고 기대
3. 이 기대가 쉽사리 충족되지 않아 실망하고, ChatGPT를 단순한 문제에만 사용하거나, 수동적으로만 사용하거나, 아예 사용을 중단함

이들은 결과적으로 AI를 이용한 생산성 향상 기회를 다수 놓치게 됨

이건 몇 달 전까지 내 모습이기도 했음

• 앱 초기 로딩 속도가 느려서 번들 크기 분석을 했더니 엄청나게 큰 JS 파일이 나왔음. 18,500줄짜리 이 파일의 대부분을 삭제할 수 있다는 걸 발견
• 처음에는 눈으로 봐가면서 손으로 삭제했지만 너무 지루하고 자꾸 실수함
• ChatGPT로 작업 시작. 하다 보니 나도 초심자처럼 ‘정답을 단번에’ 줄 거라고 기대하며 작업하고 있었다는 걸 깨달음
• 인지 후 ‘3자간 협업 전략’을 씀으로써 엄청난 진전을 빠르게 경험

작업 경과

나 대신 리팩토링좀 해줘

• 함수 하나 주고, 원하는 방식 설명하고, 리팩토링해달라고 함 → 실패. 컴파일도 안 됨
• 코드 구조를 이해해서 변경하는 게 아니라 한 줄씩 내려가면서 지우는 방식이었음

리팩토링하는 코드를 짜줘

• 직접 하지 말고, JS로 리팩토링하는 코드 달라고 함 → 실패. 이것 또한 한 줄씩 내려가면서 지우는 방식이었음
• 생각해보니 이런 대용량 리팩토링을 ChatGPT가 충분히 학습하지 못했을 것

AST로 리팩토링하는 코드를 짜줘

• 나는 한 줄 한 줄이 아니라 블록을 지우길 원했음. 즉 코드의 문법적 이해가 필요했으니 AST를 이용하면 좋겠다고 생각
• ChatGPT에게 ESLint 개발 경험 있는 엔지니어의 역할을 부여하고, AST를 이용해서 짜달라고 했더니 훌륭한 babel 기반 보일러플레이트가 나옴. 커다란 진전
• babel 경험이 없어서 ChatGPT와 함께 학습하며 로직을 추가해나갔는데 결국 어려움에 봉착. 복잡한 로직 다루기가 어려웠음

AST로 내가 이렇게 해봤어. 이 부분이 잘 안 되는데 너라면 이거 어떻게 해볼래?

• 내가 또 정답을 단번에 얻으려고 했다는 걸 깨닫고 전략 수정. traverse를 1번만 할 필요가 없다고 생각하니 술술 풀림.
• 한번 간단히 돌려보고 결과 보면서 로직을 쌓아나가는 방식으로 빠르게 진행
• 부분부분 잘 안 되는 곳은 그 특정 목적을 어떻게 구현할지 ChatGPT에게 물어보면서 함
• 마지막에 규칙으로 만들기 어려운 부분은 눈과 손으로 마무리. 이 때는 이미 코드 양이 엄청 적어져서 가능했음

결과

• 18,500줄 짜리 코드가 1,335줄이 되고, 메인 청크 번들 크기는 약 7.8% 감소
• 초기 로딩에 필요한 JS 파일 크기 및 로직이 줄어들면서 초기 로딩 속도 소폭 향상
• 길고 복잡한 레거시 코드를 AST로 리팩토링해본 경험과 자신감을 얻음
• 대부분의 복잡한 문제를 AI + 코드 + 인간 이라는 3자간 협업을 통해 효과적으로 해결할 수 있겠다는 자신감을 얻음

AI와 함께 복잡한 문제를 효과적으로 풀기 위한 멘탈 모델

1. AI가 잘 하는 일, 코드가 잘 하는 일, 인간이 잘 하는 일이 무엇인지 이해한다.
2. 내가 풀려는 문제를 분석해서 AI/코드/인간이 잘 하는 영역을 구분한다.
3. AI가 첫 코드를 잘 만들 수 있게 도와주고, 그 코드를 작게 실행해보면서 AI와 함께 개선하고, 중간중간 + 마지막에 인간이 하기 더 쉬운 건 내가 직접 한다.