AI라는 소행성이 강타한 프론트엔드 웹 개발

AI 에이전트가 숙련자도 어려워하던 브라우저 성능 분석까지 수행하는 가운데, 프런트엔드 지식과 교육에 투자할 유인이 약해지고 주요 교육자들도 활동을 중단하거나 축소하고 있음 프론트엔드는 데이터베이스 마이그레이션 같은 백엔드 작업보다 일시적이고 교체하기 쉬워 에이전트에 맡길 위험이 상대적으로 낮지만, 접근성 훼손이나 무한 루프 같은 피해는 여전히 가능함 학습 데이터에 풍부한 React를 에이전트가 더 잘 다루면서 개발자 경험(DevExp) 보다 에이전트 경험이 중요해지고 있으며, Cursor와 Viget도 각각 Solid와 Lit에서 React로 이전함 웹 표준의 관심은 작성 편의성보다 성능과 새로운 기능으로 옮겨갈 수 있으며, 프런트엔드 교육은 MPA 같은 큰 그림, 에이전트 친화적 웹, AI 생성 코드 컨설팅으로 확장될 수 있음 AI가 프론트엔드를 어디까지 바꿀지는 불확실하지만, 오랜 전문 지식의 가치가 빠르게 떨어지는 충격을 외면하기보다 변화와 새로운 진로를 적극적으로 탐색해야 함 프론트엔드 교육자들의 이탈 Axel Rauschmayer, Salma Alam-Naylor, Josh W. Comeau 등 존경받던 프론트엔드 교육자들이 활동을 중단하거나 축소하고 있음 Kent C. Dodds, Addy Osmani, Rachel Nabors, Lydia Hallie도 프론트엔드 개발에서 AI 관련 주제로 초점을 옮김 과거에는 Shadow DOM, 브라우저 스타일 엔진, CSS-in-JS의 함정처럼 복잡한 CSS 성능 지식을 설명하는 일이 전문성의 주요 영역이었음 Claude의 CSS 성능 진단 Chrome 실행 추적에서 Style Calculation 비용은 높고 Layout 비용은 낮은 상황을 Claude Sonnet에 질문하자, 숙련된 웹 개발자도 자주 놓치는 문제를 체계적으로 진단함 높은 Style 비용은 요소의 이동이나 크기 계산보다 많은 요소에 대한 CSS 선택자 매칭과 무효화에서 발생할 가능성이 큼 다섯 가지 영역을 우선 점검하도록 안내함 깊게 중첩된 선택자, 범용·속성 선택자, CSS-in-JS가 생성한 다수의 고유 규칙 <body>나 상위 컨테이너의 클래스 변경으로 넓은 하위 트리가 다시 계산되는 무효화 범위 프레임마다 반복되는 클래스·인라인 스타일 갱신과 일괄 처리되지 않은 DOM 변경 공통 조상의 상속 속성이나 :root의 CSS 사용자 정의 속성 변경 다수의 Shadow Root와...