Google Appscript와 Gemini Canvas를 활용한 특강 사전 설문조사 자동화 및 시각화
소개
특강 전 대상자의 수준과 요구를 파악하기 위해 사전 설문조사를 실시했습니다.
단순히 데이터를 수집하는 것을 넘어, 응답 결과를 자동으로 정리하고 시각화하여 강의 준비에 바로 활용할 수 있도록 하는 것이 목표였습니다.
진행 방법
Google Appscript를 활용해 설문지를 자동 생성 및 배포
프롬프트 입력창 : 첨부화일의 내용으로 특강을 하려고 하는데 특강 내용을 시작하기 전에 교육내용에 대해 얼마나 알고 있는지 사전조사를 하고 싶어/구글 설문지로 만들려고 하는데 설문 항목을 만들어줘
AI 디지털 교과서 제작 특강 사전조사 설문 항목 기본 정보 연령/세대 20대 / 30대 / 40대 / 50대 / 60대 이상 직무/직책 교사 / 교수 / 교육담당자 / 기타 (_______) 교육 경험 5년 미만 / 5-10년 / 10-15년 / 15-20년 / 20년 이상 AI 도구 사전 경험 및 지식 수준 1. AI 도구 사용 경험AI-dijiteol-gyogwaseo-jejag-3sigan-teuggang-yeonsu-gyehoegan_2025.06.17_ijiyeong-gyosu.docxgpters+1 현재까지 AI 도구를 업무에 활용해본 경험이 있으신가요? 전혀 없다 / 거의 없다 / 보통이다 / 자주 있다 / 매우 자주 있다 2. 개별 AI 도구 인지도 및 사용 경험madtimesAI-dijiteol-gyogwaseo-jejag-3sigan-teuggang-yeonsu-gyehoegan_2025.06.17_ijiyeong-gyosu.docx 다음 AI 도구들에 대한 인지도와 사용 경험을 체크해주세요: 도구명 들어본 적 없음 들어봤지만 사용 안함 1-2회 사용 가끔 사용 자주 사용 Canva for Education ⃞ ⃞ ⃞ ⃞ ⃞ Gamma AI ⃞ ⃞ ⃞ ⃞ ⃞ Brisk Teaching ⃞ ⃞ ⃞ ⃞ ⃞ Vrew ⃞ ⃞ ⃞ ⃞ ⃞ 3. AI 기반 교육 콘텐츠 제작 경험jform+1 AI를 활용하여 교육 자료를 제작해본 경험이 있으신가요? 전혀 없다 / 1-2회 있다 / 가끔 있다 / 자주 있다 / 매우 자주 있다 4. 디지털 교과서 제작 관련 지식sru.icems 디지털 교과서 제작에 대한 본인의 지식 수준은? 전혀 모름 / 기초 수준 / 보통 수준 / 상급 수준 / 전문가 수준 특강 내용별 사전 지식 평가 5. Canva for Education 기능 인지도AI-dijiteol-gyogwaseo-jejag-3sigan-teuggang-yeonsu-gyehoegan_2025.06.17_ijiyeong-gyosu.docx 다음 Canva 기능 중 아는 것을 모두 선택해주세요: ☐ Magic Write (AI 텍스트 생성) ☐ Magic Animate (AI 애니메이션) ☐ 포스터 제작 ☐ 발표자료 제작 ☐ 인포그래픽 제작 ☐ 동영상 제작 ☐ 모두 모름 6. Gamma AI 프레젠테이션 제작AI-dijiteol-gyogwaseo-jejag-3sigan-teuggang-yeonsu-gyehoegan_2025.06.17_ijiyeong-gyosu.docx Gamma AI로 자동 PPT/PDF 생성이 가능하다는 것을 알고 계셨나요? 전혀 몰랐다 / 들어봤지만 사용법 모름 / 대략 알고 있다 / 잘 알고 활용한다 7. Brisk Teaching 교수 도구AI-dijiteol-gyogwaseo-jejag-3sigan-teuggang-yeonsu-gyehoegan_2025.06.17_ijiyeong-gyosu.docx 다음 중 Brisk Teaching의 기능으로 아는 것을 모두 선택해주세요: ☐ AI 피드백 생성 ☐ 자동 평가 도구 ☐ 교수 지원 도구 ☐ Google Slides/Docs 연동 ☐ 모두 모름 8. Vrew 영상 편집AI-dijiteol-gyogwaseo-jejag-3sigan-teuggang-yeonsu-gyehoegan_2025.06.17_ijiyeong-gyosu.docx AI를 활용한 자동 자막 생성 도구에 대해 알고 계신가요? 전혀 모름 / 들어만 봤음 / 사용해봤음 / 능숙하게 활용 교육 필요성 및 기대치 9. AI 교육 콘텐츠 제작의 필요성jform+1 교육 현장에서 AI를 활용한 콘텐츠 제작이 얼마나 필요하다고 생각하시나요? 전혀 필요없다 / 별로 필요없다 / 보통이다 / 필요하다 / 매우 필요하다 10. 특강을 통해 얻고 싶은 것gpters+1 가장 중요하게 배우고 싶은 내용 순으로 3개를 선택해주세요: ☐ AI 도구 기본 사용법 ☐ 교육 콘텐츠 제작 실습 ☐ 디지털 교과서 제작 방법 ☐ 실무 적용 노하우 ☐ 최신 AI 교육 트렌드 ☐ 학습자 맞춤형 콘텐츠 제작 11. 교육 참여 동기jform 이번 특강에 참여하게 된 주된 이유는? 업무상 필요 / 개인 역량 향상 / 최신 트렌드 학습 / 추천을 받아서 / 기타 학습 스타일 및 선호도 12. 선호하는 학습 방식han8849.tistory+1 어떤 교육 방식을 가장 선호하시나요? 이론 중심 강의 / 실습 중심 워크숍 / 이론+실습 병행 / 개별 실습 후 발표 13. 실습 참여 의향madtimes 3시간 동안 직접 AI 도구를 사용해보는 실습에 적극 참여하실 의향이 있으신가요? 매우 소극적 / 소극적 / 보통 / 적극적 / 매우 적극적 14. 교육 후 활용 계획madtimes+1 특강 수료 후 배운 내용을 실무에 적용할 계획이 있으신가요? 전혀 없다 / 별로 없다 / 보통이다 / 계획있다 / 확실히 적용할 예정 기술적 준비사항 15. 개인 디바이스 준비 특강 당일 개인 노트북/PC 지참이 가능하신가요? 가능 / 불가능 / 미정 16. 인터넷 활용 능력AI-dijiteol-gyogwaseo-jejag-3sigan-teuggang-yeonsu-gyehoegan_2025.06.17_ijiyeong-gyosu.docx 온라인 도구 사용 및 회원가입에 대한 본인의 능숙도는? 매우 서툴다 / 서툴다 / 보통이다 / 능숙하다 / 매우 능숙하다 추가 의견 17. 특강 전 궁금한 점이나 우려사항gpters+1 (자유 서술) 18. 특강에 대한 기대사항gpters+1 (자유 서술) 이 설문지는 총 18개 문항으로 구성되어 있으며, 응답 시간은 약 5-7분 소요됩니다. 객관식 문항을 중심으로 하되 마지막에 자유 서술 문항을 추가하여 참가자들의 구체적인 의견을 수집할 수 있도록 설계했습니다. 특강 진행 전에 이 사전조사를 통해 참가자들의 현재 지식 수준, 경험, 기대치를 파악하여 교육 내용과 난이도를 적절히 조정할 수 있을 것입니다.위의 ***AI 디지털 교과서 제작 특강 사전조사 설문 항목***을 구글설문지로 만들려고 해/구글 앱스크립트를 활용하여 사전조사 구글 설문지를 만들거야/ 앱스크립트를 만들어줘
function createAiDigitalTextbookSurveyForm() { // 새 Google Form 생성 var form = FormApp.create('AI 디지털 교과서 제작 특강 사전조사'); form.setDescription('특강에 앞서 AI 디지털 교과서 및 AI 도구 활용 경험을 사전 조사하고자 합니다.'); // 1. 기본 정보 form.addMultipleChoiceItem() .setTitle('연령/세대') .setChoiceValues(['20대', '30대', '40대', '50대', '60대 이상']) .setRequired(true); form.addMultipleChoiceItem() .setTitle('직무/직책') .setChoiceValues(['교사', '교수', '교육담당자', '기타']) .setRequired(true); form.addMultipleChoiceItem() .setTitle('교육 경험') .setChoiceValues(['5년 미만', '5-10년', '10-15년', '15-20년', '20년 이상']) .setRequired(true); // 2. AI 도구 사용 경험 form.addMultipleChoiceItem() .setTitle('현재까지 AI 도구를 업무에 활용해본 경험이 있으신가요?') .setChoiceValues(['전혀 없다', '거의 없다', '보통이다', '자주 있다', '매우 자주 있다']) .setRequired(true); // 3. 개별 AI 도구 인지도 및 사용 경험 (그리드) var grid = form.addGridItem(); grid.setTitle('다음 AI 도구들에 대한 인지도와 사용 경험을 선택해주세요.') .setRows(['Canva for Education', 'Gamma AI', 'Brisk Teaching', 'Vrew']) .setColumns(['들어본 적 없음', '들어봤지만 사용 안함', '1-2회 사용', '가끔 사용', '자주 사용']) .setRequired(true); // 4. AI 기반 교육 자료 경험 form.addMultipleChoiceItem() .setTitle('AI를 활용하여 교육 자료를 제작해본 경험이 있으신가요?') .setChoiceValues(['전혀 없다', '1-2회 있다', '가끔 있다', '자주 있다', '매우 자주 있다']) .setRequired(true); // 5. 디지털 교과서 제작 관련 지식 form.addMultipleChoiceItem() .setTitle('디지털 교과서 제작에 대한 본인의 지식 수준은?') .setChoiceValues(['전혀 모름', '기초 수준', '보통 수준', '상급 수준', '전문가 수준']) .setRequired(true); // 6. Canva for Education 기능 인지도 (다중선택) form.addCheckboxItem() .setTitle('아래 Canva 기능 중 아는 것을 모두 선택하세요.') .setChoiceValues(['Magic Write (AI 텍스트 생성)', 'Magic Animate (AI 애니메이션)', '포스터 제작', '발표자료 제작', '인포그래픽 제작', '동영상 제작', '모두 모름']); // 7. Gamma AI 프레젠테이션 제작 form.addMultipleChoiceItem() .setTitle('Gamma AI로 자동 PPT/PDF 생성 기능을 알고 계셨나요?') .setChoiceValues(['전혀 몰랐다', '들어봤지만 사용법 모름', '대략 알고 있다', '잘 알고 활용한다']) .setRequired(true); // 8. Brisk Teaching 교수 도구 (다중선택) form.addCheckboxItem() .setTitle('Brisk Teaching의 기능 중 아는 것을 모두 선택하세요.') .setChoiceValues(['AI 피드백 생성', '자동 평가 도구', '교수 지원 도구', 'Google Slides/Docs 연동', '모두 모름']); // 9. Vrew 영상 편집 form.addMultipleChoiceItem() .setTitle('AI 자동 자막 생성 도구에 대해 알고 계신가요?') .setChoiceValues(['전혀 모름', '들어만 봤음', '사용해봤음', '능숙하게 활용']) .setRequired(true); // 10. AI 교육 콘텐츠 제작의 필요성 form.addMultipleChoiceItem() .setTitle('교육 현장에서 AI를 활용한 콘텐츠 제작이 얼마나 필요하다고 생각하시나요?') .setChoiceValues(['전혀 필요없다', '별로 필요없다', '보통이다', '필요하다', '매우 필요하다']) .setRequired(true); // 11. 특강을 통해 얻고 싶은 것 (3개까지 선택/다중선택) form.addCheckboxItem() .setTitle('가장 중요하게 배우고 싶은 내용 3개를 선택하세요.') .setChoiceValues(['AI 도구 기본 사용법', '교육 콘텐츠 제작 실습', '디지털 교과서 제작 방법', '실무 적용 노하우', '최신 AI 교육 트렌드', '학습자 맞춤형 콘텐츠 제작']) .setRequired(true); // 12. 교육 참여 동기 form.addMultipleChoiceItem() .setTitle('이번 특강에 참여하게 된 주요 이유는?') .setChoiceValues(['업무상 필요', '개인 역량 향상', '최신 트렌드 학습', '추천을 받아서', '기타']) .setRequired(true); // 13. 선호하는 학습 방식 form.addMultipleChoiceItem() .setTitle('어떤 교육 방식을 가장 선호하시나요?') .setChoiceValues(['이론 중심 강의', '실습 중심 워크숍', '이론+실습 병행', '개별 실습 후 발표']) .setRequired(true); // 14. 실습 참여 의향 form.addMultipleChoiceItem() .setTitle('3시간 실습에 적극 참여하실 의향이 있으신가요?') .setChoiceValues(['매우 소극적', '소극적', '보통', '적극적', '매우 적극적']) .setRequired(true); // 15. 교육 후 실무 적용 의향 form.addMultipleChoiceItem() .setTitle('특강 수료 후 배운 내용을 현장에 적용할 계획이 있으신가요?') .setChoiceValues(['전혀 없다', '별로 없다', '보통이다', '계획있다', '확실히 적용할 예정']) .setRequired(true); // 16. 개인 디바이스 준비 form.addMultipleChoiceItem() .setTitle('특강 당일 개인 노트북/PC 지참이 가능하신가요?') .setChoiceValues(['가능', '불가능', '미정']) .setRequired(true); // 17. 인터넷 활용 능력 form.addMultipleChoiceItem() .setTitle('온라인 도구 사용 및 회원가입에 대한 본인의 능숙도는?') .setChoiceValues(['매우 서툴다', '서툴다', '보통이다', '능숙하다', '매우 능숙하다']) .setRequired(true); // 18. 특강 전 궁금한 점/우려사항(서술형) form.addParagraphTextItem() .setTitle('특강 전 궁금한 점이나 우려사항이 있다면 자유롭게 작성해주세요.'); // 19. 특강에 대한 기대사항(서술형) form.addParagraphTextItem() .setTitle('이번 특강에 기대하는 점을 자유롭게 작성해주세요.'); }
사용 방법 요약
구글 드라이브 → 새로 만들기 → 기타 → Apps Script 선택.
위 코드를 복사해 붙여넣고 저장.
함수 실행(▶️) 버튼 클릭 → 구글 폼이 자동 생성됨.
구글 폼 링크를 복사해 참가자에게 배포.
문항 개수, 문항명, 설명, 선택지 등 필요에 맞게 추가 수정 가능.
참고: Google 계정에서 Apps Script의 구글 폼 서비스(FormApp)에 대한 권한 요청이 있을 수 있습니다.
이 코드를 활용하면 해당 특강 참가자 맞춤형 사전조사 구글 설문지를 빠르게 자동화로 만들 수 있습니다.
Google Form 응답값이 자동으로 Google Spreadsheet에 저장되도록 설정
Gemini Canvas에서 Google Drive 속 스프레드시트 데이터를 불러와 분석 코드 생성
시각화 시도:
Gemini Canvas에서 웹페이지나 인포그래픽 형태로의 시각화는 한계가 있었음 ❌
/재머나이의 응답 :
만약 코드를 파일로 저장하여 확인하고 싶으시다면, 다음 단계를 따르시면 됩니다.
코드 저장: 현재 보고 계신 코드를 복사하여 메모장이나 코드 편집기에 붙여넣습니다.
파일로 저장: 파일을 저장할 때, 파일 형식을 '모든 파일'로 변경하고 파일 이름을 dashboard.html과 같이 .html 확장자로 끝내 저장합니다.
브라우저에서 열기: 저장된 dashboard.html 파일을 더블클릭하거나, 파일에 마우스 오른쪽 버튼을 클릭하여 '연결 프로그램'에서 크롬(Chrome) 이나 엣지(Edge) 같은 웹 브라우저를 선택해 열어주세요.
이렇게 하시면 코드의 내용이 아닌, 차트와 텍스트가 포함된 완성된 대화형 대시보드 웹페이지를 보실 수 있습니다.
위의 대로 하면 웹페이지나 인포그래픽이 보이기는 하지만 공유가 안되는 URL
그래서 Gemini에게 구글 사이트에서 가능한지 물어봄
나의 질문 : 구글 사이트에 페이지 삽입에서 코드 복붙하면 가시화 되지?
재머나이 : 생각하는 과정 표시
네, 정확히 맞습니다!
제가 작성해 드린 HTML 코드 전체를 복사해서 구글 사이트의 '코드 삽입' 기능에 붙여넣으시면, 제가 보여드린 대시보드가 그대로 사이트 페이지 안에 나타나게 됩니다.
정확한 방법은 다음과 같습니다:
구글 사이트 편집기 오른쪽의 '삽입' 메뉴에서 '<> 코드 삽입'을 클릭합니다.
나타나는 팝업창에서 '코드 삽입' 탭을 선택합니다.
제가 작성한 코드 전체 ( <!DOCTYPE html> 부터 맨 아래 </html> 까지 모두)를 복사하여 이 창에 붙여넣습니다.
'다음' 버튼을 누르면 코드 미리보기가 잠시 나타나고, 마지막으로 '삽입' 버튼을 누르면 페이지에 추가됩니다.
왜 이렇게 작동하나요?
구글 사이트는 삽입된 코드를 페이지 안의 독립된 작은 웹 공간(일종의 액자)에서 실행시킵니다.
제가 드린 코드는 그 자체로 하나의 완전한 웹페이지이기 때문에, 이 공간 안에서 완벽하게 시각화될 수 있는 것입니다.
팁: 페이지에 삽입한 후에, 대시보드가 잘려서 보이거나 너무 작게 보일 수 있습니다.
이때는 삽입된 대시보드 창의 파란색 테두리를 마우스로 드래그하여 원하는 크기로 조절해주시면 됩니다.
<!DOCTYPE html> <html lang="ko" class="scroll-smooth"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>AI 교육 설문조사 대시보드 (천안캠퍼스 오후)</title> <!-- Chosen Palette: Calm Corporate --> <!-- Application Structure Plan: The SPA uses a sticky top navigation bar to anchor four distinct thematic sections, allowing for non-linear exploration. The structure is: 1) 'Overview' with key metric cards for immediate participant context. 2) 'Experience Gap' featuring a prominent bar chart to visually emphasize the core finding of high awareness vs. low creation experience. 3) 'Learning Needs' which combines a donut chart for preferred learning styles with interactive cards for desired topics, providing a multi-faceted view of participant requirements. 4) 'Key Recommendations' presented as an interactive process flow, transforming the concluding advice into an engaging, actionable summary. This dashboard structure makes the dense report data scannable and digestible, prioritizing user-driven exploration over linear reading. --> <!-- Visualization & Content Choices: 1. Participant Demographics -> Goal: Inform -> Method: Key metric cards (HTML/CSS) -> Justification: Provides a high-impact, at-a-glance summary. 2. AI Usage vs. Creation Experience -> Goal: Compare -> Method: Bar Chart (Chart.js) -> Justification: Best for visually demonstrating the significant disparity between the two metrics. 3. Preferred Learning Method -> Goal: Compare/Show Proportion -> Method: Donut Chart (Chart.js) -> Justification: Excellent for clearly showing the majority preference for a balanced approach. 4. Strategic Recommendations -> Goal: Organize/Inform -> Method: Interactive flexbox-based cards (HTML/CSS with JS hover) -> Justification: Presents the final strategic points in a more engaging and memorable format than a simple list. NO SVG/Mermaid used. --> <!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. --> <script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700;900&display=swap" rel="stylesheet"> <style> body { font-family: 'Noto Sans KR', sans-serif; background-color: #f8fafc; /* slate-50 */ } .chart-container { position: relative; width: 100%; max-width: 600px; margin-left: auto; margin-right: auto; height: 350px; max-height: 400px; } @media (max-width: 768px) { .chart-container { height: 300px; } } .nav-link { transition: all 0.3s ease; border-bottom: 2px solid transparent; padding-bottom: 4px; } .nav-link.active { color: #2563eb; /* blue-600 */ border-bottom-color: #2563eb; } </style> </head> <body class="text-slate-800"> <header class="bg-white/90 backdrop-blur-lg sticky top-0 z-50 shadow-sm"> <nav class="container mx-auto px-4"> <div class="flex items-center justify-between h-16"> <div class="text-xl font-bold text-blue-700">천안캠퍼스 AI 교육 인사이트</div> <div class="hidden md:flex space-x-8"> <a href="#overview" class="nav-link font-semibold text-slate-600 hover:text-blue-600">참여자 특성</a> <a href="#gap" class="nav-link font-semibold text-slate-600 hover:text-blue-600">활용 현황</a> <a href="#needs" class="nav-link font-semibold text-slate-600 hover:text-blue-600">교육 요구사항</a> <a href="#recommendations" class="nav-link font-semibold text-slate-600 hover:text-blue-600">핵심 제언</a> </div> </div> </nav> </header> <main class="container mx-auto p-4 md:p-8"> <section id="overview" class="py-16"> <div class="text-center mb-12"> <h1 class="text-4xl md:text-5xl font-extrabold text-blue-800 mb-3">AI 교육, 베테랑 교수진을 만나다</h1> <p class="text-lg text-slate-600 max-w-3xl mx-auto">천안캠퍼스 오후반 설문조사 결과 기반 대화형 대시보드</p> </div> <div class="bg-white rounded-xl shadow-lg p-6 md:p-8"> <h2 class="text-2xl font-bold text-center mb-6 text-blue-700">참여자 프로필: 풍부한 경험과 높은 의욕</h2> <p class="text-center text-slate-500 max-w-3xl mx-auto mb-8"> 본 설문에는 10년 이상의 풍부한 교육 경력을 가진 40-50대 베테랑 교수님들이 주로 참여하여, 새로운 AI 기술을 교육에 접목하고자 하는 강한 의지를 보여주었습니다. </p> <div class="grid grid-cols-1 sm:grid-cols-3 gap-6 text-center"> <div class="bg-blue-50 p-6 rounded-lg border border-blue-100"> <span class="text-5xl font-extrabold text-blue-600">13</span> <p class="mt-2 text-lg font-bold text-blue-800">총 참여 인원</p> </div> <div class="bg-blue-50 p-6 rounded-lg border border-blue-100"> <span class="text-5xl font-extrabold text-blue-600">10+</span> <p class="mt-2 text-lg font-bold text-blue-800">평균 교육 경력(년)</p> </div> <div class="bg-blue-50 p-6 rounded-lg border border-blue-100"> <div class="flex justify-center items-baseline"> <span id="digitalSkillValue" class="text-5xl font-extrabold text-blue-600 transition-all duration-500">3.2</span> <span class="text-2xl font-bold text-blue-600">/5</span> </div> <p class="mt-2 text-lg font-bold text-blue-800">디지털 역량(평균)</p> </div> </div> </div> </section> <section id="gap" class="py-16"> <div class="bg-white rounded-xl shadow-lg p-6 md:p-8"> <h2 class="text-3xl font-bold text-center mb-4 text-blue-700">경험의 격차: 높은 '인지' vs 낮은 '창작'</h2> <p class="text-center text-slate-500 max-w-3xl mx-auto mb-8"> 대부분의 교수님들이 AI의 가능성을 인지하고 업무에 활용하고 있지만, 교육 자료를 직접 '창작'하는 경험은 현저히 부족했습니다. 이는 '아는 것'을 '만드는 것'으로 연결해 줄 실습 교육의 필요성을 명확히 보여줍니다. </p> <div class="chart-container"> <canvas id="experienceGapChart"></canvas> </div> </div> </section> <section id="needs" class="py-16"> <div class="bg-white rounded-xl shadow-lg p-6 md:p-8"> <h2 class="text-3xl font-bold text-center mb-4 text-blue-700">교육 요구사항: '이론과 실습의 균형'</h2> <p class="text-center text-slate-500 max-w-3xl mx-auto mb-8"> 참가자들은 AI 기술의 개념적 이해와 함께, 배운 것을 바로 적용해보는 균형 잡힌 교육을 원했습니다. 실용적이고 목적 지향적인 학습 태도가 뚜렷하게 나타났습니다. </p> <div class="grid grid-cols-1 lg:grid-cols-5 gap-8 items-center mt-10"> <div class="lg:col-span-2 chart-container"> <canvas id="preferenceChart"></canvas> </div> <div class="lg:col-span-3"> <h3 class="text-xl font-bold text-blue-700 mb-4">가장 배우고 싶은 내용 TOP 3</h3> <div class="space-y-3"> <div class="bg-slate-50 border border-slate-200 p-4 rounded-lg flex items-center"> <span class="text-2xl font-bold text-blue-500 mr-4">1</span> <span class="text-lg text-slate-700">AI 도구 기본 사용법</span> </div> <div class="bg-slate-50 border border-slate-200 p-4 rounded-lg flex items-center"> <span class="text-2xl font-bold text-blue-500 mr-4">2</span> <span class="text-lg text-slate-700">교육 콘텐츠 제작 실습</span> </div> <div class="bg-slate-50 border border-slate-200 p-4 rounded-lg flex items-center"> <span class="text-2xl font-bold text-blue-500 mr-4">3</span> <span class="text-lg text-slate-700">학습자 맞춤형 콘텐츠 제작</span> </div> </div> </div> </div> </div> </section> <section id="recommendations" class="py-16"> <div class="bg-white rounded-xl shadow-lg p-6 md:p-8"> <h2 class="text-3xl font-bold text-center mb-4 text-blue-700">성공적인 교육을 위한 핵심 제언</h2> <p class="text-center text-slate-500 max-w-3xl mx-auto mb-8"> 설문 결과는 효과적인 교육 프로그램의 방향을 명확히 제시합니다. 참가자들의 높은 학습 열의를 충족시키기 위해 다음 세 가지 전략에 집중해야 합니다. </p> <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-10"> <div class="text-center bg-slate-50 p-6 rounded-lg border border-slate-200 hover:shadow-lg hover:border-blue-300 transition-all duration-300"> <h3 class="text-xl font-bold text-blue-800 mb-2">1. 이론과 실습의 균형</h3> <p class="text-slate-600">AI의 교육적 가치를 먼저 간결히 설명한 후, 곧바로 관련 기능을 실습하는 '이론+실습 병행' 모델로 교육 효과를 극대화합니다.</p> </div> <div class="text-center bg-slate-50 p-6 rounded-lg border border-slate-200 hover:shadow-lg hover:border-blue-300 transition-all duration-300"> <h3 class="text-xl font-bold text-blue-800 mb-2">2. '어떻게'에 집중</h3> <p class="text-slate-600">'내 수업에 바로 적용하는 방법'을 중심으로 구체적인 강의 자료 제작 시나리오 기반의 실용적인 교육을 제공합니다.</p> </div> <div class="text-center bg-slate-50 p-6 rounded-lg border border-slate-200 hover:shadow-lg hover:border-blue-300 transition-all duration-300"> <h3 class="text-xl font-bold text-blue-800 mb-2">3. 사용자 중심의 쉬운 접근</h3> <p class="text-slate-600">다양한 디지털 역량을 고려하여, 전문 용어를 최소화하고 단계별로 따라 할 수 있는 친절한 가이드 형태의 교육을 진행합니다.</p> </div> </div> </div> </section> </main> <footer class="text-center mt-8 py-6 border-t border-slate-200"> <p class="text-slate-500">Google AI 교육 콘텐츠 제작 사전조사 대화형 대시보드 (천안캠퍼스 오후)</p> </footer> <script> document.addEventListener('DOMContentLoaded', () => { const sections = document.querySelectorAll('main section'); const navLinks = document.querySelectorAll('.nav-link'); const observerOptions = { root: null, rootMargin: '0px', threshold: 0.4 }; const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { navLinks.forEach(link => { link.classList.remove('active'); if (link.getAttribute('href').substring(1) === entry.target.id) { link.classList.add('active'); } }); } }); }, observerOptions); sections.forEach(section => { observer.observe(section); }); navLinks.forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); document.querySelector(this.getAttribute('href')).scrollIntoView({ behavior: 'smooth' }); }); }); const tooltipConfig = { plugins: { tooltip: { callbacks: { title: function(tooltipItems) { const item = tooltipItems[0]; let label = item.chart.data.labels[item.dataIndex]; if (Array.isArray(label)) { return label.join(' '); } return label; } } } } }; const experienceData = { labels: ['AI 업무 활용도 (인지)', 'AI 콘텐츠 제작 경험 (창작)'], datasets: [{ label: '경험 수준 (추정치)', data: [75, 25], backgroundColor: ['#3b82f6', '#f97316'], borderColor: ['#2563eb', '#c2410c'], borderWidth: 1.5, barPercentage: 0.5, }] }; new Chart(document.getElementById('experienceGapChart'), { type: 'bar', data: experienceData, options: { indexAxis: 'y', responsive: true, maintainAspectRatio: false, scales: { x: { beginAtZero: true, max: 100, ticks: { callback: value => value + '%' } } }, plugins: { ...tooltipConfig.plugins, legend: { display: false }, title: { display: true, text: 'AI 인지도와 실제 창작 경험 간의 격차', padding: { bottom: 20 } } } } }); const preferenceData = { labels: ['이론+실습 병행', '실습 중심 워크숍', '기타'], datasets: [{ data: [65, 30, 5], backgroundColor: ['#2563eb', '#60a5fa', '#dbeafe'], borderColor: '#ffffff', borderWidth: 4, hoverOffset: 8 }] }; new Chart(document.getElementById('preferenceChart'), { type: 'doughnut', data: preferenceData, options: { responsive: true, maintainAspectRatio: false, cutout: '60%', plugins: { ...tooltipConfig.plugins, legend: { position: 'bottom', labels: { padding: 20 } }, title: { display: true, text: '선호하는 교육 방식' } } } }); // Animate number const skillValueEl = document.getElementById('digitalSkillValue'); const targetValue = 3.2; let startValue = 0; const duration = 1500; let startTime = null; function animateNumber(timestamp) { if (!startTime) startTime = timestamp; const progress = timestamp - startTime; const percentage = Math.min(progress / duration, 1); const currentValue = startValue + (targetValue - startValue) * percentage; skillValueEl.textContent = currentValue.toFixed(1); if (progress < duration) { requestAnimationFrame(animateNumber); } } const numObserver = new IntersectionObserver((entries) => { if (entries[0].isIntersecting) { requestAnimationFrame(animateNumber); numObserver.unobserve(skillValueEl); } }, {threshold: 0.8}); numObserver.observe(skillValueEl); }); </script> </body> </html>해결 : Google Site에 Gemini Canvas에서 생성된 코드를 삽입하여 원하는 형태로 시각화 성공 ✅
사용한 주요 도구
Google Appscript
Google Form
Google Spreadsheet
Google Gemini Canvas
Google Site
결과와 배운 점
응답이 예상과 달라 흥미로운 인사이트 발견 → 설문 전 가정과 실제 데이터 간 차이를 확인
Gemini Canvas의 시각화 한계를 직접 경험했으나, Google Site 연동을 통해 문제 해결
데이터 기반 준비의 중요성과 자동화 툴의 효율성을 체감
앞으로는 시각화 자동화 프로세스를 개선하여 재사용 가능한 워크플로우를 만드는 것이 목표
