# data[].attributes.attachment_caption
[0714-1차시] 교사와 학부모를 위한 바이브 코딩

# data[].attributes.attachment_link.title
[0712]교사와 학부모를 위한 바이브 코딩 연수자료(1차시)

# data[].attributes.attachment_caption
[0714-2차시] 교사와 학부모를 위한 바이브 코딩

# data[].attributes.attachment_link.title
교사와 학부모를 위한 바이브 코딩

# data[].attributes.body
바이브코딩 실습을 하다 보면 창을 여러 개 띄우거나

새 채팅으로 대화를 해야할 때가 많이 있습니다.

빠른 전환과 원활한 실습을 위해

1~4 구성의 규칙을 지켜주시면 좋습니다.

휴대폰으로도 계정을 간단히 생성할 수 있습니다.

# data[].attributes.headline
[공지] 휴대폰 인증 없이 구글 계정 만드는 방법

# data[].attributes.subject
[공지] 휴대폰 인증 없이 구글 계정 만드는 방법

# data[].attributes.body
실습 중 제미나이 한도가 차는 것을 방지하기 위해 개인용 구글 계정을 1~2개 정도 여유있게 만들어두시면 좋습니다. 오래 걸리지 않으니 휴대폰을 이용해서 구글 계정을 미리 만들어두세요.

[안드로이드로 구글계정 만들기]

https://blog.naver.com/math-tong/223839987617

[아이폰으로 구글계정 만들기]

https://blog.naver.com/math-tong/223839414498

# data[].attributes.headline
7.16 4차시 - 임시정부 이동 경로 웹앱 만들기 프롬프트

# data[].attributes.subject
7.16 4차시 - 임시정부 이동 경로 웹앱 만들기 프롬프트

# data[].attributes.body
3page

https://padlet.com/tdm31/padlet-xvjce8nx396tj4j7

4page

일본 호쿠오카로 여행을 갈 생각이야. 2박 3일간 움직을 동선을 지도를 바탕으로 만들어줘.

5page

일본 호쿠오카로 가족 여행을 갈 생각이야. 2박 3일간 움직을 동선을 지도(leaflet.js 라이브러리)바탕으로 만들어줘.

leaflet.js가 적용이 제대로 안된 것 같아. 지도가 안 나타나! 다시 점검해줘!

6page

https://gemini.google.com/share/60a5bf46a722

10page

고등학교 1학년 대상의 한국사 수업 시간이야.

대한민국 임시정부의 이동 경로를 시각적으로 보여주는 웹페이지를 만들고 싶어.

관련된 성취 기준과 유의 사항은 아래와 같아.

[10한사2-01-05] 일제의 침략 전쟁에 맞서 전개된 독립 국가 건설 운동의 양상을 분석한다.

(성취기준 적용 시 고려사항) 일본의 침략 전쟁이 동아시아 전역으로 확산되는 과정에서 국내외 민족 운동 세력이 독립 국가 수립을 위해 공동의 노력을 추구하였음을 국내외의 자료를 통해 분석한다.

Leaflet.js 라이브러리를 사용해서 중국 및 한국 지도를 전체 화면으로 보여줘.

이동순서는 아래와 같아.

1. 상하이(Shanghai) -> 2. 항저우(Hangzhou) -> 3. 전장(Zhenjiang) -> 4. 창사(Changsha) -> 5. 광저우(Guangzhou) -> 6. 류저우(Liuzhou) -> 7. 치장(Qijiang) -> 8. 충칭(Chongqing)

도시들에 순서대로 마커를 찍고, 빨간색 점선으로 경로를 연결해 줘.

인터랙티브한 것들은 뒤에 따로 추가할 예정이니까 우선 지도와 도시를 매칭시키는데 집중해줘.

11page

https://gemini.google.com/share/deecd0016917?skid=0adfad83-3a9b-4354-88ac-795b4c17369f

13page

전선 오버랩하면서 위치를 찾는 퀴즈도 포함하면 교육적으로 의미가 깊을 것 같아. 그리고 제대로 지역을 잘 맞추면 그때 일어났던 주요 활동 (예: 한인애국단 활동, 한국광복군 창설 등)도 나오면 역사적으로 엄청 도움이 될 것 같아! 웹앱 프롬프트를 만들어줘.

=> 제미나이 A에 입력

15page

일단 내가 이런 걸 만들 때는 교육과정을 참고해서 만들거든. 아래는 실제 2022 개정 교육과정의 <한국사 2> 내용 중 하나인데 이걸 지도와 연관하거나 학생들을 참여시킬 수 있 는 아이디어가 있을까? 교육적으로 의미가 있었으면 좋겠어.

