어린이를 위한 Haskell 수업의 첫 주를 돌아보며, 그림을 그리고 Gloss로 간단한 프로그램을 만드는 활동을 소개합니다.
이 프로젝트를 응원해 주시고 함께해 주신 모든 분께 다시 한번 감사드립니다. 오늘 저는 첫 Haskell 대면 수업을 했고, 정말 즐거웠습니다! 이번 주에 무엇을 하는지 담은 첫 주간 요약 글입니다.
이 수업을 따라오는 어린이가 여럿 있으니, 모두 자기소개부터 시작해 봅시다!
모두 시간을 내어 댓글을 남기고 서로 인사했으면 합니다. 다른 사람과 이야기하면 배우는 일이 훨씬 더 즐거워집니다.
우리는 다음을 포함해 어디로 나아갈지 이야기했습니다.
이것은 한 학년 동안 걸릴 것입니다! 이 수업은 특정 컴퓨터 프로그램에 관한 무언가를 외우는 데만 그치지 않기 때문입니다. 창의력을 발휘하고, 여러 가지를 시도하고, 스스로 자랑스러워할 일을 하는 것이 목표입니다. 따라서 프로그램에서 자유롭게 놀고 다양한 아이디어를 시도할 시간이 많이 있을 것입니다. 우리는 Haskell 프로그래밍 언어를 배우지만, 결국 이 수업은 Haskell에 관한 몇 가지를 기억하는 것보다 컴퓨터를 직접 제어하고 정말 멋진 것을 처음부터 설계하고 만드는 데 더 가깝습니다.
먼저 컴퓨터 프로그램이 무엇인지, 그리고 몇 가지 아이디어가 어떻게 맞물리는지 이야기했습니다. 수업이 끝났을 때의 화이트보드입니다!
우리가 이야기한 아이디어 몇 가지입니다.
우리는 다음을 사용할 것입니다.
이제 모두 웹사이트를 사용해 Haskell과 Gloss로 간단한 컴퓨터 프로그램을 작성했습니다. 웹사이트는 다음과 같습니다.
http://dac4.designacourse.com:8000/
다음과 같은 아주 간단한 프로그램부터 시작했습니다.
원을 그리세요!
import Graphics.Gloss picture = circle 80 사각형을 그리세요!
import Graphics.Gloss picture = rectangleSolid 200 300 글자를 그리세요!
import Graphics.Gloss picture = text "Hello" 이 프로그램들은 모두 몇 가지 공통점이 있습니다.
몇몇 사람이 웹사이트를 사용하는 데 문제를 겪었습니다. 어려움이 있다면 웹 브라우저가 최신 버전인지 확인해야 할 수도 있습니다. 또한 이 웹사이트는 Internet Explorer에서는 작동하지 않습니다. 그러니 Chrome, Firefox, Opera 또는 Safari로 시도해 보세요. 웹 브라우저 문제는 너무 걱정하지 마세요. 곧 자신의 컴퓨터에 Haskell 컴파일러를 설치하게 될 것이고, 더는 프로그램을 실행하기 위해 웹사이트가 필요하지 않을 테니까요! 우리는 빠르게 시작하기 위해 웹사이트를 사용하고 있을 뿐입니다.
이때쯤 몇몇 아이들이 한 번에 도형을 하나 이상 그릴 수 있는지 물었습니다. 네, 할 수 있습니다! 하나 이상의 것을 그리려면 “pictures”를 사용할 수 있습니다(끝의 s를 보세요). 예를 들면 다음과 같습니다.
import Graphics.Gloss picture = pictures [ circle 80, rectangleWire 200 100 ] 다음을 하는 것에 주목하세요.
가끔 프로그램에 새 줄을 만드는 것이 도움이 된다고 이야기했습니다. 새 줄을 만들 때 _맨 앞에 몇 칸의 공백을 넣어 들여써야 한다_는 점만 조심하면 됩니다. “picture”를 정의하는 부분의 둘째와 셋째 줄이 조금 들여쓰기 된 것이 보이나요?
Gloss 라이브러리는 그림을 바꿀 수 있는 몇 가지 방법도 제공합니다!
“color”로 색을 바꿀 수 있습니다.
import Graphics.Gloss picture = color red (circleSolid 80) “color”라고 쓰고, 원하는 색의 이름을 쓴 다음, 그릴 그림을 괄호 안에 씁니다. 괄호는 중요합니다! 수학에서와 같은 의미입니다. 그 전체 부분을 하나의 “것”(여기서는 그림)으로 다루라는 뜻입니다.
Gloss가 아는 색이 무엇인지 이야기했습니다. 목록은 다음과 같습니다. black, white, red, green, blue, yellow, magenta, cyan, rose, orange, chartreuse, aquamarine, azure, violet. Sue가 이상한 색 이름을 즉석에서 골라 “chartreuse도 알아?”라고 물어서 모두 웃었습니다. 네, 압니다. 운 좋은 추측이었네요!
화면에서 물체를 옮길 수도 있습니다.
import Graphics.Gloss picture = translate 100 50 (rectangleSolid 50 50) 물체를 옮기고 싶을 때 Gloss에서는 그것을 “translate”라고 부릅니다. 네, 이상한 이름이지만, “translate”는 단지 무언가를 왼쪽, 오른쪽, 위 또는 아래로 옮긴다는 뜻입니다. translate 뒤의 첫 번째 숫자는 옆으로 얼마나 옮길지를 나타냅니다. 수직선처럼 양수는 오른쪽, 음수는 왼쪽을 뜻합니다! 두 번째 숫자는 위아래로 얼마나 옮길지를 나타냅니다. 양수는 위, 음수는 아래를 뜻합니다.
Haskell에서는 음수를 괄호 안에 써야 한다는 점을 기억하세요! “translate -100 …”이라고 쓰면 Haskell은 “translate”에서 백을 빼고 싶다고 생각합니다. 동사에서 숫자를 빼는 방법을 모르기 때문에(저도 모릅니다) 포기해 버립니다! 대신 괄호를 넣어 “translate (-100) …”이라고 써야 합니다.
물체를 돌릴 수도 있습니다. 그 동사는 “rotate”입니다. 마름모를 그려 봅시다.
import Graphics.Gloss picture = rotate 45 (rectangleWire 100 100) 물체는 도 단위로 회전시킵니다. 360도는 처음 위치로 완전히 한 바퀴 도는 것을 뜻하므로, 아무 변화도 없다는 점을 기억하세요! 45도는 직각의 절반입니다. 왜 이것이 마름모를 만드는지 알겠나요?
마지막으로 할 수 있는 일은 그림을 늘이는 것입니다. 그 동사는 “scale”입니다.
import Graphics.Gloss picture = scale 2 1 (circle 100) 이것은 _타원_을 그립니다. 타원은 원과 비슷하지만 높이보다 너비가 더 큽니다!
아직 이 모든 것이 이해되지 않아도 걱정하지 마세요! 이런 것들을 어떻게 함께 쓰는지 이것저것 해 보는 데 많은 시간을 보낼 것입니다! 이 모든 것을 마친 뒤의 화이트보드입니다…
모두가 원하는 모양과 그림을 직접 만드는 데 많은 시간을 보냈습니다. 이 모든 것에 더 익숙해지는 가장 좋은 방법은 이것저것 해 보는 것입니다. 작은 변화를 많이 주고 어떤 일이 일어나는지 보세요! 무슨 일이 일어날지 추측한 뒤, 직접 해 보고 맞았는지 틀렸는지 확인해 보세요.
아이들이 프로젝트와 함께 있는 사진 몇 장입니다.
Sophia와 Evie가 나란히 놓인 두 원을 자랑하고 있습니다. 이 원들은 결국 얼굴의 눈이 되었습니다!
마름모와 함께 있는 Grant입니다. 위아래로 조금 늘인 뒤에는 훨씬 더 보기 좋았습니다.
이것은 Marcello의 그래픽입니다. 원 안에 단어를 가운데 맞추는 데는 긴 시간이 걸렸습니다! 직접 해 보면 알겠지만, 글자는 다른 그림처럼 보통 정확히 가운데에 그려지지 않습니다. 그래서 Marcello는 단어를 원 안에 넣기 위해 “translate”로 많은 시행착오를 겪었습니다.
두 눈을 알맞은 자리에 놓은 것을 무척 기뻐하는 Sophia입니다!
받아들이기로 한다면 여러분의 임무는 관심 있는 무언가를 계획하고 그림으로 만드는 것입니다! 물고기, 정원, 우주 정거장, 용도 좋습니다. 다만 서로 다른 색의 사각형과 원을 사용하고, 그것들을 옮기거나 돌리거나 늘여서 그릴 수 있는 것이어야 합니다. Little School에서는 이번 주에 남은 수업 시간과 다음 주 수업 시간에 이것을 만들 것입니다. 시간을 들여 스스로 자랑스러워할 무언가를 생각해 내세요!
