ChatGPT와 함께 만드는 자바스크립트 건축 교실

2025년 9월 18일 목요일

2025 0918 부산시교육청 apps script 바이브코딩 왕초보버전 직무연수 참고자료

2025 0918 부산시교육청 apps script 바이브코딩 직무연수 참고자료

<실습 1>

사과=apple

🟢 Code.gs


function doGet() {
  return HtmlService.createHtmlOutputFromFile('index');
}

// 답안 확인하고 시트에 기록
function checkAnswer(answer, name) {
  const correctAnswer = "apple"; // 정답 고정
  const question = "사과는 영어로?";

  // 정답 여부 판정
  let result = (answer.toLowerCase().trim() === correctAnswer) ? "정답" : "오답";

  // 현재 스프레드시트 가져오기
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const sheet = ss.getSheetByName("기록") || ss.insertSheet("기록");

  // 기록 저장: 날짜, 이름, 문제, 제출 답, 결과
  sheet.appendRow([new Date(), name, question, answer, result]);

  return result;
}

🟢 index.html


<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h2>단어 퀴즈</h2>
    <p>문제: 사과는 영어로?</p>

    <label>이름: <input type="text" id="name"></label><br><br>
    <label>정답: <input type="text" id="answer"></label><br><br>
    <button onclick="submitAnswer()">제출</button>

    <p id="result"></p>

    <script>
      function submitAnswer() {
        const name = document.getElementById("name").value;
        const answer = document.getElementById("answer").value;

        google.script.run.withSuccessHandler(function(res) {
          document.getElementById("result").innerText = "결과: " + res;
        }).checkAnswer(answer, name);
      }
    </script>
  </body>
</html>

https://sheets.new

<실습 2>

현재는 문제가 1문제이고, 문제를 바꾸려면 매번 소스를 다시 수정해야 하는 점이 불편해. 웹 페이지에 내가 준비한 여러가지 문제를 내고 싶어. 문제와 정답은 스프레드시트에 입력해 줄게. 그리고 학생들이 문제를 풀면 점수도 화면에 출력되게 하고 싶어. 스프레드시트에는 학생들의 성적이 기록되게 하고 싶어.

🟢 Code.gs


function doGet() {
  return HtmlService.createHtmlOutputFromFile('index');
}

// 문제 불러오기
function getQuestions() {
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const sheet = ss.getSheetByName("문제");
  const data = sheet.getDataRange().getValues(); // 전체 불러오기
  const headers = data.shift(); // 첫 행(헤더) 제거
  return data.map(row => ({ 
    number: row[0], 
    question: row[1], 
    answer: row[2] 
  }));
}

// 답안 채점
function submitAnswers(answers, name) {
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const qSheet = ss.getSheetByName("문제");
  const data = qSheet.getDataRange().getValues();
  data.shift(); // 헤더 제거

  let score = 0;
  let correctCount = 0;

  data.forEach((row, idx) => {
    const correct = String(row[2]).toLowerCase().trim();
    const studentAnswer = String(answers[idx] || "").toLowerCase().trim();
    if (studentAnswer === correct) {
      score += 1;
      correctCount += 1;
    }
  });

  // 성적 시트에 기록
  const sSheet = ss.getSheetByName("성적") || ss.insertSheet("성적");
  sSheet.appendRow([new Date(), name, score, data.length, correctCount]);

  return { score: score, total: data.length, correct: correctCount };
}

🟢 index.html