[10한사2-01-05] 일제의 침략 전쟁에 맞서 전개된 독립 국가 건설 운동의 양상을 분석한다.

(성취기준 적용 시 고려 사항) 일본의 침략 전쟁이 동아시아 전역으로 확산되는 과정에서 국내외 민족 운동 세력이 독 립 국가 수립을 위해 공동의 노력을 추구하였음을 국내외의 자료를 통해 분석한다.

17page

[프롬프트] 지금부터 고등학교 한국사 수업을 위한 '임시정부 대장정 시뮬레이션 게임'을 만들 거야. Leaflet.js를 사용해서 인터랙티브 지도를 구현해 줘. [게임 로직 및 시나리오] 학생은 임시정부 요원이 되어, 일본군의 압박을 피해 다음 거점으로 이동해야 해. 1단계: 1932년 상하이 (시작) - 상황: 지도상 상하이 주변에 붉은색 반투명 원(일본군 점령)이 표시됨. - 미션(퀴즈): "이봉창, 윤봉길 의사의 의거(한인애국단)로 일제의 감시가 극에 달했다. 급히 몸을 피해야 한다! 김구 선생을 모시고 어디로 가야 할까? (힌트: 상하이 남서쪽, 호수가 유명한 도시)" - 정답: 학생이 지도에서 '항저우'를 클릭하면 정답! - 성공 보상: '항저우' 마커가 생기고, 상하이-항저우 경로가 연결됨. 팝업으로 "임시정부 요인들이 무사히 피신하여 체제를 정비함" 메시지 출력. 2단계: 1937년 중일전쟁 발발 - 상황: 지도 오른쪽(동쪽) 해안가 전체가 거대한 붉은색 영역(일본군 침략)으로 뒤덮이며 내륙으로 밀고 들어옴. - 미션(퀴즈): "중일전쟁이 터졌다! 일본군이 난징을 점령하고 쳐들어오고 있다. 더 깊은 내륙으로 가야 한다. 다음 목적지는?" - 정답: 지도에서 '창사' 클릭 시 정답. (이동 경로 연결) 3단계: 1940년 충칭 정착 (최종) - 상황: 일본군 점령지가 중국 대륙 절반을 덮음. - 미션(퀴즈): "마지막 정착지다. 산으로 둘러싸인 천혜의 요새는 어디인가?" - 정답: '충칭' 클릭. - 성공 보상: "한국광복군 창설! 대일 선전포고 준비!"라는 웅장한 메시지와 함께 폭죽 효과(선택사항) 출력. [UI 요구사항] - 하단에 현재 미션과 힌트가 나오는 대화창을 만들어줘. - 틀린 곳을 찍으면 "그곳은 일본군의 사정권입니다!"라고 알려줘. - 지도는 전체 화면으로 꽉 차게 해 줘.

19page( 예시 프롬프트 )

회색 동그라미가 그대로 남아 있어서 난이도가 너무 쉽습니다. 투명하게 만들어서 정답을 유추하기 어렵게 만들어 주세요.

대한민국 임시정부가 움직였던 기존 경로가 모두 사라졌습니다. 이것은 교육용 데이터입니다. 임시정부가 있던 도시와 그 시기, 그 시기에 대표적인 사건들은 마커를 클릭하거나 마우스를 마커 위에 놓으면 볼 수 있게 하면 좋겠습니다.

일본군이 점령한 다각형을 조금 더 이쁘게 다듬었으면 좋겠습니다.

문제가 너무 단조롭습니다. 더 다양한 힌트를 주면서 역사적 배경을 알게 하면 좋겠습니다.

23page( 예시 프롬프트 )

실제로 시도했는데 텍스트가 너무 커서 보기 좋지 않습니다. 가로로 된 화면에서는 텍스트 박스가 오른쪽에 배열이 되고 전체적으로 박스와 글씨는 좀 작아졌으면 좋겠습니다.

스마트폰 역시 글씨가 너무 커서 지도가 실제 40%밖에 안 보입니다. 스마트폰 환경에서는 지금처럼 아래에 퀴즈가 나오되 글씨나 박스를 조금 작게 만들어야 할 것 같습니다.

전반적으로 지도가 주력입니다. 신경써서 디자인을 수정해주세요.

25page

https://gemini.google.com/share/e5e1adeec868

26page

너무 훌륭한 앱과 활동이라고 생각합니다. 해당 활동에서 끝나지 않고 해당 주제를 바탕으로 수행평가를 진행했을 때 학생들이 쓸 수 있는 활동지와 채점기준(루브릭)을 만들어주세요.

27page

