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.

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.