에이전트 안전 Angular 컴포넌트: 검증된 AI 개발을 위한 Copy-Paste MCP + Skills 설정

Angular v22 MCP + Skills 통합: 에이전트 기반 개발 설정

Angular v22와 함께 MCP (Model Context Protocol) 서버 + Angular Skills 스택은 에이전트 지원 개발을 위험한 제안에서 결정론적이고 검증 가능한 워크플로우로 변화시킵니다. 이 가이드는 환경 구성, 적절한 Skills 설정, 그리고 에이전트 안전(agent-safe) 컴포넌트 구축 과정을 안내합니다.

파트 1: 환경 설정

사전 요구 사항

다음 사항을 확인하세요:

Node.js v20 이상 (node --version)
Angular CLI v22 이상 (npm install -g @angular/cli@latest)
코딩 에이전트 환경 (Gemini CLI, Cursor, Claude Code, GitHub Copilot, JetBrains AI 또는 Windsurf)

1단계: Angular MCP 서버 구성

Angular CLI에는 MCP 서버가 내장되어 있습니다. 에이전트 설정에서 이를 구성하세요:

Gemini CLI / Cursor / Claude Code용 (.gemini/settings.json 또는 유사 파일 사용):

{
  "mcpServers": {
    "angular-cli": {
...

JetBrains IDE용 (Settings → Tools → MCP):

새 서버 추가: 이름 angular-cli
명령(Command): npx -y @angular/cli mcp
두 번째 서버 추가: 이름 chrome-devtools
명령(Command): npx chrome-devtools-mcp@latest

연결 테스트:

npx @angular/cli mcp --health-check

사용 가능한 도구 목록이 표시되어야 합니다. 일반적인 도구는 다음과 같습니다:

ng_lint — 프로젝트에서 linter를 실행합니다.
get_examples — 모범 사례 코드 예시를 가져옵니다.
get_best_practices — Angular 모범 사례 가이드를 검색합니다.
search_documentation — angular.dev를 쿼리합니다.
dev_server.wait_for_build — 빌드가 성공하거나 실패할 때까지 대기합니다 (에이전트에게 매우 중요함).
dev_server.start — 개발 서버를 시작합니다.
dev_server.stop — 개발 서버를 중지합니다.

2단계: Angular Skills 설치

Skills는 MCP 도구와 별도로 설치됩니다. Skills는 모든 요청에 토큰 오버헤드를 추가하지 않으면서 에이전트의 지식을 증강합니다.

공식 Angular skills를 설치하세요:

# npx skills 패키지 사용
npx @anthropic-ai/skills add \
  https://github.com/angular/skills/blob/main/angular-developer/SKILL.md \
...

또는, 에이전트가 URL 기반의 Skills를 지원한다면 직접 참조하세요:

/skills install https://github.com/angular/skills/blob/main/angular-developer/SKILL.md
/skills install https://github.com/angular/skills/blob/main/angular-new-app/SKILL.md

설치 확인:

# 에이전트 내에서 (Gemini CLI 등)
/skills list

angular-developer와 angular-new-app이 목록에 표시되어야 합니다.

3단계: 에이전트를 위한 Chrome DevTools 설정

이를 통해 에이전트는 실행 중인 애플리케이션을 시각적으로 확인할 수 있습니다:

npx chrome-devtools-mcp@latest --install

테스트:

npx chrome-devtools-mcp@latest --health-check

파트 2: 에이전트 안전(Agent-Safe) 컴포넌트 작성하기

MCP + Skills 설정이 완료되면, 에이전트는 빌드 검증 및 브라우저 가시성에 접근할 수 있습니다. 이제 에이전트가 안전하게 수정할 수 있는 코드를 작성해 봅시다.

패턴 1: 타입 안전성을 갖춘 철저한 @switch 사용

항상 철저한 @switch 블록을 사용하세요. 이는 에이전트가 처리되지 않은 케이스를 도입하는 것을 방지합니다.

// ✓ 좋음: 타입 안전(Type-safe)하며 철저한 유니온(union)
export type VehicleStatus = 'idle' | 'transit' | 'maintenance' | 'critical';

...

<!-- 철저한 체크가 포함된 템플릿 -->
<div class="status-card">
  @switch (status()) {
...

이것이 중요한 이유: 만약 백엔드 팀이 프론트엔드에 알리지 않고 유니온에 'error'를 추가하면, TypeScript 빌드가 실패합니다. 즉, 에이전트가 망가진 코드를 배포할 수 없게 됩니다.

패턴 2: 인라인 검증기(Validators)를 포함한 Signal Forms

Signal Forms는 타입 안전하고 Signal 기반인 폼 핸들링을 제공합니다. 에이전트가 검증 오류를 일으킬 가능성이 훨씬 낮아집니다.

export class ServiceTicketComponent {
  // Signal 기반 폼
  form = new FormGroup({
...

템플릿:

<form [formGroup]="form" (submit)="submitTicket()">
  <textarea
    formControlName="description"
...

이것이 중요한 이유: 에이전트(Agents)는 유효하지 않은 폼(form) 값을 생성할 수 없습니다. TypeScript가 이를 잡아냅니다.

패턴 3: 위험한 통합을 위한 @boundary

제3자 코드나 실험적인 기능을 통합할 때는 @boundary로 감싸세요.

<div class="dashboard">
  <!-- 핵심 함대 목록은 항상 렌더링됨 -->
  <fleet-list [units="units()" />
...

이것이 중요한 이유: 에이전트가 복잡한 AI 통합 코드를 작성할 때, 단 하나의 버그가 사용자의 앱을 충돌시키지 않습니다.

패턴 4: 일시적인 로직을 위한 인라인 템플릿 함수 (Inline Template Functions)

컴포넌트 API를 깔끔하게 유지하세요. 에이전트가 인라인 핸들러(inline handlers)를 작성하도록 합니다.

<!-- ✓ 인라인 핸들러 — 사용 위치와 가까움 -->
<button 
  (click)="vehicles.update(v => v.filter(item => item.id !== vehicleId))"
...

이렇게 하면 컴포넌트 API 표면(API surface)을 최소한으로 유지할 수 있으며, 에이전트가 핸들러의 전체 의도를 인라인에서 확인할 수 있습니다.

파트 3: 에이전트 워크플로우 (Agent Workflows)

워크플로우 1: 컴포넌트 스캐폴딩 (MCP 검증 포함)

에이전트에게 다음과 같이 지시하세요: "Angular 스킬을 사용하여 ServiceTicketForm 컴포넌트를 생성해줘. Signal Forms를 사용하고, AI 우선순위 분석기를 위한 @boundary를 포함하며, 빌드를 실행하여 검증해줘."

에이전트는 다음 과정을 수행합니다:

get_best_practices를 호출하여 Signal Forms 패턴을 가져옵니다.
ng generate component를 사용하여 컴포넌트를 스캐폴딩(Scaffold)합니다.
스킬 가이드를 사용하여 인라인 검증기(inline validators)를 구현합니다.
dev_server.wait_for_build를 호출하여 컴파일을 검증합니다.
빌드에 실패하면 에러를 읽고 수정합니다.

이 모든 과정을 에이전트의 채팅에서 완전히 모니터링할 수 있으므로, 예상치 못한 에러가 발생하지 않습니다.

워크플로우 2: AI 기반 함대 채팅 추가 (브라우저 검증 포함)

logistics-manager-app 코랩(codelab)에서 에이전트에게 다음과 같이 지시하세요: "함대 채팅 쿼리 기능을 구현해줘. Gemini API를 사용하여 함대 데이터를 분석하고 필터링된 결과를 반환해줘. Chrome DevTools와 함께 개발 서버를 시작하고, 채팅 컴포넌트로 이동한 뒤, 스크린샷을 찍어 기능이 작동하는지 확인해줘."

에이전트는 다음과 같이 수행할 것입니다:

자연어 쿼리(natural-language query)를 수락하는 FleetChatService를 생성합니다.
현재의 units() 시그널(signal) 상태를 Gemini API로 전송합니다.
Gemini의 응답을 파싱(Parse)하고 함대(fleet)를 필터링합니다.
결과로 채팅 UI를 업데이트합니다.
dev_server.start를 호출하여 개발 서버를 실행합니다.
Chrome DevTools를 호출하여 컴포넌트로 이동합니다.
채팅 결과가 보이는 스크린샷을 찍습니다.
스크린샷을 읽고 기능이 작동하는지 확인합니다.

환각(Hallucinations)은 없습니다. 에이전트는 실행 중인 애플리케이션을 직접 보고 있습니다.

워크플로 3: @boundary를 사용한 예측 진단 구현

코드랩(codelab)에서 에이전트에게 다음과 같이 지시하세요: "FleetDetailModal에 'AI 진단 실행(Run AI Diagnostic)' 버튼을 추가해줘. 이 버튼은 유닛의 텔레메트리(telemetry)(속도, 배터리, 상태)를 포함하여 Gemini API를 호출해야 해. 진단 컴포넌트를 @boundary로 감싸서, 만약 AI 호출이 실패하더라도 모달이 충돌(crash)하지 않도록 해줘. 차량 상세 보기(vehicle detail view)를 실행하고 버튼을 클릭하여 테스트해줘."

에이전트는 다음과 같이 수행할 것입니다:

AI 서비스를 호출하는 DiagnosticsComponent를 생성합니다.
모달 템플릿에서 이를 @boundary로 감쌉니다.
@catch 블록에 폴백(fallback) UI를 구현합니다.
재시도(retry) 로직을 추가합니다.
개발 서버를 시작합니다.
차량 상세 모달(vehicle detail modal)로 이동합니다.
진단 버튼을 클릭합니다.
브라우저에서 결과(또는 오류)를 확인합니다.
테스트가 실패하면 오류를 분석하고 반복(iterate)합니다.

이 전체 워크플로는 결정론적(deterministic)입니다. 에이전트는 망가진 코드를 배포할 수 없습니다. 빌드 과정에서 먼저 잡아낼 것이며, Chrome DevTools가 런타임(runtime) 이슈를 잡아낼 것입니다.

파트 4: 스킬 설정 베스트 프랙티스 (Skills Configuration Best Practices)

도메인당 하나의 서버

Angular MCP 서버를 배포 서버(deployment server)나 통신 서버(communication server)와 함께 로드하지 마세요. 별도의 IDE 설정을 생성하세요:

{
  "profiles": {
    "angular-dev": {
...

현재 작업에 필요한 프로필만 활성화하세요.

스킬 버전 관리

스킬을 리포지토리(repo)에 넣고 코드처럼 버전 관리하세요:

/my-project
  /skills
    /angular-v22-dev-guidelines.md
...

다음과 같이 참조하세요:

npx @anthropic-ai/skills add ./skills/angular-v22-dev-guidelines.md

Angular 버전을 업데이트할 때마다 스킬 (skills)을 검토하고 업데이트하세요.

컨텍스트 예산 측정 (Measure Context Budget)

에이전트 (agent)를 실제 작업에 실행하기 전에, 토큰 사용량을 추정하도록 요청하세요:

What's the total token count of all my installed MCP tools and skills?
(설치된 모든 MCP 도구와 스킬의 총 토큰 수는 얼마인가요?)

만약 컨텍스트 윈도우 (context window)의 30% 이상이 도구 정의 (tool definitions)에 사용되고 있다면, 이를 단순화하세요. 에이전트에게는 생각할 공간이 필요합니다.

스킬에 MCP 가드레일 (Guardrails) 작성하기

에이전트에게 단순히 "주의하라"고 의존하는 대신, 스킬 (skill) 안에 명시적으로 작성하세요:

# Angular 업데이트 가드레일 스킬 (Angular Update Guardrail Skill)

`ng update`를 실행하기 전에, 반드시 다음을 수행할 것:
...

에이전트는 스킬의 지침을 따르게 됩니다.

5부: 문제 해결 (Troubleshooting)

"MCP server not found" (MCP 서버를 찾을 수 없음)

npx @angular/cli mcp --health-check 명령어가 도구 목록을 반환하는지 확인하세요.
에이전트 IDE를 재시작하세요.
Angular CLI v22+ 버전이 설치되어 있는지 확인하세요: ng version

"Skills not recognized" (스킬을 인식할 수 없음)

npx @anthropic-ai/skills list를 실행하여 스킬이 설치되었는지 확인하세요.
에이전트를 재시작하세요.
스킬 URL이 올바른지 확인하세요.

"Chrome DevTools not taking screenshots" (Chrome DevTools가 스크린샷을 찍지 못함)

Chrome이 설치되어 있고 PATH에 등록되어 있는지 확인하세요.
npx chrome-devtools-mcp@latest --health-check를 실행하세요.
에이전트에게 탐색을 요청하기 전에 dev_server.start로 개발 서버를 시작했는지 확인하세요.

"Build verification timed out" (빌드 검증 시간 초과)

dev_server.wait_for_build 도구에는 기본 타임아웃(보통 30초)이 설정되어 있습니다.
빌드 속도가 더 느리다면, 에이전트에게 MCP 호출 시 타임아웃을 늘려달라고 요청하세요.
개발 서버가 실행 중인지 확인하세요: ng serve

요약

Angular v22의 MCP + Skills 스택을 사용하면:

에이전트가 타입 안정성(Type-safe)이 보장된 코드를 작성하여, 조용히 오류를 넘기지 않고 컴파일되거나 실패하도록 합니다.
**철저한 타입 체크 (Exhaustive type checking)**를 통해 새로운 상태가 누락되는 것을 방지합니다.
@boundary가 앱을 충돌시키는 대신 실패를 격리합니다.
**인라인 템플릿 (Inline templates)**을 사용하여 컴포넌트를 깔끔하게 유지합니다.
**시그널 폼 (Signal Forms)**이 유효성 검사를 강제합니다.
Chrome DevTools 통합을 통해 에이전트가 실행 중인 코드에 대한 가시성을 확보합니다.
Skills는 사용자의 버전 및 컨벤션에 맞춘 현대적인 패턴을 교육합니다.

환각 루프(Hallucination loop)가 차단됩니다. 코드 생성은 검증 가능해집니다. 에이전트 기반 개발(Agentic development)은 위험한 방식에서 신뢰할 수 있는 방식으로 전환됩니다.

다음 단계 (Next Steps):

IDE/에이전트에 Angular MCP 설정하기 (5분)
Angular Skills 설치하기 (2분)
Chrome DevTools 설정하기 (2분)
위의 패턴을 사용하여 테스트 컴포넌트 작성하기
에이전트에게 기능을 스캐폴딩(Scaffold)하도록 요청하고 MCP 도구로 검증하기

리소스 (Resources):

Angular Skills 저장소: https://github.com/angular/skills
에이전트를 위한 Chrome DevTools: https://developer.chrome.com/docs/devtools/agents
Logistics Manager 코드랩: https://github.com/angular/examples/blob/main/logistics-manager-app/codelab.md