레인레테 :: 작은 달팽이집속 바다.

다시 돌아온 스크래치!
이것저것 다른 포스트를 쓰다보니까 조금 늦어졌군요.
오늘은 소리!를 내보려고 합니다.
그냥 우두커니 날아다니기만 하면 재미 없잖아요?



에서 이어집니다.


먼저 스크래치를 켜야겠죠?

금새 나왔군요 :) 언제나 우리를 맞아주는 고양이.

하지만 역시 이번꺼에는 필요없으니까 지우자구요.
우리에게 필요한건 박쥐 뿐!

지우는 방법 아시죠?
우측 하단의 빨간색 테두리 쳐 둔 부분이 개체 집합소라는거!
고양이를 오른쪽 클릭하셔서 삭제버튼을 과감히 눌러주세요.


지난번에 했던 bat2 프로젝트를 한번 더 불러보아요.

파일 -> 열기에 가셔서

bat2 선택하시고 확인 버튼을 클릭하세요.
참잘했어요 :)

지난번에 우리가 했던 프로젝트가 그대로 남아있네요.
아고 기특해라 ㅎㅎ


소리를 추가할 꺼니까 소리 탭으로 가야겠죠?
스크립트 옆에, 지난번에 배운 모양 탭 옆에 이번엔 소리입니다.
전문적인 용어 영어로 사운드라고 하죠 ㅎㅎ

가져오기를 눌러볼까요?
이 메뉴는 말 그대로 어떤 개체에 소리를 가져오는 메뉴에요.
우리는 박쥐에 소리를 가져올 꺼니까 소리를 클릭해 주세요.
그리고 맘에 드는 소리를 클릭해서 확인 버튼을 누르시면 끝!
확인버튼을 누르기 전까지 소리를 누르면 미리 들어볼 수 있으니까 미리미리 들어보고 누르자고요 ^^

저는 회색박쥐에 Bird를 가져오기로 했어요.

어라? 한번밖에 안가져왔는데 두개가 있네? 라고 하시는분이 혹시 있을까봐..
그냥 두번 가져온 거에요.
일단 Bird를 가져온 다음엔 Cat을 가져오기로 해요.
먼저 Bird를 가져온 다음 다시 가져오기를 눌러서 Cat을 가져오면 끝!

왜 굳이 Bird하고 Cat이냐면.. 기본적으로 제공하는 소리에 bat가 없더라고요. 박쥐소리가 뭐였더라.. 쉬이이익 이런 식일까요? 설마 갸르르륵은 아니겠지..


회색박쥐만 소리가 있으면 까만색이 심심할테니까 까만색도 가져옵시다.

방법은 똑같아요.
오른쪽 밑에 부분에서 까만색 박쥐를 선택한 뒤에
소리 -> 가져오기-> Dog1 -> 확인
가져오기 -> Dog2 -> 확인.

이것이야말로 진정한 개소리(...) Dog Sound 되겠습니다.

근데 가져온다고 끝이 아니에요.
왜냐하면 이 소리가 언제날지를 결정해 줘야 하니까요!

제어를 어디서 할까요?
맞추면 당신은 센스쟁이 우후훗!

넵. 스크립트입니다. 모든 제어는 다 스크립트죠 :)

왼쪽 위에 있는 명령어 블록 구분하는거 이제 다들 아시죠?
그리고 우리가 뭘 제어한다고 했었죠? 소리요요요요~
정답입니다. (혼자 북치고 장구치고..)
그럼 소리 블록을 제어해 봐야죠. 소리는 분홍색입니다 :)
cat 소리내기 블록 보이시나요?
똑똑한 스크래치는 우리가 아까 cat이라는 고양이 소리를 가져왔다는걸 이미 알고 있네요.
이걸 어디다가 놓을까..고민해 보다가 아무래도 박쥐가 퍼덕거리는 순간이 좋을것 같아요.
그래서 박쥐가 모양을 바꾸는 순간! 바로 밑에 블록을 끌어다가 놓아요.
그런데 박쥐 모양이 계속 바뀌잖아요? 에? 모르겠다고요?
지난번 강의가 너무 오래되어서 기억이 안나시는 분들은 다시한번 보고 오세요.
[RL.P rogramming/Scratch] - 5. 박쥐가 퍼덕퍼덕 날개짓을 합니다요.
에서 그랬잖아요. -_-++ 날개를 폈다 접었다를 반복해줘야 한다고요 ;-)

