FE News 1월호: React, Web AI, AI 트렌드 등 프론트엔드 기술 소식 큐레이션
Dan Abramov가 React Server Components(RSC) 프로토콜 시각화 도구를 공개, RSC의 동작 원리를 시각적으로 파악 가능
Web AI Summit 2025에서 클라이언트 사이드 AI의 새로운 흐름을 조명하며, 브라우저 기반 AI 기술 동향 제시
Jeff Dean이 AI 트렌드를 연구 및 제품 관점에서 정리, AI 기술의 제품 UX 변화에 대한 인사이트 제공
DeepMind의 여정을 담은 다큐멘터리 공개, AlphaFold 개발 과정과 인공 일반 지능(AGI) 탐구 조명
네이버파이낸셜 디자인시스템과 AI를 활용한 마크업 자동화 경험 공유, 디자인 시스템 문서화의 중요성 강조
React Server Components(RSC) 시각화 도구: 프로토콜 이해
Dan Abramov가 공개한 RSC Explorer는 RSC 프로토콜(RSC Protocol)의 데이터 흐름을 시각적으로 보여준다. 브라우저에서 RSC 스트림을 단계별로 재생하고, 서버, 클라이언트, flight, preview 패널을 통해 데이터 흐름을 추적(Data Flow Tracking)할 수 있다.
네트워크 요청 없이 동작: React의 reader/writer를 활용하여 실제 프로토콜과 동일한 결과를 제공
스트리밍(Streaming), Client Reference, Server Actions, Router refresh 등 프레임워크 내부 동작 원리를 파악
이 도구는 RSC의 복잡한 동작 방식을 이해하고, 디버깅 및 교육 자료로 활용하기에 유용하다.
클라이언트 사이드 AI: 웹 환경의 변화
Web AI Summit 2025는 클라이언트 사이드 모델과 에이전트를 주제로, 웹 환경에서의 AI 활용 변화를 조명한다. 서버 호출 중심에서 벗어나 브라우저 실행과 에이전트 상호작용으로 이동하는 추세다.
Transformers.js: 브라우저에서 100% 로컬 ML 모델 실행 지원
webMCP: 웹 저자가 사이트 기능을 브라우저 에이전트가 사용할 수 있도록 정의
WebGPU/WebNN/Wasm: 온디바이스 추론(On-device Inference), 에이전트 UX, 브라우저 API 연동 등 다양한 기술 탐구
이러한 변화는 웹 개발자가 AI 기술을 더욱 적극적으로 활용할 수 있는 기회를 제공한다.
AI 트렌드: 연구와 제품의 융합
Stanford AI Club에서 Jeff Dean은 AI 트렌드를 연구와 제품 양쪽 관점에서 정리하며, AI 기술의 광범위한 영향력을 강조한다. 모델 성능뿐 아니라 시스템, 데이터, 워크플로 관점의 논의를 포함한다.
브라우저/클라이언트 AI 적용: 프런트엔드 개발자(Frontend Developer)는 AI를 활용한 제품 UX 변화에 주목
제품 구조 변화: AI를 단순 기능 추가가 아닌 제품 구조 전체를 바꾸는 변화로 인식
AI 기술은 단순한 트렌드를 넘어, 제품 개발 방식과 사용자 경험을 근본적으로 변화시키는 핵심 요소로 자리 잡고 있다.
디자인 시스템과 AI: 마크업 자동화
네이버파이낸셜은 디자인 시스템과 AI를 활용하여 마크업 자동화를 시도, AI 기반 FE 개발 생산성 향상 가능성을 제시했다.
Figma Code Connect & Instruction: AI가 컴포넌트 기반 마크업 생성
디자인 토큰 및 컴포넌트 구조 학습: FE 개발 시작 가능한 수준의 마크업 생성 성공
한계: 복잡한 레이아웃 및 반응형 처리에는 사람 개입 필요
디자인 시스템 문서화와 표준화가 AI 활용 효율을 크게 좌우하며, AI 기반 개발 환경 구축의 핵심 요소로 작용한다.
