융합적 사고를 위한 SW 교육

김 태 영

한국교원대학교 컴퓨터교육과

Ⅰ. SW에 기반한 융합 교육

1) 계산적 사고(computational thinking)

• 계산적 사고에 기반한 체계적인 교육 내용 구성이 필요

▸실제 세계에서 일어나는 다양한 영역의 문제들을 분석하는 능력

▸그러한 문제들을 자료구조와 알고리듬으로 표현하고 설계하는 능력

▸실제 프로그래밍 언어로 구현하는 능력

→ 융합 교육을 위해 실제 세계에서 계산적 사고를 훈련하는 방식

• 사례들 소개:

- 2013년도 노벨화학상 ‘다중척도모델링’

▸복잡한 화학반응과정과 분자 조합을 계산, 예측하기 위해 컴퓨터기반 다층적 분석 모델 고안

▸노벨상 100년 전통의 변화: 이제까지 화학자들은 플라스틱 공과 막대를 가지고 화학분자 모델을 분석했으나, 이들이 개발한 컴퓨터 모델 덕분에 이제는 화학작용을 컴퓨터로 예측하고 이해한다.

- 인간게놈 프로젝트(Human Genome Project): Bioinformatics

▸HGP: 인간 게놈의 모든 염기 서열을 해석하기 위한 프로젝트

▸1990년에 시작되어 2003년에 완료됨

- 기상청 기상 예측, 자동차 설계 등 기타

• 계산적 사고(computational thinking)

국제교육기술협회(ISTE) & 컴퓨터과학교사협의회(CSTA)

→ Computational Thinking은 다음의 특성을 포함하는 문제해결과정

▸문제 해결에 컴퓨터나 다른 도구를 사용할 수 있도록 문제를 구성하기

▸논리적으로 데이터를 조직하고 분석하기

▸모델링이나 시뮬레이션 등의 추상화를 통해 데이터를 표현하기

▸알고리즘적 사고(일련의 단계)를 통해 해결책을 자동화하기

▸목표 달성을 위한 해결책을 식별하고, 분석하고, 적용하기

▸이러한 문제해결과정을 다양한 문제들로 일반화하고 전환하기

Ⅱ. 융합 교육용 SW 지도안

1) SW란 무엇인가? (What - 생각해보기)

• Aduino 실습

/* Blink

Turns on an LED on for one second, then off for one second, repeatedly.

This example code is in the public domain.  */

// Pin 13 has an LED connected on most Arduino boards.

// give it a name:

int led = 13;

// the setup routine runs once when you press reset:

void setup() {

// initialize the digital pin as an output.

pinMode(led, OUTPUT);

}

// the loop routine runs over and over again forever:

void loop() {

digitalWrite(led, HIGH);   // turn the LED on (HIGH is the voltage level)

delay(3000);               // wait for a second

digitalWrite(led, LOW);    // turn the LED off by making the voltage LOW

delay(1000);               // wait for a second

}

• 보이는(visible) 몸(body)을 움직이는 것은 무엇인가?

- 보이지 않는(invisible) “생각” ← 마음

• 왜 수학을 배우는가?

- 보이지 않는 자연의 “법칙/질서”를 나타냄

e.g., F=ma, S=1/2gt2

- 수학은 ‘소수의’ 수학자들이 연구하는 학문(학생들이 수학자가 될 것이 아닌데도...)

→ 수학의 보편성(universal knowledge)

- 모든 사람들이 현대 문명의 기초인 과학/기술을 이해하는데 필수적인 지식 (자연의 질서를 이해)

→ 논리적 사고력/문제해결력

• 왜 SW를 배워야하는가?

- SW의 보편성(universality): 같은 이유

누구나: 현재 3살 어린아이부터 80살 노인에 이르기까지 사용해야만 함

언제/어디서나: 잠에서 깨어서/어디에 있던지

- 검색/메일/SNS(카카오톡/라인)/홈쇼핑...

- 현대 문명의 특징: ubiquitous SW (어디에나 있음/편재)

→ 모든 사람들이 현대 문명을 ‘이해하는데’ 필수적인 지식(universal knowledge)

2) SW는 왜 필요한가? 어디에 사용하는가? (Why/Where - 생각해보기)

• SW의 기원