그래에서! cat 소리내기 블록 을 모양이 바뀌는 곳 두군데 아래에 가져다 둡니다.


까만색 박쥐도 잊어버리면 안돼죠?

까만색 박쥐를 오른쪽 밑에서 선택하고, 소리명령어 집합으로 간 다음에 똑같이 끌어다 놓자구요.
회색 박쥐랑 똑같이 bat 로 모양 바꾸기 아래에 두시면 됩니다 :)

실행해 볼까요?


캬하핫 박쥐가 날개짓을 할때마다 새소리 고양이소리 개소리를 하면서 날아가요!

그런데, 화면이 너무 작다고요?
걱정마세요.
오른쪽 젤로 위에! 빨간색 쳐둔 부분을 주목!
버튼이 세개 있는데요. 마우스를 올려보면 다음과 같은 글씨들이 나와요.
무대화면 작게보기, 무대화면 크게 보기, 프리젠테이션 화면.
각각 이렇게 보입니다.

제일 왼쪽의 무대화면 작게보기 버튼을 눌러보면, 스크립트창이 엄청! 커지고 무대가 작아지죠?
이건 나중에 스크립트가 길어질때를 대비해서 그런거에요

가운데 무대화면 크게보기 버튼을  눌러보면

그냥 평상시 화면이군요.
이게 기본값이라는걸 알 수 있어요.

그리고 마지막으로 제일 오른쪽의 프리젠테이션 보기를 눌러봅시다.

완전 커졌어요. 이러면 자랑좀 할 수 있겠는데요?
다행히 오른쪽 위에 깃발 버튼이 있어서 박쥐가 날아다니게도 할 수 있고요 :)


긴글 따라오느라 수고하셨어요. 담에 뵈요!

에서 이어집니다.

오늘은 요런걸 만들어 볼껍니다.


요렇게 박쥐 두마리가 있구요.


빨간색으로 테두리쳐진 녹색 깃발을 누르면

박쥐가 조금씩 조금씩 이동해서 화면 가운데로 가는걸 만들어 볼꺼에요.




처음 스크레치를 켜면


오른쪽에 항상 고양이가 버티고 있죠?

하앜. 매일 봤더니 지겨워질라고 하는거에요.!

이렇게 하고 싶은 심정!

그래서 좀 딴거 없나 하고 두리번거리기 시작합니다.



아래에 보니까 회색바탕에 고양이가 보이는군요.

우클릭을 해 보면 요런 화면이 나타납니다.

과감하게 삭제 버튼에 마우스를 가져대시고 왼쪽 클릭하세요. (1)

고양이가 무대에서 지워져 버렸어요!  (2)

그럼 이제 딴걸 좀 추가하기 위해서 (3) 을 눌러봅시다.

(3) 위에 마우스를 올려보면 '새로운 스프라이트 파일 선택하기'라고 나와요 :)


파일 선택 화면이 나타나요.

스크래치는 기본적으로 그림을 몇개 제공하는데요.

일단 Animals 폴더에는 말그대로 짐승들

Fantasy 폴더에는 마녀라던가 하는 빤따지 세계에서 나올법한 것들!

... 등 여러개가 있으니까 하나씩 눌러보면서 확인해 보아요.

Animals 폴더를 눌러봅시다.



박쥐가 나왔네요!

그뿐만 아니라 뭐 벌이나 버팔로 이런것도 잔뜩 있으니까 스크롤바를 내리면서 확인해 보세요.

단 지겨운 고양이도 있으니까 주의! ^^;;

일단은 제일 첫번째에 있는 회색박쥐를 선택해 볼까요?




그리고 다시 새로운 스프라이트 파일 선택하기 를 눌러서

이번엔 까만 박쥐를 소환해 봅시다.


아까 선택했던 회색 박쥐하고 같이 무대에 두둥 하고 나왔군요.

자아 이제 주연들은 다 준비가 되었구요.

처음 목표 기억하시나요?

박쥐가 찔끔찔끔 오른쪽으로 움직여야 하죠!

