A2UI, Gemini 및 Google Apps Script를 활용한 적응형 학습 에이전트 구축

발행: (2026년 2월 7일 오전 11:26 GMT+9)
11 분 소요
원문: Dev.to

Source: Dev.to

fig1

초록

이 기사에서는 Agent‑to‑User Interface (A2UI), Gemini, 그리고 Google Apps Script를 사용하여 적응형 학습 에이전트를 구축하는 방법을 보여줍니다. 개인화된 퀴즈를 생성하고, Google Sheets에서 성과를 추적하며, 난이도를 동적으로 조정하여 Google Workspace 생태계 내에서 학습 효율을 극대화하는 시스템을 탐구합니다.

소개

A2UI (Agent‑to‑User Interface)는 사용자가 생성형 AI와 상호작용하는 방식을 근본적으로 바꾸는 패러다임 전환을 의미합니다. 원래 Google이 오픈소스로 공개하고 TypeScript와 Python으로 구현한 — Ref — A2UI는 Google Apps Script (GAS)와 통합될 때 더욱 강력해집니다. 이 조합을 통해 Google Workspace 생태계에 원활하게 접근할 수 있게 되며, 정적인 문서를 지능형 에이전트 애플리케이션으로 변환합니다.

이 가능성을 탐구하기 위해 저는 이전에 기술적 기반을 상세히 다룬 여러 글을 발표한 바 있습니다:

위 출판물에서 다진 기반 위에, 본 글에서는 A2UI와 Google Apps Script로 구동되는 교육 지원 프레임워크를 소개합니다. 이 시스템에서 AI는 단순히 질문에 답변하는 것이 아니라, 능동적인 튜터 역할을 수행합니다.

예시: 사용자가 I want to study Google Apps Script와 같은 프롬프트를 제공하면, Gemini가 백엔드에서 특화된 질문들을 생성합니다. A2UI는 이를 프런트엔드에서 인터랙티브 퀴즈 형태로 렌더링합니다. 시스템은 Google Sheets를 영구 메모리 저장소로 활용하며, 과거 성과 데이터를 분석해 에이전트가 다음 세션을 위해 점점 더 어려운 콘텐츠를 생성하도록 합니다. 이를 통해 개인화되고 효과적인 학습 진행이 가능해집니다.

적응형 학습 엔진

이 애플리케이션의 핵심 가치는 **“Feedback‑Loop Architecture”**를 통해 학습 효율성을 향상시키는 능력에 있습니다. 정적인 퀴즈 앱과 달리, 이 에이전트는 Google Sheets를 영구 메모리 저장소로 활용하여 인지 성장을 추적합니다.

워크플로우 및 아키텍처

  1. 목표 정의 – 사용자가 사이드바를 열고 학습 목표를 설정합니다(예: “Google Apps Script 마스터”).
  2. 컨텍스트 검색 – 시스템이 현재 스프레드시트를 스캔하여 과거 성과 데이터를 확인하고, 이전에 답변된 질문, 성공률, 특정 주제 약점(예: “배치 작업”)을 식별합니다.
  3. 생성 로직 (Gemini) – 컨텍스트를 활용하여 Gemini가 새로운 목표 질문과 이를 렌더링하기 위해 필요한 특정 UI 구성 요소(라디오 버튼, 코드 블록)를 포함한 구조화된 JSON 응답을 생성합니다.
  4. 동적 렌더링 (A2UI) – 프런트엔드가 인터페이스를 즉시 구성합니다; 하드코딩된 HTML이 필요 없습니다.
  5. 즉시 피드백 및 지속성 – 사용자가 상호작용할 때 결과가 실시간으로 검증되고 즉시 스프레드시트에 기록되어 다음 세션을 위한 데이터셋이 정제됩니다.

The detailed workflow operates as follows:

fig2

Mermaid Chart Playground

In the official sample script for A2UI (Restaurant finder), the client communicates with the server via A2A (Agent2Agent) protocols. In this article, we optimize the architecture for GAS: the client (HTML) communicates directly with the AI agent built on Google Apps Script using goo.

Source:

시연: AI 튜터 작동 예시

동영상 시연에서는 두 가지 뚜렷한 기능을 강조합니다: 딥러닝 지원일반적인 다재다능성. Google Sheets 내 대화를 활용해 Google Apps Script와의 통합을 보여주지만, 동일한 애플리케이션을 독립형 웹 앱으로도 배포할 수 있습니다. 프로젝트를 웹 앱으로 배포하면 doGet 함수가 요청을 포착하여 인터페이스가 스프레드시트 UI와 독립적으로 동작하게 됩니다.

1. 학습 효율 극대화

프롬프트

