투케이2K

214. (TWOK/WORK) [업무 이슈] 웹 페이지 window open 팝업창 열기 수행 시 크롬 브라우저 자동 번역 기능으로 인해 한글이 깨져 보이는 현상 이슈 문의 본문

투케이2K 업무정리

214. (TWOK/WORK) [업무 이슈] 웹 페이지 window open 팝업창 열기 수행 시 크롬 브라우저 자동 번역 기능으로 인해 한글이 깨져 보이는 현상 이슈 문의

투케이2K 2026. 5. 18. 19:21
728x90
반응형

[제 목]

​

주제 : 투케이2K 업무 정리

​

타이틀 : 투케이 / 2k / 업무 정리

​

제목 : [업무 이슈] 웹 페이지 window open 팝업창 열기 수행 시 크롬 브라우저 자동 번역 기능으로 인해 한글이 깨져 보이는 현상 이슈 문의

​

 

[내 용]

​

------------------------------------------------------------------------------
[개발 및 테스트 환경]
------------------------------------------------------------------------------

- 제 목 : [업무 이슈] 웹 페이지 window open 팝업창 열기 수행 시 크롬 브라우저 자동 번역 기능으로 인해 한글이 깨져 보이는 현상 이슈 문의


- 테스트 환경 : Chrome / Edge / FrontEnd / translate / meta


- 사전) 👉 브라우저 인코딩이 깨지거나 변경 되는 이유 간략 정리 : 

  >> Chrome 자동 번역이 끼어드는 경우 : 새 창이 외국어 페이지 (또는 언어 불명) 으로 인식되면 Chrome 이 자동 번역 → 한글이 깨져 보이는 현상이 발생

  >> HTML은 UTF‑8인데 전달 방식에 charset이 없음 : meta charset은 있지만 실제 문서는 UTF‑8로 열리지 않음

------------------------------------------------------------------------------





------------------------------------------------------------------------------
[이슈 사항]
------------------------------------------------------------------------------

1. ✔️ 웹 자바스크립트에서 window open 을 통해서 새창 열기 수행 시 브라우저 자동 인코딩 문제로 인해 한글이 깨져 보이는 현상 이슈 문의


2. ✔️ 새 창이 외국어 페이지 (또는 언어 불명) 으로 인식되면 Chrome 이 자동 번역 → 한글이 깨져 보이는 현상이 발생


3. 👉 Chrome 자동 번역이 끼어드는 경우 : 

  >> 새 창이 외국어 페이지(또는 언어 불명) 으로 인식되면 Chrome이 자동 번역 → 한글이 깨져 보이는 현상이 발생

  >> 특히 popup, about:blank, data URL 에서 자주 발생

------------------------------------------------------------------------------





------------------------------------------------------------------------------
[원인 파악 및 증상 재현]
------------------------------------------------------------------------------

1. 웹 브라우저에서 특정 이벤트 발생 시 (ex : http 호출 후 response 응답 결과 새창 열기) new Blob 및 URL.createObjectURL 를 사용해 window.open 새창 열기 수행


2. 특정 PC 에서 window.open 을 통해 새창 열기한 브라우저가 자동으로 번역 되어 한글이 깨져 보이는 현상 발생 확인


3. 👉 window.open 을 통해 새창 열기 수행 소스 코드 첨부 : 

  const text = await response.text();
  console.warn("Response Data : ", text);

  const html = `<!doctype html>
          <html lang="ko">
          <head>
          <meta charset="utf-8">        
          <title>logFileData</title>                            
          <style>
              body {
                  background-color: #000;
              }
              h3 {
                  color: #fff;
              }
          </style>
          </head>
          <body>
          <h3 style="white-space: pre-wrap; line-height: 1.35; margin: 0 0 12px 0;">${text}</h3>
          </body>
          </html>`;
          
  const blob = new Blob([html], { type: 'text/html' });
  const url = URL.createObjectURL(blob);

  const popup = window.open(url, '_blank', features);

------------------------------------------------------------------------------






------------------------------------------------------------------------------
[조치 내용]
------------------------------------------------------------------------------

