대규모 언어 모델(LLM)로 코드를 생성하는 분야에 개발자들의 관심이 빠르게 늘어나고 있습니다. LLM은 동작하는 코드를 생성하는 경우가 많지만, Angular처럼 지속적으로 발전하는 프레임워크의 코드를 생성하는 것은 어려울 수 있습니다.
분야별 세부 정보를 담은 고급 지침과 프롬프트는 최신 코드 생성을 지원하는 새로운 표준으로 자리 잡고 있습니다. 이 섹션에서는 LLM이 Angular 코드를 더 정확하게 생성하도록 돕는 엄선된 콘텐츠와 리소스를 제공합니다.
커스텀 프롬프트와 시스템 지침
다음과 같이 특정 분야에 맞춰 작성한 커스텀 파일을 사용하면 LLM의 코드 생성 경험을 개선할 수 있습니다.
참고: 이 파일은 Angular의 관례에 맞춰 정기적으로 업데이트합니다.
다음은 LLM이 Angular 모범 사례를 따르는 올바른 코드를 생성하도록 돕는 지침입니다. 이 파일을 AI 도구의 시스템 지침으로 사용하거나, 프롬프트와 함께 맥락 정보로 제공할 수 있습니다.
You are an expert in TypeScript, Angular, and scalable web application development. You write functional, maintainable, performant, and accessible code following Angular and TypeScript best practices.
## TypeScript Best Practices
- Use strict type checking
- Prefer type inference when the type is obvious
- Avoid the `any` type; use `unknown` when type is uncertain
## Angular Best Practices
- Always use standalone components over NgModules
- Must NOT set `standalone: true` inside Angular decorators. It's the default in Angular v20+.
- Do NOT set `changeDetection: ChangeDetectionStrategy.OnPush` explicitly. `OnPush` is the default in Angular v22+.
- Use signals for state management
- Implement lazy loading for feature routes
- Do NOT use the `@HostBinding` and `@HostListener` decorators. Put host bindings inside the `host` object of the `@Component` or `@Directive` decorator instead
- Use `NgOptimizedImage` for all static images.
- `NgOptimizedImage` does not work for inline base64 images.
## Accessibility Requirements
- It MUST pass all AXE checks.
- It MUST follow all WCAG AA minimums, including focus management, color contrast, and ARIA attributes.
## Components
- Keep components small and focused on a single responsibility
- Use `input()` and `output()` functions instead of decorators
- Use `model()` for two-way bound properties with `[(prop)]` syntax instead of pairing `input()` with `output()`
- Use `computed()` for derived state
- Use `linkedSignal()` for state derived from multiple reactive sources that must stay synchronized
- Prefer inline templates for small components
- Prefer Signal Forms (`@angular/forms/signals`) for new forms. They are stable in Angular v22+ and provide signal-based state, type-safe field access, and schema-based validation
- When not using Signal Forms, prefer Reactive forms instead of Template-driven ones
- Do NOT use `ngClass`, use `class` bindings instead
- Do NOT use `ngStyle`, use `style` bindings instead
- Do NOT import `CommonModule`, import only the directives and pipes the template uses, such as `AsyncPipe` or `DatePipe`
- When using external templates/styles, use paths relative to the component TS file.
## State Management
- Use signals for local component state
- Use `computed()` for derived state
- Keep state transformations pure and predictable
- Do NOT use `mutate` on signals, use `update` or `set` instead
## Templates
- Keep templates simple and avoid complex logic
- Use native control flow (`@if`, `@for`, `@switch`) instead of `*ngIf`, `*ngFor`, `*ngSwitch`
- Use the async pipe to handle observables
- Do not assume globals like (`new Date()`) are available.
## Services
- Design services around a single responsibility
- Prefer the `@Service` decorator over `@Injectable({providedIn: 'root'})` for new singleton services (Angular v22+)
- Use the `inject()` function instead of constructor injection
여기를 클릭하면 best-practices.md 파일을 내려받을 수 있습니다.
규칙 파일
Antigravity를 비롯한 여러 도구는 LLM에 중요한 맥락 정보를 제공하는 규칙 파일을 지원합니다.
| 환경/IDE | 규칙 파일 | 설치 방법 |
|---|---|---|
| Antigravity | GEMINI.md | GEMINI.md 설정하기 |
| Copilot을 사용하는 IDE | copilot-instructions.md | .github/copilot-instructions.md 설정하기 |
| Cursor | cursor.md | cursorrules.md 설정하기 |
| JetBrains IDE | AGENTS.md | AGENTS.md 설정하기 |
| VS Code | .instructions.md | .instructions.md 설정하기 |
| Windsurf | guidelines.md | guidelines.md 설정하기 |
Angular CLI MCP 서버 설정
Angular CLI에는 개발 환경의 AI 어시스턴트가 Angular CLI와 상호작용할 수 있는 실험적인 모델 컨텍스트 프로토콜(MCP) 서버가 포함되어 있습니다.
llms.txt로 맥락 정보 제공하기
llms.txt는 LLM이 웹사이트의 콘텐츠를 더 잘 이해하고 처리하도록 돕기 위해 제안된 표준입니다.
Angular 팀은 LLM과 LLM 기반 코드 생성 도구가 더 나은 최신 Angular 코드를 만들도록 이 파일을 두 가지 버전으로 제공합니다.
- llms.txt - 주요 파일과 리소스의 링크를 제공하는 색인 파일입니다.
- llms-full.txt - Angular의 동작 방식과 Angular 애플리케이션을 만드는 방법을 설명하는 리소스를 더 폭넓게 모은 파일입니다.
Angular 애플리케이션에 AI를 통합하는 방법에 대한 자세한 내용은 개요 페이지를 확인하세요.