오른쪽 하단의 회색 박쥐를 클릭하면 하얀색 빛이 가운데로 모일꺼에요.


그러면 가운데에 있는 '스크립트' 에 대고



먼저 '제어'를 누르세요.

그럼 아래 이것저것 블록이 나오죠?

녹색깃발 클릭되었을때를 왼쪽 클릭한 채로 가운데에 가져다가 둡니다.



이번에는 '동작'으로 가서 10만큼 움직이기를 가져다가 놓아 보아요.

[RL.P rogramming/Scratch] - 3. 뭐든 해보는게 장땡! 무턱대고 만져보자.

강좌 기억나시나요?

블록은 블록끼리 합체할 수 있다는거!

노란색의 블록 아래로 '10만큼 움직이기'를 노란색 블록 아래로 합체시킵시다!

그리고 다시 '제어' 로 가서 1초 기다리기..도 10만큼 움직이기 아래에 합체!


여태까지 끌어다놓은 블록의 뜻은

'녹색깃발이 클릭되었을때 10만큼 움직이고 1초 기다려'라는 뜻이에요.

우리는 회색 박쥐를 선택하고 이렇게 만들었으니까

회색박쥐야. 녹색깃발이 클릭되면 10만큼 움직이고 1초 기다려! 되겠습니다.

근데 가만히 생각해 보니까 고작 10만큼 움직이는건 너무 소심한 거에요!

다시 동작탭에 가서 10만큼 움직이는 블록을 끌어다 놓고,
제어탭에 가서 1초 쉬기 끌어다놓기를 반복합니다.


... 아 귀찮아.

그래서 이걸 복사하는 방법이 없나 생각해 봤어요.


다행히 있네요.

오른쪽에 있는 블록을 선택하고 오른쪽 클릭을 하면 복사 메뉴가 있지 뭔가요!

복사해서 아래쪽에 다시 붙일까요?


이걸 열두번 하고 나니까 이렇게 기다란 명령이 되었어요!


요기까지 오느라 수고하셨습니다.

자 이제 그만 하산! 하려고 보니까

이게 회색박쥐만 움직이고 검은색 박쥐가 안움직이네요 OTL

그래서 이번엔 검은색 박쥐를 선택하고


다시 똑같은 스크립트를 끌어다 두려고 하니까..이것참 이렇게 귀찮을 데가 없죠..


머리를 굴려봅니다.

역시 가만히 생각해 보면 답이 나오죠.

우리가 한 일은,

10 이동 -> 1초 기다리기 ->10 이동 -> 1초 기다리기 ->10 이동 -> 1초 기다리기 ->
10 이동 -> 1초 기다리기 ->10 이동 -> 1초 기다리기 ->10 이동 -> 1초 기다리기 ->
10 이동 -> 1초 기다리기 ->10 이동 -> 1초 기다리기 ->10 이동 -> 1초 기다리기 ->
10 이동 -> 1초 기다리기 ->10 이동

이였네요.

응? 가만히 보니까 똑같은게 반복되잖아?!

간추려 보면

[10 이동 -> 1초 기다리기] 가 10번 반복되는 거네요.

오오 이런게 있었군.. 이라고 생각하면서

반복시키는거 없을까? 컴퓨터는 반복의 천재라던데..

라고 스크립트 블록을 뒤적거려 봅니다.

그리고 이윽고 발견하게 되죠.

비밀은 반복 10회!


위 그림과 같이 블록을 만들어 냈습니다. 두둥.

이제 정말 다 되었어요.

녹색 깃발을 눌러보면



박쥐 두마리가 10만큼 오른쪽으로 갔다가, 1초 쉬고 또 10만큼 오른쪽으로 가는걸
열번씩 반복하는군요!


이런 나이스한 프로그램을 만든것에 감동하면서

스크레치를 그냥 끕니다.

이러면 다음에 켰을때 내가 열심히 만들어놓은 게 다 지워져버리는 불상사가 생기죠.


그래서 조 위에 있는 빨간색 테두리의 디스켓 모양을 눌러봅니다.

사실 뭐 요새는 디스켓같은건 없지만 옛날부터 저건 저장버튼이라는 뜻이니까

그냥 눌러보면 프로젝트를 저장할 위치와 이름, 그리고 정보를 써 넣을 수 있어요.

