해결해야 했던 문제
최근 회사에서 자동 번역이 제대로 되지 않는 이슈가 발생했다. 다른 부분은 정상적으로 작동했으나, iframe으로 임베드된 영역만 번역되지 않는 문제였다. iframe을 부모 컨테이너에 띄우는 것이 아니라 독립적으로 확인했을 때는 정상적으로 번역이 되므로, 문제는 iframe 자체가 아닌 iframe을 임베드한 코드에 있을 가능성이 높았다.
구글링을 통해 예상된 원인
자동 번역이 되지 않는 iframe 문제를 해결하기 위해 여러 가지 방법을 시도했다.
1. translate 속성 추가
iframe 태그에 translate="yes" 속성을 추가하여 자동 번역이 가능하도록 설정할 수 있다.
<iframe src="your-page.html" translate="yes"></iframe>
-> 실패
2. Meta 태그로 언어 설정
iframe 내부 문서의 <head>에 lang 속성이나 meta 태그를 추가하여 언어를 명시적으로 설정합니다. 예를 들어, <html lang="en"> 또는 <meta name="google" content="notranslate">가 있는지 확인하고 이를 제거한다.
-> 실패
3. 브라우저 캐시 문제
브라우저 캐시로 인해 번역이 적용되지 않을 수 있으므로 캐시를 지우고 새로고침한 후 다시 시도해보았다.
-> 실패
시도한 해결책: React에서 useTranslation 활용
다시 시도한 방법은 React에서 useTranslation 훅을 사용하여 현재 언어를 가져오고, 이를 iframe의 lang 속성에 동적으로 적용하는 방법이었다. 이를 위해 useEffect를 사용해 iframe이 로드될 때마다 언어 설정을 업데이트하도록 해보았다.
import React, { useEffect } from 'react';
import { useTranslation } from 'react-i18next';
function MyComponent() {
const { i18n } = useTranslation();
useEffect(() => {
const iframe = document.getElementById('my-iframe');
// iframe이 로드될 때마다 언어를 설정
const handleIframeLoad = () => {
const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
if (iframeDocument) {
iframeDocument.documentElement.lang = i18n.language; // 현재 언어 코드로 설정
}
};
if (iframe) {
iframe.addEventListener('load', handleIframeLoad);
}
// 컴포넌트 언마운트 시 이벤트 리스너 정리
return () => {
if (iframe) {
iframe.removeEventListener('load', handleIframeLoad);
}
};
}, [i18n.language]); // 언어가 변경될 때마다 효과 실행
return (
<iframe id="my-iframe" src="your-page.html" title="Translated Content" />
);
}
export default MyComponent;-> 실패. contentDocument가 제대로 반환되지 않았다. (null로 받아짐... 대체 왜? 이유는 아래에 있다.)
문제의 원인: CORS 에러
이유를 확인해본 결과, CORS(Cross-Origin Resource Sharing) 에러로 인해 iframe 내 콘텐츠에 접근할 수 없었다. 운영 환경에서는 iframe 주소가 같은 도메인에 있어 자동 번역이 정상적으로 작동했지만, 테스트 환경에서는 다른 도메인에서 iframe을 로드하고 있어 브라우저의 보안 정책 때문에 접근이 제한되었던 것이다..(!!!) (이렇게 간단한 이유였다니...ㅎㅎㅎ)
결론
최종적으로 운영 환경에서는 iframe 내의 영역까지 자동 번역이 잘 적용되고 있었으나, 개발 및 검증 환경에서는 iframe의 URL 차이로 CORS 정책 문제가 발생한 것으로 확인됐다.
처음에는 복잡해 보였지만, 원인을 차근차근 분석하면서 쉽게 해결할 수 있었다. CORS 문제를 발견한 후 상황이 풀리기 시작했고, 다양한 방법을 시도하며 문제를 좁혀가는 과정이 중요함을 깨달았다(!!)
이 경험을 통해 문제를 분석하고 다양한 가능성을 열어두고 접근하는 것이 중요하다는 점을 배웠다. 앞으로 유사한 상황에서 더 잘 대처할 수 있을 것 같다!~