번역 관리 시스템(TMS)에서 대용량 리소스나 복잡한 다국어 메타데이터를 소화할 때, 사소한 인터랙션의 결함과 비동기 처리 지연은 사용자의 작업 연속성을 저해하는 심각한 병목 요인이 된다. 특히 AI 자동 번역과 같이 대기 시간이 수십 초 이상 발생하는 무거운 프로세스를 동기식으로 제어하거나, 브라우저의 이벤트 전파 단계를 잘못 다루면 시스템의 신뢰도가 급격히 저하된다.
최근 진행된 ‘Translation Manager’ 프로젝트의 27번째 스프린트에서는 사용성 테스트 중 발견된 드롭다운 내부 스크롤 락(Lock) 버그를 완전 정복하고, 스키마 리팩토링 후 누락되었던 단건 번역 생성 엔진의 오류 수정 및 비동기 폴링(Polling) 기반의 AI 백그라운드 번역 파이프라인을 성공적으로 이식하였다.
이 과정에서 겪은 이벤트 캡처링 제어 기법과 서버리스 환경의 한계를 극복한 프론트엔드·백엔드 디버깅 성과를 상세히 공유한다.
1. 브라우저 이벤트 전파 단계 분석을 통한 드롭다운 스크롤 제어
문제 상황: 드롭다운 내부 스크롤 시 창이 즉각 닫히는 사용성 결함
다국어 언어 선택용 팝업 창(MultiSelectDropdown) 등 시스템 내 셀렉트박스 컴포넌트에서 하위 목록을 탐색하기 위해 스크롤을 시도하는 순간, 팝업 창이 즉각적으로 닫혀 불어나 스페인어 등 화면 하단 언어에 접근이 불가능한 치명적인 UX 에러가 지속 리포팅되었음.
원인 분석: window 스크롤 이벤트 캡처링(Capturing)의 간섭
분석 결과, 부모 컴포넌트의 overflow:hidden 속성으로 인해 튀어나온 영역이 잘리는 문제를 해결하고자 팝업을 최상단 document.body 레이어에 직접 렌더링하는 React Portal 기법이 적용되어 있었음.
동시에 테이블 외부 스크롤 감지 시 드롭다운이 자동으로 닫히도록 수립된 window.addEventListener('scroll', handler, true) 인터셉터의 세 번째 인자 true(이벤트 캡처링 단계에서 포착)가 드롭다운 내부에서 발생한 스크롤 신호까지 강제 가로채어 닫힘 매커니즘을 트리거한 것이 원인이었음.
[사용자가 드롭다운 내부 스크롤 시도]
↓
[스크롤 이벤트 발생 (Event 캡처링 발동)]
↓
[window 가청 가드레일: “스크롤 감지! 무조건 팝업 닫기”]
↓
[드롭다운 즉시 소멸 ──> 사용자 진입 원천 차단]
해결 방안: 스크롤 소스 컨텍스트 검증 인터셉터 구현
스크롤 감지 이벤트 핸들러 내부에서 시그널이 발생한 물리적 객체의 위치를 먼저 추적하도록 코드를 선언적으로 교정하였음.
이벤트 타깃이 드롭다운 내부 노드 자원인 경우 window 레벨의 닫기 이벤트를 완전히 무시(Ignore) 하도록 조건 분기를 촘촘하게 패치함으로써, 외부 스크롤 시 닫히는 고유 안전 규격은 유지한 채 내부 스크롤 탐색의 자유도를 완전 탈환하는 데 성공하였음.
2. 단건 번역 생성 엔진의 product_code 컬럼 예외 및 정렬 아키텍처 정정
ㄱ. 스키마 분리에 따른 단건 CRUD 및 RPC 함수 정합성 확보
새로운 번역 레코드를 단건 추가할 때 데이터베이스 레이어에서 Could not find the 'product_code' column of 'translations' in the schema cache 예외 덤프와 함께 인서트가 전면 거부되는 장애 레이어가 발견되었음.
원인: 과거 Phase 3 정규화 스프린트 과정에서 단일
translations테이블 내부의product_code컬럼을 Drop 시키고 다대다 구조의translation_products연결 테이블로 인프라를 이전했으나, 단건 저장을 담당하는 백엔드 함수(translation_crud_service.ts)의 일부 구형 쿼리가 레거시 필드에 데이터를 직접 강제 주입하려 시도하다 캐시 불일치 크래시를 터트린 것이었음.해결: 단건 번역 생성 및 대량 번역 생성용 Supabase RPC 내장 함수 내부에서 레거시 컬럼 참조부를 완벽히 들어내고, 신규 분리된 정규화 주소록 스펙에 맞추어 매핑 관계가 인서트되도록 코드를 전수 교정하였음.
ㄴ. 가독성 중심의 리스트 정렬 쿼리 방향성 반전
기존 번역 목록 조회 API는 데이터 정렬 기본값이 과거 생성 순(ORDER BY created_at ASC)으로 하드코딩되어 있어, 사용자가 신규 번역 데이터를 추가하더라도 즉시 확인하지 못하고 테이블 UI의 마지막 페이지까지 불필요하게 스크롤해 이동해야 하는 불편함이 있었음.
이를 데이터베이스 쿼리 레벨에서 가장 최신의 데이터가 1페이지 최상단에 마운트되도록 ORDER BY created_at DESC 내림차순 정렬 방식으로 전환하여 목록 가시성을 대폭 개선하였음.
3. AI 비동기 백그라운드 번역 파이프라인 및 실시간 폴링(Polling) 보완 아키텍처
단건 번역 생성 시에도 대량 파일 업로드 공정과 동일하게 선택 언어별 AI 자동 번역이 트리거되도록 비즈니스 로직을 온전히 주입하였음. 그러나 Kimi AI 등 서드파티 번역 API를 통해 10대 다국어 로케일을 처리할 경우 완수까지 약 60초 이상의 유휴 지연 시간이 발생하여 브라우저 화이트아웃 리스크를 초래하는 새로운 성능 과제에 직면했음.
ㄱ. 식당식 자리 안내(All-or-Nothing 우회)형 비동기 파이프라인 구축
사용자가 추가 버튼을 누르는 즉시 응답을 차단하지 않고, 비동기 백그라운드 스레드 개념을 이식하여 데이터 처리 구조를 2단계 파이프라인으로 완전히 분리 설계하였음.
[사용자 추가 버튼 클릭] ──> [번역 코어 레코드 즉시 생성] ──> [클라이언트 “추가됨” 200 OK 응답 리턴]
│
▼ (백그라운드 스레드 작동)
[AI 다국어 연산 가동 및 완료 후 DB Bulk Update]
ㄴ. 기술적 제약 돌파: 서버리스 프로세스 종료 한계를 극복한 가변 폴링 가동
Next.js 서버리스 배포 환경의 경우 HTTP 응답 프로토콜이 클라이언트에 반환되는 즉시 서버 측 가상 프로세스를 강제 종료(Kill) 시킬 위험성이 매우 높다. 이로 인해 백그라운드 AI 번역 작업이 완료되지 못한 채 공중에서 소멸하는 인프라 한계가 존재했음.
현재 Node.js 상주형 런타임을 사용하여 백그라운드 프로세스가 안정적으로 유지되나, 시스템의 완벽한 복원력을 갖추기 위해 프론트엔드 단에 가변 시간차 자동 폴링(Polling) 매커니즘을 가드레일 장치로 추가 보강하였음.
데이터가 생성된 시점을 기준으로 15초 ──> 40초 ──> 90초 단위로 서버 통계 엔드포인트를 타임 레벨로 동적 스캔(Fetch) 하도록 유도하여, 최대 90초 이내에 인프라 단절 없이 화면의 다국어 공란 영역이 싱크 완료되도록 마감하였음.
4. 대기 피로도 감소를 위한 시각적 로딩 애니메이션 및 중복 클릭 방지 락(Lock)
AI 백그라운드 연산이 뒤에서 부드럽게 흐르는 동안, 사용자가 화면 상에서 어떠한 작업이 가동 중인지 명확히 시각적으로 인지할 수 있도록 실시간 인터랙션 UI를 정제하였음.
ㄱ. AI 번역 생성 중… 파란색 깜빡임(Pulse) 애니메이션 배지 장착
번역문 결과 텍스트가 아직 인서트되지 않은 메모리 공백 데이터 행의 경우, 사용자가 누락 버그로 오인하지 않도록 다국어 셀 영역 전반을 통째로 묶어 ⚡ AI 번역 생성 중...이라는 정보성 배지를 파란색 고대비 컬러와 함께 animate-pulse 깜빡임 애니메이션 속성을 부여하여 시인성을 고도화하였음.
이후 앞서 설계한 비동기 폴링 훅이 서버 변경점을 가치 채어 화면을 리렌더링하면, 깜빡이던 로딩 배지가 부드럽게 걷히며 완벽하게 정규화된 각 언어별 번역문 텍스트가 셀 내부에 자동으로 채워지게 됨.
ㄴ. 개별 번개 버튼(재번역) 클릭 시 즉각적인 w-full disabled 가드레일 처리
테이블 우측 레이아웃에 배치된 개별 AI 재번역 번개 버튼 클릭 시, 연산이 수행되는 약 60초의 시간 동안 UI 피드백이 전무하여 사용자가 오작동으로 판단하고 버튼을 무차별 연타하는 리스크가 포착되었음.
이는 API 서버의 중복 호출과 인프라 낭비를 유발하는 주범이었음.
이를 제어하기 위해 마우스 클릭 이벤트를 가로채는 즉시 번개 아이콘의 스타일 속성을 파란색 펄스 상태로 강제 전환하고, disabled = true 제어 가드레일을 심어 추가적인 마우스 클릭 인터랙션을 원천 차단 시켰음.
더불어 마우스 호버 시 “AI 번역 중…” 이라는 컴포넌트 툴팁 명세를 실시간으로 노출 시켜 대기 피로도를 획기적으로 경감시켰음.
5. 사용자 중심 배포 성과 요약 그리고 마무리
0002c08 (드롭다운 스크롤 및 product_code 수정), 228d9ad (AI 비동기 처리 적용), 76304ea (로딩 펄스 애니메이션 배지 추가) 등 철저하게 현업 실무자들의 일상적 쾌적함을 담보하는 총 7개의 사용자 중심 마이크로 커밋이 메인 형상 관리 인프라에 병합 완료되었음.
과거 새번역 모달 입력 시 글자 단위 타이핑마다 0.8초 지연을 유도해 서버 스팸을 치던 과도한 AI 실시간 미리보기 팝업 영역을 통째로 파괴 들어냄으로써 모달 다이어트까지 마감함.
이 기나긴 여정 끝에, 남은 한마디는 컴퓨터 사이언스 개론을 철저히 보고 공부해야지 비개발자도 바이브 코딩의 가치가 있다라는 것을 느꼈다.
단순하게 툴 정도 만드는 것은 상관없지만 시스템 및 SaaS 그리고 플랫폼을 만들때는 개발적 아키텍쳐의 관점이 필요했다.