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

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

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

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

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

p.66

#1

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

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

p.67

#2

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

p.69

#3

전체 디자인 설정:

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

### 색상 구성

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

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

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

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

### 타이포그래피

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

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

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

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

### 톤 & 보이스

- 수공예

- 동화

- 재미

- 소프트

- 아날로그

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

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

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

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

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

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

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

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

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

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

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

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

만들어 줘."

## 시각 적 아이덴티티

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

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

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

## 이미지 스타일

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

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

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

## 타이포그래피

- 제목: 손 글씨 폰트

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

알고리즘 시각화 튜터 지침

1. 페르소나 및 역할

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

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

2. 대화 시작 규칙

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5. 예외 상황 처리

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

p143

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

p146

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

시계열 지도

https://share.gemini.google/Ge1k02Sc5nRu

지도 클러스터링

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

지도 GeoJSON 자료 추출

https://share.gemini.google/hcpjStM2XJey

국가별 기후변화 시계열

https://share.gemini.google/upa0q5sfc5U8