iOS 한글 버퍼 오류

iOS에서 키보드로 한글을 입력하고 엔터를 누르면, 마지막으로 입력한 한 음절이 버퍼에 저장되고 다시 한글을 입력할 때 나타나는 치명적인 오류가 있다. 

'샌드'를 보고 '위치'를 입력한 후 엔터를 누르니 '치'가 버퍼에 들어갔다가 '관리'의 'ㄱ'을 입력한 순간 앞에 붙어 결과적으로 '치관리'가 된 모습이다.

'카스'를 보고 '테라'를 입력한 후 엔터를 누르니 '라'가 버퍼에 들어갔다가 '콥터'의 'ㅋ'을 입력한 순간 앞에 붙어 결과적으로 '라콥터'가 된 모습이다.

마찬가지로 튀르키예-Enter를 눌렀을 뿐인데 '예' 가 불쑥 나타나버린다...

근데 골 때리게도 받침이 없어야만 버퍼에 들어가버린다. 이 근본 없는 에러는 도대체 뭘까... 해결 방법은 input의 focus를 없애버리는 것이다. 근데 focus를 없애면 키보드가 중간에 사라지기 때문에 다른 input을 안 보이게 만들어서 focus를 옮겼다가 다시 원상복구 시키는 방법을 추천한다. 

진짜 이게 무슨 짓인가 싶긴 하지만.. 어쩔 수 없다.. 애플이 폐쇄적인 것을 어떻게 하겠는가...

참고로 필자는 input 대신 contenteditable div를 사용했다.

<div
  ref="wordInput"
  contenteditable="true"
  @keydown.enter.prevent="onEnter"
></div>

사실 input을 사용했지만 input에서는 한글이 완성되는 순간 input이 순간이동해버리는 게 너무 싫어서 contenteditable-div로 만들었었다. 하지만 도망친 곳에 낙원은 없었다. 이 망할 iOS 한글 키보드 버퍼가 나를 기다리고 있었던 것이다. 아무튼 안 보이는 input도 하나 만들어주자.

<div id="hidden-input" contenteditable="true" ref="hiddenInput"></div>

#hidden-input {
  opacity: 0;
  height: 1px;
}

아예 안 보이면 focus 자체가 안되는 것 같아 양심껏 height로 1px 정도는 나눠주었다.

const wordInput = ref(null);
const hiddenInput = ref(null);

const onEnter = (event) => {
  if (event.key === "Enter") {
    // 중략
    hiddenInput.value.focus();
    wordInput.value.focus();
  }
};

엔터를 누르면 hiddenInput으로 focus가 갔다가 다시 wordInput으로 돌아오게끔 코드를 작성했더니 iOS에서도 한글 키보드가 정상 작동할 수 있었다. 

iOS는 input, textarea, button이 제멋대로인데다가 이제는 한글 키보드까지 이 지경이다. 필자도 한글 버퍼에 대해 알기 전까지는 이 문제를 해결하기 위해서 input으로 하는 대신 input의 position을 absolute로 고정하기도 하고, contenteditable-div로 만들어서 애꿎은 함수들을 건들기도 했었다. 아래는 구글링하며 참고한 티스토리인데 꼬동님께 무한 감사드립니다. 

iOS 한글 buffer 문제 (tistory.com)

iOS 한글 buffer 문제