(20260428) 지식샘터-코딩 0초! 나노바나나 게임 만들기

Fri, 10 Apr 2026 05:55:50 GMT

지식샘터

강의자료

[지식샘터 코딩게임(1월)](https://docs.google.com/presentation/d/1gj_U19cdNcREnHSCraBhrCOgrk0MkxXVMgqy7FQFur4/edit?usp=sharing)

> 제미나이

- 제미나이 접속하기

[‎Google Gemini](https://gemini.google.com/app)

수업 자료 생성하기 실습

```
내가 가르치는 [학년/과목]에서 [단원명] 수업 도입 활동으로 사용할 수 있는 아이디어 3가지를 제안해줘. 각 활동은 5분 이내로 진행 가능해야 하고, 학생들의 흥미를 끌 수 있어야 해."
```

> 나노바나나

수업 자료 이미지 생성

```
"[학년/과목] 수업에서 [주제]를 설명하기 위한 교육 자료 이미지를 만들어줘. [원하는 스타일]로, [색상/분위기]하게 그려줘."

```

> 성공한 백엔드 코드

```
/**
* [OX 퀴즈 백엔드 API]
* 작성자: Tech Kwon's Partner
* 기능: 문제 데이터 제공(GET) 및 결과 저장(POST)
*/

// ==========================================
// 1. 설정 영역 (Configuration)
// ==========================================
const SHEET_QUIZ = "문제은행"; // 문제 시트 이름
const SHEET_RESULT = "활동결과"; // 결과 저장 시트 이름

// ==========================================
// 2. GET 요청 처리: 문제 데이터 가져오기
// ==========================================
function doGet(e) {
// 요청 파라미터 확인 (예: ?code=1234)
const params = e.parameter;
const searchCode = params.code;

// 코드가 없으면 에러 반환
if (!searchCode) {
return responseJSON({ result: "error", message: "참여 코드가 없습니다." });
}

try {
const ss = SpreadsheetApp.getActiveSpreadsheet();
const sheet = ss.getSheetByName(SHEET_QUIZ);

// 데이터 범위 가져오기 (헤더 제외하고 데이터만 처리)
const lastRow = sheet.getLastRow();
if (lastRow < 2) {
return responseJSON({ result: "error", message: "등록된 문제가 없습니다." });
}

// A열(코드)부터 D열(정답)까지 데이터 가져오기
// getValues()는 2차원 배열을 반환합니다. [[Code, "", Question, Answer], ...]
const data = sheet.getRange(2, 1, lastRow - 1, 4).getValues();

// 코드(A열, 인덱스 0)가 일치하는 행만 필터링
// map을 사용하여 필요한 데이터(문제, 정답)만 추출
// 구조: A(0), B(1), C(2:문제), D(3:정답)
const quizList = data
.filter(row => String(row[0]) === String(searchCode)) // 코드 일치 여부 확인 (문자열 비교)
.map(row => ({
q: row[2], // C열: 문제
a: row[3] // D열: 정답 (O/X)
}));

// [보안] 일치하는 코드가 하나도 없으면 에러 반환
if (quizList.length === 0) {
return responseJSON({ result: "error", message: "유효하지 않은 참여코드입니다." });
}

// 성공 시 JSON 배열 반환
return responseJSON(quizList);

} catch (err) {
// 서버 내부 오류 처리
return responseJSON({ result: "error", message: err.toString() });
}
}

// ==========================================
// 3. POST 요청 처리: 점수 저장하기
// ==========================================
function doPost(e) {
try {
// 전달받은 JSON 데이터 파싱
// 내용: { "code": "...", "name": "...", "score": 100 }
const postData = JSON.parse(e.postData.contents);

const code = postData.code;
const name = postData.name;
const score = postData.score;

const ss = SpreadsheetApp.getActiveSpreadsheet();
const sheet = ss.getSheetByName(SHEET_RESULT);

// 현재 시간 (KST 포맷)
const timestamp = Utilities.formatDate(new Date(), "GMT+9", "yyyy-MM-dd HH:mm:ss");

// 시트에 행 추가 [날짜, 코드, 이름, 점수]
sheet.appendRow([timestamp, code, name, score]);

// 성공 응답 반환
return responseJSON({ result: "success" });

} catch (err) {
return responseJSON({ result: "error", message: err.toString() });
}
}

// ==========================================
// 4. 유틸리티: JSON 응답 생성 헬퍼 함수
// ==========================================
function responseJSON(data) {
return ContentService.createTextOutput(JSON.stringify(data))
.setMimeType(ContentService.MimeType.JSON);
}

/**
* [배포 가이드]
* 1. 우측 상단 '배포(Deploy)' > '새 배포(New deployment)' 클릭
* 2. 유형 선택: '웹 앱(Web app)'
* 3. 설명: 'OX 퀴즈 API v1' 등 입력
* 4. 다음 사용자 권한으로 실행(Execute as): '나(Me)' (교사 계정 권한으로 시트에 접근)
* 5. 액세스 권한(Who has access): ★'누구나(Anyone)'★ 선택 (학생들이 로그인 없이 접근 가능하게 함)
* 6. '배포(Deploy)' 클릭 후 생성된 '웹 앱 URL'을 복사해서 사용하세요.
*/

```

> 바이브코딩

딸깍 게임 리스트

https://docs.google.com/spreadsheets/d/1F6IY6BIGrMOBSPXhtDMKDgdReO3A5JfWr4XoZvXyvLg/edit?gid=0#gid=0

> 구글 사이트

[Google Drive: Sign-in](https://sites.google.com/)