내 수업에 코딩 한 스푼
Module 10Phase 315분

생성형 API — 내 앱에 AI 기능 연결하기

생성형 AI 웹사이트를 여는 대신, 내 앱이 정해진 입력을 보내고 정해진 형식의 결과를 받도록 연결합니다.

핵심 메시지

API는 두 프로그램 사이에서 요청과 응답을 전달하는 통역사이자 연결 통로입니다.

5단계 흐름

  1. 1

    사용자 입력

  2. 2

    앱 → 서버 함수 요청

  3. 3

    서버 함수 → 비밀 키로 AI 호출

  4. 4

    AI 정해진 형식으로 응답

  5. 5

    결과 표시 + 교사 검토

흔히 쓰는 모델 제공자

모델·정책·요금은 변경될 수 있습니다. 항상 공식 문서에서 최신 정보를 확인하세요.

Google Gemini

텍스트·멀티모달 처리, 학습 도구에 활용

공식 문서 확인 필요 · 모델과 정책은 변경될 수 있음

OpenAI

범용 텍스트·코드·이미지 모델 다수

공식 문서 확인 필요 · 모델과 정책은 변경될 수 있음

Anthropic Claude

장문 텍스트·안전한 응답 설계에 강점

공식 문서 확인 필요 · 모델과 정책은 변경될 수 있음

오늘은 Google Gemini를 기본 예시로 사용하지만, 구조는 어떤 제공자와도 동일합니다.

안전한 구현 프롬프트

보안·구현 프롬프트
현재 앱에 생성형 AI 피드백 기능을 추가해줘.

중요한 보안 조건:
- API 키를 프론트엔드 코드, 브라우저, localStorage에 노출하지 마.
- 비밀 키는 Lovable Cloud secret 또는 Supabase secret에 저장하고 서버 함수/Edge Function에서만 사용해.
- 사용자 입력을 서버 함수가 받아 생성형 AI API를 호출한 뒤 결과만 프론트엔드로 반환해.

AI의 역할:
- 교사가 입력한 교과, 학년, 학습 주제, 학생 답변, 도달 수준을 분석한다.
- 결과는 반드시 JSON 형식으로 반환한다.
- 필드는 encouragement, strength, improvement, nextAction 네 개다.
- 학생을 단정하거나 진단하지 않는다.
- 관찰 가능한 내용과 다음 학습 행동을 중심으로 쓴다.
- 입력 내용에 개인정보가 포함된 것으로 보이면 생성을 중단하고 경고를 반환한다.

앱 동작:
- 생성 중 로딩 상태를 보여준다.
- 실패하면 이해하기 쉬운 한국어 오류 메시지와 다시 시도 버튼을 보여준다.
- 빈 응답이나 형식 오류를 처리한다.
- 결과를 화면에 표시하기 전에 JSON 구조를 검증한다.
- 기존 UI와 모의 응답 기능은 삭제하지 말고, API 실패 시 대체 흐름으로 사용한다.

먼저 구현 계획과 필요한 secret 이름을 설명한 뒤 구현하고, 마지막에 정상 흐름과 실패 흐름을 테스트해줘.

좋은 AI 기능 설계 6요소

  • 1입력이 분명한가?
  • 2AI의 역할이 한정되어 있는가?
  • 3출력 형식이 고정되어 있는가?
  • 4개인정보를 막는가?
  • 5실패 시 대체 흐름이 있는가?
  • 6최종 검토자가 교사인가?

직접 해보기 — 미니 AI 기능 설계