🏫

AI 융합교육연구회 줌 세미나(2022.12.12.월요일)

프로그래밍 교육용 언어로서 스크립트 언어인 오토핫키(AutoHotKey)의 교육적 가치 및 수행 평가 사례 발표 부제: 영신여자고등학교에서 영어와 정보를 가르치고 있는 김준오 교사의 망한 수업에 대한 이야기 (또 망하게 생겼습니다. **;)
 목차
코딩의 중요성

1.  무엇을 가르치는가?

가. 오토핫키 소개

나. 스크립트 언어인 오토핫키

다. 오토핫키 IDE & 한글 패치

라. 예제 저장소

autohotkey
bluelion79

마. 대표 유튜브 채널

*오토핫키로 구현할 수 있는 기능

2.  누구에게?

고등학교 2학년 여학생을 대상으로 2022년 1학기에 오토핫키 수업을 진행하였습니다.

3. 왜  AutoHotkey?

일반적인 언어 학습

graph LR
  듣기/말하기 --> 그림마니_그림책 --> 그림조금_그림책 --> 글조금_책 --> 글마니_책
Mermaid
복사

프로그래밍 언어 학습

graph LR
  기본블럭_코딩 --> 전문블럭_코딩 --> 코드조금_블럭코딩 --> 코드마니_블럭코딩 --> ? --> 파이썬/C --> 전문_프로그래밍_언어
Mermaid
복사
GUI 구현이 쉬우면서 텍스트 코딩 문법을 쉽게 배울 수 있는 언어가 필요
Windows OS 의 많은 리소스(프로그램 등)를 활용해서 프로그램 개발 가능

4. 그래서?

그림에 가까운 블록코딩과 글에 가까운 텍스트 코딩 사이에 다리 놓기
오토핫키를 프로그래밍 언어로 선정
2학년 1학기 오토핫키 수업
2학년 2학기 파이썬 수업

5. 어떻게? 수업은?

오토핫키 언어 학습과 또 다른 언어로의 확장

기본적인 오토핫키 수업
오토핫키 로직 그대로 다른 언어에 적용 수업(AutoHotkey —> Dart —> Flutter)

 코드 예시

