Web Audio API로 TTS 증폭하기

최근 접근성 기능을 개발하면서 TTS의 음량을 높여야 하는 상황이 있었다. 기존에는 브라우저의 speechSynthesis API를 사용해 음성 안내를 제공하고 있었는데, 실제 기기에서 음량을 최대로 설정해도 원하는 수준만큼 소리가 커지지 않는 문제가 있었다. 처음에는 단순히 음량 설정을 조정하면 될 것이라고 생각했지만, 문제는 브라우저 API 자체의 제약에 있었다.1. Web Speech API의 음량 제한Web Speech API의 SpeechSynthesisUtterance는 음성의 속도, 언어, 음량을 설정할 수 있다.const utterance = new SpeechSynthesisUtterance('안녕하세요.');utterance.lang = 'ko-KR';utterance.volume = ..

• format_list_bulleted 🗂 WIL/트러블슈팅
• · 2026. 10. 25.

mm로 주어진 글자 크기를 CSS로 옮기기

배리어프리 요구사항을 반영하면서 “모든 필수적인 문자는 문자 높이가 7.25mm 이상이 되도록 표시되어야 한다”는 기준을 접했다.보통 글자 크기는 px이나 rem으로 지정하는데, mm로 주어지니 이걸 어떤 값으로 넣어야 할지부터 확인해야 했다. 패널 크기와 해상도로 계산하면 될 것 같지만, 실제로는 앱에서 적용하는 확대 배율과 폰트가 그려지는 방식도 관련이 있었다.패널 해상도로 계산하면 약 43픽셀대상 기기 중 하나는 10.1인치, 1280×800 해상도의 패널이었다. 공칭 대각선 길이와 16:10 비율로 계산하면 화면 높이는 약 135.96mm이고, 이 높이에 세로 800픽셀이 들어간다.800 ÷ 135.96 ≈ 5.88픽셀/mm7.25 × 5.88 ≈ 42.7픽셀올림하면 약 43픽셀이 나온다. 그런데..

• format_list_bulleted 🗂 WIL
• · 2026. 10. 11.

CJS와 ESM, 트리 셰이킹은 왜 다를까

정말 오랜만에 이런 개념들을 보는 것 같다. 평소에는 import와 export를 쓰면서도, 막상 CJS와 ESM이 어떻게 다른지 설명하려니 말이 잘 나오지 않았다. require와 import의 문법 차이는 알고 있었지만, 그 차이가 왜 트리 셰이킹 이야기로 이어지는지는 제대로 정리해 본 적이 없었다. 우선 트리 셰이킹이 정확히 뭔지부터 다시 봤다.트리 셰이킹이란여러 파일에 나뉜 코드를 하나 이상의 실행 파일로 묶는 도구를 번들러라고 한다. 트리 셰이킹은 번들러가 이 과정에서 사용하지 않는 코드를 찾아 최종 결과에서 빼는 최적화다. 예를 들어 math.js에 덧셈 함수와 곱셈 함수가 있는데, 앱에서는 덧셈 함수만 쓴다고 해보자. 번들러가 곱셈 함수는 어디에서도 쓰이지 않고, 빼더라도 동작이 달라지지 않..

• format_list_bulleted 🗂 WIL
• · 2026. 9. 27.

재연결 로직에 남아 있던 비동기 타이밍 이슈

스트리밍 연결에 문제가 생기면 기존 연결을 정리하고, 일정 시간이 지난 뒤 다시 연결하도록 처리하고 있었다. 그런데 새 연결이 정상적으로 만들어진 뒤에도 몇 초 후 다시 연결이 끊기는 경우가 발생했는데, 처음에는 다른 원인으로 생각했지만, 알고 보니 이전 연결에서 시작된 실패 처리 로직이 아직 끝나지 않은 상태였다.기존에는 generation으로 이전 작업을 걸러내고 있었다initialize()가 실행될 때마다 generation 값을 증가시키고, 각 초기화 작업에서는 자신이 시작된 시점의 값을 가지고 있었다.const myGeneration = ++initGeneration;실패 처리 로직에 진입할 때도 현재 작업이 최신인지 확인했다.if (myGeneration !== initGeneration) {..

• format_list_bulleted 🗂 WIL/트러블슈팅
• · 2026. 9. 13.

getBoundingClientRect 없이 위치 잡기

예전에는 CSS에 새로운 기능이 나오면 꽤 챙겨보는 편이었다. 이전에는 CSS로 까다로운 UI를 다룰 일이 많아서 그러기도 했던 것 같다. 요즘은 그런 관심이 많이 줄었다. 지금 하는 일에서 CSS를 깊게 만질 일이 없는 것도 있고, AI를 쓰기 시작하면서 모르는 속성이나 구현 방법이 있어도 AI를 활용해 바로 해결하는 일이 많아지다 보니, 하나의 속성을 따로 찾아보고 깊게 볼 일이 줄어든 것도 큰 것 같다. 그러다 최근 정말 오랜만에 Josh 블로그에 들어가 최근에 올라온 글들을 보다가 Getting Started with Anchor Positioning을 읽었다. Tooltip이나 dropdown처럼 어떤 요소를 기준으로 다른 요소를 띄우는 UI를 CSS에서 처리할 수 있게 해주는 기능이다. An..

• format_list_bulleted 🗂 WIL/트러블슈팅
• · 2026. 8. 30.

WebRTC는 정상인데 화면은 왜 검을까 — 블랙스크린 원인 좁혀가기

이전에 WebRTC 스트리밍 이슈에 대한 글을 작성했었다. 당시에는 WebRTC 연결이 실패한 뒤 RTCPeerConnection이 제대로 정리되지 않아 연결 객체가 쌓이는 문제와, connectionState가 connected여도 실제 영상 프레임은 멈출 수 있는 문제를 겪었다. 그래서 연결 상태만 확인하던 방식에서 벗어나 getStats()의 framesDecoded까지 함께 확인하도록 감지 범위를 넓혔다. 그 글에서 블랙스크린에 대한 내용도 짧게 다뤘다. WebRTC 연결과 ICE 상태는 정상이고 framesDecoded도 계속 증가하는데 실제 화면만 검게 보이는 경우였다.디코딩까지 정상이라면 이제는 스트림 자체가 아니라 영상의 내용과 화면 표시 상태를 따로 확인해야 하지 않을까 생각했다. 그래서..

• format_list_bulleted 🗂 WIL/트러블슈팅
• · 2026. 8. 16.