[error] ios 모바일 웹 textarea에서 한글 버벅임 문제

회사에서 Next.js로 웹서비스를 개발하고 있는데, ios 모바일 웹브라우저(사파리, 크롬)에서만 textarea에서 한글 입력시 버벅거리는 문제가 나타났다.

한글을 입력할 때 화면에 늦게 그려지면서 버벅거렸고, 글자가 여러번 입력되는 현상도 있었다.

 

안드로이드에서는 문제가 없어서 ios를 중심으로 찾아봤는데, 완벽하게 일치하는 사례를 찾지 못했다.

ios의 buffer문제나, font display도 관련이 있는지 찾아봤는데, 해결 방법이 되지는 못했다.

 

한참 헤매다가 폰트가 문제가 아니냐는 팀원의 질문에 폰트를 다시 원래 사용하던 것으로 바꿔보니 문제가 해결되었다.

 

폰트는 이렇게 next font를 활요해서 사용하고 있었다.

import { Roboto } from "next/font/google";

const font = Roboto({
  weight: ["100", "300", "500", "400", "700", "900"],
  subsets: ["latin"],
});

 

Roboto에서는 괜찮은데, Gothic A1을 사용하면 버벅거림 문제가 다시 발생한다.

Roboto는 한글 폰트를 제공하지 않고, Gothic A1은 한글 폰트도 제공한다.

그래서 한글 웹 폰트가 무거워서 로딩이 오래걸리는 건지 의심했는데, font display 설정을 바꿔도 문제는 동일하게 발생했다.

 

우선 폰트를 바꿔서 문제를 해결하긴 했는데 명확한 원인은 찾지 못했다.

(도와주세요...🙏)