textarea 자동 높이, 떨림 없이 늘리는 법

마음을 적는 입력창은 글이 길어질수록 스르륵 늘어나야 자연스러워요. 그런데 직접 만들어 보니, 한 글자 칠 때마다 입력창이 미세하게 떨리는 문제가 먼저 반겨주더라고요.

왜 떨릴까요

가장 흔한 자동 높이 코드는 높이를 auto로 한 번 되돌린 뒤 scrollHeight를 다시 넣는 방식이에요.

키를 누를 때마다 height = 'auto'가 실행되는 순간, 입력창은 아주 잠깐 원래 한 줄 높이로 접혀요. 그다음 줄에서 scrollHeight 값이 들어가며 다시 펴지고요. 이 접혔다 펴지는 왕복이 60fps 기준 한 프레임(약 16ms) 안에서 벌어지면서 눈에는 떨림으로 보여요. 스크롤이 있는 긴 글에서는 스크롤 위치까지 튀어서 더 도드라져요.

키 입력→height auto로 접힘→scrollHeight로 펴짐→떨림

리셋 없이 가는 방법

제일 게으른 정답은 자바스크립트를 안 쓰는 거였어요. CSS에 field-sizing: content 한 줄만 넣으면 브라우저가 알아서 높이를 맞춰줘요. 리셋 자체가 없으니 떨릴 일도 없죠. 다만 지원 브라우저를 먼저 확인하고, 안 되는 환경엔 아래 방식을 함께 두는 걸 권해요.

자바스크립트로 풀어야 한다면, 매번 auto로 되돌리지 말고 지금 높이와 scrollHeight를 비교해서 값이 바뀔 때만 대입하면 돼요. 줄어들 때만 한 번 리셋하는 식이죠. 이렇게 적용해 봤더니 핵심 로직은 3줄 정도로 끝났고 떨림도 사라졌어요.

놓치기 쉬운 두 가지

먼저 box-sizing: border-box를 확인하세요. 위아래 padding이 합쳐 24px이라면 이걸 빼먹은 계산은 매번 24px씩 어긋나요. 테스트해 보면 입력할수록 높이가 조금씩 늘어나는 버그로 나타나요.

그리고 최대 높이를 정해두세요. max-height: 240px에 overflow-y: auto를 함께 걸어두면, 긴 글에서는 스크롤로 넘어가서 화면을 잡아먹지 않아요. 돌려 보니 이 한 줄이 체감 안정감을 크게 바꿨어요.

• ✓field-sizing 우선
• ✓리셋은 조건부
• ✓border-box 확인
• ✓max-height 240px

정리하면

떨림의 뿌리는 결국 매 입력마다 강제로 접었다 펴는 리셋이에요. 네이티브 CSS가 되는 환경이면 그걸 쓰고, 안 되면 값이 바뀔 때만 손대면 돼요. 저는 플랜티(plan-t)의 마음기록 에디터를 다듬으면서 이 방식으로 자리를 잡았어요. 작은 입력창 하나도 이렇게 조금씩 손보면 훨씬 편안해지더라고요.