Electron과 React를 사용한 데스크탑 애플리케이션을 만드는데, 자꾸 Electron의 BrowserWindow에서 띄운 React단의 Input 태그에서 한글 입력 시 문자열 마무리가 뜨는 문제가 있었다.
여기서 문자열 마무리란, 한글 입력 시 윈도우의 기본 IME 기능 중 화면 좌측 상단에 작은 박스로 입력할 수 있게 해주는 기능이다.
정말 짜증나는게 뭐냐면, 한글을 입력할 때 한글자씩 느리게 쳐진다는 것이다.
어쨌거나, PC 자체의 이슈이므로 쓰는 사람이 불편하면 찾아보든가 해서 IME를 업데이트를 하든 안뜨게 고칠 수 있다.
하지만 유저들에게 애플리케이션을 배포해야하는 입장에서 한글 입력기 문제는 유저들에게 떠넘기기 힘든 이슈이기에, Electron단에서 고쳐야만 했고, 난 Electron Engine 어딘가를 건드려 이 문자열 마무리라는 것이 뜨지 않도록 해야했다.
근데 이게 아무리봐도 Electron 단에서 건드릴 수 있는 설정값이 있을 것 같았는데, 어디에도 없었다.
Electron 공식 Documentation을 샅샅이 뒤져봐도 Korean IME Issue 라던지 이런건 코빼기도 안 보였다.
3달동안 구글링을 해봤는데 나와 같은 상황을 겪은 사람은 아무래도 이세상에 아직 없는 것 같다.
디스코드나 VS Code, 롤 클라이언트(Chromium)에서는 어떻게 해결한 걸까?
다만 알게 된 것은, 다른 Electron 애플리케이션 (디스코드, 노션, VS Code, 크롬) 등을 Focusing 했다가 다시 내 애플리케이션을 Focusing하면 그 박스가 뜨지 않는다는 것이었다.
이유는 아직도 알 수 없지만 여튼 고치고는 싶은 문제였기에 야매로 처음 Electron Window가 뜰 때부터 문자열 마무리라는 것을 Disable 시키기 위해 다음과 같이 적용하였다.
Electron에서 메인 윈도우로 BrowserWindow를 생성하고 띄울 때의 코드이다.
mainWindow.loadURL(entryUrlPrefix);
mainWindow.on('closed', () => {
mainWindow = null;
});
mainWindow.once('ready-to-show', () => {
mainWindow.show();
mainWindow.hide();
mainWindow.show();
});show() 함수를 2번 쓴게 오타가 아니다.
원래는 show(), blur(), focus() 이 순서로 진행했으나 blur 함수 실행 이후 창의 z-index가 저 뒤로 밀려나고, focus() 해도 다시 앞으로 튀어나오지 않았기 때문에 위와 같이 변경했다. (blur 이후에는 restore()이나 moveTop() 함수도 먹히지 않았다..)
위와 같이 선언하면 문자열 마무리 문제는 막을 수 있다.
물론 첫 실행에 깜빡거리는 느낌이 남아 찝찝하지만 뭐 어쩌겠는가. 답이 없는데.
혹시라도 이 이슈를 겪었고 해결 방법을 아는 분은 제발 댓글을 남겨주시길 바란다..