버섯돌이님의 블로그 강좌를 게시하였습니다.
[출처] http://blog.naver.com/dev4unet/

[버섯] 버섯돌이와 함께 하는 스크래치 - 프로젝트 에디터 살펴보기

헬로스크래치 | 2015-12-30 16:44:11

버섯돌이와 함께 하는 스크래치 기초

프로젝트 에디터 살펴보기


Created Date: 2015.11.03

Modified Date: 2015.11.29

revision 1.0


키워드 : 스크래치, Scratch, 용어, 블록

 

안녕하세요 버섯돌이 유재성입니다.


스스로 학습하기 위한 일련의 과정 중 기본 사용법인 메뉴와 블록에 대한 설명이 가장 중요하다고 판단되어

다른 강좌 보다 이번 강좌를 먼저 마무리하기 위해 시간이 날 때마다 작성하는데도 너무 오래 걸렸네요^^;;

11월이 가기 전에 포스팅할 수 있어서 다행(?)입니다.ㅜㅜ

 


1. 들어가며..

이전 시간까지는 스크래치를 독학할 수 있도록 회원 가입을 비롯하여 오프라인 에디터 설치에 대해 살펴봤으며,

간단한 샘플과 함께 다른 사람들이 만든 다양한 학습용 프로젝트 파일을 열람하는 방법 등에 대해서 간단하게 알려 드렸습니다.


오늘은 스크래치로 프로그램을 만들 때 사용하는 프로젝트 에디터의 화면 영역에 대해 간단히 살펴보며,

다음 시간에는 스크래치 프로그래밍의 핵심인 블록의 형태에 따른 특징 들에 대해서 간단히 살펴보도록 하겠습니다.


본 글에 모든 내용을 담기에는 내용이 길어져서 글에는 핵심 부분만 작성하고, 보충 설명은 밤톨이와 함께하는 영상에 담았으니

자녀에게 가르치기 위해 학습하시는 분들은 어린아이와 함께 영상을 먼저 보셔도 좋으리라 봅니다.



2. 학습목표..

오늘의 학습 목표는 스스로 스크래치를 갖고 놀 수 있도록 각 영역에 대한 간단한 이해를 목표로 하고 있습니다.

- 프로젝트 에디터에 대한 이해

- 각 메뉴의 사용법에 대한 이해

- 각 영역의 간단한 용도 파악

- 스스로 학습할 수 있는 기초 학습 능력의 밑거름

  언어 변경, 도움말 사용, 프로젝트 공유, 타인의 프로젝트 감상 및 소스 확인, ...



3. 프로젝트 에디터..

오프라인 에디터를 실행하거나 온라인 페이지의 "만들기"를 선택합니다.



아래와 같은 스크래치를 작업할 수 있는 화면이 나오는데 "프로젝트 에디터"라고 합니다.

 


프로젝트 에디터 화면에서 스크래치 블록과 스프라이트 등을 이용한 다양한 프로그램을 작성하게 되는데

스크래치 프로그래밍은 객체지향 개발 방식과 비슷하게 특정 객체에 대한 이벤트 기반의 구조로 되어있어서

각 캐릭터에 대해 어떤 이벤트가 발생했을 때 어떤 작업을 하면 될지를 정의하면 됩니다.

따라서, 프로젝트 에디터에서 가장 중요한 건 선택된 스프라이트에 대해서 작업이 진행된다는 사실입니다..


즉, 스프라이트 목록에 고양이와 박쥐 캐릭터가 있다고 가정했을 때, 박쥐를 선택하고 스크립트 영역에서 작업을 하면

해당 작업은 고양이와 박쥐 모두에게 적용되는게 아니라 현재 선택된 박쥐한테만 적용됩니다.

같은 이유로, 박쥐를 선택한 상태에서 사운드 편집을 하면 해당 사운드는 박쥐한테서만 사용이 가능합니다.


