AI 활용하기

Angular AI 튜터

Angular AI 튜터는 최신 Angular 애플리케이션을 처음부터 완성할 때까지 대화형으로 한 단계씩 안내하도록 설계되었습니다. 레시피를 만들고 관리하는 **"스마트 레시피 보관함"**이라는 실제 프로젝트를 만들면서 최신 패턴과 모범 사례를 배울 수 있습니다.

이 튜터의 목표는 스스로 생각하는 능력을 기르고 배운 내용을 오래 기억하도록 돕는 것입니다. 튜터는 코드를 바로 제공하는 대신 개념을 설명하고 예제를 보여준 다음, 프로젝트에 맞는 연습 문제를 제시해 직접 해결하도록 합니다.

시작하기

Angular MCP 서버를 통해 AI 튜터를 사용할 수 있습니다.

  1. Angular MCP 서버를 설치합니다.
  2. ng new <project-name> 명령으로 새 Angular 프로젝트를 만듭니다.
  3. Gemini CLI와 같이 AI를 지원하는 에디터나 도구에서 새 프로젝트로 이동합니다(cd <project-name>).
  4. launch the Angular AI tutor와 같은 프롬프트를 입력합니다. Gemini CLI에서 Angular AI 튜터를 시작하는 방법을 보여주는 화면.

AI 튜터 사용하기

각 모듈은 짧은 개념 설명으로 시작합니다. Angular AI 튜터가 개념을 간단히 설명하는 화면. 필요한 경우 튜터는 개념을 보여주는 코드 예제를 제시합니다. Angular AI 튜터가 코드 예제를 보여주는 화면. 또한 이해한 내용을 확인할 수 있도록 정해진 답에 얽매이지 않는 연습 문제를 제공합니다. Angular AI 튜터가 연습 문제를 제시하는 화면. 마지막으로 튜터가 작업 내용을 확인한 뒤 다음 모듈로 넘어갑니다. Angular AI 튜터가 사용자의 작업을 확인하는 화면.

학습 과정

새로운 주제를 배울 때마다 스스로 생각하는 과정을 중심으로 학습을 반복하면서 배운 내용을 더 오래 기억할 수 있습니다.

  1. 개념 배우기: 튜터가 Angular의 핵심 기능을 간단히 설명하고, 일반적인 코드 예제로 개념을 보여줍니다.
  2. 배운 내용 적용하기: 곧바로 직접 풀어볼 연습 문제가 주어집니다. 튜터는 목표와 기대 결과를 중심으로 문제를 설명하고, 해결 방법은 직접 생각하도록 유도합니다.
  3. 피드백과 도움 받기: 준비가 되면 튜터에게 알려주세요. 튜터가 프로젝트 파일을 자동으로 읽어 풀이가 올바른지 확인합니다. 막히는 부분이 있으면 필요한 도움을 직접 선택할 수 있습니다. **"힌트"**를 요청해 추가 안내를 받거나, "자세한 가이드" 또는 **"단계별 지침"**을 입력해 순서대로 안내받을 수 있습니다.

문제를 해결하면 튜터는 바로 다음 주제로 넘어갑니다. 언제든지 특정 주제를 더 자세히 설명해 달라고 하거나 관련된 Angular 질문을 할 수도 있습니다.

기능과 명령

학습 방식은 직접 조절할 수 있습니다. 다음 기능은 언제든지 사용할 수 있습니다.

중단했다가 이어서 학습하기

편하게 쉬었다가 돌아와도 됩니다. 학습 진도는 프로젝트 코드와 연결되어 있습니다. 새 세션으로 돌아오면 튜터가 파일을 자동으로 분석해 마지막으로 진행한 위치를 파악하므로 중단한 곳에서 자연스럽게 이어갈 수 있습니다.