Gui Font, s9, Segoe UI Gui Add, Button, x7 y18 w161 h70, 시작 Gui Add, Button, x8 y96 w161 h70, 끝 Gui Show, w177 h174, Window Return Button시작: { MsgBox 시험을 시작합니다. } Return Button끝: { MsgBox 시험이 끝났습니다. ExitApp } Return GuiClose: ExitApp
C++
복사
InputBox, yourMoney, Coffee Machine, Please put your money in: , , 300, 150 coffeePrice := 500 if (yourMoney < coffeePrice) { MsgBox %coffeePrice% %yourMoney% MsgBox, You need more money to get a cup of coffee. Sorry. ExitApp } cupsCount := yourMoney // coffeePrice change := Mod(yourMoney, coffeePrice) Loop, %cupsCount% { MsgBox, Coffee %A_Index%`n } MsgBox, Here's your change %change% return
C++
복사
/* ################################################################ * 영신여자고등학교 2학년 00반 00번 김 준 오 * 1. 프로그램명: 스마트 계산기 * 2. 프로그램 설명: 스마트하게 세상 모든 문제를 풀어주는 계산기 * 3. 프로그램 제작 목적: * 4. 향후 프로그램 업그레이드 계획 * 5. 제작일자: 2022년 4월 4일 월요일 * 6. 파일명: 20000_김준오_20220411_스마트계산기.ahk * ################################################################ */ ; Generated by Auto-GUI 3.0.1 #SingleInstance Force #NoEnv SetWorkingDir %A_ScriptDir% SetBatchLines -1 /* 영신여자고등학교 정보 수업 오토핫키를 이용한 GUI 설계 및 간단한 프로그램 제작 2022월 4월 10일 제작 */ ;[글자 폰트 설정] Gui Font, s9, Segoe UI ;[메뉴바 설정] Menu FileMenu, Add, &Open...`tCtrl+O, MenuHandler Menu MenuBar, Add, &File, :FileMenu Menu HelpMenu, Add, &Info`tF1, MenuHandler Menu MenuBar, Add, &Help, :HelpMenu Gui Menu, MenuBar ;[학교 로고] Gui Add, Picture, x8 y16 w215 h34, C:\Users\Administrator\Desktop\정보 수업\autohotkey_git\yslogo.png ;[학번] Gui Add, Text, x8 y72 w73 h23 +0x200 +Right , Student_No Gui Add, Edit, x88 y72 w135 h23 vStdNo ;[성명] Gui Add, Text, x16 y104 w63 h23 +0x200 +Right , Std_Name Gui Add, Edit, x87 y104 w136 h21 vStdName ;[취미] Gui Add, ComboBox, x9 y136 w214 vCB, What is your hobby?||Reading books|Playing the piano ;[행복한 정도] Gui Add, Text, x8 y168 w216 h23 +0x200 +Center, Are you happy? Show me the number. ;[슬라이더] 슬라이더를 설명하는 부분 Gui Add, Slider, x8 y216 w216 h29 Tickinterval10 gSlider1 altsubmit vSlider1, 50 ;[슬라이더] 행복의 정도를 표시하는 슬라이더 Gui Add, Text, x56 y192 w120 h23 +0x200 +Center vNslider, Happyness level: ;[슬라이더] 행복의 정도를 표시하는 슬라이더에서 보낸 값을 표시하는 부분 ;[학교생활 만족] Gui Add, Text, x9 y249 w217 h23 +0x200 +Center, Are you satisfied with your school life? Gui Add, Radio, x15 y280 w83 h23 vYes, Satisfied Gui Add, Radio, x136 y280 w88 h24 vNo, Not really ;[내용을 모두 읽었는지 확인] Gui Add, CheckBox, x104 y328 w120 h23 vRead, I read everything. ;[저장과 취소 버튼] Gui Add, Button, x8 y360 w80 h23, Save Gui Add, Button, x144 y360 w80 h23, Cancel ;[프로그램을 사용자에게 보이기] Gui Show, w232 h400, YS School Gui, Submit, NoHide Return ;#################### ;세부 설정하는 부분 ;#################### ; 저장 버튼을 누르면 실행되는 코드 ButtonSave: Gui, Submit, NoHide { if(Yes = 1) { Satisfaction = Satisfied }else{ Satisfaction = Not satisfied } if(Read = 1) { done = Done }else { done = unchecked } MsgBox `nStd ID_No: %StdNo%`n Std_Name: %stdName%`n Hobby: %CB%`n My Happyness level: %Slider1%`n Satisfaction: %Satisfaction%`n Everything: %done% } Return ; 취소 버튼을 누르면 실행되는 코드 ButtonCancel: { ExitApp } return ;행복 상태를 측정하는 슬라이더 값을 TEXT 창에 표시하는 컨트롤 코드 Slider1: Gui, Submit, NoHide GuiControl,, Nslider, My level: %Slider1% return ; 프로그래 종료와 관련된 코드 MenuHandler: Return ; 프로그램 종료 창을 누르면 종료하는 코드 GuiEscape: GuiClose: ExitApp
C++
복사
#SingleInstance, Force ;이전 인스턴스를 없애고 최신 인스턴스 실행 #WinActivateForce SetTitleMatchMode, 2 SetTitleMatchMode, slow DetectHiddenWindows, On /* Ctrl: ^ Alt: ! Shift: + Window: # */ Gui, Add, Text, x12 y59 w100 h20 , 여자 주인공 이름 Gui, Add, Text, x12 y99 w90 h20 , 가진 돌의 갯수 Gui, Add, Text, x12 y139 w70 h20 , 가진 돈() Gui, Add, Text, x12 y179 w60 h20 , 건강 상태 Gui, Add, Radio, x212 y209 w-240 h-260 , Radio Gui, Add, Radio, x122 y179 w50 h20 vyes Checked, 좋음 Gui, Add, Radio, x202 y179 w50 h20 vno, 나쁨 Gui, Add, Text, x12 y19 w100 h20 , 남자 주인공 이름 Gui, Add, Edit, x122 y19 w110 h20 vmale, 이름 입력 Gui, Add, Edit, x122 y59 w110 h20 vfemale, 이름 입력 Gui, Add, Edit, x122 y99 w130 h20 vstone, 가진 돌의 갯수 입력 Gui, Add, Edit, x122 y139 w130 h20 vmoney, 가진 돈 액수 입력 Gui, Add, Button, x12 y219 w90 h30 , 시작 Gui, Add, Button, x158 y219 w100 h30 , 취소 Gui, Show, w268 h266, The Circle of Life return GuiClose: { ExitApp } return Button시작: { Gui, Submit, nohide ; Gui에 있는 변수 값 가져오기 IfWinNotExist, 제목 없음 - Windows 메모장 { Run, notepad.exe } else { WinRestore, 제목 없음 - Windows 메모장 ; 최소화되어 있는 창을 다시 살리기 WinActivate, 제목 없음 - Windows 메모장 } Sleep, 1000 Send, ^a Sleep, 1000 Send, {Del} Sleep, 1000 intro(male, female, stone, money) Sleep, 500 send, %male% and %female% live a good life.`n if(yes = 1) { if (money >= 100) { body1(male, female, stone, money) } else { body2(male, female, stone, money) } } else { send, But, %male% is sick now. So %male% and %female% go to hospital.`n send, %male% and %female% go to hospital.`n send, %male% and %female% are getting better day by day.`n } Sleep, 500 conclusion(male, female, stone, money) } return /* Send, {!}autohotkey - 나열하듯 타이핑 치듯 출력됨. 촤르륵. Sendraw, !autohotkey - 나열하듯 타이핑 치듯 출력됨. 촤르륵. Sendinput, {!}autohotkey - 한방에 도장 찍히듯 뙇뙇뙇 출력됨. 촤르륵이 아니고 쾅쾅쾅. 찍는 느낌. */ intro(male, female, stone, money) { send, %male% and %female% live in a faraway land.`n } body1(male, female, stone, money) { send, %male% and %female% have %money%and plan to take a trip.`n } body2(male, female, stone, money) { send, %male% and %female% plan to come up with an idea to make money.`n Loop, 3 { send, %A_Index% day goes by.`n } send, Fortunately, %male% and %female% find %stone% magic stone(s).`n send, %male% and %female% now have %stone% stone(s).`n body1(male, female, stone, money) } conclusion(male, female, stone, money) { send, %male% and %female% will live joyfully forever. } Button취소: { ExitApp } return
C++
복사
#SingleInstance force #NoEnv ;----------------------------------------------------------------------------------- set gui Gui, Add, GroupBox, w490 h123 cED006D vGroup1, 1. CheckBox and Radio Gui, Add, Checkbox, xs+5 yp+25 vCheck1 gCheck1Action, 체크박스 1 Gui, Add, Checkbox, x+20 yp vCheck2 gCheck2Action, 체크박스 2 Gui, Add, Checkbox, x+20 yp Right vCheck3 Checked, 체크박스 3 (오른쪽 위치, 구동 시 체크상태) Gui, Add, Radio, xs+5 y+15 gRadioGroup1 vRadioGroup1, 라디오 1-1 (기본) Gui, Add, Radio, x+20 yp gRadioGroup1, 라디오 1-2 Gui, Add, Radio, x+20 yp gRadioGroup1 Right , 라디오 1-3 (오른쪽) Gui, Add, Text, xs+5 y+10 c1266FF, ---------------------------------그룹 나누기------------------------------------ Gui, Add, Radio, xs+5 yp+20 gRadioGroup2 vRadioGroup2, 라디오 2-1 (기본) Gui, Add, Radio, x+20 yp gRadioGroup2, 라디오 2-2 Gui, Add, Radio, x+20 yp gRadioGroup2 Right, 라디오 2-3 (오른쪽) Gui, Add, Button, x+15 yp gBT1, 선택 결과 확인 Gui, Add, GroupBox, xs y+15 w490 h155 cED006D vGroup2, 2. DropDownList, Combobox, ListBox Gui, Add, Text, xs+5 yp+30 c1266FF, DropDownList: Gui, Add, DropDownList, x+30 yp-4 vDrop1 gDrop1Action, Select BG color||Red|Green|Blue|Black|Yellow Gui, Add, DropDownList, x+30 yp vDrop2, Select City||서울|뉴욕|런던|파리|로마|이스탄불 Gui, Add, Text, xs+5 yp+35 c1266FF, Combobox: Gui, Add, ComboBox, x+46 yp-4 vCombo1, Red|Green|Blue|Black|Yellow Gui, Add, Button, x+30 yp-2 gBT2, 보기 Gui, Add, Text, xs+5 y+5 cpurple, < 기타 purple, white 등 기본컬러 또는 RGB 6자리 코드(000000=black) 입력, [보기] Œ > Gui, Add, Text, xs+5 yp+30 c1266FF, ListBox: Gui, Add, ListBox, x+66 yp-4 vList1, Red|Green|Blue|Black|Yellow Gui, Add, Button, x+30 yp+17 gBT3, 보기 Gui, Add, Button, x+72 yp gBT4, 선택 결과 확인 Gui, Add, GroupBox, xs y+15 w490 h97 cED006D vGroup3, 3. Progress and Slider Gui, Add, Text, xs+5 yp+30 c1266FF, Slider: Gui, Add, Slider, x+40 yp-4 w320 Tickinterval10 gSlider1 altsubmit vSlider1 Gui, Add, Text, x+8 yp+6 c1266FF Left vNslider, 먼저 선택 Gui, Add, Text, xs+5 yp+40 c1266FF, Progress: Gui, Add, Progress, x+20 yp-4 w320 h20 c1266FF BackgroundC6C6C6 Range0-100 vProgress1 Gui, Add, Text, x+10 yp+6 c1266FF w20 Left vNprogress, 100 Gui, Add, Button, x+15 yp-7 gBT5, 시작 Gui, Show,, [쉬운 오토핫키 강좌] 10. Gui 활용 - Add와 ControlType return GuiClose: exitapp ;----------------------------------------------------------------------------------- subroutine 1 Check1Action: Gui, Submit, NoHide if Check1=1 GuiControl,, Group1, vGroup1: gCheck1Action- (1)번 체크 else GuiControl,, Group1, vGroup1: gCheck1Action- (1)번 체크 해제 return Check2Action: Gui, Submit, NoHide if Check2=1 GuiControl,, Group1, vGroup1: gCheck2Action- (2)번 체크 else GuiControl,, Group1, vGroup1: gCheck2Action- (2)번 체크 해제 return RadioGroup1: Gui, Submit, NoHide GuiControl,, Group1, gRadioGroup1- 1그룹의 %RadioGroup1%번 radio 선택 return RadioGroup2: Gui, Submit, NoHide GuiControl,, Group1, gRadioGroup2- 2그룹의 %RadioGroup2%번 radio 선택 return BT1: Gui, Submit, NoHide GuiControl,, Group1, 선택결과: Check1(%Check1%), Check2(%Check2%), Check3(%Check3%), RadioGroup1(%RadioGroup1%), RadioGroup2(%RadioGroup2%) return ;----------------------------------------------------------------------------------- subroutine 2-1 Drop1Action: Gui, Submit, NoHide ; Gui의 값을 이용하기 위해서는 필수적인 명령줄입니다. ;MsgBox % Drop1 ", " Drop2 ; 활성화 해서 확인해 보세요 GuiControl,, Group2, vGroup2: gDrop1Action - %Drop1% 을 선택했군요... if (Drop1="Red") { textcolor=yellow } else if (Drop1="Green") { textcolor=white } else if (Drop1="Blue") { textcolor=red } else if (Drop1="Black") { textcolor=yellow } else if (Drop1="Yellow") { textcolor=black } else { MsgBox 아무 것도 선택 안했어요 return } Gui, 2: Font, s10 bold Gui, 2: Color, %Drop1% ; 바탕색 Gui, 2: Add, Text, c%textcolor%, 바탕색,글자색 확인 (2초 후 사라짐) ; 글자색 Gui, 2: Show, w250 h100, Gui 2 sleep, 2000 Gui, 2: Destroy ; gui 폭발!! return 2GuiClose: Gui, 2: Destroy return ;----------------------------------------------------------------------------------- subroutine 2-2 BT2: Gui, Submit, NoHide if (Combo1="Red") { textcolor=yellow } else if (Combo1="Green") { textcolor=white } else if (Combo1="Blue") { textcolor=red } else if (Combo1="Black") { textcolor=yellow } else if (Combo1="Yellow") { textcolor=black } Gui, 3: Font, s10 bold Gui, 3: Color, %Combo1% Gui, 3: Add, Text, c%textcolor%, 바탕색,글자색 확인 (2초 후 사라짐) Gui, 3: Show, w250 h100, Gui 3 sleep, 2000 Gui, 3: Destroy return 3GuiClose: Gui, 3: Destroy return ;----------------------------------------------------------------------------------- subroutine 2-3 BT3: Gui, Submit, NoHide if (List1="Red") { textcolor=yellow } else if (List1="Green") { textcolor=white } else if (List1="Blue") { textcolor=red } else if (List1="Black") { textcolor=yellow } else if (List1="Yellow") { textcolor=black } else { MsgBox 아무 것도 선택 안했어요 return } Gui, 4: Font, s10 bold Gui, 4: Color, %List1% Gui, 4: Add, Text, c%textcolor%, 바탕색,글자색 확인 (2초 후 사라짐) Gui, 4: Show, w250 h100, Gui 2 sleep, 2000 Gui, 4: Destroy return 4GuiClose: Gui, 4: Destroy return BT4: Gui, Submit, NoHide GuiControl,, Group2, 선택결과: Drop1(%Drop1%), Drop2(%Drop2%), Combo(%Combo1%), List(%List1%) return ;----------------------------------------------------------------------------------- subroutine 3 Slider1: Gui, Submit, NoHide GuiControl,, Nslider, %Slider1% return BT5: Gui, Submit, NoHide N:=0 GuiControl,, Group3, vGroup3: 진행중.... Loop { N++ if (N>Slider1) { break } GuiControl,, Progress1, %N% GuiControl,, Nprogress, %N% sleep, 50 } GuiControl,, Group3, vGroup3:~~return
C++
복사