기본적인 위치는 내문서\Scratch Project 에 지정되어 있고, 물론 바꾸셔도 됩니다.


오늘도 수고하셨어요.

담에 봐요 :)

에 이어집니다.

IDE를 설명할 때

UI가 이렇게 생겼으므로, 이건 뭐고 이건 뭐고..라고 설명해봤자

어차피 잘 안보실꺼라는거 자알 압니다. ㅎㅎ

그리고 나중에 필요할 때 찾아보게 될 것이라는 것도요.

그래서 이 간단한 인터페이스에 대해서는 설명을 나중으로 미뤄서

그냥 참고자료 같은거나 만들때 끼워넣겠습니다.

일단 무작정 실행시켜 보죠.

시작 -> 모든 프로그램 -> Scratch -> Scratch 로 가셔서 실행시켜봅니다.


이제는 익숙한(?) 화면이 나옵니다.

이것만 봐서는 뭐가뭔지 전혀 알 수가 없으니,

그냥 무조건 던져봅니다.


오른쪽의 고양이를 마우스를 클릭한 상태로 잡고 흔들어봅니다.

오오오오 움직입니다.

유심히 쳐다보면, 빨간색으로 테두리를 쳐 놓은 숫자가

바뀌는걸 알 수 있는데요.

이건, 고양이의 위치가 어디있냐를 나타냅니다.

그러니까, 가만히 냅두는 고양이의 위치가

x : 0, Y: 0이었는데,

이걸 잡고 흔드니까 x : -153, y : 112가 되었습니다.

참고로 x는 가로 좌표, y는 세로좌표입니다.

가운데를 원점으로 잡고,

고양이가 왼쪽으로 153만큼, 위쪽으로 112만큼 갔다는 소리네요.

즉, 원점을 기준으로 가로축을 볼 때 왼쪽은 -, 오른쪽은 +가 되는군요.

마찬가지로, 세로축은 위쪽이 +, 아래쪽이 -가 되겠네요!


살포시 감동해 주면서 다른걸 해봅니다.


왼쪽에 보니까 이상하게 생긴게 있어요!

동작/제어/형태/관찰/소리/연산/펜/변수 라는게 있네요.

뭐가 뭔지는 차차 알아보기로 하고요.

각각 버튼을 클릭할때마다 위의 사진들처럼 아래 목록이 바뀌죠?

이건 뭥미? 라고 하지 말고,

한번 슬슬 끌어다가 놔 볼께요.


'동작' 버튼을 누르니까 나오는 블럭들을 슬슬 끌어다 놔 봤어요.

아무꺼나 대충 가져다 놓은거니까 블럭 내용은 크게 신경쓰지 마시고 ^^;;

내친김에 '제어'에 있는 것도 적당히 끌어다가 놓습니다.

보시면 아시겠지만,

'동작' 블럭은 파란색으로, '제어' 블럭은 오렌지색으로 되어있네요.

어머나 신기해라.


그런데 가만히 보니까, 이게 위아래가 맞아떨어질것 같이 생겼네요.

레고처럼 블럭이 철썩 합체 할 것 같아요!

그래서 한번 끌어다가 놔 봅니다.

위 그림은 '동작' 블럭을 통채로 클릭해서 '제어'블럭중에 '클릭되었을때' 에다가

끌고 있는 그림이고요.


이건 두개가 '철썩' 붙은겁니다.

호오, 철썩 달라붙기도 하는군요.

오오, 신기하다.. 정도만 알아두고 넘어갑시다.


그런데 가운데 판때기에 보니까, '스크립트' 말고도 모양/소리/ 라는 탭이 있네요?

클릭해 봐야죠?


그냥 보니까 이제 '촉'이 오지 않나요? :)

말 그대로 모양하고 소리를 설정할 수 있는 것 같아요.


으흠, 기능이 이정도 있구나..좋았어!

라고 컴퓨터를 끄면 곤란하죠.

뭔가를 해봐야 하지 않겠어요?

그런데 글이 너무 길어졌으니까 다음시간에 계속할께요.

담에 뵈요~

에 이어 계속 갑니다.

물론 뭔가를 개발하기 위해서는 , 개발 툴부터 설치해야 합니다.

노트패드로 뭔가를 할 수는 없으니까요(...)

