BLOG ARTICLE squeak | 3 ARTICLE FOUND

  1. 2007.07.01 Squeak의 다른 버젼(?) Scratch (8)
  2. 2007.06.26 간단한 Squeak 예제 실행 해보기 (4)
  3. 2007.06.20 Squeak을 이용한 어린이 프로그래밍 교육 (12)

우연히 Scratch란 프로그램을 보았습니다. Squeak에서 Image 파일이 열리는 것으로 봐서는 확실하지는 않지만 Squeak으로 만들었던지 같은 엔진을 사용한 것 같습니다.

 홈페이지를 가보니 Squeak에 대한 언급은 없었고, MIT 미디어 연구소에서 어린이(8세 이상) 교육을 위해서 개발한 것이라고 합니다. 윈도우용과 맥용 두가지 버젼으로 다운로드 받을 수 있습니다.
사용자 삽입 이미지
위에 보이는 것과 같이  Squeak 보다 더욱 깔끔하고 직관적인 인터페이스를 제공합니다. 잠깐 써봤지만 Squeak 보다 사용법도 더 쉬운 것 같았습니다. 아이들이 쉽게 사용할 수 있도록 Squeak에서 복잡성과 불필요한 부분을 제외하고, UI를 이쁘게 만든 것 같습니다.

또한 사이트로 가면 아래와 같은 동영상 튜토리얼이나, 메뉴얼 등 사용을 도와 주는 다양한 자료들을 제공합니다. 동작들에 대해 그림과 함께 설명이 있는 scrach cards는 프린팅하여 잘라 주면 아이들에게 더욱 흥미를 제공하고, 쉽게 적응할 수 있도록 할 것 같습니다.

사용자 삽입 이미지

또 하나 눈길을 끝는 것은 바로 위에 있는 Scratch Board란 하드웨어 입니다. Scratch와 연동하여 다양한 입출력을 제공하는 것 같습니다. 가격은 25달라인데 선적비용 까지 합치면 한국에선 45달라에 주문할 수 있습니다. 가격이 너무 비싼 것 같습니다. 전기나 회로에 관한 지식만 있다면 만들기가 그리 어려울 것 같지는 않은데, 저는 전혀 없으니 자작은 불가능할 것 같습니다.

직관적이고 심플하여 더 이상 뭐가 있을 것 같지는 않지만, 나중에 더 많이 사용해 보고 제대로 글을 올려 보아야 겠습니다. 

이전 포스트에서 언급했던 Squeck에 대해서 간단한 예제를 작성해 보겠습니다. 이 예제는 squeakland.org에 있는 Drive a Car 예제를 기본으로 한글 Squeak에서 만들어 본 내용들이 입니다. 영어가 조금 되시는 분들은 원문 사이트를 보시는 것이 더 이해가 빠를 수도 있습니다.

squeak의 한국어 이미지 파일을 클릭하여 실행하면, 아래와 같은 화면을 보실 수 있습니다. 아래 화면은 맥에서 본 화일이며, 윈도우 환경 또는 다른 버젼에서는 많이 다른 모습으로 보여질 수 있습니다.
사용자 삽입 이미지
만약 영문으로 나오거나, 위의 모습과 틀리더라도 상관 없습니다. 기본적인 사용법은 똑 같으니, 조금만 살펴 보시면 해당 메뉴를 찾을 수 있습니다.


1. 자동차와 핸들 오브젝트 생성
1. 그림판 열기
사용자 삽입 이미지
스퀵을 실행하고 부품이나 안내자 등을 클릭하여 살펴 보면 그림판 또는 Paint Tool이라는 것이 있습니다. 이 아이콘을 더블클릭하거나 바탕의 화면으로 드래그 하면 간단한 페인트 툴이 나옵니다.


2. 자동차 그리기 및 저장
페인트 툴을 사용하여 아래와 같이 자동차를 하나 그립니다. 꼭 자동차일 필요는 없습니다 .비행기나 로켓트 등 움직이길 원하는 그림을 그리면 됩니다. 그림이 완성되면 우측에 보이는 KEEP 버튼을 클릭합니다. 그림판은 종료되고 자동차 오브젝트만 남습니다.
사용자 삽입 이미지

3. 핸들 그리기 및 저장
사용자 삽입 이미지
이제 핸들을 위해서 다시 그림판을 실행하고 좌측과 같이 핸들을 적당히 그립니다. 핸들도 자동차와 동일하게 그리기가 완료되면 KEEP 버튼을 클릭합니다.

좌측과 같이 이번 예제에 사용될 자동차와 핸들 두개의 오브젝트가 생깁니다.


2. 스크립트 생성

1. 스크립트 뷰어 오픈
사용자 삽입 이미지
이제 차에다 마우스 오른쪽 버튼을 클릭하면, 좌측과 같이 오브젝트 주위에 원모양의 작은 버튼 들이 나옵니다.