6. 평가는?

가. 교사 측면

1차 수행평가
Loading PDF…
2차 수행평가
Loading PDF…
답안지 양식
Loading PDF…

나. 학생 측면

Loading PDF…

7. 어려운 점은?

코딩이라는 창의성 영역의 평가가 가능한가?
평가에 엄청난 시간과 노력을 투자해도 아쉬움
1학기 수행평가(암기형 시험)
2학기 수행평가(오픈북 시험)
=(LEN(F2)-LEN(SUBSTITUTE(F2,$I$1,"")))/LEN($I$1)
C++
복사

8. 두서 없는 제언?

1학기와 2학기를 비교할 때, 평가 결과에는 크게 변화가 없었으나 평가 시간은 차이가 났음. 2학기가 더 효율적으로 평가가 이루어짐.
모 대학의 영어과 교수님의 Creative Writing 평가 방식을 적용한다면?
프로그래밍 언어 수업은 평가 방식은?
오토핫키 강의와 정보 윤리

망한 수업에 대한 마지막 저의 절규~

I have not failed. I have just found 10,000 ways that won’t work. Thomas Edison

또 망하게 생겼습니다.

Loading PDF…

 모든 교과의 수행평가에 변화가 필요한 시기

더는 망할 수 없어…… 너에게 정말 잘 지시하겠어~ 나도 지금부터 달라질거야~

