구글 크롬 자동번역과 Next 500 에러

나는 플랫폼 분야의 개발을 하고 있기 때문에 항상 유저의 만족을 우선 순위에 두고 개발을 해야 하는데, 일반 유저를 상대로 서비스를 하면 꽤 생각 외의 이슈가 발생한다.

최근 이슈 중에는 크롬의 일본어 자동 번역 기능을 사용했을 때 500 에러가 발생하여 사용할 수 없다는 내용이 있었다. 

 

크롬 자동 번역은 AI 결과를 대충 퍼오자면 이런식으로 작동한다.

1. 크롬 번역 시 <font> 태그 생성 방식

• 작동 원리: 구글 번역 엔진이 페이지를 해석한 후, 원본 텍스트 노드를 번역된 텍스트로 대체하면서, 해당 텍스트를 <font> 태그나 <span> 태그로 래핑(Wrapping)합니다.
• 형태: <font style="vertical-align: inherit;">번역된 내용</font>과 같은 형태로 번역된 텍스트마다 이 태그가 적용됩니다.
• 목적: 원본 텍스트와 번역 텍스트를 구분하고, 스타일(특히 폰트 관련 수직 정렬)을 유지하기 위함입니다. 

웹 페이지를 수정하기 때문에 SPA 쪽에선 에러가 종종 터진다. 

 

넥스트 공식 문서 같은 것도 크롬 번역 돌려놓고 이동하다보면 종종 터지는 걸 볼 수 있다.

 

이런 건 유저가 알아서 번역 기능을 페이지마다 써야 하는 거 아니냐고 생각할 수 있지만... 플랫폼은 그래선 안 된다.( 고객만족이 언제나 1순위입니다.) 또한 해외 유저가, 웹 뷰어인 우리 서비스가 자동 번역이 가능하기 때문에 일부러 사용하는 경우가 있기 때문에 잘 작동되게 만드는 게 중요했다.

그런데 재현하는 것부터 애를 먹었다. 뭐가 원인인지 들락날락하면서 디버깅 하는 데만 몇 시간 걸렸었는데! 

 

우선 항상 재현이 되고 발견하여 고치기 쉬운 케이스는 <span>같은 식으로 감싸지 않고 그냥 텍스트 노드로 존재하는 경우 잘 터진다. 검색할 때 자동완성 기능을 하면서 계속 갱신하는 경우. 텍스트 노드를 <span>으로 감싸서 쉽게 처리가 가능하다.

 

하지만 어쩌다 한 번 우주의 기운이 모이고 타이밍을 맞췄을 때 터지는 경우가 있음. 그건 바로......!! 

Swiper 와 같은 메인 배너가 n초에 한번 변경되는 게 원인이었음. 정확히는 그런 배너에 포함된 1/N과 같은 숫자 페이지네이션임.

이게 N초마다 변경되는 게 크롬 번역 API 호출의 트리거가 되는데, Swiper가 초기화되고 변경되면서 조작이 발생하고 react랑 자동 번역이 같은 dom을 수정하려 할 때 타이밍이 맞지 않으면 해당 요소가 존재하지 않기 때문에 500 에러가 떨어진다.

 

새로고침하고 들락날락 거리며 500 에러를 재현하고, 한번 발생시키면 동일 페이지에서는 에러가 반복적으로 일어나는데, 에러가 발생했을 때 네트워크 탭에서 직전에 호출한 번역 api의 request, response가 배너의 페이지네이션 요소인 것을 보고 드디어 원인을 파악할 수가 있었다. (ㅠ_ㅠ...) 해서, 어차피 이건 번역이 필요하지 않은 부분이기 때문에 translate="no" 속성을 추가해주면 간단하게 해결된다.

 

다만 이러한 현상이 또 어디에서 발생하는지는 미리 파악하기가 어렵고 이 케이스도 사실 원래부터 있었을 거 같은데 유저가 문의를 하게 되어 밝혀진 것이기 때문에... 아직 파악하지 못한 곳에서 발생할 수 있다. 그 경우엔 건건이 대응을 해 주어야 할듯..

 

혹시 같은 문제를 겪고 있는 사람이 있다면 이런 쪽을 한번 의심해보시길...