https://gemini.google.com/share/a912ba669a65?skid=847e14e8-1d7f-4d45-9dc6-ba8ff1832101

35page

- 고등학교 ___학년 대상의 _______ 수업 시간이야.

- ____________의 이동 경로(또는 전개 과정)를 시각적으로

보여 주는 웹페이지를 만들고 싶어.

- 관련된 성취 기준과 유의 사항은 아래와 같아.

[성취기준 번호] 내용 붙여넣기

- Leaflet.js 라이브러리를 사용해서 _______ 지도를 전체 화면으로 보여 줘.

- 이동 순서는 아래와 같아.

1. _________ → 2. _________ → 3. _________ → ...

- 도시(또는 지점)들에 순서대로 마커를 찍고, 빨간색 점선으로 경로를 연결해 줘.

- 인터랙티브한 기능은 뒤에 추가할 예정이니 우선 지도와 지점을 매칭시키는 데 집중해 줘.

38page

지금까지 활동했던 내용을 기반으로 GEMS를 구성해서 지도를 이용한 인터랙티브 퀴즈 웹앱을 만들고 싶어.

프롬프트(지시사항)을 만들어 줘.

39page

https://gemini.google.com/gem/1QlG6rv8WUo1df4w5OGBJp0ffqVJD4C2Z?usp=sharing

# data[].attributes.headline
알아두면 유용한 프롬프트 템플릿

# data[].attributes.subject
알아두면 유용한 프롬프트 템플릿

# data[].attributes.attachment_link.title
교사와 학부모를 위한 바이브코딩 (템플릿)

# data[].attributes.attachment_link.description
A collaborative AI workspace, built on your company context. Build and orchestrate agents right alongside your team’s projects, meetings, and connected apps.

# data[].attributes.headline
7.14 1차시 - 곱셈 웹앱 만들기 실습용 프롬프트

# data[].attributes.subject
7.14 1차시 - 곱셈 웹앱 만들기 실습용 프롬프트

# data[].attributes.body
p.66

#1

두 자리 수와 한 자리 수의 곱셈 연습을 할 수 있는 웹앱을 만들어 줘.

초등학교 2학년 수준에 맞게 스텝 바이 스텝으로 계산할 수 있도록 했으면 좋겠어.

p.67

#2

우리 아이는 핑크색의 귀여운 공주 스타일을 선호하거든. 거기에 맞게 앱의 디자인을 바꿔 줘.

p.69

#3

전체 디자인 설정:

## 비주얼 스타일: Clay / Stopmotion / Cute

### 색상 구성

- 배경: #87CEEB (스카이 블루) - 세트 하늘.

- 주 텍스트 색상: #FFFFFF (화이트)

- 강조 색상: #FF6347 (토마토), #FFD700 (골드)

- 색채는 친근함을 주되 기업 자료로서의 정돈감은 잃지 않는다.

### 타이포그래피

- 제목: 라운드 고딕, 손글씨.

- 본문: 읽기 쉬운 본문 서체

- 구조: 클레이로 만든 입체 글자.

- 숫자 표현: 중요한 수치는 정보의 축으로 읽히도록 정리한다.

### 톤 & 보이스

- 수공예

- 동화

- 재미

- 소프트

- 아날로그

- 화면 전체에 절제된 존재감과 세련됨을 부여한다.

- 스타일이 주제보다 앞서 보이지 않도록 한다.

- 과하게 튀지 않지만 기억에 남는 인상을 지향한다.

# data[].attributes.body
"초등학교 6학년 대상으로 배워야 할 필수 영단어 100개를 포함해서 방탈출 웹앱을

만들어 줘."

# data[].attributes.attachment_caption
[0716-2차시] 교사와 학부모를 위한 바이브 코딩

# data[].attributes.headline
임시정부 이동 경로 웹앱 만들기

# data[].attributes.subject
임시정부 이동 경로 웹앱 만들기

# data[].attributes.body
나만의 역사 인터랙티브 지도 만들기 교안

# data[].attributes.attachment_link.title
교사와 학부모를 위한 바이브 코딩 발표자료_신종환.pptx

# data[].attributes.headline
첫번째 공유 - 시작하기 - 지도 호출해보기

# data[].attributes.subject
첫번째 공유 - 시작하기 - 지도 호출해보기

# data[].attributes.body
여러분들도 댓글로 여러분들이 만든 지도를 공유해주세요!

단, 개인정보가 포함된 자료나 저작권에 문제가 있는 것들은 올려주지 마세요. 문제가 될 수 있는 부분은 삭제할 수 있습니다.

# data[].attributes.headline
두번째 공유 - 임시정부 이동 경로 웹앱 - 자기만의 지도 활용 웹앱 만들기 

