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

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

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

GraphQL 조회 로직과 Backfill

이번에 프론트엔드 기능을 작업하면서 백엔드 코드도 함께 수정하게 됐다. 백엔드에서 새로운 GraphQL Query를 추가해본 적은 있지만, 조회 로직과 페이지네이션, 기존 데이터 처리까지 한 흐름으로 다뤄본 것은 이번이 처음이었다. 구현은 클로드가 다 했지만, 백엔드는 아직 익숙하지 않다 보니 작업이 끝난 뒤 실제로 데이터가 어떤 흐름으로 조회되고 반영되는지 다시 확인해서 정리해보았다. Query이번 기능에서는 기존 조회와 별도로 새로운 기준으로 데이터를 가져오는 GraphQL Query를 추가했다. GraphQL에서 하나의 Query가 실제 데이터를 반환하기까지는 프로젝트 구조에 따라 몇 개의 계층을 거치는데, 현재 프로젝트에서는 대략 다음과 같은 형태였다.Schema→ Resolver→ Model→..

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

텍스트 애니메이션에서 Recalculate Style 줄이기

내가 이전에 구현했던 어트랙트 화면의 텍스트 애니메이션이 실제로는 어느 정도 비용을 쓰고 있는지 궁금해져 DevTools Performance로 확인해 봤다. AnimatedText 컴포넌트에서 글자 단위로 className을 바꾸는 과정에서 Recalculate Style과 Layout 비용이 계속 발생하고 있었다. JS 로직은 그대로 두고, CSS의 transition 대상과 will-change만 수정했다.측정DevTools Performance로 어트랙트 화면을 녹화했다. 50초 정도 녹화했을 때 눈에 띈 부분은 다음과 같다.전체 시간 중 대부분은 Idle이었다.그런데 Animations 트랙은 거의 계속 차 있었다.Frames 영역에 8274ms짜리 긴 프레임이 있었다.Call tree에서 Re..

• format_list_bulleted 🗂 WIL/트러블슈팅
• · 2026. 7. 5.

uSpec으로 Figma 컴포넌트 스펙 문서 만들어보기

Uber 기술 블로그에서 uSpec이라는 도구를 소개하는 글을 읽었다. uSpec은 Figma 컴포넌트를 읽어서 디자인 스펙 문서를 만들어주는 도구다. Cursor 같은 AI agent와 Figma를 연결하고, 컴포넌트의 구조, variant, token, style, 접근성 정보를 읽어 스펙 문서로 정리한다. 디자인 스펙 문서는 컴포넌트를 구현할 때 자주 참고하지만, 항상 최신 상태라고 보기는 어렵다. 컴포넌트는 계속 바뀌고, 문서는 사람이 직접 관리하는 경우가 많기 때문이다.버튼 하나만 봐도 확인해야 할 값이 많다. size, variant, disabled 상태, padding, radius, color token, icon 위치, 접근성 label 같은 것들이다. 문서가 오래되면 다시 Figma를..

• format_list_bulleted 🗂 WIL
• · 2026. 6. 21.

다국어 번역 키 관리 프로세스 개선하기

다국어 번역을 운영하면서 번역 키를 관리하는 일이 점점 어려워졌다. 서비스에서는 한국어를 기준으로 일본어와 영어 번역을 함께 관리하고 있었는데, 번역 문구는 Google Sheet에서 관리했고, 실제 코드에서는 react-i18next와 언어별 JSON 파일을 사용하고 있었다.처음에는 한국어 문장을 그대로 i18n 키로 사용하고 있었다. 하지만 운영이 이어질수록 이 구조만으로는 관리하기 어려운 케이스가 늘어났다.먼저 문맥에 따라 번역이 달라지는 문제가 있었다.같은 한국어 문장이라도 화면에 따라 다른 번역이 필요한 경우가 생겼다. 예를 들어 한국어로는 같은 확인이어도, 어떤 화면에서는 단순히 모달을 닫는 의미일 수 있고, 다른 화면에서는 사용자가 특정 작업을 완료했다는 의미일 수 있다. 문제는 이 차이가 ..

• format_list_bulleted 🗂 WIL/회고
• · 2026. 6. 7.

터치스크린에서 Touch Slop 구현하기

운영 중인 키오스크에서 터치 관련 이슈가 몇 번 제보됐다.버튼을 눌렀는데 반응이 없어요.탭 했더니 모달이 열렸다가 바로 꺼져요.정확한 원인도 모르고, 재현도 안 되는 상황이었지만, 터치 시작/종료 지점의 이동 거리가 일정 범위 안이면 클릭으로 인정해 주는 Touch Slop 방식으로 보정해 보자는 이야기가 나왔다.물리 터치스크린에서는 손가락이 아주 조금만 움직여도 클릭 이벤트 흐름이 달라질 수 있는데 눌렀다고 생각했는데 살짝 밀린 것으로 처리되거나, 반대로 드래그 의도가 클릭으로 잡히기도 한다. Touch Slop을 직접 구현하면서 부딪힌 문제와 적용 기준을 간단하게 정리해 보았다.Touch Slop이란?터치 시작 좌표와 종료 좌표의 차이가 기준값 안에 있으면 클릭 의도로 보는 방식이다.const dx ..

• format_list_bulleted 🗂 WIL/트러블슈팅
• · 2026. 5. 24.