AI 활용하기

AI로 개발하기

AI 기능을 갖춘 앱을 만드세요. AI와 함께 더 빠르게 개발하세요.

도움말: 즐겨 사용하는 AI IDE에서 개발을 시작하려고 하시나요?
프롬프트 규칙과 모범 사례를 확인해 보세요.

대규모 언어 모델(LLM)을 활용하는 생성형 AI(GenAI)로 개인화된 콘텐츠, 지능형 추천, 미디어 생성과 이해, 정보 요약, 동적 기능 등 정교하고 흥미로운 애플리케이션 경험을 만들 수 있습니다.

이전에는 이러한 기능을 개발하려면 해당 분야의 깊은 전문 지식과 상당한 개발 노력이 필요했습니다. 하지만 새로운 제품과 SDK가 진입 장벽을 낮추고 있습니다. Angular는 다음과 같은 이유로 웹 애플리케이션에 AI를 통합하는 데 적합합니다:

  • Angular의 강력한 템플릿 API로 생성된 콘텐츠를 활용하는 동적이고 깔끔하게 구성된 UI를 만들 수 있습니다.
  • 시그널 기반의 탄탄한 아키텍처가 데이터와 상태를 동적으로 관리하도록 설계되었습니다.
  • Angular는 AI SDK 및 API와 매끄럽게 통합됩니다.

이 가이드는 Genkit, Firebase AI Logic, Gemini API를 사용해 Angular 앱에 AI를 도입하는 방법을 설명합니다. Angular 앱에 AI를 통합하기 시작하는 방법을 안내하므로 AI 기반 웹 앱 개발에 빠르게 입문할 수 있습니다. 또한 스타터 키트, 예제 코드, 일반적인 작업 흐름의 구현 방법 등 빠르게 익히는 데 도움이 되는 리소스를 소개합니다.

시작하기 전에 Angular의 기본 내용을 이해하고 있어야 합니다. Angular가 처음이라면 핵심 가이드나 시작하기 튜토리얼을 살펴보세요.

참고: 이 페이지에서는 Google AI 제품을 사용한 통합과 예제를 소개하지만, Genkit과 같은 도구는 특정 모델에 종속되지 않으므로 원하는 모델을 선택할 수 있습니다. 대부분의 예제와 코드 샘플은 다른 회사의 솔루션에도 적용할 수 있습니다.

시작하기

AI 기반 애플리케이션 개발은 새롭게 등장해 빠르게 발전하는 분야입니다. 어디에서 시작하고 어떤 기술을 선택할지 결정하기 어려울 수 있습니다. 다음 섹션에서는 선택할 수 있는 세 가지 방식을 소개합니다:

  1. Genkit 은 풀스택 애플리케이션을 개발할 수 있도록 지원되는 모델을 선택하고 통합 API로 상호작용하는 방식을 제공합니다. 개인화된 추천과 같이 정교한 백엔드 AI 로직이 필요한 애플리케이션에 적합합니다.

  2. Firebase AI Logic 은 클라이언트만으로 동작하는 애플리케이션이나 모바일 앱을 만들 수 있도록 Google 모델을 위한 안전한 클라이언트 측 API를 제공합니다. 실시간 텍스트 분석이나 기본 챗봇 등 브라우저에서 직접 실행하는 대화형 AI 기능에 적합합니다.

  3. Gemini API 를 사용하면 API가 제공하는 메서드와 기능을 직접 활용하는 애플리케이션을 만들 수 있으며, 풀스택 애플리케이션에 적합합니다. 커스텀 이미지 생성이나 심층 데이터 처리처럼 AI 모델을 직접 제어해야 하는 애플리케이션에 알맞습니다.

Genkit과 Angular로 AI 기반 애플리케이션 만들기

Genkit은 웹 앱과 모바일 앱에 AI 기능을 구현하도록 돕는 오픈 소스 도구 모음입니다. Google, OpenAI, Anthropic, Ollama 등의 AI 모델을 통합하는 일관된 인터페이스를 제공하므로 요구 사항에 가장 적합한 모델을 살펴보고 선택할 수 있습니다. Genkit은 서버 측 솔루션이므로 통합하려면 Node 기반 서버와 같이 지원되는 서버 환경이 웹 앱에 필요합니다. 예를 들어 Angular SSR로 풀스택 앱을 만들면 시작에 필요한 서버 측 코드가 제공됩니다.

다음은 Genkit과 Angular를 사용하는 개발 예제입니다:

Firebase AI Logic과 Angular로 AI 기반 애플리케이션 만들기

Firebase AI Logic은 웹 앱과 모바일 앱에서 Vertex AI Gemini API나 Imagen API를 직접 안전하게 사용하는 방법을 제공합니다. 앱을 풀스택으로 만들 수도 있고 클라이언트만으로 구성할 수도 있으므로 Angular 개발자에게 매력적인 선택지입니다. 클라이언트만으로 동작하는 애플리케이션을 개발한다면 Firebase AI Logic은 웹 앱에 AI를 도입하기에 적합합니다.

다음은 Firebase AI Logic과 Angular를 사용하는 개발 예제입니다:

Gemini API와 Angular로 AI 기반 애플리케이션 만들기

Gemini API는 오디오, 이미지, 동영상, 텍스트 입력을 지원하는 Google의 최신 모델에 대한 접근을 제공합니다. 이 모델은 특정 활용 사례에 맞춰 최적화되어 있습니다. 자세한 내용은 Gemini API 문서 사이트에서 확인하세요.

  • AI 텍스트 에디터 Angular 앱 템플릿 - 텍스트 다듬기, 내용 확장, 격식 있는 표현으로 바꾸기 등 AI 기능을 갖춘 완성된 텍스트 에디터로 시작할 수 있는 템플릿입니다. HTTP로 Gemini API를 호출하는 경험을 쌓기에 좋은 출발점입니다.

  • AI 챗봇 앱 템플릿 - HTTP로 Gemini API와 통신하는 챗봇 사용자 인터페이스로 시작하는 템플릿입니다.