활용 팁: 학습 진도는 Git으로 저장하는 것을 적극 권장합니다. 모듈을 마칠 때마다 변경 사항을 커밋하면 좋습니다(예: git commit -m "Complete Phase 1, Module 8"). 이렇게 하면 언제든지 돌아갈 수 있는 개인 체크포인트를 만들 수 있습니다.

숙련도 조절하기

숙련도를 초급(1~3), 중급(4~7), **숙련자(8~10)**로 설정할 수 있습니다. 세션 중 언제든지 이 설정을 바꿀 수 있으며, 튜터는 즉시 설명 방식을 조절합니다.

프롬프트 예시:

  • "내 숙련도를 초급으로 설정해 줘."
  • "내 숙련도를 8로 바꿔 줘."

전체 학습 계획 보기

전체 구성을 보거나 얼마나 진행했는지 확인하려면 목차를 요청하면 됩니다.

프롬프트 예시:

  • "지금 어디까지 했지?"
  • "목차를 보여 줘."
  • "학습 계획을 보여 줘."

튜터는 전체 학습 계획을 보여주면서 현재 위치를 표시합니다.

스타일에 관한 안내

튜터는 애플리케이션을 깔끔하게 표시하도록 기본 스타일을 적용합니다. 직접 스타일을 적용해 자신만의 앱으로 만들어 보세요.

현재 모듈 건너뛰기

학습 과정의 다음 주제로 넘어가고 싶다면 튜터에게 현재 연습 문제를 건너뛰도록 요청할 수 있습니다.

프롬프트 예시:

  • "이 섹션은 건너뛰어 줘."
  • "이 단계를 자동으로 완성해 줘."

튜터는 확인을 요청한 다음 현재 모듈의 완성된 코드를 제시하고, 다음 모듈을 원활하게 진행하는 데 필요한 변경 사항을 자동으로 적용하려고 시도합니다.

원하는 주제로 이동하기

순서와 관계없이 특정 주제를 배우고 싶다면, 예를 들어 기초에서 곧바로 폼으로 이동할 수도 있습니다. 튜터는 선택한 모듈의 시작 지점에 맞게 프로젝트를 수정하는 데 필요한 코드를 제공하고, 필요한 변경 사항을 자동으로 적용하려고 시도합니다.

프롬프트 예시:

  • "폼 수업으로 이동해 줘."
  • "지금 라우팅 규칙 가드를 배우고 싶어."
  • "서비스 섹션으로 이동해 줘."

문제 해결

설정 문제

"launch the Angular AI tutor"를 입력해도 반응이 없나요?

먼저 프로젝트를 열었는지 확인하세요. 튜터가 작업하려면 실제 Angular 프로젝트가 필요합니다.

ng new my-app
cd my-app
code .

그다음 MCP 서버가 실행 중인지 확인하세요. VS Code에서 .vscode/mcp.json 파일을 열고 파일 상단의 "Start" 버튼을 클릭하세요.

"launch the Angular AI tutor"를 입력하면 "Reviewed .vscode/mcp.json and ran start task"라는 체크 표시와 "Allow task run?"이라는 확인 메시지가 표시됩니다. Allow를 클릭하세요.

여전히 작동하지 않나요?

먼저 #angular-cli를 입력하여 Angular 컨텍스트를 불러온 다음 튜토리얼 URL https://angular.dev/ai/ai-tutor을 붙여 넣어 보세요.

서버가 실행 중인지 확인하는 방법

명령 팔레트(Ctrl+Shift+P)를 열고 "MCP: List Running Servers"를 입력한 뒤 목록에서 "angular-cli"를 찾으세요.

일반적인 문제

