[WebGL] Unity WebGL InputField 한글 입력

Unity WebGL InputField로 Text로 입력 시 WebGL에서 IME를 지원하지 않아 한영키가 바뀌지 않는 문제가 있다.

영어는 잘 써지나 한영키가 안누러 한글 입력을 못하는 상황

 

이번 시간에는 한영키를 바꿔 줄 수 있는 패키지를 소개하고 적용 방법을 소개하고자 한다.

 

혹시, Text 내 한글 폰트가 깨지는 현상이 발생한다면 다음 블로그를 검색해보기로 해보자.

 

https://blockdmask.tistory.com/590

[유니티] 텍스트 메시 프로 한글이 네모로 나올때 (Text Mesh Pro 한글 세팅)

 

 

01. WebGL Support Package 다운로드

 

https://github.com/kou-yeung/WebGLInput

GitHub - kou-yeung/WebGLInput: IME for Unity WebGL

IME로 인한 한글 입력 문제는 아니지만 Tab키라던가 WebGL 키보드 입력 시 문제를 해결하기 위해 솔루션을 패키지 해놓은 사이트가 있다. 감사한 마음으로 package를 다운 받으면 된다.

 

Unity 에디터 버전 별 업데이트하고 있으니 이점 잘 확인하여 받으면 될 것 같다.

 

 

02. WebGLInput InputField 오브젝트에 적용하기

패키지를 다운받으면 여러가지 폴더가 나오는데 우리는 InputField의 한글 입력 문제를 해결하고자 하니 WebGLInput.cs 파일을 이용할 것이다.

 

InputField가 있는 TextMeshPro-InputField 오브젝트 컴포넌트에 추가해준다.

 

다시 빌드하고 React 프로젝트에서 실행하면 문제 해결.....!

 

 

 

 

 

인 줄 알았으나 다음 문제가 발생한다.

 

 

 

03. 에러 해결하기

 

Cannot read properties of null (reading 'getElementsByTagName')
TypeError: Cannot read properties of null (reading 'getElementsByTagName')
    at _WebGLInputCreate (http://localhost:3000/Build/Build.framework.js:10:66666)

 

라는 문구나 뜨면서 WebGLInputCreat 함수로 호출하는데 참조 문제가 발생했다는 오류가 나왔다.

 

이를 해결하기 위해 조사한 결과

 

https://github.com/kou-yeung/WebGLInput/issues/90

I always receive the exception: Cannot read properties of null (reading 'getElementsByTagName') · Issue #90 · kou-yeung/WebGLI

 

이미 이 문제를 겪은 개발자들이 토론한 내용이 있었다.

 

문제는 바로 WebGLInput.jslib 파일에 있었다.

 

WebGLInput.jslib 수정 전

 

WebGLInput.jslib 수정 후

 

container.getElementsByTagName('canvas')[0]  -> document.getElementsByTagName('canvas')[0]

 

다음과 같이 수정하여 에러를 수정하였다.

 

 

한영키가 정상적으로 작동된다.