Turing Machine: Turing and the 'Universal' Machine

→ 컴퓨터와 다른 기계들(예, 자동차 등)과의 차이점은 무엇인가?

→ 사람과 동물과의 차이점은 무엇인가?

• Computer/Network이 실세계에 등장함으로 누구나 ‘자신의 생각’을 ‘현실화’ 시킬 수 있는 마법의 도구

- 창업/혁신 기업들: Naver/Daum/KakaoTalk...  IBM/Apple/Amazon/Google/Facebook...

- SW 산업이 HW 산업을 넘어서는 시대 (2012년에 이미)

LCD	휴대폰	반도체	자동차	SW

1,139	2,446	3,161	8,030	13,158 (억 달러)

- 세계 SW시장은 자동차시장의 1.5배, 반도체시장의 4배 규모인 1조 3,000억 달러 규모

- 우리나라의 고급인력 활용: synergy 효과

이미 HW(제조업) 강국 + 이제 SW(창조/혁신의 도구) 활용해야 함

• SW의 종류

Numerical Analysis	= Computer

Database	= Information Processing System

H/W  +	Process Control	= 자동화 기기

Word Processor	= 타자기

Game	= Game 기기

A/V Stream Player	= A/V 기기

통신 S/W	= 전화기

…	…

• 용도

- 수학/과학의 기계적 계산

- 기계의 조정/조절(control) - robots

- 대량의 데이타 저장/처리 - Web sites

- 시뮬레이션/게임

- A/V

- 통신

• 자료들

- 수학/과학

http://www.wolfram.com/broadcast/videos/quicktour-academic/

- Jeopardy

http://www.youtube.com/

- Google self-driving car

http://www.youtube.com/

- 기상청: 날씨 예측 - super computer

http://www.kma.go.kr/weather/main.jsp

3) SW를 어떻게 만드는가? (How - 생각해보기)

• SW란 무엇인가?(What)를 이해하여야 함

→ ‘추상적인(invisible)' 논리력/문제해결력을 다루는 학문

• Computer의 정의에서 출발해야 함: 자신의 생각을 SW로 표현하여 집어넣을 수 있는 기계

↔ HW 중심의 기계와는 전혀 다른 개념 - 자동차/밥통 등 (항상 똑같은 작업을 수행)

↔ SW: 전화기/타자기/오디오/비디오/계산기/게임기 등

• SW 교육

1) 문제를 발견하는 능력 - STEAM(수학/과학/예술/인문/사회)에서 문제가 무엇인가?

2) 해결책을 표현하는 능력 - algorithm (수식/방정식 발견)

3) 실제로 구현하는 능력 - programming

e.g., 수학: 최대공약수 문제 - Euclid algorithm

물리: 운동 - Algodoo 시뮬레이션 (원/포물선 운동 등)

음악: 작곡/음계 - Arduino 보드로 음악 SW 실험

• 문제/문제 분석/해결책 표현 - 알고리듬(algorithm)

/* 가상의 자판기 만들기 */

▸문제: 가장의 자판기가 있다. 동전을 넣고 세 가지 종류의 커피를 뽑을 수 있으며, 커피는 블랙커피, 설탕커피, 밀크 커피로 나누어져 있다. 커피 한 잔의 값은 200원이며, 200원보다 큰 돈을 넣고서 커피를 뽑을 수 있다. 자판기 동작을 수행하는 프로그램을 설계해 보자.

▸문제분석:

① 200원 이상일 경우에만 커피를 뽑을 수 있다.

② 세 개의 단추를 두고서 사용자에게 커피, 설탕, 크림을 선택하게 해야한다.

③ 자판기는 세 종류의 커피를 제공해야 한다.

④ 잔돈이 남는지를 판단하여 거스름돈을 돌려준다.

⑤ 사용자는 커피 선택을 취소할 수 있다.

▸알고리듬:

① 돈을 넣는다.

② 200원보다 작으면 ①로 다시 간다.

③ 블랙커피, 설탕커피, 밀크커피, 취소 중에 하나를 선택받는다.

④ 취소면 ⑫로 이동한다.

⑤ 컵을 내린다.

⑥ 컵에 커피를 쏟는다.

⑦ 블랙커피이면 ⑩으로 이동한다.