Create a quiz about Google Apps Script basics. Especially, I want to manage Google Sheets using Google Apps Script.
  • 목표 질문 생성 – AI는 기본 범위 선택(sheet.getRange())부터 고급 데이터 처리(sheet.getValues())까지 다양한 기술 질문을 생성합니다.

  • 능동적 회상 – 시스템은 배치 작업(SpreadsheetApp.flush())에 대한 도전 질문을 제시하여 지식 깊이를 테스트합니다.

  • 포괄적 성과 분석 – A2UI는 “Performance Analysis” 대시보드를 렌더링합니다.

    • 식별된 강점: 범위 및 데이터 조작에 대한 숙달.
    • 약점 평가: 현재 세션에서는 감지된 약점이 없습니다.
    • 전략적 다음 단계: 맞춤 메뉴 또는 간단 트리거로 이동을 제안하여 사용자의 학습 경로를 효과적으로 안내합니다.

참고: 초기 퀴즈를 완료하면 동일한 프롬프트를 사용해 새로운 세션이 시작되고, 정제된 과거 데이터를 기반으로 질문이 생성됩니다.

과거 데이터는 Google Sheets에 다음과 같이 저장됩니다:

fig3

2. 다재다능성 검증: 레스토랑 찾기

프롬프트

Find 3 Chinese restaurants in New York
  • 멀티모달 UI – 에이전트는 Han DynastyRedFarm에 대한 이미지가 포함된 풍부한 카드를 렌더링합니다.
  • 복합 액션 처리 – 사용자가 **“Book Now”**를 클릭하면 다중 필드 양식(인원 수, 날짜, 식이 요구사항)이 트리거됩니다.
  • 의의 – GAS 상의 A2UI 프로토콜이 교육 로직만큼이나 복잡한 거래 흐름도 손쉽게 처리할 수 있음을 보여줍니다.

저장소

전체 소스 코드와 샘플 구현은 여기에서 확인할 수 있습니다:

https://github.com/tanaikech/A2UI-for-Google-Apps-Script/tree/master/samples/A2UI-Lerning-Agent

애플리케이션 설정 가이드

1. API 키 받기

유효한 Gemini API 키가 필요합니다. 여기서 받으세요.

2. 샘플 스크립트 복사

A2UI 엔진이 사전 구성된 스프레드시트를 복사합니다:

템플릿 스프레드시트 복사하기

3. 스크립트 설정

  1. 스크립트 편집기 열기 (Extensions > Apps Script).
  2. main.gs 파일 열기.
  3. apiKey 변수에 API 키를 붙여넣기.
  4. 스크립트를 저장하고 스프레드시트를 새로 고침합니다.

중요 사항

이 프로젝트는 Agentic UIs를 구축하기 위한 기본 방법론을 제공합니다. 프로덕션 환경에 적용할 때는 스크립트를 귀하의 보안 요구 사항 및 워크플로우 제약에 맞게 수정해야 합니다.

사용자는 여러 주제를 동시에 공부할 수도 있습니다. 주제를 전환할 때 Gemini는 해당 맥락에 특화된 과거 데이터 추세를 분석하여 새로운 질문을 생성함으로써 다양한 분야에서 동시에 진행할 수 있게 합니다.

요약

  • Adaptive Learning Loop: Google Sheets는 사용자 기록을 저장하여 Gemini가 식별된 강점과 약점을 기반으로 향후 질문을 맞춤화할 수 있게 합니다.
  • Dynamic UI Generation: A2UI는 정적 HTML 템플릿을 없애고, AI가 상황에 따라 퀴즈, 차트, 예약 양식을 실시간으로 생성하도록 합니다.
  • Detailed Performance Analytics: 에이전트는 점수만이 아니라 정성적인 피드백을 제공하며, 사용자의 학습 경로를 효율적으로 안내하는 구체적인 “다음 단계”를 제시합니다.
  • Cross‑Domain Versatility: 이 아키텍처는 교육용 코드 퀴즈와 레스토랑 예약 거래를 동등하게 원활히 처리합니다.
  • Seamless Workspace Integration: GAS와 Gemini를 결합하면 일반 Google Sheets가 지능형 지속 데이터베이스로 변환되어 에이전트 행동을 구동합니다.
0 조회
Back to Blog

관련 글

더 보기 »

UX/UI 타이포그래피

Typography란 무엇을 의미할까요? - 어떤 font를 사용할지 - 어느 위치에서 얼마나 크게 할지 - 얼마나 굵게 할지 - 행 간격 - ...

이번 주 상위 7개 추천 DEV 게시물

이번 주 Top 7에 오신 것을 환영합니다. DEV 편집팀이 지난 주에 가장 좋아한 게시물을 직접 선정했습니다. 선정된 모든 저자분들께 축하드립니다.