“단절된 데이터를 시스템의 핵심 자산으로 전환하다.” 번역 관리 시스템의 성능이 아무리 뛰어나도, 기존에 엑셀이나 CSV로 흩어져 있던 방대한 데이터를 가져오는 과정이 번거롭다면 그 활용도는 떨어질 수밖에 없다. 수동으로 데이터를 입력하는 시대는 지났으며, 이제는 복잡한 구조의 외부 파일을 얼마나 지능적으로 흡수하느냐가 시스템의 경쟁력이 된다.
프로젝트 8일 차, 기존 3단계였던 데이터 유입 경로를 더욱 정교한 4단계 마이그레이션 구조로 개편했다. 드래그앤드롭 기반의 필드 매핑 컴포넌트를 개발하여 사용자 편의성을 극대화했으며, 향후 디자인 도구와의 연동을 위한 Figma Plugin 구조까지 설계하여 시스템의 확장성을 한 단계 더 끌어올렸음.
1. 데이터 마이그레이션 4단계 구조 혁신
ㄱ. 기존 3단계의 한계를 넘어서는 프로세스 재설계
기존의 ‘업로드 → 미리보기/분류 → 확인’으로 이어지는 3단계 구조는 대량 데이터를 처리할 때 사용자가 한 화면에서 너무 많은 결정을 내려야 하는 부담이 있었다. 이를 해결하기 위해 각 단계를 논리적으로 분리하여 4단계 마이그레이션 워크플로우로 재구축했음.
- 1단계 (업로드): 사용자가 Excel이나 CSV 파일을 선택하면 시스템이 내부 시트(Tab)를 자동으로 감지하여 선택할 수 있게 한다.
- 2단계 (미리보기): 업로드된 파일의 내용을 시각적으로 확인하고, 파일의 컬럼과 시스템의 필드를 연결한다.
- 3단계 (분류): 가져온 데이터 중 중복된 항목을 어떻게 처리할지 결정하고 제품군이나 플랫폼별 분류를 설정한다.
- 4단계 (확인 및 실행): 최종적으로 매핑된 결과와 데이터 양을 검토한 뒤 실행 버튼을 눌러 마이그레이션을 완료한다.
ㄴ. 클라이언트 사이드 Excel/CSV 파싱 기술 적용
서버에 파일을 올리고 결과를 기다리는 대신, xlsx 라이브러리를 활용하여 사용자의 브라우저에서 즉시 파일을 파싱하도록 구현했다.
이 방식은 서버의 부담을 줄일 뿐만 아니라, 첫 행을 자동으로 헤더로 인식하여 실시간으로 컬럼 목록을 추출해주는 빠른 반응성을 제공한다. 여러 개의 시트가 포함된 엑셀 파일도 사용자가 원하는 데이터 탭을 자유롭게 선택할 수 있도록 설계했음.
2. 지능형 필드 매핑 컴포넌트 개발
ㄱ. 드래그앤드롭 기반의 직관적인 UI/UX
사용자가 엑셀의 ‘A컬럼’이 시스템의 ‘원문’이라는 것을 코딩 없이 연결할 수 있도록 필드 매핑 컴포넌트를 개발했다. 화면 왼쪽에는 파일에서 추출한 컬럼 목록을 배치하고, 오른쪽에는 시스템 필드를 배치하여 드래그앤드롭으로 연결하는 직관적인 방식을 채택했음.
매핑 과정에서 원문 필드는 필수 항목으로 지정하여 데이터 누락을 방지했으며, 번역 언어 필드는 다중 매핑이 가능하도록 설계하여 한 번에 여러 국가의 언어 데이터를 동시에 가져올 수 있게 했다.
또한 문맥(Context), 제품 코드, 버전, 플랫폼과 같은 메타데이터 필드까지 세밀하게 매핑할 수 있도록 구성하여 데이터의 완성도를 높였음
ㄴ. 매핑 상태의 시각적 피드백과 검증 로직
어떤 컬럼이 이미 사용되었고 어떤 필드가 비어 있는지 사용자가 한눈에 알 수 있도록 매핑된 항목에는 시각적인 강조 효과를 부여했다. 데이터 마이그레이션은 한 번의 실수가 대규모 데이터 오염으로 이어질 수 있기 때문에, 실행 전 필수 필드 매핑 여부를 강제로 검증하는 로직을 포함하여 안정성을 확보했음.
3. 개발 환경 최적화와 트러블슈팅
ㄱ. 개발 효율을 위한 인증 우회 및 API 테스트 전략
복잡한 마이그레이션 API를 테스트할 때마다 매번 로그인 과정을 거치는 것은 개발 속도를 저하시킨다. 이를 개선하기 위해 ALLOW_AUTH_BYPASS=true 환경변수를 도입하여 개발 환경에서는 인증 없이도 API를 즉시 테스트할 수 있는 통로를 마련했다. 이는 특히 마이그레이션처럼 반복적인 데이터 검증이 필요한 기능 개발에서 큰 시간 절감 효과를 가져왔음.
ㄴ. 파일 업로드 이벤트 핸들링 문제 해결
개발 과정에서 input[type="file"]을 숨기고 커스텀 버튼으로 대체할 때 이벤트가 정상적으로 전달되지 않는 문제가 발생했다. label 태그의 htmlFor 속성이나 opacity:0 방식은 z-index 문제나 버블링 문제로 인해 일부 브라우저에서 오작동을 일으켰음.
이를 해결하기 위해 React의 useRef를 사용하여 파일 input 객체를 직접 참조하고, 버튼 클릭 시 input.click()을 명시적으로 호출하는 방식으로 변경했다. 이 방식이 현재 브라우저 환경에서 가장 안정적이고 예측 가능한 동작을 보장한다는 것을 디버깅 과정을 통해 확인했음.
4. 시스템의 미래: Figma Plugin 구조 설계
ㄱ. 디자인 도구와 번역 엔진의 실시간 연결
번역 관리 시스템의 진정한 완성은 기획과 개발을 넘어 ‘디자인’ 단계까지 아우르는 것이다. 이를 위해 피그마(Figma) 내에서 직접 번역 데이터에 접근하고 적용할 수 있는 Figma Plugin의 기본 구조를 생성했다. manifest.json, code.ts, ui.html 등 플러그인 구동에 필요한 핵심 파일 구조를 완비했음.
이 플러그인은 우리가 구축한 AI 번역 엔진과 실시간으로 연동될 예정이다. 디자이너가 피그마에서 텍스트 레이어를 선택하고 버튼을 누르면, 시스템에 등록된 번역 데이터가 즉시 반영되거나 AI가 추천하는 다국어 텍스트로 치환되는 혁신적인 작업 환경을 제공하게 될 것임.
5. 견고한 데이터 인프라가 성장의 기반이다
이번 마이그레이션 기능 개발을 통해 복잡한 상태를 관리하는 React 컴포넌트 설계 능력을 한 단계 높였다. 파일 처리 시 서버 리소스를 아끼기 위해 클라이언트 파싱 라이브러리를 적극 활용한 선택은 옳았으며, 드래그앤드롭 같은 고전적인 UI 기법이 여전히 대량 데이터 관리에는 가장 강력한 도구임을 재확인했음