아니 뭐 솔직히 할 수는 있는데, 왜 굳이 해야 하는지는 잘 모르겠;;;

먼저 MIT Lab의 스크래치 사이트에 접속해 보죠.

요런 화면이 나옴니다.


오오 한글입니다. 그저 고맙네요.

가운데 제가 친히 그림판에서 그려넣은(...)  빨간색 테두리 부분을 클릭합시다.



등록 화면입니다.

저는 귀찮았기 때문에 그냥 아무것도 작성 안하고

가장 아래에 스크래치 내려받기 버튼을 눌렀습니다.

나중에 강좌가 진행되면서

다시 회원가입을 하고 공유하는 것을 배워볼 꺼에요 :)


각 운영체제에 맞는 설치 버전을 고르시면 됩니다.

첫번째는 Mac OS X

두번째는 Windows

세번째는 우분투 리눅스네요.

대부분 두번째일꺼라고 생각합니다.


다운받으신 후 다운받으신 파일을 실행시키시면


셋업 위자드가 나왔습니다.!

그냥 소개글이고, Next를 누르시면 다음으로 진행됩니다.

참고로 저 고양이는 Scratch의 심볼이에요. ^^


어디다가 설치할 지 묻는군요.
 
뭐 그냥 Next 하죠.
 
다른 프로그램들도 대부분 여기에 설치되니까요.



메뉴 이름을 뭘로 할꺼냐고 묻는데,

그냥 있는 그대로 하는게 나중에 잊어버리지도 않고 편합니다.

뭔가 설치를 하고 있어요!

설치가 끝나면 Next를 눌러주세요.


끝났다고 나오네요.

위의 체크상자는 인스톨이 끝난 후 바로 스크래치를 실행할 것이냐고 묻는 것이고,

아래 체크상자는 단축 아이콘을 만들꺼냐고 묻는거에요.

기왕 설치했으니 한번 봐야겠죠?

둘다 체크된 상태로 Finish를 누릅니다.



짠, 인스톨할때 나왔던 고양이가 그대로 나와있네요.


이걸 뭣하러 일일이 적어놨냐고 하실수도 있는데..

이 강좌는 어른 뿐만 아니라 아주 어린 학생들도 볼 수도 있습니다.

그리고 연세가 많으시거나, 컴퓨터를 잘 못쓰는 사람이 볼 수도 있죠.

그런분들을 위해서 그냥 적어둔 것이니

잘 하시는 분은 태클은 사양할께요 ^^;;

Scratch 라는게 있습니다.

스크래치.. 라고 읽으며

기스..이딴게 아니라

프로그래밍을 하는 환경입니다.

[RL.S eminar] - 스크레치 데이에 구경가게 되었습니다.~
[RL.S eminar] - 스크래치 데이 후기 - 멋진경험.

에서 적어뒀었던 것인데, 한참 팽개쳐놓고 있다가

이제서야 다시 한번 잡아봅니다.


이렇게 생겼습니다.

기본적으로 어린이들을 위한 개발 툴이지만,

프로그래밍 쪽에 전혀 연고가 없는 이들을 위해서

교육용 교제로 쓰기에는 최적이라고 판단했습니다.

디자이너분들이 플래시를 배우실 때

모션쪽은 쉽게 배우시는데 반해 액션쪽은 많이 어려워하는 걸 보고는

아무래도 영어 문장만 난무하는 현업 프로그래밍보다는

비주얼적인 면이 강한 것이 접근성이 좋다고도 생각했고요.

그래서 일단 어떻게 되든 간에 연재를 시작해 보려 합니다.


왜 부제가 디자이너/기획자에게 프로그래밍 가르치기.. 냐면,

실제 현업에서 일을 하다 보면 이해도의 차이로 인해서

서로 말도 안되는거 가지고 부딛히는 현장을 많이 보고 겪었기 때문입니다.

저는 실제로,

디자이너가 자신의 디자인이 제대로 반영되지 않는다고 해서

코드를 고쳐야 했던 어처구니 없는 기억도 가지고 있습니다.

기획자가, 이걸 딱 누르면 이렇게 펼쳐져서 이게 보이면 돼..라고만 말해서

제 나름대로 구현을 해놨더니