이 버튼들은 오브젝트 삭제, 크기 변경, 회전, 색상 선택, 디버깅 등 다양한 속성과 행동을 제어 할 수 있게 합니다. 왼쪽에서 세번째의 눈모양을 클릭하면 아래와 같은 스크립트 뷰어가 나옵니다.


2. 자동차 오브젝트 이름 변경
사용자 삽입 이미지
스크립트 뷰어에서 좌측과 같이 붉은 사각형 영역의 이름 부분을 더블 클릭하면, 이름을 수정할 수 있습니다. Sketch라고 기본으로 나온 이름을 삭제하고 자동차로 입력한 후 [Enter]를 칩니다.

좌측과 같이 자동차로 변경되어 있슴을 확인합니다.

3. 새로운 스크립트 생성
사용자 삽입 이미지
이제 자동차에 관한 새로운 스크립트를 만들기 위해, 좌측과 같이 [자동차][빈 스크립트]를 마우스로 드래그 하여 빈공간에 가져다 놓습니다.


4. 스크립트에 액션 설정
이제 아래과 같이 [자동차][소리내기], [자동차][진행하기], [자동차][돌기] 스크립트를 드래그 하여 빈 스크립트에 놓습니다. 이 상태에서 스크립트가 실행되면 자동차가 소리를 내면서 진행하며, 회전합니다.
사용자 삽입 이미지

5. 핸들 오브젝트 이름 변경
사용자 삽입 이미지
이번에는 핸들을 마우스 오른쪽 버튼을 클릭하고, 제어버튼들이 나오면 위와 같이 눈모양의 뷰어열기를 클릭합니다.

자동차와 같은 방법으로 Sketch1이라고 되어 있는 이름 부분을 클릭하여 핸들로 이름을 변경하여 줍니다.


6. 핸들을 이용한 회전 처리
핸들의 스크립트 중에 [핸들의][머리방향]을 드래그 하여 스크립트의 [자동차][돌기] 근처로 가져다 놓습니다. 아래와 같이 돌기 뒤의 숫자 블럭이 진한 녹색으로 변경되면, 그 자리에 [핸들의][머리방향]을 놓으면 결합됩니다. 결합된 모습은 하단에서 확인할 수 있습니다.
사용자 삽입 이미지

7. 동선 출력 설정
사용자 삽입 이미지
붉은 화살표가 가르키는 좌측의 아이콘은 현재 뷰어에서 보여지는 오브젝트 입니다. 오른쪽 파란 화살표가 가르키는 자동차를 클릭하여 자동차 스크립트를 오픈합니다.

사용자 삽입 이미지
기본으로 되어 있는 곳을 클릭하여 좌측과 같이 펜 사용을 선택합니다. [자동차의][펜 내리기]를 예로 선택합니다.

이제 자동차가 움직이는 동선으로 파란색의 선이 나타나게 됩니다. 펜 색깔, 두께, 스타일등을 변경해 가면서 실행해 봅니다.



3. 스크립트 실행
위의 스크립트를 실행하는 몇 가지 방법이 있습니다.
 
스크립트 왼쪽의 !   아이콘을 클릭하면 해당 스크립트가 클릭한 횟수 만큼 실행됩니다. 또 다른 방법은 아래와 같이 시계 아이콘을 클릭하면, 다시 시계를 클릭하여 멈출 때 까지 스크립트가 실행됩니다.

이제 시계 아이콘을 클릭하고, 핸들을 우클릭하여 좌측 하단의 회전 버튼을 클릭하여 핸들을 이리저리 돌려 보면 자동차가 핸들의 방향으로 진행하는 것을 확인할 수 있습니다.

사용자 삽입 이미지

사용자 삽입 이미지
저에게는 초등학교 3학년인 아들이 하나 있습니다. 어려서부터 제가 컴퓨터에서 작업하던 모습을 보며 자란 이 녀석은 커가면서 제가 하는 작업을 따라 하려고 노력하였습니다.

어려운 프로그래밍을 배우려는 이유는 단 하나입니다. 그토록 좋아하는 게임을 직접 만들 수 있다는 것입니다.


어린 아들에게 프로그래밍을 권유하고 싶은 생각은 없지만, 컴퓨터로 게임만 하는 것보다 프로그래밍 공부를 해보겠다는데 딱히 말릴 이유도 없었습니다.

그래서 관련된 책도 사주었지만, 영어가 기반인 프로그래밍 언어와 VS, Xcode 같은 복잡한 툴을 사용하기에는 아직 어렸습니다.

관심이 없어진 줄 알았는데, 어느날 이 녀석이 티스토리에서 블로그를 만들어 아래와 같은 플래쉬들을 올리고 있다는 것을 알았습니다.
사용자 삽입 이미지사용자 삽입 이미지사용자 삽입 이미지

다른 건 어려워서 못하고, 플래쉬는 조금씩 적응을 해나가고 있었나 봅니다. 플래쉬의 액션 스크립트도 약간 쓸 줄 알게 되고, 이제 배우기 쉬운 프로그래밍 언어를 조금씩 가르쳐 볼까하는 생각이 들었습니다.

