개발자의 시간은 생각보다 훨씬 많은 부분이 '이미 알고 있는 것을 다시 쓰는 일'에 소모된다. 스켈레톤 로더를 위해 실제 컴포넌트와 거의 똑같은 레이아웃을 한 번 더 만들거나, 두 시간짜리 리팩토링을 끝낸 뒤 커밋 메시지 앞에서 멈추거나, VSCode에 AI 익스텐션 하나 없이 자동완성만으로 코드를 치는 것처럼. 최근 등장하는 DX 도구들은 이 '두 번 하는 일'을 구조적으로 없애는 방향으로 수렴하고 있다.
DOM이 이미 알고 있는 것을 왜 다시 그리나
스켈레톤 로더는 "만들기 쉬워 보이지만 실제로는 귀찮은" 대표적인 UI 요소다. 실제 컴포넌트와 닮은 회색 블록 레이아웃을 별도로 작성하고, 디자인이 바뀌면 둘 다 업데이트해야 하는데 어느 순간 하나가 뒤처진다. dev.to에 소개된 phantom-ui는 이 문제를 근본적으로 다르게 접근한다. DOM 자체를 스켈레톤의 소스로 쓰는 것이다.
<phantom-ui loading> 태그로 실제 컴포넌트를 감싸면, 이 Web Component가 DOM 트리를 순회하며 각 리프 엘리먼트의 위치·크기·border-radius를 getBoundingClientRect로 측정하고, Shadow DOM 안에 정확히 같은 좌표에 shimmer 블록을 오버레이한다. 별도 스켈레톤 템플릿도, 설정 파일도 없다. 실제 컴포넌트가 곧 스켈레톤이다. 레이아웃이 바뀌어도 ResizeObserver와 MutationObserver가 자동으로 재측정하니 싱크가 깨질 이유도 없다.
"데이터가 없으면 DOM도 없지 않나"라는 당연한 반론에 대해서도 실용적인 답을 제시한다. {user?.name ?? "Placeholder Name"}처럼 폴백 값을 항상 렌더링하고 로딩 중엔 투명하게 처리하는 방식이다. 구조를 약간 다르게 작성해야 하는 트레이드오프가 있지만, 스켈레톤을 별도로 유지하는 비용과 비교하면 훨씬 합리적이다. React 19+, Vue, Svelte, Angular, Solid, HTMX, Vanilla JS 모두 지원하고, postinstall 스크립트가 TypeScript 타입 선언까지 자동 주입한다. '한 번 만들어 어디서나 쓴다'는 Web Component의 철학을 가장 실용적으로 구현한 사례다.
커밋 메시지는 AI가, 코드 리뷰도 AI가
같은 맥락에서 devtools-ai(dev.to)는 터미널 워크플로우의 반복 마찰을 제거한다. git add 후 devtools-ai commit을 실행하면 스테이징된 diff를 분석해 refactor(auth): extract token validation into standalone service 같은 시맨틱 커밋 메시지를 제안한다. 확인하고 y를 누르면 바로 커밋된다. 리뷰(devtools-ai review), 버그 원인 분석(devtools-ai bug), 독스트링 생성(devtools-ai doc)까지 다섯 가지 명령이 같은 패턴으로 동작한다.
눈여겨볼 설계 결정은 OpenRouter 통합이다. 특정 모델에 종속되지 않고 GPT-4o, Claude 3.5 Sonnet, Gemini, Llama 3 중 원하는 것을 config.yaml 한 줄로 바꿀 수 있다. API 키는 로컬에만 저장된다. 커맨드 한 번 실행 비용이 $0.005~$0.02 수준이니 일상적으로 쓰기에 심리적 부담도 없다. 대형 diff에서는 메시지 품질이 떨어진다는 한계를 제작자가 솔직하게 밝힌 것도 신뢰도를 높이는 포인트다.
VSCode 안으로 들어온 AI 협업자들
VSCode AI 익스텐션 지형도 역시 빠르게 성숙하고 있다. dev.to에서 소개된 여섯 가지 도구를 보면 단순 자동완성에서 '코드베이스 전체를 이해하는 컨텍스트 엔진'으로 진화한 흐름이 보인다. Supermaven의 100만 토큰 컨텍스트 윈도우와 100ms 미만 응답, Continue.dev의 오픈소스 멀티모델 지원, Tabnine의 로컬 실행 프라이버시 옵션은 각각 다른 페인포인트를 겨냥한다. 특히 Pieces for Devs가 제시하는 '개발자 장기 메모리'—스니펫·컨텍스트·링크를 AI 태그와 함께 저장하고 오프라인에서도 검색하는—는 기존 북마크나 노션 메모가 채우지 못했던 공백을 정확히 파고든다.
세 도구가 가리키는 하나의 방향
phantom-ui, devtools-ai, VSCode AI 익스텐션은 도메인이 다르지만 같은 원리를 공유한다. 이미 시스템이 알고 있는 정보를 개발자가 수동으로 재입력하는 단계를 없앤다. DOM이 레이아웃을 알고 있으니 스켈레톤을 다시 그릴 필요가 없고, diff가 변경 의도를 담고 있으니 커밋 메시지를 처음부터 쓸 필요가 없으며, 코드베이스 전체가 에디터 안에 있으니 컨텍스트를 매번 붙여넣을 필요가 없다.
이 흐름이 중요한 이유는 단순히 시간 절약을 넘어선다. 반복 마찰이 줄어들수록 개발자의 인지 자원이 실제로 판단이 필요한 곳—아키텍처 결정, 사용자 경험 설계, 엣지 케이스 처리—에 집중될 수 있다. '빠른 프로토타이핑 → 사용자 검증 → 고도화'의 사이클을 더 자주, 더 가볍게 돌릴 수 있게 되는 것이다.
앞으로의 방향은 더 명확하다. 개발 도구의 경쟁력은 '얼마나 많은 기능을 제공하느냐'보다 '얼마나 많은 반복을 투명하게 흡수하느냐'로 판가름될 것이다. 지금 자신의 워크플로우에서 '이미 시스템이 알고 있는데 내가 다시 쓰고 있는 것'이 무엇인지 살펴보는 것—그것이 다음 생산성 도약의 출발점이다.