⑧ 설탕커피이면 설탕을 추가한 후 ⑩으로 이동한다.

⑨ 밀크커피이면 설탕과 크림을 추가한 후 ⑩으로 이동한다.

⑩ 컵에 물을 붓는다.

⑪ 입력된 금액에서 200원을 뺀 후, 잔돈을 거슬러 준다.

⑫ 프로그램을 종료한다.

• 프로그래밍(programming): HTML/CSS/JavaScript → SW 작성/실행

- 이 문제를 컴퓨터로 어떻게 풀 수 있을까?

→ Computational Thinking(Data Structure/Algorithm)의 활용

- Programming

▸데이터의 연산

▸조건/반복/처리 변경

조건문

반복문

처리의 흐름을 변경

/* 가상의 자판기 만들기 */

<html>

<head>

<title> Coffee Machine </title>

<script language=javascript>

var x;

var y=200;	// 커피값...

function cancel(){

x=eval(document.form1.in.value);

alert("취소하였습니다...");

document.form1.in.value=0;

document.form1.out.value=x;

}

function input(){

x=eval(document.form1.in.value);

if (x<y){

alert("200원보다 작습니다...");

document.form1.in.value=0;

document.form1.out.value=x;

}

}

function black(){

input();

if (x>=y){

alert("블랙커피입니다...");

document.form1.in.value=0;

document.form1.out.value=x - y;

}

}

</script>

</head>

<body bgcolor=#00ff00>

<center>

<h1> 커피 자판기 </h1>

<img id="coffeeImg" src="coffee.jpg" width="200" height="150"><br><br>

<form name="form1">

동전: <input type="text" size=20 name="in"><br><br>

<input type="button" value="블랙커피" onclick=black()>

<input type="button" value="설탕커피" onclick=sugar()>

<input type="button" value="밀크커피" onclick=milk()>

<input type="button" value="취소" onclick=cancel()> <br><br>

잔돈: <input type="text" size=20 name="out">

</form>

</body>

</html>

• 수학 알고리듬 실습: Sum/최대공약수(Euclid algorithm)

/* 문제 #1: 1부터 x까지의 합 (1+2+3+ … +x) */

<HTML>

<BODY>

<SCRIPT LANGUAGE = "JAVASCRIPT">

var sum=0;

var I, number;

