디지털 교육혁신 직무연수(교동초) by 김태하 (Worker Email Address)

SWEET 연구회 웹 앱

workergonyo1 — 2025-07-16 02:35:09 UTC

링크: https://gw1.kr/sweet

API 발급 페이지

workergonyo1 — 2025-07-16 02:35:53 UTC

링크: https://aistudio.google.com/app/apikey

API 사용법 가이드

workergonyo1 — 2025-07-16 02:36:28 UTC

링크: https://ai.google.dev/gemini-api/docs/quickstart?lang=python&hl=ko#apps-script

앱스크립트

workergonyo1 — 2025-07-16 02:38:00 UTC

링크: https://script.google.com/

구글 클라우드 프로젝트

workergonyo1 — 2025-07-16 02:43:38 UTC

링크: https://console.cloud.google.com/

API 모델별 사용량

workergonyo1 — 2025-07-16 02:51:54 UTC

링크: https://ai.google.dev/gemini-api/docs/rate-limits?hl=ko

가장 가벼운 모델 :

Gemini 2.5 Flash-Lite Preview 06-17

gemini 기본 사용방법

workergonyo1 — 2025-07-16 02:53:00 UTC

// See https://developers.google.com/apps-script/guides/properties
// for instructions on how to set the API key.
const apiKey = PropertiesService.getScriptProperties().getProperty('GEMINI_API_KEY');
function main() {
  const payload = {
    contents: [
      {
        parts: [
          { text: '강릉의 교동초등학교에 대하여 알고있는 것을 간단하게 소개해줘.' },
        ],
      },
    ],
  };

  const url = 'https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-lite-preview-06-17:generateContent';
  const options = {
    method: 'POST',
    contentType: 'application/json',
    headers: {
      'x-goog-api-key': apiKey,
    },
    payload: JSON.stringify(payload)
  };

  const response = UrlFetchApp.fetch(url, options);
  const data = JSON.parse(response);
  const content = data['candidates'][0]['content']['parts'][0]['text'];
  console.log(content);
}

01 prd.md 파일 작성하기

workergonyo1 — 2025-07-16 02:59:12 UTC

당신은 초보 개발자를 위하여 AI를 사용한 코딩을 위해 "prd.md"이라는 파일(Product Requirements Document)을 제안해주는 역할입니다. "prd.md" 만들고 제공한 콘텐츠를 포함시키고자 합니다. 이 파일은 "Content Digest"라는 제품의 제품 요구 사항 문서입니다. 사용자가 {{내용}}을 입력하면 프로그램을 제작하기 위해 필요한 내용을 담은 prd.md 파일을 제작하세요. 문서 내용은 매우 간단하게 작성되어야 합니다. [할 일(to-do)] 는 AI에게 전달될 내용으로 코드 작성에 필요한 단계를 논리적으로 제안하세요. [할 일(to-do)]는 프로젝트를 완성하기 위해 필요한 단계 또는 과정을 체크리스트 형태가 되도록 "- [ ]" 기호를 포함하여 작성하세요. 단, 개발자는 코딩 경험이 전혀 없는 초보자이므로 문서는 반드시 복잡한 지식 없이 쉽고 재미있게 코딩을 시작할 수 있게 어렵지 않은 수준으로 작성되어야 합니다. 만약 prd.md 파일을 작성하기 위해 프로그램에 관한 보충설명이 필요하면 언제든 추가로 질문하세요. 단, 반드시 아래 조건을 따라 prd 문서를 제시해야 합니다.

##조건

1) 반드시 html 이외에는 다른 형식에 코드를 작성해서는 안된다는 내용을 포함하세요. js 코드나 css 코드를 모두 하나의 html 에 작성하라고 명시한 내용을 강조하여 작성합니다.

2) prd 문서 이외에는 다른 어떤 내용도 제시하지 마세요.

내용을 이해했으면 "어떤 프로그램을 만들고 싶으신가요?"라고 답하고 사용자의 입력을 기다리세요.

포켓몬도감 샘플

workergonyo1 — 2025-07-16 03:02:47 UTC

링크: https://drive.google.com/drive/folders/1Y9cG35hAjOCx74hK4YHbiF-R3km66nl_?usp=sharing

gemini행발 서비스 이용하기

workergonyo1 — 2025-07-16 03:17:05 UTC

스프레드시트 id: 1LABR1BNbTRPdH-65tRhhDppFzXt63aIde3LRx9XGxHo

Gemini API 키:

AIzaSyDFa25g8Z-vq4UzikLeb58E_T4WKIpsxhE

02 행발프롬프트 예시

workergonyo1 — 2025-07-16 03:32:49 UTC

구글 앱스크립트를 사용하여 웹 앱을 만드려고 해. gs 코드와 html 코드를 작성해줘. 최종 코드만 출력하고, 그 이외에는 절대 답변해서는 안돼. 절대 코드 작성 순서를 단계를 나누어서 제시해서는 안돼.

웹앱은 아래와 같은 순서로 동작해야 해.

1. 학생이름이 작성된 스프레드시트의 url에서 데이터를 가져와 A열에 작성된 학생 이름을 가져오기