<!DOCTYPE html>
<html>
  <head><base target="_top"></head>
  <body>
    <h2>단어 퀴즈</h2>
    <label>이름: <input type="text" id="name"></label>
    <div id="quiz"></div>
    <button onclick="submit()">제출</button>
    <p id="result"></p>

    <script>
      let questions = [];

      // 문제 불러오기
      google.script.run.withSuccessHandler(function(res) {
        questions = res;
        const quizDiv = document.getElementById("quiz");
        res.forEach((q, i) => {
          quizDiv.innerHTML += `
            <p>${q.number}. ${q.question}</p>
            <input type="text" id="q${i}">
          `;
        });
      }).getQuestions();

      // 제출
      function submit() {
        const name = document.getElementById("name").value;
        const answers = questions.map((q, i) => document.getElementById("q"+i).value);

        google.script.run
          .withSuccessHandler(function(res) {
            document.getElementById("result").innerText =
              `점수: ${res.score}/${res.total} (맞힌 문제: ${res.correct})`;
          })
          .withFailureHandler(function(err) {
            document.getElementById("result").innerText = "⚠ 오류: " + err.message;
          })
          .submitAnswers(answers, name);
      }
    </script>
  </body>
</html>

번호	문제	정답
1	한글을 창제하여 우리 글자를 만들고, 집현전을 설치해 학문을 발전시킨 왕은 누구일까요?	세종대왕
2	임진왜란 때 거북선을 만들고 명량대첩에서 큰 승리를 거둔 장군은 누구일까요?	이순신
3	고려 시대 무신 집권기에 몽골과 싸우며 삼별초를 이끌었던 장군은 누구일까요?	김윤후
4	신라 시대에 삼국을 통일하고 화랑도를 발전시킨 왕은 누구일까요?	김춘추(태종 무열왕)
5	조선 중기의 여류 시인으로, 뛰어난 문장과 글씨로 유명했던 인물은 누구일까요?	신사임당
6	고려를 건국하고 송악에 도읍을 정한 왕은 누구일까요?	왕건
7	조선 후기 실학자로 『목민심서』를 저술한 사람은 누구일까요?	정약용
8	발해를 건국한 사람은 누구일까요?	대조영
9	신라 최초의 여왕으로 나라를 안정적으로 다스린 인물은 누구일까요?	선덕여왕
10	조선 전기의 충신으로, 단종을 지키려다 사육신으로 불린 인물 중 한 명은 누구일까요?	성삼문

2025년 9월 9일 화요일

마을 프로젝트 (여러 채의 집 이어 붙이기)

집 하나만 있어도 멋지지만, 여러 채의 집이 모이면 마을이 됩니다.
이번에는 앞에서 만든 집 코드를 함수로 묶어서, 여러 위치에 반복해서 불러와 마을을 만들어 볼 거예요.

코드 예시 💻

// 플레이어 위치 불러오기

let player = world.getPlayers()[0];

let pos = player.location;

// 집 크기

let width = 7;

let height = 5;

let depth = 7;

// 집 만드는 함수

