Week 3

정적 웹사이트 기반
과학 콘텐츠 만들기 2

코드 고도화, 게이미피케이션 이론, 그리고 웹 배포

담당교수: 가석현

에너지영역탐구

지난주 리뷰 & 오늘의 목표

지난주 리뷰

Vibe 코딩을 활용하여 수평 잡기 시뮬레이션의 기본 HTML/CSS/JS 뼈대를 단일 파일로 생성하고 VS Code로 확인했습니다.

오늘의 목표

1. 이론: 과학교육에서 Gamification(게임화)의 가치 이해하기
2. 실습 1: 지난주 코드를 디버깅하고 게임적 요소 추가하기
3. 실습 2: Cloudflare Pages를 통해 나만의 고유 링크 배포하기

이미지 파일명: images/week3_obj.png

Prompt: A split screen illustration. Left side shows a balance scale simulation. Right side shows a glowing rocket launching a website to the cloud

게이미피케이션(Gamification)이란?

“Gamification is the use of game design elements in non-game contexts.”

- Deterding et al. (2011, p. 9) -

단순 시뮬레이션

자연 현상을 모방하여 조작하는 환경

• 명확한 ‘목표’가 없음
• 성공/실패의 개념이 모호함
• 흥미가 금방 떨어질 수 있음

게임 디자인 요소 추가

게임화된 시뮬레이션

시뮬레이션에 목표, 제약, 보상을 부여

• 달성해야 할 미션 존재
• 즉각적인 피드백 (점수, 효과음)
• 능동적인 참여 및 반복 학습 유도

Reference: Deterding, S., Dixon, D., Khaled, R., & Nacke, L. (2011). From game design elements to gamefulness: Defining gamification. Proceedings of the 15th International Academic MindTrek Conference, 9-15. https://doi.org/10.1145/2181037.2181040

과학교육에서의 Gamification 필요성

왜 굳이 과학 탐구에 ‘게임’ 요소를 넣어야 할까요?

1. 강력한 학습 동기 부여

어려운 과학 공식을 단순 암기하는 것이 아니라, 미션을 클리어하기 위한 ‘무기’로 인식하게 만들어 자발적인 학습 동기를 유발합니다. (Kapp, 2012)

2. 실패에 대한 두려움 감소

게임에서의 ‘Game Over’는 심리적 유예(Psychosocial moratorium)를 제공하여, 오답을 두려워하지 않고 끊임없이 가설을 세우고 검증(Trial & Error)하게 합니다. (Gee, 2003)

3. 몰입과 참여도 향상

점수, 랭킹, 시각적 보상 시스템은 수동적으로 수업을 듣던 학생들을 화면 앞으로 끌어당겨 실험 조작에 적극적으로 참여하게 만듭니다. (Hamari et al., 2014)

References: Gee, J. P. (2003). What video games have to teach us about learning and literacy. Computers in Entertainment (CIE), 1(1), 20-20. https://doi.org/10.1145/950566.950595
Hamari, J., Koivisto, J., & Sarsa, H. (2014). Does gamification work?--a literature review of empirical studies on gamification. 2014 47th Hawaii International Conference on System Sciences, 3025-3034. https://doi.org/10.1109/HICSS.2014.377

이론적 기반 1: PBL Triad

가장 기초적이고 대표적인 게임화 설계 요소 (Werbach & Hunter, 2012)

행동주의(Behaviorism) 심리학의 조작적 조건형성(외재적 보상)에 이론적 기반을 둠

Points (점수)

학습자의 행동(문제 풀이, 실험 성공)에 대한 즉각적이고 정량적인 보상. 진행 상황을 시각화합니다.

Badges (배지)

특정 목표 달성(예: 10회 연속 수평 맞추기) 시 부여되는 시각적 증표. 컬렉션 욕구를 자극합니다.

Leaderboards (순위표)

자신의 위치를 타인과 비교. 사회적 경쟁과 협력을 유도합니다. (DB 연동 시 구현 가능)

Reference: Werbach, K., & Hunter, D. (2012). For the win: How game thinking can revolutionize your business. Wharton Digital Press. https://www.amazon.com/Win-Game-Thinking-Revolutionize-Business/dp/1613630239

이론적 기반 2: 행동주의 vs 구성주의 관점

PBL(점수, 배지)만 무작정 넣으면 성공적인 교육이 될까요? 그렇지 않습니다. (Kapp, 2012)

행동주의적 게임화 (한계점)

외재적 보상(점수 받기)에만 집착하게 됨
보상이 사라지면 학습 동기도 즉시 소멸됨
과학적 원리 이해보다 ‘꼼수’로 점수만 올리려 함

구성주의적 게임화 (우리의 지향점)

