Angular v22 발표 — AI 에이전트 시대의 프레임워크 진화

Angular v22 발표 — AI 에이전트 시대의 프레임워크 진화

Angular 팀이 v22를 공개했습니다. 이번 버전의 키워드는 "AI-native 워크플로"와 "프로덕션 준비 상태로 올라온 신기능" 두 가지입니다. Signal Forms와 Angular Aria가 드디어 안정 채널로 진입했고, AI 에이전트가 Angular 앱을 만들고, 빌드하고, 브라우저에서 검증할 수 있는 도구 모음도 함께 공개됐습니다. 이 글에서는 Angular v22의 핵심 변경 사항을 개발자 관점에서 정리합니다.

1. 프로덕션 단계로 올라온 핵심 기능

Signal Forms 정식 출시

v21에서 실험 단계로 시작했던 Signal Forms가 v22에서 프로덕션 준비 상태가 됐습니다. Reactive Forms의 검증된 장점, 강한 타입 기반 폼, 템플릿 기반 폼의 편의성, 그리고 signals의 반응성을 하나로 합친 선언형 폼 API입니다.

import { form, required, email } from '@angular/forms/signals';const userForm = form({email: '',password: '',}, (p) => {required(p.email, { message: '이메일을 입력하세요' });email(p.email, { message: '올바른 이메일 형식이 아닙니다' });});

이렇게 정의한 폼은 signal처럼 반응형으로 동작하면서도 Angular Material 및 Angular Aria와 즉시 연동됩니다. v21 이후 angular.dev의 폼 가이드가 갱신됐고, 커뮤니티에서 보고된 이슈들이 반영됐습니다. 더 이상 폼을 위해 RxJS를 강제로 끌어올 필요가 없습니다.

Angular Aria의 정식 출시

Angular Aria는 12개의 UI 패턴으로 구성된 접근성 프리미티브 라이브러리입니다. 개발자는 스타일과 비즈니스 로직만 책임지고, 키보드 내비게이션·스크린 리더 지원·ARIA 속성 처리는 디렉티브와 패턴이 담당합니다. autocomplete 같은 복잡한 시나리오도 표준 패턴으로 즉시 구현할 수 있습니다.

resource와 httpResource

비동기 리소스를 signal 스타일로 다룰 수 있는 resource와 HTTP 데이터를 선언적으로 가져오는 httpResource도 프로덕션 사용이 가능해졌습니다.

import { resource, httpResource } from '@angular/core';const userResource = httpResource(() => /api/users/${userId()});const todosResource = resource({params: () => ({ id: userId() }),loader: ({ params }) => fetch(/api/users/${params.id}/todos).then(r => r.json()),});

캐싱, 재시도, 로딩 상태 처리가 signal로 자연스럽게 통합됩니다.

2. AI 에이전트 워크플로의 확장

이번 버전에서 가장 눈에 띄는 변화는 AI-native 애플리케이션을 위한 세 가지 흐름이 동시에 열렸다는 점입니다.

Angular MCP의 안정화

Angular MCP(Model Context Protocol)의 devserver.wait_for_build, devserver.start, devserver.stop이 stable로 승격됐습니다. 에이전트는 빌드 로그에서 코드 오류를 읽고 자가 치유 루프를 구성할 수 있습니다. 그 외에 ai_tutor, modernize, onpush_zoneless_migration 같은 현대적 Angular 개발 도구도 함께 제공됩니다.

Angular Agent Skills

angular-developer skill은 Angular Aria와 Signal Forms 같은 최신 기능을 포함한 모던 Angular 개발 지침을 모델에 제공합니다. 140줄 미만으로 압축된 파일이 점진적으로 코드 샘플과 참조 파일을 불러오는 구조라서 컨텍스트를 과도하게 잡아먹지 않습니다. angular-new-app은 에이전트 환경에서 처음 Angular를 접하는 사용자가 로컬 코딩 환경을 구성하도록 안내합니다.

실험적 WebMCP

브라우저 안에서 에이전트가 사용할 구조화 도구를 정의하고 노출하는 WebMCP가 실험 기능으로 추가됐습니다. DOM 상호작용 없이 앱 전체, routes, services 단위로 도구를 정의하거나 Signal Forms 기반으로 동적으로 도구를 자동 생성할 수 있습니다. 통합 문서는 angular.dev/ai/webmcp에서 확인 가능합니다.

Gemini Canvas 및 Google AI Studio 통합

전통적 코딩 배경이 없는 사용자도 "Angular"라는 키워드를 프롬프트에 넣어 Gemini Canvas에서 바로 Angular 앱을 생성할 수 있습니다. 생성된 앱은 브라우저에서 수동으로 편집하거나 AI와 대화를 이어가며 다듬을 수 있고, Firebase 통합도 요청 가능합니다. Google AI Studio에서도 configuration panel에서 Angular를 선택해 동일한 흐름을 사용할 수 있습니다.