function buildHouse(baseX, baseY, baseZ, blockType) {

// 벽 만들기

for (let y = 0; y < height; y++) {

for (let x = 0; x < width; x++) {

for (let z = 0; z < depth; z++) {

if (x === 0 || x === width - 1 || z === 0 || z === depth - 1) {

let newPos = { x: baseX + x, y: baseY + y, z: baseZ + z };

world.setBlock(newPos, blockType);

}

// 지붕

for (let x = 0; x < width; x++) {

for (let z = 0; z < depth; z++) {

let roofPos = { x: baseX + x, y: baseY + height, z: baseZ + z };

world.setBlock(roofPos, "wood");

}

// 마을 만들기 (집 여러 채 반복)

for (let i = 0; i < 3; i++) {

for (let j = 0; j < 2; j++) {

let offsetX = pos.x + (i * (width + 3));

let offsetZ = pos.z + (j * (depth + 3));

buildHouse(offsetX, pos.y, offsetZ, "stone");

}

무슨 뜻일까? 🤔

buildHouse(...) → 집 짓는 코드를 함수로 만들어서 필요할 때마다 호출해요.
for (let i, j) → 반복문 2개를 사용해, 집을 행렬처럼 배치해요.
offsetX, offsetZ → 집이 겹치지 않도록 가로·세로 간격을 주었어요.

결과: 돌(stone) 블록으로 된 집들이 규칙적으로 배열되어, 작은 마을이 완성돼요!

챗GPT에게 부탁하기 💬

나:

마인크래프트에서 자바스크립트로 여러 채의 집을 반복해서 배치해 작은 마을을 만드는 코드를 알려줘

챗GPT:
“이 코드를 실행하면 집 여러 채가 모여 작은 마을이 생겨요!”

실습 미션 🎯

집의 블록 종류를 "stone", "wood", "bricks"로 다양하게 바꿔 보세요.
집 간격을 +3 대신 +5로 바꿔 더 넓은 마을을 만들어 보세요.
마을 한가운데 "fountain" 블록(예: 물로 만든 분수)을 설치해 보세요.

마당과 길 만들기

집이 완성되었으니, 이제 주변도 멋지게 꾸며야겠죠?
이번에는 집 앞에 마당을 꾸미고, 길을 만들어서 나만의 공간을 완성해 봅시다.

코드 예시 💻

// 플레이어 위치 불러오기

let player = world.getPlayers()[0];

let pos = player.location;

// 마당 바닥 만들기 (잔디)

let yardWidth = 12;

let yardDepth = 12;

for (let x = 0; x < yardWidth; x++) {

for (let z = 0; z < yardDepth; z++) {

let yardPos = { x: pos.x - 2 + x, y: pos.y, z: pos.z - 2 + z };

world.setBlock(yardPos, "grass_block");

}

// 길 만들기 (집 앞에서 마당 입구까지)

for (let z = 0; z < 8; z++) {

let pathPos = { x: pos.x + 3, y: pos.y, z: pos.z - z };

world.setBlock(pathPos, "cobblestone");

}

무슨 뜻일까? 🤔

grass_block → 마당 바닥은 풀 블록으로 깔았어요.
yardWidth / yardDepth → 마당 크기를 정해요. (12×12 크기)
cobblestone → 집 문 앞에서 마당 입구까지 길을 돌로 만들어요.

결과: 집 앞에 넓은 초록 마당이 생기고, 그 위로 돌길이 쭉 연결돼요!

챗GPT에게 부탁하기 💬

나:

마인크래프트에서 자바스크립트로 집 앞에 마당을 만들고 길을 이어주는 코드를 알려줘

챗GPT:
“이 코드를 실행하면 집 앞에 풀밭 마당과 돌길이 생겨요!”

실습 미션 🎯

길을 "stone_bricks"로 바꿔서 튼튼하게 만들어 보세요.
길 양쪽에 "torch"를 세워 가로등처럼 꾸며 보세요.
마당에 "flower" 블록을 심어서 정원을 만들어 보세요.

실내 꾸미기 (침대·책장·등불 넣기)

집은 지었지만 아직 비어 있네요.
이제 안에 침대, 책장, 등불을 넣어서 진짜로 살 수 있는 공간처럼 꾸며 봅시다!

코드 예시 💻

// 플레이어 위치 불러오기

let player = world.getPlayers()[0];

let pos = player.location;

// 침대 설치 (1층 한쪽 구석)

let bedPos = { x: pos.x + 2, y: pos.y + 1, z: pos.z + 2 };

world.setBlock(bedPos, "red_bed");

// 책장 설치 (벽 한쪽)

for (let y = 1; y <= 3; y++) {

let shelfPos = { x: pos.x + 5, y: pos.y + y, z: pos.z + 2 };

world.setBlock(shelfPos, "bookshelf");

}

// 등불 설치 (천장 중앙)

let lampPos = { x: pos.x + 3, y: pos.y + 5, z: pos.z + 3 };

world.setBlock(lampPos, "lantern");

무슨 뜻일까? 🤔

"red_bed" → 빨간 침대를 설치해요.
"bookshelf" → 벽을 따라 책장을 3칸 높이로 쌓아요.
"lantern" → 집 천장 중앙에 등불을 달아 환하게 밝혀요.

결과: 집 안에 침대가 있고, 옆에는 책장이 있고, 위에는 불빛이 켜져서 아늑한 집이 돼요.

챗GPT에게 부탁하기 💬

나:

마인크래프트에서 자바스크립트로 집 안에 침대, 책장, 등불을 넣는 코드를 알려줘

챗GPT:
“이 코드를 실행하면 집 안이 따뜻하고 아늑한 공간으로 꾸며져요!”

실습 미션 🎯

침대 색을 "blue_bed"로 바꿔 보세요.
책장을 양쪽 벽에 더 설치해 보세요.
등불 대신 "torch"를 여러 개 달아 보세요.

발코니와 난간 만들기

2층 집을 더 멋지게 꾸미고 싶다면? 바로 발코니예요!
발코니는 2층 벽 바깥쪽으로 튀어나온 공간이고, 떨어지지 않게 난간을 둘러주면 완성됩니다.

코드 예시 💻

// 플레이어 위치 불러오기

let player = world.getPlayers()[0];

let pos = player.location;

// 발코니 크기

let width = 5;

let depth = 3;

let floorY = pos.y + 6; // 2층 바닥 높이

// 발코니 바닥 만들기

for (let x = 0; x < width; x++) {

for (let z = 0; z < depth; z++) {

let floorPos = { x: pos.x + x + 1, y: floorY, z: pos.z - z };

world.setBlock(floorPos, "birch_planks");

}

// 난간 만들기

for (let x = 0; x < width; x++) {

let railPos = { x: pos.x + x + 1, y: floorY + 1, z: pos.z - depth + 1 };

world.setBlock(railPos, "fence");

}

for (let z = 0; z < depth; z++) {

let leftRail = { x: pos.x + 1, y: floorY + 1, z: pos.z - z };

let rightRail = { x: pos.x + width, y: floorY + 1, z: pos.z - z };

world.setBlock(leftRail, "fence");

world.setBlock(rightRail, "fence");

}

무슨 뜻일까? 🤔

floorY = pos.y + 6 → 집의 2층 높이에 맞춰 발코니 바닥을 만들어요.
birch_planks → 발코니 바닥은 밝은 색 나무로 꾸몄어요.
fence → 발코니 가장자리에 울타리를 두르면 난간이 돼요.

결과: 집 앞 2층에 발코니가 생기고, 난간이 둘러져 있어서 떨어지지 않아요!

챗GPT에게 부탁하기 💬

나:

마인크래프트에서 자바스크립트로 2층 집에 발코니와 난간을 만드는 코드를 알려줘

챗GPT:
“이 코드를 실행하면 집 앞에 발코니가 생기고, 울타리 난간이 자동으로 설치돼요!”

실습 미션 🎯

발코니 바닥을 "stone_bricks"로 바꿔서 돌 발코니로 만들어 보세요.
난간을 "iron_bars"로 바꿔서 튼튼한 느낌을 내 보세요.
발코니 모서리에 "torch"를 달아서 밤에도 밝게 빛나게 해 보세요.

* 목차 *

2025년 9월 18일 목요일

🟢 Code.gs

🟢 index.html

🟢 Code.gs

🟢 index.html

2025년 9월 9일 화요일

마을 프로젝트 (여러 채의 집 이어 붙이기)

코드 예시 💻

무슨 뜻일까? 🤔

챗GPT에게 부탁하기 💬

실습 미션 🎯

마당과 길 만들기

코드 예시 💻

무슨 뜻일까? 🤔

챗GPT에게 부탁하기 💬

실습 미션 🎯

실내 꾸미기 (침대·책장·등불 넣기)

코드 예시 💻

무슨 뜻일까? 🤔

챗GPT에게 부탁하기 💬

실습 미션 🎯

발코니와 난간 만들기

코드 예시 💻

무슨 뜻일까? 🤔

챗GPT에게 부탁하기 💬

실습 미션 🎯