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

지식샘터

강의자료

[지식샘터 코딩게임(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/)

For the site tree, see the [root Markdown](https://slashpage.com/techkwon.md).