자신이 언제 이렇게 말했냐며 화를 내는것도 경험했고요.


프로그래밍은 결국은 '논리'입니다. 앞뒤가 맞아 떨어지기만 하면 되요.

그런데 안타까운건, 컴퓨터는 인간 논리같은건 이해 못합니다.

그냥 0 혹은 1로 표현되는 Bool 논리만 이해할 수 있죠.

참/거짓으로 판단할 수 없으면 이미 컴퓨터는 못알아듣습니다.

이런점을 다른 직무이기 때문에 이해하지 못하는 것을

서로 이해했으면 좋겠다..라는 취지에서 글을 씁니다.


왜 굳이 개발자의 입장에서 글을 쓰느냐..라고 하실지도 모르지만,

1. 저는 개발자입니다. 개발자 입장밖에 몰라요(...)

2. 결국 최종 구현은 개발자가 합니다.
 
클라이언트가 맘이 바뀌어서 구현체가 180% 뒤집어져도

그걸 최종적으로 산출물로 만들어내는건 개발자기 때문입니다.


나중에는 디자이너가 개발자에게 가르치기..라던가,

기획자가 멋진 기획을 개발자에게 전달하는 법.. 등도 연재되면 더 좋고요 :)


시작할까요?

다녀왔습니다.

후기는 요기에.


만세.

집에 와서 온오프 믹스를 확인해 보니

대기자 3번에서 정확히 참가자 100번으로 바뀌어 있군요. (정원 100명)

아젠다는 다음과 같습니다.



덧붙여서.

일단 스크래치라는게 뭐냐면.

스크래치’는 한마디로 ‘비주얼 프로그래밍 플랫폼’이다

라고  하시네요;;

말씀하신 그대로 '그림'을 기반으로 프로그래밍 할 수 있는 방식입니다.

비주얼적이라고 하면 많이들 비주얼 베이직 스타일을 떠올리시는데

그런식으로 기존에 만들어진  컨트롤만 비주얼리티한 환경이 아니라.

개체를 만들고(직접 그리고) 

 그 개체에 이벤트 핸들러나 콜백. 메시지 등을 '가르쳐서'

개체를 '완성시켜 나가는' 시스템을 따르고 있습니다.


말로 하면 잘 모르니까. 그림을 보자면.


클릭해서 자세히 보시면 이 그림만으로도 대부분의 의문이 해결될 듯 합니다.

말 그대로 '블럭놀이'인듯.

정확히는 모르겠지만 '스퀵'에서 뻗어나가서,

더 쉬운 환경을  만들어주기 위해 분화한 것으로 보이니만큼

'프로토타입 베이스'인듯 합니다.

(참고 : 한국 스퀵 모임)


조금 더 강을 거슬러 올라가보면. 스퀵이라는건 뭘까요.

스몰토크의 비주얼적 구현입니다.

스몰토크의 사상은 그대로 따르되 가능하면

'보이는 대로 프로그래밍이 가능하도록'

하기 위해 노력하는 구현체입니다.


뭐 이러니 저러니 잡소리를 하고 있어도.

사실은 그냥 '어린아이들도 쉽게 이해할 수 있는 프로그래밍 환경'

을 지향하는 거라고 보는게 편할 듯 합니다.

저도 뭐 전문적으로 저걸 다루는 것은 아니라서

잘은 모르겠고

일단 세미나를 좀 다녀온 다음에 후기로 못다한 말을 전했으면 합니다..

먼저 세미나를 위한 다운로드는

공식 홈페이지에서 하시면 됩니다.
 
(한글판은 없는건가요?) 

정정합니다. 방금 최신버전을 받아서 실행시켜본 결과

다중 언어를 지원하는군요. 실행시키자 마자 한글로 나옵니다.

하긴 어린이들을 위한 환경이니 다른나라 말로 하면 당황스러울지도.. ^^;;

한글판은 이렇게 생겼네요. (급 스샷)




세미나 장에서 뵈요 ^^ 

 
덧말.

현재 대기자가 12명인데요.

이정도는 충분히 빠질 듯 하고,

실제로는 취소 안하고 참석 안하는 인원도 꽤 많은 편이라서

일단 대기자라도 신청을 해 두시는 것이 정신건강에 좋을 듯 합니다.

 

신청하세요 ^^