현대위아 해외 구매 시스켐 웹 컨버전 프로젝트를 진행하며

https://to-be-converter.netlify.app/

tobe-converter

 

해외 구매 시스템 Polymer 7 → 9 변환 프로젝트 회고

이번에 참여한 프로젝트는 자동차 부품 해외 구매 시스템을 다루는 작업이었다.
해외 구매 사이트를 통해 자동차 관련 부품의 재고와 수량을 조회하고,

구매를 신청하는 시스템이다.

기존 시스템은 EMRO에서 개발한 Polymer 7.0(AS-IS) 기반이었고,
이를 Polymer 9.0(TO-BE) 버전으로 변환하는 작업이 프로젝트의 핵심 목표였다.

---

담당 범위와 프로젝트 규모

해외 구매 시스템은 멕시코 / 중국 두 국가로 나뉘어 있었고,
그중에서 나는 멕시코 시스템을 전담하게 되었다.

문제는 규모였다.

• 페이지 수: 수백 개
• 페이지마다 포함된 팝업 화면
• 결과적으로 HTML 파일만 수천 개

단순히 “버전 업그레이드”라고 보기에는 꽤나 방대한 작업이었다.

---

표준 가이드의 한계와 팀 협업

EMRO에서 제공하는 표준 변환 가이드 문서는 존재했지만,
실제 코드를 변환하다 보니 가이드만으로는 해결되지 않는 케이스가 굉장히 많았다.

• 케이스가 너무 다양함
• 가이드에 없는 패턴 다수 존재

그래서 팀원 6명이 함께
👉 코드 정리 문서를 만들어 각자 해결한 변환 케이스와 노하우를 공유했다.

또한,

• 내부에서 해결이 어려운 케이스는
• EMRO 지원센터에 직접 문의하여 답변을 받고 변환을 진행했다.

이 과정을 통해 점점 변환 규칙이 축적되기 시작했다.

---

패턴이 보이기 시작하다

프로젝트를 약 1개월 정도 진행하니,
코드를 보는 순간 “아, 이건 이렇게 바꾸면 되겠구나” 하는 감이 생기기 시작했다.

하지만 새로운 문제가 생겼다.

코드 양이 너무 많아서 하나하나 수작업으로 변환하는 게 너무 비효율적이었다.

그래서 자연스럽게 이런 고민을 하게 됐다.

“이거… 자동화할 수 있지 않을까?”

---

변환 자동화를 위한 시도 (converter.js)

실제로 살펴보면, 단순 변환 규칙이 굉장히 많았다.

예를 들면:

 

// AS-IS (Polymer 7) this.$.getAdmin.service(); 
// TO-BE (Polymer 9) UT.request(this.$.getAdmin);

 

이런 패턴들이 반복되다 보니,
👉 converter.js 파일을 만들어 정규식 기반 변환 로직을 구성했다.

방식은 다음과 같았다.

• 자주 등장하는 변환 패턴을 정리
• 정규식 규칙으로 자동 치환
• 새로운 변환 케이스가 나오면 규칙 추가
• 이상하게 변환되는 경우는 정규식 지속 수정

완벽하진 않았지만,
👉 오류를 최소화하면서 작업 시간을 크게 줄일 수 있었다.

---

노가다라고 생각했던 프로젝트, 결과는?

솔직히 프로젝트를 시작하기 전에는 이런 생각이 들었다.

“단순 변환 작업인데… 이게 개발 실력에 도움이 될까?”

 

하지만 결과적으로는 전혀 달랐다.

• 반복 작업을 자동화로 전환하는 사고
• 정규식과 코드 패턴 분석 능력
• 팀 내 지식 공유의 중요성
• AI를 활용해 변환 규칙 기반 도구를 만든 경험

단순 노가다라고 생각했던 프로젝트가,
**‘어떻게 하면 일을 더 효율적으로 할 수 있을까?’**를 고민하게 만든 계기가 되었다.

생각보다 배울 것이 정말 많았던 프로젝트였다.