number=parseInt(prompt("수 입력“));

for ( i = 1 ; i <= number ; i = i + 1 )

{

sum = sum + i;

}

document.write("1부터 100까지의 합은 " + sum);

// or alert("1부터 100까지의 합은 " + sum);

</SCRIPT>

</BODY>

</HTML>

/* 문제 #2: x부터 y까지의 합 (x<y)*/

<HTML>

<head>

<title> 두 수 사이의 합 계산하기 </title>

<SCRIPT LANGUAGE = "JAVASCRIPT">

function run(){

// Data...

var a, b, i;

var sum=0;

// Input...

a=eval(document.frm1.input1.value);

b=eval(document.frm1.input2.value);

// Process...

if (a==b){

alert("두 수가 같습니다!!");	// Error...

}else if (a>b){

alert("첫번째 수가 더 큽니다!!");	// Error...

}

else{

for(i=a; i<= b; i=i+1){

sum = sum + i;

}

// Output...

alert("두 수 사이의 합은 " + sum);

}

}

</SCRIPT>

</head>

<BODY>

<!-- User Interface (UI) -->

<font size="6" color="red" face="comic sans ms"> 두 수 사이의 합</font><br><br>

<form name="frm1">

<input type="text" size=10 name="input1"><br>

<input type="text" size=10 name="input2"><br>

<input type="button" name="btn1" value="합" onclick=run()><br>

</form>

</BODY>

</HTML>

/* 간단한 계산기 만들기 */

<html>

<head>

<title> 4칙연산 계산기 </title>

<script language=javascript>

var x,y;

function input(){

x=eval(document.form1.in1.value);

y=eval(document.form1.in2.value);

}

function add(){

input();

alert(x + " + " + y + " : 맞습니까?");

document.form1.out.value=x + y;

}

function sub(){

input();

alert(x + " - " + y + " : 맞습니까?");

document.form1.out.value=x - y;

}

function mul(){

input();

alert(x + " * " + y + " : 맞습니까?");

document.form1.out.value=x * y;

}

function div(){

input();

alert(x + " / " + y + " : 맞습니까?");

document.form1.out.value=x / y;

}

function pow(){

input();

alert(x + " ^ " + y + " : 맞습니까?");

document.form1.out.value=Math.pow(x,y);

}

</script>

</head>

<body bgcolor=#00ff00>

<center>

<h1> 4칙연산 계산기 </h1>

<form name="form1">

<input type="text" size=20 name="in1"><br>

<input type="text" size=20 name="in2"><br>

<input type="button" value="+" onclick=add()>

<input type="button" value="-" onclick=sub()>

<input type="button" value="*" onclick=mul()>

<input type="button" value="/" onclick=div()>

<input type="button" value="^x" onclick=pow()> <br><br>

<input type="text" size=20 name="out">

</form>

</body>

</html>

• Demos

▸http://comedudb6.knue.ac.kr/tykim/Myhome/CAInote/app.html

<JavaScript 개발 교육용 웹앱>

<jQueryMobile 개발 교육용 웹앱>

• 최대공약수(Greatest Common Devisor) 문제

▸수학: 최대공약수의 활용 (http://mathbang.net/m/post/view/id/205)

문제 유형: 똑같이 나누는 문제, 크기를 쪼개는 문제

표현: 가장 큰, 가능한 한 많은

문제에 주어진 숫자보다 더 작은 수를 구하는 경우

문제 #1) 가로 길이가 180cm, 세로 길이가 200cm인 벽에 남는 부분이 없도록 타일을 붙이려고 한다. 가능한 한 큰 정사각형 모양의 타일을 사용하려고할 때, 타일의 한 변의 크기를 구하여라.

180과 200의 최대공약수

180 = 2² × 3² × 5

200 = 23 × 5²

최대공약수: 2² × 5 = 20

한 변의 길이가 20cm인 정사각형 모양의 타일이 남는 공간이 없이 붙일 수 있는 가장 큰 타일

문제 #2) 가로, 세로, 높이가 각각 40cm, 48cm, 24cm인 나무를 잘라서 가능한 한 큰 정육면체 모양의 나무토막을 만들려고 한다. 나무토막을 몇 개 만들 수 있는지 구하여라.

세 수의 최대공약수

40 = 23 × 5

48 = 24 × 3

24 = 23 × 3

최대공약수: 23

여기서 최대공약수는 원래 나무토막을 잘라서 만들 수 있는 가장 큰 정육면체 모양의 나무토막의 가로, 세로, 높이의 길이

가로 방향으로 만들 수 있는 나무토막의 갯수는 40 ÷ 8 = 5(개)

세로 방향으로 만들 수 있는 나무토막의 갯수는 48 ÷ 8 = 6(개)

높이 방향으로 만들 수 있는 나무토막의 갯수는 24 ÷ 8 = 3(개)

총 만들 수 있는 나무토막의 갯수는 5 × 6 × 3 = 90(개)

▸물리: 최대공약수 (http://blog.daum.net/kim2yj/1585)

최대공약수는 비단 일상생활에서만 사용되는 것은 아니다. 다양한 과학적인 상황에서도 폭넓게 사용되고 있다. 예를 들어, 1923년 기본 전하와 광전효과에 대한 연구로 노벨 물리학상을 받은 로버트 밀리컨(Robert Millikan, 1868~1953)은 가장 작은 전하량인 기본 전하량 e의 크기를 구하기 위해 실시한 기름방울시험에서 최대공약수를 활용하였다.

밀리컨은 이 실험에서 중력에 의해 내려가는 기름방울의 힘과 두 금속 전극 사이에 정지되어 있는 작은 기름방울에 작용하는 힘 사이의 균형 상태를 측정하였다. 이러한 수백 번의 실험 끝에 기름방울에 있는 전하량의 크기들을 구하였다.

그런데, 모든 전하량의 크기는 전자가 가지는 기본 전하량(e)의 정수배가 되어야 한다는 사실로부터, 기본 전하량 e를 기름방울실험에서 얻은 전하량들의 최대공약수를 통해 얻는데 성공하였다.

두 정수의 최대공약수 알고리즘

http://en.wikipedia.org/wiki/Greatest_common_divisor

http://en.wikipedia.org/wiki/Euclidean_algorithm

http://en.wikipedia.org/wiki/Binary_GCD_algorithm

1) Algorithm #1

GCD(a, a)=a

GCD(a, b)=GCD(a-b, b) , if a>b

GCD(a, b)=GCD(a, b-a) , if b>a

즉, 유클리드 알고리즘은 “두 정수 m,n(m>n)이 있을 때, m과 n의 최대공약수는 m-n과 n의 최대공약수와 같다”라는 명제를 기초로 한다.

이를 알고리즘으로 정리하면

① m과 n이 같지 않으면 다음을 반복한다.

②	m>n이면 m=m-n, 그렇지 않으면 n=n-m

③	m과 n이 같다면 m(또는 n)이 구하고자 하는 최대공약수이다.

예) m=24, n=18

m         n

24         18

24-18=6         18

6       18-6=12

6       12-6=6

GCD = 6

2) Algorithm #2

a=b․k를 만족하는 어떤 정수 k가 존재하면 b는 a를 ‘나눈다’(b|a로 표기)하고 한다.

b|a이면 b를 a의 ‘인수나 약수’라고 부르고, a는 b의 ‘배수’라고 부른다.

유클리드 알고리즘은 최대공약수에 관한 아래 정리와 나눗셈 알고리즘을 바탕으로 한다.

[정리]

a, b, q, r이 정수일 때 a=bq+r이라 하자. 그러면 gcd(a,b) = gcd(b,r)

예) gcd(91,287)을 찾는데 이 알고리즘이 어떻게 사용되는지를 보인다.