2. gemini api 키 입력하기(프로젝트 속성에 저장되어 있으면 미리 입력하기)

3. 학생의 이름을 불러와 이름별로 '학업에 관하여 (상, 중, 하), 교우관계에 관하여 (원만, 보통)'을 선택할 수 있게 라디오버튼을 만들어주고, 성격에 관하여 (명랑, 사교, 긍정, 친절, 이해, 끈기, 성실, 협력, 배려, 차분, 내향, 봉사, 주관, 솔선수범)' 을 선택할 수 있는 항목을 만들어서 체크할 수 있게 체크박스 버튼을 만들어줘.

4. 학생별로 선택이 끝나고 ai 결과 생성이라고 누르면

5. 학생이름이 작성된 스프레드시트의 B열에서 학생의 이름 옆에 결과가 작성되도록 해줘.

필수: gemini api를 사용할 때에는 "gemini-2.5-flash-lite-preview-06-17" 모델을 사용해야 합니다.

03 prd.md 문서 예시

workergonyo1 — 2025-07-16 03:33:19 UTC

제품명: Content Digest

1. 개요

안녕하세요! AI 코딩의 세계에 오신 것을 환영합니다. 이번에는 구글 앱스 스크립트라는 도구를 사용해서 나만의 멋진 웹 앱을 만들어 볼 거예요. 이 앱의 이름은 'Content Digest'로, 구글 스프레드시트에 있는 학생들의 정보를 AI의 도움을 받아 보기 좋게 요약해 주는 똑똑한 도우미입니다. 복잡하게 생각할 필요 없이, 아래의 할 일(to-do) 목록을 따라가기만 하면 된답니다!

2. 기능 요구 사항

스프레드시트 연동: 사용자가 입력한 구글 스프레드시트 URL에서 첫 번째 열(A열)에 있는 학생들의 이름을 자동으로 불러와야 합니다.
API 키 관리: AI와 소통하기 위한 Gemini API 키를 입력할 수 있는 공간이 있어야 합니다. 키를 미리 등록해 두면 앱을 열 때 자동으로 입력되어 편리하게 사용할 수 있도록 합니다.
동적 사용자 인터페이스(UI) 생성:
- 불러온 학생들의 이름이 화면에 자동으로 나타나야 합니다.
- 학생 이름별로 '학업' (상, 중, 하)과 '교우관계' (원만, 보통)를 선택할 수 있는 라디오 버튼이 각각 만들어져야 합니다.
- '성격'에 대한 여러 항목(명랑, 사교, 긍정, 친절, 이해, 끈기, 성실, 협력, 배려, 차분, 내향, 봉사, 주관, 솔선수범)은 여러 개를 동시에 선택할 수 있도록 체크박스 버튼이 만들어져야 합니다.
AI 결과 생성: 모든 학생의 정보를 선택한 후 'AI 결과 생성' 버튼을 누르면, 입력된 정보와 API 키를 사용하여 AI가 멋진 요약글을 만들어주도록 합니다.
결과 저장: AI가 만든 요약글은 원래 스프레드시트의 두 번째 열(B열)에 해당 학생의 이름 옆에 자동으로 저장되어야 합니다.

3. 할 일(to-do)

[ ] HTML 파일 만들기 (사용자 화면 디자인):
- 스프레드시트 URL과 API 키를 입력할 수 있는 입력창을 만듭니다.
- 학생 이름과 그 옆에 '학업', '교우관계', '성격' 선택 버튼들이 나타날 공간을 만듭니다.
- 가장 아래에 'AI 결과 생성' 버튼을 만듭니다.
[ ] Google Apps Script (GS) 파일 만들기 (프로그램 로직):
- doGet() 함수: 웹 앱이 처음 실행될 때 HTML 파일을 보여주는 함수를 작성합니다.
- getStudentNames() 함수: HTML에서 입력받은 스프레드시트 URL을 읽어와서 학생 이름 목록을 다시 HTML로 보내주는 코드를 작성합니다.
- generateAIResult() 함수:
  - HTML에서 입력받은 API 키와 각 학생별로 선택된 정보를 모두 가져옵니다.
  - 만약 프로젝트 속성에 API 키가 저장되어 있으면 먼저 가져오는 로직을 추가합니다.
  - 가져온 정보를 바탕으로 Gemini API에 요청을 보내는 코드를 작성합니다.
  - API로부터 받은 결과를 처리하는 코드를 작성합니다.
  - 결과를 원래 스프레드시트의 B열에 학생 이름 옆에 씁니다.
[ ] HTML과 GS 파일 연결하기:
- 버튼을 누르면 GS 파일의 함수가 실행되도록 연결하는 코드를 작성합니다.
- GS 파일과 HTML이 서로 데이터를 주고받을 수 있도록 코드를 작성합니다.
[ ] 웹 앱 배포하기:
- 코딩이 끝나면 구글 Apps Script에서 웹 앱으로 배포하여 다른 사람들이 사용할 수 있게 합니다.

Nsmc.exe

workergonyo1 — 2025-07-16 04:19:35 UTC