# data[].attributes.subject
두번째 공유 - 임시정부 이동 경로 웹앱 - 자기만의 지도 활용 웹앱 만들기 

# data[].attributes.body
여러분들이 만든 교육용 / 여행용 지도 웹앱을 만들어서 댓글로 링크를 공유해주세요!

단, 개인정보가 포함된 자료나 저작권에 문제가 있는 것들은 올려주지 마세요. 문제가 될 수 있는 부분은 삭제할 수 있습니다.

# data[].attributes.headline
세번째 공유 - 학습지/웹페이지/인포그래픽/GEMS 만들어보기

# data[].attributes.subject
세번째 공유 - 학습지/웹페이지/인포그래픽/GEMS 만들어보기

# data[].attributes.body
여러분들이 만든 학습지/웹페이지/인포그래픽/GEMS 등을 만들어서 댓글로 링크를 공유해 주세요!

단, 개인정보가 포함된 자료나 저작권에 문제가 있는 것들은 올려주지 마세요. 문제가 될 수 있는 부분은 삭제할 수 있습니다.

# data[].attributes.attachment_link.description
Meet Gemini, Google’s AI assistant. Get help with writing, planning, brainstorming, and more. Experience the power of generative AI.

# data[].attributes.headline
첫번째 공유, 곱셈 웹앱 만들기 

# data[].attributes.subject
첫번째 공유, 곱셈 웹앱 만들기 

# data[].attributes.body
여러분들도 한번 앱을 만들어 보셨나요? 여러분들이 만든 웹앱의 결과물을 댓글창에 링크로 공유해주세요.

나만의 디자인을 만드신 분들이나 내껀 이렇게 만들었어요.라고 말하고 싶다면 제미나이에게 사용한 프롬프트도 댓글로 달아주세요.

때론, 다른 사람들의 프롬프트가 바이브코딩 실력 향상에 많이 도움이 됩니다.

# data[].attributes.headline
두 번째 공유, 디자인 프롬프트 적용해보기

# data[].attributes.subject
두 번째 공유, 디자인 프롬프트 적용해보기

# data[].attributes.body
#1, #2 단계

# data[].attributes.body
## 톤: 창의적, 러프, 개인적, 브레인스토밍, 진정성

## 시각 적 아이덴티티

- 배경 색상: 줄 긋기 노트 종이 또는 모눈종이

- 텍스트 색상: #0000CD(파란 볼펜 잉크)

- 강조 색상: #FF0000(빨간 수정 잉크), #FFFFFF(종이)

## 이미지 스타일

- 특징: 줄 긋기 종이 위에 그린, 캐주얼 손글씨 미학

- 이미지: 막대 인간, 별, 화살표, 커피 얼룩

- 구성: 여백 주석 스타일, 자유 형식, 브레인스토밍 스타일

## 타이포그래피

- 제목: 손 글씨 폰트

- 스타일: 지저분함, 끄적임, 밑줄

# data[].attributes.attachment_caption
[0716-1차시] 교사와 학부모를 위한 바이브 코딩

# data[].attributes.headline
알고리즘 시각화 튜터 만들기

# data[].attributes.subject
알고리즘 시각화 튜터 만들기

# data[].attributes.headline
[실습1] 결과물 공유

# data[].attributes.subject
[실습1] 결과물 공유

# data[].attributes.body
실습1의 결과물을 공유하는 게시판입니다. 댓글로 공유링크를 남겨주세요.

# data[].attributes.body
내가 만든 웹앱에 구글 스프레드 배포 주소를 입력해서 '기록 저장' 기능을 추가해줘. 서버 없이 연동 가능하게 Apps Script 코드와 수정된 웹앱 코드를 작성하고, GAS 배포 주소는 코드 상단에 배치해서 쉽게 찾게 해주고 변수로 직접 입력하게 만들어줘."

# data[].attributes.body
p141

알고리즘 시각화 튜터 지침

1. 페르소나 및 역할

정체성: 정보 교과 학습을 돕는 AI 튜터로, 알고리즘의 추상적인 원리를 시각적 도식과 인터랙티브 실습으로 바꾸어 전달합니다.

핵심 목표: 학생들이 단순 암기가 아닌, 데이터의 변화를 직접 '선택'하고 '관찰'하며 문제 해결의 본질(백트래킹, 효율성 등)을 체득하게 합니다.

2. 대화 시작 규칙

사용자가 알고리즘을 말하면 반드시 설명 모드와 체험 모드 중 하나를 선택하도록 유도합니다. 사용자가 중간에 모드를 바꾸고 싶어 하면 언제든 즉시 전환합니다.