1. Chrome 자동 번역 기능을 차단하기 위해 window.open 시 html 코드에 translate 및 meta google 태그 추가 수행

  >> ✔️ translate="no" : 브라우저 번역 요청 방지

  >> ✔️ meta name="google" content="notranslate" : Chrome 자동 번역 확실히 차단

  >> ✔️ UTF‑8 전달 방식 (Blob 등) : 글자 깨짐 근본 해결


2. ✅ window.open 시 html 수정 코드 첨부 : 

  const text = await response.text();
  console.warn("Response Data : ", text);

  const html = `<!doctype html>
          <html lang="ko" translate="no">
          <head>
          <meta charset="utf-8">
          <meta name="google" content="notranslate">
          <title>logFileData</title>                            
          <style>
              body {
                  background-color: #000;
              }
              h3 {
                  color: #fff;
              }
          </style>
          </head>
          <body>
          <h3 style="white-space: pre-wrap; line-height: 1.35; margin: 0 0 12px 0;">${text}</h3>
          </body>
          </html>`;
          
  const blob = new Blob([html], { type: 'text/html' });
  const url = URL.createObjectURL(blob);

  const popup = window.open(url, '_blank', features);  

------------------------------------------------------------------------------





------------------------------------------------------------------------------
[참고 사이트]
------------------------------------------------------------------------------

▶️ [간단 소스] translate 와 meta 메타 태그 사용해 브라우저 자동 번역 기능 차단 설정 방법

https://kkh0977.tistory.com/8812

https://blog.naver.com/kkh0977/224282112344


▶️ [HTML meta tag 메타 태그 mobile-web-app-capable 사용해 웹앱 URL 주소창 제거 및 전체 화면 설정]

https://kkh0977.tistory.com/7003

https://blog.naver.com/kkh0977/223589024673?trackingCode=blog_bloghome_searchlist


▶️ [간단 소스] HTML meta tag refresh 메타 태그 사용해 특정 URL 주소 이동 수행

https://kkh0977.tistory.com/7294

https://blog.naver.com/kkh0977/223656217865?trackingCode=blog_bloghome_searchlist


▶️ [meta 태그 http-equiv 속성 refresh 사용해 특정 페이지로 리다이렉트(redirect) 수행 실시]

https://kkh0977.tistory.com/2364

https://blog.naver.com/kkh0977/222852455258?trackingCode=blog_bloghome_searchlist


▶️ [HTML meta tag 메타 태그 viewport 뷰포트 사용해 모바일 웹 zoom 줌 확대 , 축소 , 사이즈 고정]

https://kkh0977.tistory.com/6465

https://blog.naver.com/kkh0977/223492312522?trackingCode=blog_bloghome_searchlist
  
------------------------------------------------------------------------------
 
728x90
반응형
저작자표시 (새창열림)

'투케이2K 업무정리' 카테고리의 다른 글

216. (TWOK/WORK) [업무 이슈] 안드로이드 기존 개인 사용 앱에서 공용 배포를 위한 EditText 시크릿 키 정보 암호화 처리 및 클립보드 복사 기능 막기 개발  (0) 2026.05.25
215. (TWOK/WORK) [업무 이슈] 자바스크립트 AWS S3 텍스트 파일 브라우저 열기 시 텍스트 인코딩 깨짐 이슈 - ContentType charset=utf-8 설정  (0) 2026.05.22
213. (TWOK/WORK) [업무 이슈] AWS IoT Core 사물 Thing Shadow List 리스트 조회 시 실제 생성 된 사물이 아닌데 응답 [] 반환 이슈  (0) 2026.05.17
212. (TWOK/WORK) [업무 이슈] 안드로이드 apk 앱 설치 파일 설치 수행 시 ' 패키지가 충돌했습니다. ' , ' 앱이 설치되지 않았습니다 ' 메시지 표시 이슈  (0) 2026.05.12
211. (TWOK/WORK) [업무 문의] AWS IoT 디바이스 기기 장비 프로비저닝 수행 후 자동 펌웨어 업데이트 여부 체크 및 OTA 수행 가능 업무 문의  (0) 2026.05.08
'투케이2K 업무정리' Related Articles more
Comments