# 모든 텍스트의 정확한 픽셀 너비 측정
텍스트가 컨테이너를 벗어나나요? 렌더링하기 전에 제목이 차지하는 공간을 알아야 하나요? 브라우저 Canvas API를 사용하면 DOM에 렌더링하지 않고도 픽셀 정밀도로 텍스트 문자열의 정확한 너비를 측정할 수 있습니다.# 글자 수 계산만으로 부족한 이유
현대 서체는 가변 너비를 가집니다. 각 글리프마다 너비가 다릅니다. "W"는 "i"보다 3배 더 많은 공간을 차지할 수 있습니다. 글자 수는 텍스트가 실제로 차지하는 시각적 공간에 대해 아무것도 알려주지 않습니다.- 웹 디자인: 버튼, 레이블 및 테이블 셀의 텍스트 넘침(overflow)을 방지합니다.
- SEO: 검색 엔진은 글자 수가 아니라 픽셀 단위로 제목을 자릅니다.
- Canvas 및 PDF: 프로그래밍 방식으로 텍스트를 그리기 전에 정확한 위치를 계산합니다.
- 툴팁 및 버블: 내부 텍스트에 따라 컨테이너 크기를 동적으로 조정합니다.
# Canvas를 이용한 측정 방법
Canvas API의ctx.measureText() 메서드는 현재 활성화된 글꼴을 사용하여 CSS 픽셀 너비를 반영하는 width 속성을 가진 TextMetrics 객체를 반환합니다. 이 도구는 측정 전에 글꼴, 크기, 두께 및 스타일로 컨텍스트를 구성합니다.const ctx = document.createElement('canvas').getContext('2d');ctx.font = '700 16px Inter, system-ui, sans-serif';const width = ctx.measureText('안녕 세상').width; // 예: 74.5