// This script by Danny Richman is free to use on a Creative Commons License @DannyRichman function onOpen(){ // This function add a menu option to covert formulas to plain text. var ui = SpreadsheetApp.getUi(); ui.createMenu('Save Values') .addItem('Save', 'saveAsFixedValue') .addToUi(); } function saveAsFixedValue(){ // This function prevents the API being called each time the sheet is refreshed or updated to save your API credits. var ss = SpreadsheetApp.getActiveSheet() var data = ss.getDataRange().getValues() ss.getRange(1,1,data.length,data[0].length).setValues(data) } function MakeItShort(val) { // main function to generate formula and write value to sheet var ss = SpreadsheetApp.getActiveSheet() // Exit function if no description provided if (val == "" ) { result = "" return result; } // get API key from settings sheet var setsh = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Settings"); var apiKey = setsh.getRange(2,1).getValue() // configure the API request to OpenAI var data = { "prompt": "Summarize this for a second-grade student:\n\n자신의 행동에 신중하고 조심스러운 성격으로 상대방을 배려하여 자신의 감정을 잘 통제하며 친구들과 잘 어울림. 학업에 대한 관심과 열정은 뛰어나 끈질기게 손에서 책을 떼지 않고 노력하며, 자신만의 효율적인 학습방법을 통해 지속적으로 비교적 우수한 학업성취도를 잘 유지함. 진로에 대한 진지한 자기성찰과 탐색을 통해 구체적인 방향을 정하고 단계적으로 꾸준히 노력한다면 발전가능성이 충분히 있을 것으로 기대됨. 담임교사를 도와 급우들이 쾌적한 환경에서 생활할 수 있도록 환경도우미 역할을 충실히 수행함. 학교나 학급 행사가 있을 때 질서유지에 힘쓰고 매사 협조적인 자세로 임함. 친구들의 장점을 잘 발견하고 수시로 칭찬함으로써 교우관계를 잘 유지하는 등 친화력이 좋음. 학교규칙을 잘 준수하고 학급내의 사소한 규칙도 양심껏 잘 지킴.\n\n" + val + "\n", "model": "text-davinci-003", "temperature": 0.7, "max_tokens": 1000, "top_p": 1, "frequency_penalty": 0, "presence_penalty": 0, "stop": ["\n\n"] }; var options = { 'method' : 'post', 'contentType': 'application/json', 'payload' : JSON.stringify(data), 'headers': { Authorization: 'Bearer ' + apiKey, }, }; var response = UrlFetchApp.fetch( 'https://api.openai.com/v1/completions', options, ); // Send the API request var result = JSON.parse(response.getContentText())['choices'][0]['text'] Logger.log(result) return result }
JavaScript
복사

미래출현의 저자 황준원님의 말씀

손정의씨는 미래에 제일 중요한 역량은 ‘wish’와 ’dream’이라고 했음. 아이들이 상상하고, 지시하게 하라! 지시하는 인재를 양성하라!

10. 향후 계획

상상하고 지시하는 시민 또는 학생 개발자 양성을 위해 노코드(로우코드) 툴 연구 및 안내
대표 플러터 플로우 노코드 툴 커뮤니티