보상 자체가 아니라 ‘의미 있는 경험’을 제공
수평이 맞았을 때 방정식(a×c=b×d)이 실시간으로 증명되는 것을 시각적으로 보여줌
학습자가 세계(시뮬레이션)를 조작하며 원리를 스스로 구성

Reference: Kapp, K. M. (2012). The gamification of learning and instruction: Game-based methods and strategies for training and education. John Wiley & Sons. https://books.google.co.kr/books?hl=ko&lr=&id=M2Rb9ZtFxccC

이론적 기반 3: 동기 이론 (SDT)

이미지 파일명: images/sdt_theory.png

Prompt: A diagram showing Self-Determination Theory with three overlapping circles: Autonomy, Competence, Relatedness.

외재적 보상을 넘어 ‘내재적 동기’로 (Ryan & Deci, 2000)

자율성 (Autonomy)

정해진 답을 외우는 것이 아니라, 학생 스스로 변수를 통제하고 실험 방향(물체의 위치와 개수)을 결정할 수 있는 환경 제공

유능성 (Competence)

점진적으로 어려워지는 미션과 즉각적인 피드백(정답 확인)을 통해 “내가 해냈다”는 성취감과 통제력 부여

관계성 (Relatedness)

추후 DB 연동 시 랭킹 시스템이나 친구들의 기록을 공유하며 학습 공동체 소속감 증진

Reference: Ryan, R. M., & Deci, E. L. (2000). Self-determination theory and the facilitation of intrinsic motivation, social development, and well-being. American Psychologist, 55(1), 68-78. https://doi.org/10.1037/0003-066X.55.1.68

이론적 기반 4: Flow 이론 (몰입)

도전과 능력의 완벽한 균형점

학습자가 과제에 온전히 빠져드는 ‘몰입(Flow)’ 상태는 과제의 난이도(도전)와 학습자의 수준(능력)이 적절히 균형을 이룰 때 발생합니다. (Csikszentmihalyi, 1990)

능력 < 난이도: 문제가 너무 어려우면 학생은 불안(Anxiety)과 좌절을 느낍니다.
능력 > 난이도: 문제가 너무 쉬우면 학생은 금방 지루함(Boredom)을 느낍니다.
능력 = 난이도: 점진적으로 어려워지는 레벨 디자인을 통해 몰입 채널(Flow Channel)을 유지해야 합니다.

이미지 파일명: images/flow_theory.png

Prompt: A chart showing Flow theory by Csikszentmihalyi, X-axis Skills, Y-axis Challenges, with Anxiety, Flow, and Boredom zones

Reference: Csikszentmihalyi, M. (1990). Flow: The psychology of optimal experience. Harper Perennial. https://www.amazon.com/Flow-Psychology-Experience-Perennial-Classics/dp/0061339202

이론에서 실전으로: 성공적인 게임화 설계 4대 원칙

앞서 배운 4가지 이론을 AI 프롬프트 작성 시 어떻게 적용해야 할까요?

1

보상은 '거들 뿐' (행동주의 지양)

점수(PBL)를 남발하지 마세요. 과학 원리(수평 맞추기)를 이해하는 것 자체가 의미 있는 경험(구성주의)이 되도록 프롬프트를 설계하세요.

2

자유로운 실험실 제공 (SDT-자율성)

정해진 미션만 풀게 하지 말고, 언제든 학생들이 원하는 무게와 거리를 마음대로 조작해 볼 수 있는 '자유 탐구 모드'를 반드시 포함하세요.

3

점진적 난이도 조절 (Flow 이론)

AI에게 “레벨 1은 한 개의 추만, 레벨 2는 두 개의 추를 사용하는 등 점진적으로 난이도가 올라가는 랜덤 문제 시스템을 만들어줘”라고 지시하세요.

4

불안(Anxiety)을 막는 피드백 (심리적 유예와 Flow)

틀렸을 때 단순히 “Game Over” 처리만 하면 학생은 좌절(Flow 이탈)합니다. “오른쪽이 너무 무겁네요! 거리를 줄여볼까요?”와 같이 심리적 유예를 돕고 재도전을 유도하는 피드백을 프롬프트에 넣으세요.

[실습 1-1] 내 시뮬레이션 코드 진단 및 디버깅

지난주 코드, 완벽하신가요?

AI가 만들어준 초기 코드는 작동은 하지만 교육 현장에 바로 쓰기에는 투박하고 논리적 허점이 있을 수 있습니다. 학생의 눈높이에서 불편한 점을 찾아 AI에게 수정을 요청해야 합니다.

흔히 발생하는 UX/물리 엔진 문제점

- 무게 조절 슬라이더가 너무 작아서 터치하기 힘듦
- 왼쪽, 오른쪽 물체의 색상 구분이 안 됨
- 현재 양쪽의 모멘트(무게×거리) 값이 화면에 보이지 않음
- 막대가 기울어질 때 애니메이션이 뚝뚝 끊김