3. Router 및 의존성 주입 개선

Navigation API 통합

브라우저의 native Navigation API와 Router가 통합됐습니다. RouterLink와 표준 anchor tag를 포함한 모든 navigation request를 자동으로 가로채며, native scroll behavior를 활용해 별도의 커스텀 로직 없이도 back/forward 시 사용자가 기대한 위치로 이동합니다. 번들 크기 영향도 없습니다.

라우트 정리 제어

withExperimentalAutoCleanupInjectors는 더 이상 active하지 않은 라우트의 의존성 인젝터를 자동으로 destroy해 idle 상태의 route-level provider와 resource를 정리합니다. destroyDetachedRouteHandle은 custom RouteReuseStrategy 사용 시 detached route handle 안의 컴포넌트를 깨끗이 destroy하는 공식 public API입니다.

@Service와 injectAsync

@Service 데코레이터는 대부분의 경우에 @Injectable({ providedIn: 'root' }) 패턴을 대체합니다. injectAsync는 asynchronous 의존성 주입을 지원해 code splitting과 on-demand loading을 가능하게 합니다.

import { Service, injectAsync } from '@angular/core';@Service()class ReportExporter {readonly config = injectAsync(() => import('./report-config'), {prefetch: 'onIdle',});}

ReportExporter 서비스는 처음 사용될 때까지 로드되지 않으며, idle 상태일 때 prefetch할 수 있습니다.

4. 템플릿 작성 경험과 변경 감지

• HTML element 안의 property와 binding 수준에서 주석을 사용할 수 있습니다. VS Code의 comment toggling도 지원됩니다.

• 같은 element에서 여러 번 매칭되는 host directive는 자동으로 중복 제거됩니다. input/output 이름 충돌은 컴파일 타임에 error로 표시됩니다.

• 템플릿에서 spread/rest 문법을 사용할 수 있습니다. object literal, array literal, function call에 적용 가능합니다.

• @switch 블록은 여러 @case가 같은 output을 공유할 수 있어 중복 코드를 줄입니다. union type과 함께 사용할 때 @default never;를 지정하면 처리되지 않은 값이 있을 때 컴파일 타임 error를 받을 수 있습니다.

• 템플릿 안 inline 함수는 arrow function 형태로 사용할 수 있습니다. 짧고 단순한 변환 로직에 적합합니다.

5. 미래 방향

새 애플리케이션의 기본 change detection 전략이 OnPush로 변경됐습니다. zoneless 기본값과 performance by default 목표에 맞춰진 결정입니다. 기존 ChangeDetectionStrategy.Default는 ChangeDetectionStrategy.Eager로 이름이 바뀌어 동작이 더 명확해졌습니다.

@boundary는 Angular 템플릿 안에서 error boundary를 구현하는 새 API입니다. 전자상거래 checkout처럼 고가치 흐름에서 단일 컴포넌트 실패가 페이지 전체를 무너뜨리는 문제를 줄이는 것이 목표이며, 2026년 3분기에 developer preview로 제공될 예정입니다.

Webpack support, @angular-devkit/build-angular builders, @ngtools/webpack 등은 v22에서 deprecated 상태가 됐습니다. Angular는 application builder의 TSGo 지원에 집중합니다.

6. 개발자 선택 가이드

지금 Angular 프로젝트를 유지보수하는 팀이라면 다음 순서로 마이그레이션을 검토할 수 있습니다.

1. v22로 올리고 새 앱에 한해 OnPush 기본값을 적용해 봅니다.

2. 신규 폼은 Signal Forms로 작성하고, 기존 Reactive Forms는 점진적으로 마이그레이션합니다.

3. 접근성이 필요한 신규 컴포넌트는 Angular Aria 패턴을 우선 사용합니다.

4. AI 에이전트 워크플로를 도입하는 팀은 Angular MCP의 devserver 도구부터 활성화합니다.

5. HTTP 데이터 흐름이 많은 코드는 httpResource로 전환을 검토합니다.

요약

Angular v22는 두 갈래의 메시지를 담고 있습니다. 하나는 신기능의 프로덕션화(Signal Forms, Angular Aria, resource)이고, 다른 하나는 AI-native 흐름의 본격화(Angular MCP, Agent Skills, WebMCP, Gemini 통합)입니다. 프레임워크의 안정성과 도구 생태계가 동시에 한 단계 올라간 이번 릴리스는, 새로운 프로젝트를 시작하는 팀이 Angular를 다시 한번 진지하게 평가해볼 만한 근거가 됩니다.

📚 출처

• Angular v22 발표 (GeekNews)

• Angular 공식 블로그

---

📚 출처

• https://news.hada.io/topic?id=30162