그래서 구글에서 아이들을 위한 쉽고 재미있는 개발 환경을 찾다가, 우연히 squeakland라는 곳을 방문하게 되었습니다. squeak을 아이들을 위한 교육적인 목적으로 활용는 것에 관해 나와 있는 사이트였습니다. 아~ 바로 이거다 라는 생각이 들었습니다.

사용자 삽입 이미지
그러다가 거기서 본 한장의 사진에서 어디선가 본 듯한 얼굴을 보았습니다.

바로 현대적 PC를 제안하고, OOP의 개념을 확립하고, 스몰토크를 만든  엘런 케이...

(이 사진이 있는 홈페이지에도 엘런 케이라고 언급이 없으니 확실하지는 않지만 콧수염이랑 윤곽이랑 비슷한 것 같습니다.)
사진출처:squeakland

프로그래밍이나 컴퓨터 관련 책에 전설처럼 등장 하는 그가, 이 세상 사람이 아닌 줄 알았습니다. 하지만 그는 지금도 활발하게 활동하고 있었습니다.

사이트를 둘러 보니 squeak은 엘런 케이가 애플에서 그의 오랜 동료들과 시작한 프로젝트였습니다. 엘런 케이는 아이들을 위해 현대 PC 환경에 많은 영향을 준 그 유명한 다이나북을 제안하고, 그 뒤에도 어린이의 컴퓨터 사용에 관해 여러 연구를 진행하였습니다. 그런데 아직까지도 이 분야에서 계속 활동을 하고 있었던 것이었습니다.. 정말 아이사랑이 남다른 분 같습니다.
 
아무튼 저는 squeak을 다운 받아 실행시켜 보았습니다. 찾아보니 한국스퀵 사이트가 있길래, 이 곳에서 한국어 버젼을 다운 받았습니다. (세상엔 참 고마운 분들이 많습니다.)

사용자 삽입 이미지
위는 squeak 맥버젼을 실행시켜 본 모습입니다. 개인마다 차이가 있겠지만 개인적으로는 UI가 화려하다거나, 이쁘다는 느낌은 받지 못했습니다.

그 뒤 squeakland에 있는 drive a car 예제를 따라 해 보았습니다. 차와 핸들을 그리는 시간을 제외하고 자동차를 핸들로 조종하며 움직이게 만드는데 걸린 시간은 단 1분도 안되었습니다. 시키는대로 따라해 보고, 결과물을 본 저는 경악할 수 밖에 없었습니다.

뭐 이런게 다 있지...

아래는 제가 그린 차가 움직이고, 소리를 내고, 원하는 방향으로 움직이게 만드는 스크립트입니다. 모든 작업은 마우스로 하였기 때문에, 스크립트라고 하기도 그렇습니다. 가장 감명 받은 부분은 [붕붕카 돌기][핸들의  머리방향]을 결합 시킬 때였습니다.
사용자 삽입 이미지

제가 마우스로 작업을 하는 동안 squeak은 아래와 같이 스몰토크 코드를 생성해 놓았습니다. 스몰토크의 아래와 같은 문법때문에 위의 액션 블록이 쉽게 스몰토크 코드로 바뀔 수 있는 것 같습니다.
사용자 삽입 이미지

퇴근 후, 집에 가서 아들에게 사용하게 해 보았습니다. 결과는 역시 대성공. 아들 녀석은 자기가 그린 오브젝트들을 마음대로 다룰 수 있는 걸 보고 무척이나 좋아하였습니다. 나 같은 아빠들을 위해 조만간 이 블로그에도 squeak의 사용법에 대해서 간단하게 소개해 볼려고 합니다.

사용자 삽입 이미지
squeak은 아이들 놀이/교육의 용도로만 제작된 것은 아닙니다. SmallTalk-80과 개발환경, 기본 라이브러리를 가지고 있어, 전문적인 개발자도 원하는 용도로 사용할 수 있습니다.

좌측은 Squeak에서 간단한 SmallTalk 소스를 작성하고 실행해 본 이미지입니다. 위의 모습과 달리 개발툴의 냄새가 납니다.

실제 한국 스퀵 사이트는 스퀵으로 만든 웹서버와 웹 어플리케이션으로 운영되고 있다고 합니다.


사용자 삽입 이미지
또한 Squeak VM이 있으면 웹브라우져 상에서도 java 처럼 실행이 가능합니다. 아래는 파이어폭스에서 squeak으로 만든 프리쉘을 실행시켜 본 모습입니다.

이 게임 외에도 테트리스 등의 게임을 해당 사이트에서 확인하고 실행해 볼 수 있습니다.
 



제게 있어 엘런 케이는 오래전 책에서나 존재하던 사람이었습니다. 이제 세상이 좋아져 웹상에서  최근에 올린 그의 글들을 볼 수 있고, 이런 프로그램 까지 쓸 수 있게 되다니... 엘런 케이 아저씨 존경합니다.

"The best way to predict the future is to invent it."
(미래를 예측하는 가장 좋은 방법은 미래를 만드는 것이다.)
- Alan Kay -