3. 모드별 상세 동작 가이드

[설명 모드: 원리와 비유]

시각화: 추상적인 알고리즘을 실시간 데이터가 이동하는 모습을 통해 학습자가 직관적으로 알 수 있도록 보여 줍니다.

언어: 고등학생 수준에 맞춘 쉬운 비유를 사용합니다. (예: 4-Queens는 서로 눈도 마주치기 싫어하는 4명의 여왕 배치하기)

논리 강조: "여기서 왜 이전 단계로 돌아가야 할까?"와 같은 질문을 던져 사고를 자극합니다.

[체험 모드: 직접 배치 및 실험]

사용자 주도 실습: 사용자가 직접 파라미터를 입력하거나 위치를 지정하게 합니다.

예(4-Queens): "퀸을 몇 행 몇 열에 놓을까요?"라고 묻고, 사용자의 선택에 따른 보드 상태를 실시간 업데이트합니다.

예(정렬): "1) 무작위 데이터 2) 이미 정렬된 데이터 3) 역순 데이터 중 무엇으로 실험할까요?"라고 묻습니다.

시각적 피드백: 사용자가 퀸을 놓으면 공격 경로를 [X] 등으로 표시하여 '위험 구역'을 실시간으로 시각화합니다.

4. 응답 하단 고정 버튼 메뉴 (필수)

모든 답변의 마지막에는 사용자가 클릭하거나 입력할 수 있도록 아래 메뉴를 반드시 포함합니다.

현재 위치: [현재 모드 이름]

[설명 모드] - "원리를 그림과 비유로 듣고 싶어요."

[체험 모드] - "내가 직접 선택하고 배치해볼래요."

5. 예외 상황 처리

학생이 잘못된 위치에 퀸을 놓거나 오류가 날 상황인 경우, "앗! 그 자리는 위험해요!"라고 친절하게 안내하며 왜 안 되는지 알고리즘적 이유를 설명합니다.

p143

4-Queens 알고리즘에 대해 알고 싶어.

p146

알고리즘을 버블 정렬로 바꿔 줘. 체험 모드로 하고, 데이터는 역순으로 줘.

직접 교환할지 말지 선택할 수 있도록 버튼을 추가해 줘.

# data[].attributes.headline
[실습2] 나만의 챗봇 만들기

# data[].attributes.subject
[실습2] 나만의 챗봇 만들기

# data[].attributes.body
p152

요소 1. 페르소나 및 핵심 목표

챗봇이 어떤 선생님인지, 무엇을 가르치는지 명확하게 선언합니다.

나는 [재귀 함수]를 가르치는 AI 튜터입니다.

핵심 목표: 학생이 [재귀적 호출]을 [스택 시각화]를 통해 이해하도록 돕습니다.

요소 2. 모드 구분 (설명 모드 / 체험 모드)

두 모드의 역할과 차이를 명확히 정의합니다. 학생이 무엇을 선택하느냐에 따라 챗봇의 응답 방식이 달라져야 합니다.

[설명 모드 📖] 재귀의 종료 조건(base case)과 자기 호출의 원리를 비유로 단계별 설명

[체험 모드 🛠] 사용자가 입력한 값에 따라 호출 스택이 쌓이고 비워지는 과정을 직접 확인

요소 3. 시각적 피드백 규칙

데이터의 변화를 어떻게 보여줄지 구체적으로 지정합니다. Canvas를 활용한 그래픽 시각화, 이모지 등을 활용할 수 있습니다.

학생의 선택에 따라 아래 기호로 상태를 실시간 표시합니다.

예: 현재 활성화된 함수 [▶], 스택에 대기 중인 함수 [||], 결과가 반환된 함수 [✓]

요소 4. 고정 버튼 메뉴 (모든 응답 하단 필수)

학생이 언제든 다음 단계로 이동할 수 있도록, 모든 응답 하단에 선택지를 고정합니다.

[설명 모드 📖] 재귀의 원리를 그림과 비유로 배우기

[체험 모드 🛠] 호출 스택의 변화를 직접 실험하기

# data[].attributes.body
히트맵의 경우 에러가 있으니 받으셔도 수정해서 써야 할 것 같습니다.

아이디어 정도만 참고하면 좋을 것 같습니다.

시계열 지도

https://share.gemini.google/Ge1k02Sc5nRu

지도 클러스터링

https://share.gemini.google/5pGF7IMQE2xu

지도 GeoJSON 자료 추출

https://share.gemini.google/hcpjStM2XJey

국가별 기후변화 시계열

https://share.gemini.google/upa0q5sfc5U8