모범 사례

모델 제공업체에 연결하고 API 인증 정보 안전하게 보관하기

모델 제공업체에 연결할 때는 API 비밀 정보를 안전하게 보관해야 합니다. environments.ts와 같이 클라이언트에 전달되는 파일에 API 키를 넣으면 안 됩니다.

어떤 AI API와 도구를 선택할지는 애플리케이션 아키텍처에 따라 달라집니다. 특히 클라이언트 측 애플리케이션인지 서버 측 애플리케이션인지에 따라 선택하세요. Firebase AI Logic과 같은 도구는 클라이언트 측 코드에서 모델 API에 안전하게 연결할 수 있게 합니다. Firebase AI Logic 이외의 API나 다른 모델 제공업체를 사용하고 싶다면 프록시 서버를 만들거나 Cloud Functions for Firebase를 프록시로 사용해 API 키를 노출하지 않는 방법을 고려하세요.

클라이언트 측 앱에서 연결하는 예제 코드는 Firebase AI Logic Angular 예제 저장소를 확인하세요.

API 키가 필요한 모델 API에 서버에서 연결할 때는 environments.ts 대신 비밀 정보 관리자나 환경 변수를 사용하는 것이 좋습니다. API 키와 인증 정보를 안전하게 관리하는 표준 모범 사례를 따르세요. Firebase는 최신 Firebase App Hosting 업데이트를 통해 새로운 비밀 정보 관리자를 제공합니다. 자세한 내용은 공식 문서를 확인하세요.

풀스택 애플리케이션의 서버 측 연결 예제 코드는 Angular AI 예제(Genkit과 Angular 이야기 생성기) 저장소를 확인하세요.

도구 호출로 앱 기능 확장하기

에이전트가 프롬프트에 따라 행동하고 도구를 사용해 문제를 해결하는 작업 흐름을 만들려면 "도구 호출"을 사용하세요. 함수 호출이라고도 하는 도구 호출은 LLM이 자신을 호출한 애플리케이션에 다시 요청을 보낼 수 있도록 하는 방식입니다. 개발자는 사용할 수 있는 도구를 정의하고 도구를 언제, 어떻게 호출할지 제어합니다.

도구 호출을 사용하면 질문과 답변을 주고받는 챗봇을 넘어 웹 앱에 AI를 더 폭넓게 통합할 수 있습니다. 모델 제공업체의 함수 호출 API를 통해 모델이 함수 실행을 요청하도록 할 수 있습니다. 제공된 도구는 애플리케이션의 맥락 안에서 더 복잡한 작업을 수행하는 데 사용할 수 있습니다.

Angular 예제 저장소의 전자상거래 예제에서는 LLM이 재고 관련 함수 호출을 요청해 필요한 맥락 정보를 얻고, 매장의 여러 상품 가격 합계를 계산하는 등의 복잡한 작업을 수행합니다. 제공하는 API의 범위와 LLM이 요청한 함수를 실제로 호출할지는 모두 개발자가 결정합니다. 실행 흐름의 제어권은 개발자에게 있습니다. 예를 들어 서비스의 모든 함수가 아니라 특정 함수만 노출할 수 있습니다.

비결정적인 응답 처리하기

모델은 같은 입력에도 다른 결과를 반환할 수 있으므로 이를 고려해 애플리케이션을 설계해야 합니다. 애플리케이션을 구현할 때 다음과 같은 전략을 사용할 수 있습니다:

  • 프롬프트와 temperature 같은 모델 매개변수를 조절해 응답의 일관성이나 다양성을 조절합니다. 자세한 내용은 ai.google.dev의 프롬프트 작성 전략 섹션에서 확인할 수 있습니다.
  • 작업 흐름의 다음 단계로 진행하기 전에 사람이 출력을 검증하는 "human in the loop" 전략을 사용합니다. 작업자(사람이나 다른 모델)가 출력을 검증하고 중요한 결정을 확인할 수 있도록 애플리케이션의 작업 흐름을 구성하세요.
  • 도구(또는 함수) 호출과 스키마 제약 조건으로 모델 응답을 미리 정의한 형식으로 유도하고 제한해 예측 가능성을 높입니다.

이러한 전략과 기법을 고려하더라도 애플리케이션 설계에는 합리적인 대체 동작이 포함되어야 합니다. 애플리케이션 복원력에 관한 기존 표준을 따르세요. 예를 들어 리소스나 API를 사용할 수 없다고 애플리케이션이 비정상적으로 종료되어서는 안 됩니다. 이 경우 사용자에게 오류 메시지를 표시하고, 해당한다면 다음에 수행할 수 있는 작업도 안내합니다. AI 기반 애플리케이션을 만들 때도 같은 고려가 필요합니다. 응답이 예상한 출력에 부합하는지 확인하고, 부합하지 않으면 단계적 기능 축소를 통해 안정적으로 대응하세요. 이는 LLM 제공업체의 API 장애에도 적용됩니다.

LLM 제공업체가 응답하지 않는 상황을 예로 들어 봅시다. 다음과 같은 전략으로 장애를 처리할 수 있습니다:

  • 지금 또는 나중에 재시도할 수 있도록 사용자의 응답을 저장합니다.
  • 민감한 정보를 노출하지 않는 적절한 메시지로 장애를 알립니다.
  • 서비스를 다시 사용할 수 있게 되면 대화를 이어갑니다.

다음 단계

LLM 프롬프트와 AI IDE 설정은 다음 가이드를 참고하세요: