프론트엔드가 AI로 어떻게 바뀌고 있는지 찾아봤는데, 생각보다 변화가 넓다.

프론트엔드가 AI로 어떻게 바뀌고 있는지 찾아봤는데, 생각보다 변화가 넓다.

코드 생성뿐 아니라 개발 도구, UI 설계, 렌더링까지 연결된다.

흥미로웠던 흐름을 정리해봤다. 🧵

1/8

가장 눈에 띈 변화는 프레임워크가 AI 에이전트를 직접 지원하기 시작했다는 것.

Next.js는 버전에 맞는 문서·AGENTS.md·진단 도구를, Vite는 브라우저 로그를 터미널로 전달하는 기능을 제공한다.

이제 개발 환경을 설계할 때 “AI가 오류를 확인하고 검증할 수 있는가”도 중요해졌다.

2/8

AI 제품의 프론트엔드는 채팅창 너머로 확장 중이다.

진행 상태, 도구 실행, 추가 질문, 사용자 승인, 부분 결과, 취소·재시도까지.

AI SDK, TanStack AI, assistant-ui가 이런 영역을 다룬다.

AI 기능을 붙이면 프론트엔드가 설계해야 할 상태도 늘어난다.

3/8

새 도구들은 역할을 나눠 보면 이해하기 쉽다.

• AI SDK / TanStack AI: 모델·에이전트 실행
• assistant-ui: 대화·도구 UI
• AG-UI: 에이전트와 화면 사이의 이벤트 통신
• TanStack DB: 클라이언트 데이터 조회·동기화

비슷해 보이지만 해결하는 문제가 다르다.

4/8

렌더링은 화면의 각 부분을 “언제, 어디서 처리할지” 더 세밀하게 나누는 방향.
상품 설명은 캐시,
재고는 서버 조회,
옵션 선택은 클라이언트,
AI 추천은 스트리밍.
PPR, Islands, 점진적 Hydration이 이 흐름과 연결된다. 이쪽은 AI 이전부터 이어져 온 발전이기도 하다.
5/8

주요 프레임워크 업데이트도 흥미롭다.

• React Compiler: 자동 메모이제이션
• Next.js: 캐시·부분 프리패칭·화면 전환 개선
• Vue: Vapor 개발, 3.6 RC
• Nuxt: 실험적 SSR Streaming
• Angular: Signals·Zoneless 강화

공통적으로 불필요한 실행과 기다림을 줄이는 데 투자하고 있다.

6/8

UI를 만드는 방식도 달라진다.
Tailwind는 CSS 변수와 디자인 토큰 중심으로,
shadcn은 Registry·MCP와 컴포넌트 배포 기능으로 확장 중이다.
여기서 얻은 생각:
AI와 작업할수록 “우리 팀이 사용하는 토큰·컴포넌트·예제”를 잘 정리해두는 가치가 커진다.
7/8

내가 앞으로 더 공부하고 싶은 건:

① 스트리밍·캐시·Hydration의 경계
② AI 작업의 진행·실패·복구 UX
③ 구조화된 AI 결과를 기존 UI에 연결하는 설계
④ AI가 읽고 검증하기 좋은 프로젝트 구조

새 라이브러리만큼, 무엇을 어디에 맡길지 정하는 설계가 흥미로워졌다.

8/8