튜터가 올바르게 응답하지 않거나 애플리케이션에 문제가 있는 것 같다면 다음 방법을 시도해 보세요:

  1. "proceed" 입력하기: 튜터가 진행을 멈췄을 때 이 명령을 입력하면 다음 단계로 이어지는 경우가 많습니다.
  2. 튜터에게 정정하기: 튜터가 학습 진도를 잘못 파악했다면 알려주세요(예: 모듈 8을 마쳤는데 모듈 3을 진행 중이라고 하는 경우). 예를 들어 "실제로는 모듈 8까지 했어." 라고 하면 튜터가 코드를 다시 확인하고 진도를 조절합니다.
  3. UI 확인하기: 애플리케이션의 사용자 인터페이스가 어떤 모습이어야 하는지 확인하고 싶다면 튜터에게 물어보세요. 예를 들어 "UI에 무엇이 보여야 해?" 라고 질문하면 됩니다.
  4. 브라우저 창 새로고침하기: 새로고침으로 애플리케이션과 관련된 여러 문제를 해결할 수 있습니다.
  5. 브라우저 완전히 재시작하기: 오류가 브라우저 개발자 콘솔에만 나타나는 경우도 있습니다. 브라우저를 완전히 재시작하면 애플리케이션과 관련된 근본적인 문제를 해소하는 데 도움이 될 수 있습니다.
  6. 새 채팅 시작하기: 언제든지 새 채팅을 시작해 기존 대화 기록을 비우고 새롭게 진행할 수 있습니다. 튜터는 파일을 읽어 마지막으로 진행한 단계를 찾습니다.

단계별 학습 과정

다섯 단계에 걸쳐 애플리케이션을 만듭니다. 이 과정을 처음부터 끝까지 따라가면 필요한 기능을 모두 갖춘 Angular 애플리케이션을 완성할 수 있습니다. 각 모듈은 이전 모듈에서 배운 내용을 바탕으로 구성되며, 기초부터 실제 애플리케이션에 사용하는 고급 기능까지 순차적으로 다룹니다.

자동 설정에 관한 안내: 일부 모듈에는 인터페이스나 목업 데이터를 만드는 것과 같은 준비 단계가 필요합니다. 이 경우 튜터가 코드와 파일 작업 방법을 제시합니다. 연습 문제를 시작하기 전에 안내에 따라 직접 파일을 만들고 수정해야 합니다.

1단계: Angular 기초

  • 모듈 1: 시작하기
  • 모듈 2: 문자열 바인딩으로 동적 텍스트 표시하기
  • 모듈 3: 이벤트 리스너((click))

2단계: 상태와 시그널

  • 모듈 4: 값을 쓸 수 있는 시그널로 상태 관리하기(1부: set)
  • 모듈 5: 값을 쓸 수 있는 시그널로 상태 관리하기(2부: update)
  • 모듈 6: computed() 시그널

3단계: 컴포넌트 아키텍처

  • 모듈 7: 템플릿 바인딩(프로퍼티와 어트리뷰트)
  • 모듈 8: 컴포넌트 생성과 중첩
  • 모듈 9: 시그널로 컴포넌트 입력 받기
  • 모듈 10: 컴포넌트 스타일 지정하기
  • 모듈 11: @for로 목록 렌더링하기
  • 모듈 12: @if로 조건부 렌더링하기

4단계: 고급 기능과 아키텍처

  • 모듈 13: 양방향 바인딩
  • 모듈 14: 서비스와 의존성 주입(DI)
  • 모듈 15: 라우팅 기초
  • 모듈 16: 폼 소개
  • 모듈 17: Angular Material 소개

5단계: 시그널 폼

  • 모듈 18: 시그널 폼 소개
  • 모듈 19: 제출과 초기화
  • 모듈 20: 시그널 폼의 유효성 검사
  • 모듈 21: 필드 상태와 오류 메시지

AI와 피드백에 관한 안내

이 튜터는 대규모 언어 모델(LLM)로 동작합니다. 전문적인 안내를 제공하도록 많은 노력을 기울였지만 AI는 실수할 수 있습니다. 설명이나 코드 예제에 잘못된 내용이 있는 것 같다면 알려주세요. 튜터에게 오류를 알려주면 피드백을 반영해 응답을 조절합니다.

기술적인 버그나 기능 요청은 이슈로 등록해 주세요.