워낙 간단한 내용이라 위 내용만 기억하시면 되며, 각 영역에 대해 간단히 살펴보겠습니다.



4. 프로젝트 에디터 - TOP 메뉴

가장 상단에는 메뉴 바가 존재합니다.(또는 TOP 메뉴라고도 합니다.)



위 그림의 왼쪽부터 차례대로 설명하면...

- SCRATCH 로고 : 클릭 시 스크래치 메인 화면으로 이동합니다.


- 지구본 : 언어 설정 기능으로 프로젝트 에디터의 메뉴를 비롯한 일부 설명들이 선택한 언어(한글 / 영어 / 기타)로 변경됩니다.


  스크래치 강좌는 한글보다는 영어로 된 강좌들이 많습니다. (특히 스크래치 사이트에서 제공하는 강좌들)

  본인이 참고 하려는 강좌 등의 메뉴가 서로 달라서 혼동이 올 경우에 사용하시면 좋으리라 봅니다.


- 파일 : 스크래치 파일 처리와 관련된 메뉴입니다.

  

   메뉴가 워낙 직관적이라 쉽게 알 수 있듯이 새로운 스크래치를 만들거나 작업 중인 내용을 저장하거나

   오프라인 스크래치 에디터에서의 작업을 위해 업로드 및 다운로드가 가능합니다.


- 편집 : 편집과 관련된 메뉴입니다.

    


- 도움말 : 화면 우측에 도움말 페이지를 보여줍니다.


  스크래치가 목적(?)이 아니라서 저는 이용하지는 않지만 아주 유용한 정보들이 많을 거라 생각되니 자주 살펴보시기 바랍니다.^^


- 스크래치란 : "스크래치에 대해서"라는 페이지로 이동합니다.



5. 프로젝트 에디터 - TOP 메뉴 중간의 커서 툴 

가장 상단의 TOP 메뉴(메뉴 바) 중간에 보시면 아래 그림과 같은 커서 툴들이 있습니다.



포토샵 등 일반적인 프로그램들의 경우 TOP 메뉴 하단에는 다양한 도구의 아이콘을 모아 놓는 영역이 있는데 보통 툴 바라고 부릅니다.

위 커서 툴도 일종의 툴 바(?)에 속하며 좌측부터 차례대로 복사/삭제/확대/축소/블럭 도움말 아이콘들입니다.


아이콘별 사용법과 기능을 간단히 설명드리면...

복사(도장) 아이콘은 복사(도장) 아이콘을 먼저 클릭한 뒤,

복제하고 싶은 대상(예:스프라이트 / 블록 등)을 클릭하면 클릭된 대상이 복제됩니다.

예를 들어, 복사 아이콘을 클릭 후 고양이 스프라이트를 선택하면 똑같은 고양이 스프라이트가 하나 더 만들어집니다.


삭제(가위) 아이콘은 복사(도장)와 비슷한 방법으로,

삭제(가위) 아이콘을 먼저 클릭한 후 삭제하고자 하는 대상을 클릭하면 클릭된 대상이 삭제됩니다.


확대/축소 아이콘의 경우도 비슷한 방법으로, 아이콘을 먼저 클릭한 후 확대/축소하고 싶은 스프라이트를 클릭하면 됩니다.


블럭 도움말 아이콘의 경우, 블럭 도움말 아이콘을 먼저 클릭한 후

사용 방법이 궁금한 블록을 클릭하면 클릭된 블록에 대한 도움말이 가장 우측에 표시됩니다.


예를 들어, "10만큼 움직이기" 블록에 대한 사용 방법이 궁금하다면 "블럭 도움말" 아이콘을 클릭한 후 팔레트나 스크립트 영역에있는

 블록을 클릭하면 클릭된 "10만큼 움직이기 블록"에 대한 도움말이 가장 우측 화면에 나타납니다.



위 설명을 기본으로 전체 커서 툴의 사용법을 살펴보겠습니다.^^