먼저, 두 정수 중 큰 수인 287을 작은 수 91로 나누어 287=91․3+14를 얻는다. 이것은 gcd(91,287)을 찾는 문제는 gcd(91,14)를 찾는 문제로 축소됨을 의미한다.

다음으로 91을 14로 나누어 91=14․6+7을 얻는다. 그래서 gcd(91,14)= gcd(14,7)이다.

계속하여 14를 7로 나누어 14=7․2+0를 얻는다. 7이 14를 나누므로 gcd(14,7)=7이다.

gcd(287,91)=gcd(91,14)=gcd(14,7)=7이므로 원래의 문제가 풀린다.

유클리드 알고리즘의 작동은 최대공약수를 구할 때, 두 양의 정수의 최대공약수를 찾는 문제를 ‘보다 작은 정수들의 문제로 축소’하기 위해 나눗셈을 어느 한쪽이 0이 될 때까지 연속적으로 행한다.

유클리드 알고리즘은 재귀적이다. 즉, 둘 중 큰 정수를 작은 정수로 나눈 ‘나머지’와 ‘작은 정수’의 최대공약수를 구하는 과정을 반복한다.

GCD(a, 0)=a

GCD(a, b)=GCD(b, a mod b) , where (a mod b)는 a를 b로 나눈 나머지값

예) GCD(34398, 2132)=GCD(2132, 286)

GCD(2132, 286)=GCD(286, 130)

GCD(286, 130)=GCD(130, 26)

GCD(130, 26)=GCD(26, 0)

GCD=26

[예제 3-1]: JavaScript

<html>

<head>

<title> 두 수의 최대공약수 계산하기 </title>

<script language = "javascript">

function Euclidean(){

var a;

var b;

a=eval(document.frm1.input1.value);

b=eval(document.frm1.input2.value);

alert("최대공약수는 "+gcd(a, b)+"입니다.");

}

function gcd(a, b) {

while(a!=0 && b!=0) {

document.write("a= "+a+", "+"b= "+b+"<br>");

a = a%b;

if (a!=0) b = b%a;

}

document.write("a= "+a+", "+"b= "+b+"<br>");

if (a==0) return b;

else return a;

}

</script>

</head>

<body>

<font size="6" color="red" face="comic sans ms"> 두 수의 최대공약수 계산하기

</font><br><br>

<form name="frm1">

<input type="text" size=10 name="input1"><br>

<input type="text" size=10 name="input2"><br>

<input type="button" name="btn1" value="계산" onclick=Euclidean()><br>

</form>

</body>

</html>

Native App:Android

https://play.google.com/store/apps/details?id=com.scapelitte.lcmgcdfinder&hl=ko