다음 글은 프래그매틱 북셸프(The Pragmatic Bookshelf) 출판사의 잡지인 PragPub의 무료 특별판에 실린 내용입니다. 무료 특별판에는 아이들을 위한 코딩 교육에 관한 여러 기고문이 실려 있습니다. 요즘에 우리 상황과 어울리는 면이 있어 원 출판사의 허락을 받아 전문을 번역하여 이곳에 게시할 예정입니다.
아이들에게 프로그래밍을 가르친다고? 그럼, 빌코스비와는 반대로 접근해야지!
글: 크리스 스트롬(Chris Strom)
번역: 배장열
'코스비 가족'은 틀렸다.
정말이다. 위대한 빌 크로스비와 클리프 헉스터블 캐릭터에는 더할 나위 없는 존경을 표하지만, 그가 TV에서 아이들에게 무언가를 가르치는 모습은 분명히 틀렸다. 그런데 웃긴 것은 우리가 아이들에게 프로그래밍을 가르칠 때도 같은 실수를 반복하고 있다는 점이다.
코스비 가족에는 이런 고전적인 에피소드가 있다. 딸 바네사가 노래에 꽂혔을 때 헉스터블 부부는 당연히 바네사에게 노래 강사를 붙여 주었다. 바네사는 지루하게 반복되는 노래 강사의 기본적인 발성 연습에 당연히 왕짜증이 났다.
코스비 가족이 틀렸다고 한 것은 바로 이 때문이다. 헉스터블은 기초가 얼마나 중요한지 설명했다. 그가 할 수 있는 일이 그것뿐이었겠지만, 어쨌거나 탄탄한 기초를 쌓는 것만이 바네사가 훌륭한 가수가 되는 유일한 길임을 설파했다. TV가 아니었다면 모를까, 바네사는 아버지의 말에 수긍하고 다시 기초 훈련에 매진했다.
한번 생각해 보라. 그런 말은 TV에서나 먹힌다. 현실에서라면 바네사는 절대로 돌아가지 않았으리라. 또는 몇 번이고 다시 해봐야 주체할 수 없을 정도로 노래를 부르고 싶었던 처음의 흥분은 이미 기초라는 이름의 지루함 때문에 모두 사그라졌을 것이다.
프로그래밍에서 느낄 수 있는 흥분? 그런 거 알기나 하나?
이제 프로그래밍 이야기를 해보자. 프로그래밍은 어렵다. 프로그래밍의 기초는 일주일 중 하루를 온전히 투자한다고 해도 5년 이상은 흘러야 섭렵할 수 있을 정도로 많다. 아니다. 그래도 알고 있는 것보다 알아야 하는 것이 더 많다고 생각하게 되는 것이 바로 프로그래밍의 기초다.
하지만 우리는 프로그래밍을 한다. 우리가 프로그래밍을 하는 건 타이핑한 코드가 실로 멋진 결과를 안겨주기 때문이다. 그렇다고 아주 세세한 것까지 전부 알 수 있는 것은 아니겠지만, 우리가 만든 것이 삶을 바꿀 수도 있다. 그래서 우리는 프로그래밍을 계속 하고 있는 것이다. 더불어 기초도 배우고 더욱 더 완벽해지고자 최선을 다하는 것이다. 그런데 기초가 흥미롭다고 생각하는 사람이 과연 있을까? 그들은 기초를 모두 익힌 뒤에 멋진 것을 만들었을까? 도대체 왜 아이들에게 기초를 가르치는 것일까?
나는 게임을 하지 않는다. 어설퍼도 새로운 프로토타입을 가지고 노는 게 훨씬 더 좋고, 최신 프로그래밍 언어나 웹 프레임워크를 만지작대는 게 좋다. 나는 어렸을 때부터 프로그래밍을 시작했다. 책에 실렸던 게임 코드를 그대로 컴퓨터에 일일이 타이핑하고는 두어 번 가지고 놀았던 것 같다. 하지만 정말 재밌었던 건 게임 코딩이었다. 원 게임을 망가뜨릴세라 코드를 조심스럽게 수정하고는 직접 플레이해 보는 게 정말 좋았다.
기초를 정말 열심히 익히는 아이들도 없지는 않을 것이다. 하지만 내가 분명하게 확신하는 건 기초에 집중하는 것이 아닌 놀이에 집중하는 교수법이야말로 아이들에게 진정한 학습 효과를 가져다 줄 수 있다는 사실이다. 그렇다면 놀이에 최적화된 교수법은 무엇일까? 노력이 필요하지만 할 수 없는 방법은 아니다.
3D 예
HTML과 자바스크립트로 구성된 다음 코드를 생각해 보자. 웹 페이지에 Three.js 도넛을 만드는 스크립트다.
...
<body></body>
<script src="http://gamingJS.com/Three.js"></script>
<script src="http://gamingJS.com/ChromeFixes.js"></script>
<script>
// This is where stuff in our game will happen:
var scene = new THREE.Scene();
// This is what sees the stuff:
var aspect_ratio = window.innerWidth / window.innerHeight;
var camera = new THREE.PerspectiveCamera(75, aspect_ratio, 1, 10000);
camera.position.z = 400;
scene.add(camera);
// This will draw what the camera sees onto the screen:
var renderer = new THREE.CanvasRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var shape = new THREE.TorusGeometry(100, 25, 8, 25);
var cover = new THREE.MeshNormalMaterial();
var donut = new THREE.Mesh(shape, cover);
scene.add(donut);
// Now, show what the camera sees on the screen:
renderer.render(scene, camera);
</script>
...
대충 20줄 정도 되는 코드에 HTML, 자바스크립트, 주석, 화이트스페이스 등이 담겼다. 아이들이든 아니든 Three.js를 처음 접하는 사람이라면 줄 수에 버금가는 개념을 배워야 할 것이다. 우선, HTML 태그, src 속성이 딸린 스크립트 태그, Three.js 코드 전체를 감싸고 있는 스크립트 태그 등이 보인다. 이게 다가 아니다. 창의 크기를 재어 Three.js 렌더러를 DOM에 추가하는 DOM 코딩도 있다. 또 있다. 장면, 카메라, 렌더러, 지오메트리(도형), 재질, 메시 등 3D 개념은 더 어렵다. 여기에다 수와 문자열, 객체, 메소드, 주석 등 프로그래밍 개념도 빠져서는 안 된다. 이 모든 개념을 섭렵했다면 드디어 파일이니 웹 서버니, HTTP니 하는 개념으로 무장해야 한다.
이 모든 개념이 하나로 어우러져 다음과 같은 도넛을 만들어내는 것이다.
<그림: 1-pragpub-donut.png>
그런데도 만일 우리가 코스비 가족의 접근 방식을 적용하여 아이들에게 이 모든 개념을 가르친다면, 이는 필이 꽂혀 들뜨기만 했던 처음의 흥분을 과감히 무너뜨려 버리는 아주 효과적인 방법이 될 것이다. (그리고 이런 도넛은 절대로 구경하지 못할 것이다. - 편집자 주) 아마도 클리프 헉스터블의 접근 방식에서 핵심이라면 바네사가 엄청난 시간과 돈을 쏟아 붓기 전에 정말로, 정말로 노래에 모든 것을 바칠 수 있는지 확인하려는 것이 아닐까?
물론, 이보다 더 효과적인 대안이 있다.
개념 설명을 최소한으로 걸러내기
개인적으로는 렌더러나 DOM, 객체 메소드 전부를 알고 싶지만, 아이들은 도넛만 돌리고 싶을 것이다. 그 다음엔 초콜릿도 만들어 보고 싶을 것이다. 그림자까지 멋지게 만들겠다면? 대박이다!
그런데, 코드를 일일이 입력하고 20줄에 담긴 개념을 모두 이해해야 한다는 사실을 알고나도 같은 반응을 보일까? 정말로 도움이 되는 방법은 한 가지 개념만을 보여주고 이 개념에 최적화된 예를 들며 설명하는 것이다. 도넛처럼 재밌는 개념을 만들어 보자. 도넛을 싫어하는 사람은 없으니 정말로 괜찮지 않은가?
도넛을 만들려면(어떤 것이든 3D 형태면 OK) 두 가지가 필요하다. 모양과 모양을 덮고 있는 '겉'이다. 모양과 겉을 함께 '메시(mesh)'라고 한다. 메시는 단일 핵심 개념으로서 아이들이 이해하고 코딩을 시작하는 데 전혀 지장이 없다. 뛰어난 Three.js 라이브러리 덕택에 코드는 단 네 줄이면 족하다.
...
var shape = new THREE.TorusGeometry(100, 25, 8, 25);
var cover = new THREE.MeshNormalMaterial();
var donut = new THREE.Mesh(shape, cover);
scene.add(donut);
...
우선, 모양을 만들고 이 모양에 겉을 씌운다. 이 둘이 합쳐져 메시가 된다. 메시에 장면을 추가한다. 여기까지 아이들이 이해하는 데 무리가 없다. 추가로 필요한 기초가 더 있는데(객체, 메소드, 변수), 아직 등장할 때가 아니다.
물론, 이 네 줄만으로는 아직 동작하지 않는다. 앞에서 등장했던 20줄 이상의 코드가 있어야 3D 장면을 연출할 수 있고, 무언가를 그릴 수도 있다. 하지만 메시라는 단일 개념을 습득하는 데에 최적화하자면, 아이들이 도넛 메시에만 집중할 수 있도록 하는 방법을 찾는 것이 좋다. 20줄 이상의 코드를 일종의 템플릿으로 적용하는 것이다.
<그림: 2-pragpub-teachcode.png>
아이들은 20번 줄부터 코딩을 시작하면 된다. 눈길을 끄는 START CODING 행 바로 다음부터다. 다른 내용도 필요하지만(도넛의 동작을 설명하기 위한), 초점은 이곳에 입력하는 새로운 코드에 집중시킨다.
3D 메시라는 단일 개념에 집중하기 위해서 덜어내야 할 개념은 또 있다. 도넛은 웹 페이지에서 동작하기 때문에 브라우저가 도넛을 로드하려면 웹 서버니 파일시스템이니 하는 개념 또한 필요할 것이다. 이런 복잡함을 덜어내기 위해 ICE 코드 에디터(ICE Code Editor)의 세계로 들어가 보자.
아이스 코드 에디터는 '대단히' 단순한 브라우저 내장 에디터다. 여러 기능 중에 '3D 시작 프로젝트'와 같은 코드 템플릿이 가장 눈에 띄는데, 특히 아이들에게 편리한 것은 여기에 입력되는 코드의 렌더링 결과가 곧바로 웹 브라우저에서 나타난다는 점이다. 앞에서 언급한 네 줄짜리 코드를 아이스 에디터에 입력하면 아래 결과가 곧바로 나타나는 것이다.
<그림: 3-pragpub-donutcode.png>
코드 몇 줄을 입력하고 결과를 곧바로 확인하는 것은 다분히 본능적이다. 컴퓨터를 제어하여 눈앞에 펼쳐지는 세상을 이렇게 저렇게 만드는, 어른에게도 여전히 매력적인 코딩 방법인 것이다.
이와 같은 접근 방법은 무엇보다도 놀이를 끌어안는다. THREE.TorusGeometry() 안의 숫자들은 어떤 의미가 있을까? 아이들은 이 코드를 가지고 놀며 그 의미를 알아낸다. 템플릿의 숫자들은 어떤 의미가 있을까? 아이들은 이렇게 저렇게 바꿔가며 아이스 코드 에디터가 어떤 결과를 내는지 관찰하게 된다.
기초라는 것
한 번에 개념 하나만을 가르치면 배우는 일은 더욱 더 쉬워진다. 특히 시각적인 결과를 만들어 내는 코딩의 경우, 현실에서 겪었던 경험을 프로그래밍 개념에 훨씬 더 쉽게 접목할 수 있다.
그러다 보면 기초가 잡히고, 그러다 보면 var가 무슨 말인지, 어떤 코드에는 new가 있고 어떤 코드에는 없는지도 알게 된다. 그러다 보면 렌더러에 관해 더 많은 것을 알고자 하게 된다. 경우에 따라서는 DOM에 관해서도 알고 싶어 하지 않을까(우리같은 어른들이야 될 수 있으면 이 개념을 다루지 않는 것이 좋지만)?
하지만 혹시 그거 아는가? 아이들이 그 다음으로 하고 싶어 하는 것은 도넛을 돌리는 일이라는 것을? 개인적으로도 도넛 돌리기를 참 좋아한다.
...
var clock = new THREE.Clock();
function animate() {
requestAnimationFrame(animate);
var t = clock.getElapsedTime();
donut.rotation.set(t, 2*t, 0);
renderer.render(scene, camera);
}
animate();
...
좀 복잡해 보인다. 하지만 개념은 딱 둘뿐이다. 우선, 시간에 따라 조금씩 도넛을 회전시켜야 한다. 그리고 도넛이 돌면 장면을 다시 그려야 한다. 시계니 함수니 requestAnimationFrame() 등은 모두 나중에 등장하는 개념들이다.
지금부터 신경 쓸 필요가 없다는 말이다! 아래는 회전하는 도넛이다.
<그림: 4-pragpub-donutcodelong.png>
아이들은 기초를 습득하지 않고도 엄청난 프로그래밍 지식을 쌓았다. 나아가 자신이 직접 기초를 파헤칠 정도로 재미도 충분히 느꼈으리라 생각한다. 아닌가? 아니어도 상관없다. 무언가를 배웠고, 그 과정을 재밌게 따라 했기 때문이다.
이제 뭘 해야 하나?
이런 접근 방법으로 프로그래밍을 가르치는 일은 쉽지 않다. 매력적이면서도 핵심적인 개념을 파악하기 위한 노력, 놀이를 권장하여 흥미를 유발하고 질문거리를 만들어 기초를 이해하게 하려는 노력이 많이 필요하다.
나는 3D Game Programming for Kids라는 책에서 이 과정을 흥미롭게 펼쳐내었다. 칸 아카데미(Khan Academy)에도 뛰어난 강좌가 제공되고 있다(따라 하기 비디오는 꼭 보시길). 만든 사람이 엄청난 노력을 들였다. 정말 볼 만하다. 우리는 늘 아이들을 생각하고 있다.
글쓴이 소개
크리스 스트롬(Chris Strom)이 쓴 1,500회 이상의 블로그 포스트는 연구 노트로 다양하게 활용되고 있다. 그의 저서로는 Patterns in Polymer, 3D Game Programming for Kids, Dart for Hipsters, The SPDY Book, Recipes with Backbone 등이 있다. 크리스는 10년 이상 펄, 루비, 자바스크립트 등으로 프로그래밍했다. 현재 메릴랜드 주 볼티모어에서 아내와, 네 아이, 마틴 태너라는 이름의 금붕어 한 마리와 함께 살고 있다.
'글로벌 네트워크' 카테고리의 다른 글
| 《리눅스와 함께하는 라즈베리 파이》 업데이트 안내 (4) | 2015.05.20 |
|---|---|
| 새로운 라즈베리 파이가 등장했어요! (7) | 2014.07.15 |
| 라즈베리 파이의 커널과 펌웨어 업데이트하기 (0) | 2014.03.21 |
| 영문 인덱스를 한글로 정리하기 (0) | 2014.03.04 |
| 안드로이드 4.4 킷캣 에뮬레이터에서 한글 출력하기 (41) | 2013.11.12 |