스프라이트 외에 스크립트 영역에 배치된 블록들에 대해서도 복사 및 삭제 도구를 사용해 보세요.^^ (영상 참고)



6. 프로젝트 에디터 - TOP 메뉴 우측

가장 상단의 TOP 메뉴(메뉴 바) 의 가장 우측에 존재하는 영역입니다.

 


- 서류 모양의 S 아이콘을 클릭하면 지금까지 작업 중인 스크래치 내용을 저장한 뒤 내 작업실로 이동됩니다. (영상 참고)


- "dev4unet"이라고 표시된 곳은, 로그인한 계정의 닉네임이 출력되는 곳으로 개인 계정과 관련된 메뉴가 존재합니다.

   

  한 번씩 클릭하면 간단히 파악 가능하니 설명은 생략합니다.



7. 프로젝트 에디터 - 메인 영역

스크래치 작업 시 가장 많이 사용되는 메인 영역입니다. (기본적인 사용법은 영상 참고)

 


(1) 무대(Stage)

스크래치는 Flash와 비슷하게 무대에 등장인물(스프라이트)을 올려놓고 스토리를 꾸미는 방식으로 되어있습니다.

무대를 예쁘게 꾸미고 등장인물 들을 적절히 배치하면서 제어하면 멋진 스토리가 만들어지겠지요^^

따라서, 무대는 연극 무대로 생각하셔도 좋고, 그림을 그리는 도화지로 생각하셔도 좋을 것 같습니다.

프로젝트 에디터 화면에서 무대에 그려지는 모습이 사용자들에게 보이는 모습이라고 생각하시고,

(2) 번 영역 왼쪽에 보시면 무대를 꾸밀 수 있는 무대와 관련된 아이콘들이 있으니 활용해서 꾸미시면 됩니다.


 


(2) 스프라이트 목록(Sprite list)

화면에 보이는 고양이 캐릭터를 스프라이트(배우)라고 부르며, 무대에 사용할 스프라이트 들을 모아 놓은 곳입니다.

즉, 무대에 올려놓고 싶은 모든 스프라이트(배우) 들은 이곳에 추가해야 합니다.

어렵다면... 앞으로 만들 작품의 배우 명단이나 등장인물 정도로 생각하시면 될 듯싶군요.^^ (흠.. 이게 더 어려운가..^^;;)


"스프라이트 목록"영역의 우측 상단에 있는 "새로운 스프라이트" 옆의 캐릭터 아이콘을 클릭하면

스크래치에서 제공하는 다양한 스프라이트를 불러올 수 있으며, 그 옆의 아이콘 들을 이용해서 다양하게 생성도 가능합니다.

 



(3) 블록 팔레트(Blocks palette) 

무대와 등장인물이 있다면, 스토리를 구성하기 위해서는 무대와 등장인물을 원하는 대로 제어할 수 있어야겠지요?

스크래치에서는 블록을 이용해서 제어를 하며 이런 블록들을 용도별로 모아 놓은 곳을 블록 팔레트라고 합니다.


상단은 "스크립트" , "모양", "소리"의 3개의 탭으로 구성되어 있는데,

선택된 탭에 따라서 (3) 번과 (4) 번 영역은 가변적이며 "스크립트" 탭을 선택하면 블록 팔레트가 나타납니다.



원하는 그룹(동작 / 이벤트 / ...)의 블록을 스크립트 영역으로 Drag&Drop 해서 스토리를 만들면 됩니다.



(4) 스크립트 영역(Scripts area)

블록 팔레트에 있는 다양한 블록을 가져와 블록을 조합하는 공간으로서 이런 블록들의 집합을 스크립트(Script)라고 합니다.

즉, 스크래치에서의 프로그래밍은 블록 팔레트에서 스크립트 영역으로 블록들을 끌어다 놓는 작업입니다.

스크립트 영역에서 블록의 삭제는 삭제할 블록을 블록 팔레트로 끌어다 놓으면 삭제됩니다.