Debugging

User: "오른쪽 물체의 조작 슬라이더가 왼쪽에 있어서 직관적이지 않아. 오른쪽 슬라이더는 화면 오른쪽에 배치해줘."

AI: "네, 알겠습니다. CSS의 Flexbox를 수정하여 양쪽 조작 패널을 좌우로 분리했습니다. 코드는 아래와 같습니다..."

[실습 1-2] Vibe 코딩을 통한 UI 및 디자인 개선

AI에게 "더 예쁘게 해줘"라는 모호한 말보다, 구체적인 메타포와 요구사항을 주어야 합니다.

복사하기

기존의 수평 잡기 시뮬레이션 코드의 논리는 그대로 유지하되, 초등학생들이 좋아할 만한 디자인으로 UI를 전면 개편해 줘.

- 전체 배경은 따뜻한 파스텔 톤으로 변경
- 버튼은 입체적이고 둥근 모양(Glassmorphism 스타일)으로 적용하고 호버 애니메이션 추가
- 화면 상단 중앙에 현재 왼쪽과 오른쪽의 "무게 × 거리 = 값" 공식을 실시간 텍스트로 보여주는 대시보드 추가
- 모든 폰트는 귀여운 고딕 스타일 적용

[실습 1-3] 시뮬레이션에 '게임 규칙' 입히기

이미지 파일명: images/game_ui_concept.png

Prompt: A user interface design for an educational physics game about a balance scale, showing score, a timer, and a 'Mission' text box.

이제 앞서 배운 이론(SDT, Flow, PBL)을 적용합니다.

자유 탐구 모드와 더불어, '문제 풀이 모드(미션)'를 추가해 달라고 AI에게 요청합니다.

랜덤 미션 생성 (Flow 이론 적용)

난이도를 점진적으로 올리는 문제 출제 로직 추가
“왼쪽 3번 칸에 2개의 상자가 있습니다. 수평을 맞추세요!”

스코어 시스템 (PBL 적용)

정답을 맞추면 10점 획득, 시각적인 폭죽(Confetti) 이펙트 추가

타이머 제약 (선택)

60초 안에 최대한 많은 수평을 맞추도록 긴장감 부여

안전한 프롬프트 작성 공식

초보자의 가장 큰 실수

"게임 기능 추가해줘"라고만 하면, AI가 기존의 물리 로직이나 힘들게 맞춰놓은 디자인을 제멋대로 덮어씌워 멀쩡하던 기능이 고장 나는 경우가 많습니다.

안전한 프롬프트 패턴

[제약조건] 기존의 전체 UI 레이아웃 구조와 각 버튼의 ID값은 절대 변경하지 마. 기존 코드는 그대로 둔 상태에서...

[추가할 기능] 기존 코드의 아래쪽에 '미션 모드'를 토글할 수 있는 버튼을 만들고, 버튼을 누르면 다음 자바스크립트 로직(랜덤 문제 생성 등)이 작동하게만 코드를 덧붙여줘.
1. ...
2. ...

학생의 시각에서 플레이 테스트 (Playtest)

개발자 마인드에서 교사 마인드로

코드가 에러 없이 돌아간다고 끝이 아닙니다. 실제 교실에서 초등학생이 이 화면을 봤을 때 직관적으로 무엇을 해야 할지 알 수 있는지 점검하세요.

미션의 텍스트가 너무 길거나 어렵지 않은가?
정답을 맞췄을 때 확실한 시각/청각적 보상이 있는가?
오답일 때, 왜 틀렸는지 힌트(스캐폴딩)를 주는가?

이미지 파일명: images/student_playtest.png

Prompt: A young student looking at a laptop screen with a bright smile, interacting with a physics game

내 컴퓨터 밖으로: 정적 웹 호스팅의 이해

지금까지 만든 HTML 파일은 '내 노트북'에서만 열립니다. 학생들에게 주려면?

Localhost (현재)

C:\Users\Desktop\index.html

파일을 USB에 담아 학생 태블릿에 하나하나 옮겨야 함. (현실성 0%)

Hosting (업로드)

Web Server (목표)

https://my-science.pages.dev

인터넷 창에 주소만 치면 세상 누구나 접속 가능!

Wow!

왜 Cloudflare Pages 인가?

웹을 배포하는 수많은 서비스(GitHub Pages, Vercel 등) 중 교사를 위한 최고의 선택

100% 무료 & 트래픽 무제한

대규모 트래픽 무제한(Unlimited) 지원. 학급 전체가 동시에 접속해도 끄떡없이 평생 무료로 사용 가능합니다.

자동 HTTPS 보안

올리기만 하면 자동으로 자물쇠 마크(보안)가 붙어 까다로운 학교 네트워크 방화벽에 막히지 않습니다.

초보자용 드래그 앤 드롭

