Canonical URL: munonye.com에서 재게시됨. 전체 코드는 GitHub에서 확인 가능합니다.

🎯 주말 프로젝트 — 여러분은 이미 Angular와 Spring Boot를 사용하여 Friends CRUD 앱을 구축했습니다. 이 가이드는 기존 코드를 버리지 않고도 자연어 검색, 요약, 가이드 액션 기능을 통해 Angular CRUD 앱에 AI를 추가하는 방법을 주말 동안 보여줍니다.

2026년에 AI를 출시하는 가장 빠른 방법은 완전히 새로운 챗봇(greenfield chatbot)을 만드는 것이 아니라, 이미 실행 중인 소프트웨어를 확장하는 것입니다. 만약 우리의 Angular CRUD 튜토리얼 시리즈 또는 전체 CRUD 가이드를 완료했다면, 여러분은 FriendsAPI (Spring Boot)와 FriendsUI (Angular)를 가지고 있습니다. 우리는 여러분의 도메인을 이해하는 **AI 어시스턴트 (AI assistant)**를 추가할 것입니다.

AI 개발자 튜토리얼 허브의 일부입니다. 도구 호출(tool calling)을 사용하는 Spring AI 에이전트 (Spring AI agents with tool calling)를 기반으로 구축되었습니다.

소요 시간: 주말 한 번 (~6–8시간) · 사전 요구 사항: 로컬에서 실행 중인 CRUD 앱, OpenAI API 키

목차

• 시작하기 전에
• 아키텍처: CRUD + AI 레이어
• 토요일 오전 — 백엔드 도구
• 토요일 오후 — 에이전트 엔드포인트 (Agent endpoint)
• 일요일 오전 — Angular 채팅 패널
• 일요일 오후 — 연결 및 테스트
• 프로덕션 적용 전 주의사항

시작하기 전에 {#before-you-start}

여러분의 스택이 CRUD 시리즈와 일치하는지 확인하세요:

앱	포트	기술
FriendsAPI	9001	Spring Boot, JPA, /api/friends
FriendsUI	9002	Angular 19, HttpClient, standalone components

필요한 경우 Part 1 setup에서 Angular 19 패턴을 새로고침하세요. AI 패널의 폼(forms)을 위해서는 reactive forms validation (M6)의 패턴을 재사용하세요.

💡 이것이 독립형(standalone) 채팅 앱보다 나은 이유: 당신의 AI 도구들은 REST 컨트롤러와 동일한 FriendService를 호출합니다. 즉, 단일 진실 공급원(one source of truth)을 가지며 비즈니스 로직이 중복되지 않습니다.

아키텍처: CRUD + AI 레이어 {#architecture}

FriendsUI (Angular)
├── 기존 CRUD 화면 (변경 없음)
└── 신규: AiAssistantPanel → POST /api/agent
...

이는 우리의 Spring AI agents tutorial에서 다룬 에이전트(agent) 패턴을 반영하지만, 당신의 CRUD 도메인에 기반을 두고 있습니다.

토요일 오전 — 백엔드 도구 {#backend}

FriendsAPI의 pom.xml에 Spring AI를 추가합니다:

<dependency>
  <groupId>org.springframework.ai</groupId>
  <artifactId>spring-ai-openai-spring-boot-starter</artifactId>
...

CRUD 작업을 도구(tools)로 노출합니다 — 기존 서비스를 재사용하세요:

---

...