블록들은 각각의 특징이 있어서 서로 연결하거나 끼워 넣는 등의 다양한 형태로 되어 있는데, 스크래치는 이벤트 기반으로

프로그램을 만들면 된다고 했으니 블록 팔레트의 이벤트에서 적당한 블록을 끌어 다 놓고 시작하면 됩니다.



그리고 동작 팔레트 등에서 원하는 블록을 끌어다 놓으면서 각각의 블록을 연결하면 프로그래밍이 완성됩니다.

지금까지 계속 해왔던 작업이지만 이해가 안 된다면 지난 강좌나 하단의 영상을 참고 하시기 바랍니다.



(5) 개인 저장소(Backpack)

자신만의 스프라이트나 블록 등을 저장할 수 있는 공간입니다.




(6) 도움말 영역

가장 우측에 존재하며 도움말이 출력되는 영역입니다.



지금까지의 내용에 대해서.. 그리고 알아 두면 좋을 것 같은 부분들에 대해서는 아래 영상을 참고 하시기 바랍니다.

마이크 노이즈가 심해서 음성을 따로 합성하면서 몇 번 실패했더니 시간이 오래 걸렸네요.

영상 편집을 해야 하지만 표준 사이즈가 아니라 무비 메이커를 이용할 수 없는 충격적인...ㅜㅜ;;;

일단 포스팅하고 필요하면 나중에 편집해야겠습니다.^^

720P로 감상하세요.^^

 


네이버 영상의 재생 시간이 이상해서 유튜브에도 하나 올려 놓습니다.




8. 에피소드..

ㅋㅋㅋ..왜 밤톨이와 함께하는 스크래치가 1탄이 되었는지에 대한 간단한 에피소드??

 


아흑.. 한참 진행하다가 밤톨이가 컴퓨터의 전원 스위치를 발로 툭~ 눌러 버렸습니다.*^^*V



9. 마치며..

지금 올리고 있는 아두이노, 안드로이드, S4A, 스크래치 강좌의 경우 초등학교 입학을 앞둔 아들을 위해(?) 진행하는

기초 강좌라서 S4A 외에도 현존하는 좋은 툴들이 많지만 아직은 특정 언어나 기기에 얽메여서 사고의 흐름을 끊고 싶지 않기에

저도 공부하면서 아들하고 놀 수 있는 선에서 아들 스스로 학습이 가능하도록 스크래치와 S4A의 기초만 조금 다룰 예정입니다.


만약, 비슷한 목적으로 글을 보시는 분들은 함께 진행되는 S4A 와 안드로이드 등의 다른 강좌도 참고 하시면 좋을듯싶네요.

(문제는 연계해서 보셔도 될 정도의 퀄리티의 강좌들을 제공하지 못한다는 건 함정..^^)


본문 수정 시 가급적 배포한 곳의 글 들도 함께 수정하려고 노력합니다만 쉽지 않은 작업이라 누락되는 경우가 많습니다.^^;;;

작성한지 오래된 강좌는 가급적 원본 글도 함께 참고 하시기 바랍니다.



[참고자료]

[목차] 버섯돌이와 함께하는 스크래치(Scratch) 강좌 전체 목차

http://blog.naver.com/dev4unet/220514028814


Scratch Wiki:Table of Contents/Blocks

http://wiki.scratch.mit.edu/wiki/Scratch_Wiki:Table_of_Contents/Blocks


스크립트

http://wiki.scratch.mit.edu/wiki/Script


Script Area

http://wiki.scratch.mit.edu/wiki/Scripts_Area


블록 파레트

http://wiki.scratch.mit.edu/wiki/Block_Palette


End.


written by 버섯돌이(유재성)

http://blog.naver.com/dev4unet 



이 저작물은 크리에이티브 커먼즈 저작자표시-비영리 3.0 Unported 라이선스에 따라 이용할 수 있습니다. 


댓글
등록된 댓글이 없습니다.