복잡한 터미널 명령어(Git) 없이 폴더를 마우스로 끌어다 놓기만 하면 즉시 배포됩니다.

미래 확장성 (중요)

다음 주부터 배울 DB 연동(D1, Workers)을 같은 플랫폼 안에서 가장 쉽게 구현할 수 있습니다.

[실습 2-1] Cloudflare 가입 및 언어 설정

Step 1. 회원가입

dash.cloudflare.com/sign-up 접속 후 이메일 가입

Step 2. 이메일 인증 (필수)

가입한 메일함에서 링크를 클릭하지 않으면 배포가 막힙니다.

Step 3. 언어 '한국어'로 변경

우측 상단 프로필(지구본 아이콘) 클릭 → Language를 한국어로 변경합니다. (이후 실습은 한국어 메뉴 기준)

Step 4. Workers 및 Pages 진입

좌측 사이드바 Compute 섹션 아래 [Workers 및 Pages]를 클릭합니다.

한국어 언어 설정 스크린샷 자리

images/cf_lang_setting.png

Workers 및 Pages 메뉴 스크린샷 자리

images/cf_menu_pages.png

[실습 2-2] 단일 HTML 파일 드래그 앤 드롭 배포

my-science-game

폴더째로 드래그하세요

index.html 파일이 들어있는 폴더를 올립니다.

1분 만에 전 세계 런칭

1
응용 프로그램 생성: Workers 및 Pages 화면 우측 상단 [응용 프로그램 생성] 클릭
2
업로드 방식 선택: "Ship something new" 화면에서 [Upload your static files] 클릭
3
파일 업로드: "업로드 및 배포" 화면에서 index.html이 들어있는 폴더 전체를 끌어다 놓습니다. 파일 목록에 index.html이 보이면 성공!
4
Worker 이름 입력: 하단 "Worker 이름" 칸에 원하는 이름으로 변경합니다.
※ 영문 소문자·숫자·하이픈(-)만 가능. 이 이름이 URL에 포함됩니다.
5
배포: [배포] 버튼 클릭 → 완료 후 제공되는 URL로 접속!

고유 링크(URL) 획득 및 현장 적용

https://[내프로젝트이름].pages.dev

교실에서 아이들에게 어떻게 공유할까요?

QR 코드 생성

크롬 브라우저 상단에서 우클릭하여 '이 페이지의 QR 코드 만들기' 활용. TV 화면에 띄우기

패들렛/클래스팅

학급 게시판에 링크만 올려두면 아이들이 태블릿으로 바로 클릭하여 진입

동기들과 공유 (지금!)

방금 만든 링크를 카카오톡 단톡방에 올려 옆자리 동기의 게임을 핸드폰으로 플레이해봅시다.

게임 데이터를 내 컴퓨터에 저장하기 (Local Storage)

"게임을 새로고침하면 점수가 자꾸 0점으로 초기화돼요!"

우리가 만든 웹은 기본적으로 기억력이 없습니다. 하지만 웹 브라우저가 가진 고유의 저장 공간인 'Local Storage'를 활용하면 내 컴퓨터에 점수를 보관할 수 있습니다.

프롬프트 추가 지시:

"플레이어의 최고 점수를 브라우저의 localStorage를 이용해 저장해 줘. 그래서 인터넷 창을 껐다 켜거나 새로고침을 하더라도 최고 점수 기록이 화면에 그대로 남아있게 만들어 줘."

+100 pts

사용자의 브라우저 캐시에 데이터(점수) 저장

Local Storage의 치명적 한계

기기/브라우저 종속적

학교 태블릿에서 100점을 받아도, 집에 있는 PC로 접속하면 점수가 연동되지 않고 0점입니다.

데이터 증발 위험

학생이 브라우저 앱을 지웠다 깔거나 방문 기록(캐시)을 삭제하면 저장된 점수가 즉시 날아갑니다.

교사가 볼 수 없음

데이터가 각 학생의 기기 안에만 갇혀 있어, 교사가 학급 전체의 성취도를 한눈에 확인할 수 없습니다.

해결책: 데이터베이스(Database)의 세계로!

데이터를 각자의 컴퓨터가 아닌 '서버(Cloud)'의 한 공간에 안전하게 모으는 방법 (5~6주차 예정)

오늘도 수고 많으셨습니다.

다음 주 예고

[Vibe 코딩 심화 및 프로젝트 아이디에이션]

UX/UI 디자인과 행동 유도성(Affordance) 이론을 바탕으로 한 직관적 인터페이스 설계
변수 통제, 데이터 시각화 등 상호작용이 포함된 과학 탐구 콘텐츠 고도화 실습
최종 프로젝트(나만의 과학 탐구 콘텐츠) 아이디어 구상

정적 웹사이트 기반과학 콘텐츠 만들기 2