스크래치로 시작하는 코딩
•
2 likes•3,155 views
[코딩교육 교재] 스크래치로 시작하는 코딩 http://www.makecube.in/p/blog-page_1.html
Recommended
More Related Content
Similar to 스크래치로 시작하는 코딩
Similar to 스크래치로 시작하는 코딩 (20)
More from Chiwon Song
More from Chiwon Song (20)
스크래치로 시작하는 코딩
- 2. 1. 코딩 교육 1.1. 코딩 교육 열풍 (교육부에서 발표한 2015년 개정 교육 과정) 1.1.1. 코딩 교육 의무화 빌게이츠 (마이크로소프트 창업자), 마커 주커버그 (페이스북 설립자), 잭 도시 (트위터 창업자) 이들의 공통점은 무엇일까요? 바로 어려서부터 ‘코딩’을 공부하고 직접 컴퓨터 프로그램을 만들던 사람들 이라는 것입니다.
- 3. "코딩을 배우세요. 코딩이 당신의 미래일 뿐만 아니라 조국의 미래이기도 합 니다. 새로운 비디오게임을 구입하지 말고 직접 만들어 보세요. 앱을 다운로드 받지 말고 직접 디자인하십시오. 컴퓨터 프로그래머는 탄생하는 것이 아닙니다. 교육을 받으면 누구나 할 수 있습니다. 어디에 거주하건 컴퓨터는 당신의 미래 를 좌우할 겁니다." http://code.org 의 코딩 캠페인에서 버락 오바마 대통령은 코딩 교육이 국가 경쟁력을 높이는 데 중요한 역할을 할 것이라며 그 중요성을 강조했습니다. 영국 아이들은 매주 1시간씩 6주 동안 코딩 교육을 받고 있고 미국이나 오스트레일리아, 그 외 의 선진국에도 코딩 교육 열풍이 불고 있습니다. 시카고 공립학교 교육청은 187개의 고등학교에 서 5년 이내에 컴퓨터 사이언스를 졸업에 필요한 필수과목으로 지정할 예정입니다. 뉴욕 공립학 교 교육청에서도 올 새 학기부터 40개의 고등학교에 재직중인 60명의 교사를 교육할 예정입니다. 영국정부는 학생들이 기초를 배우는 수준에서 벗어나 프로그램을 직접 개발할 수 있도록 교육 할 방침입니다. 초등학교 과정에서 1~2학년(5-7세)때는 알고리즘의 이해, 프로그램을 예측하기 위 한 논리적 사고를 교육하고, 3~6학년(7-11세)때는 알고리즘 설명을 위한 논리적 사고력, 네트워크 의 이해, 검색 기술의 사용법을 교육할 예정입니다. 중등과정에서 7~9학년(11-14세)때는 프로그램 제작, 계산능력을 위한 핵심 알고리즘 이해, 불린 로직의 이해를 가르치며, 10~11학년(14-16세)때 는 분석능력 및 문제해결 능력, 디자인, 컴퓨터 적 논리력 등을 교육하게 됩니다. 우리나라에서도 소프트웨어 교육을 2018년부터 의무화한다고 공식 발표했습니다.
- 4. 코딩 교육이 무엇이기에 이토록 전 세계적으로 중요성을 강조하면서 교육 열풍이 불고 있는 것 일까요? 1.1.2. 코딩이란 코딩(Coding)은 코드(Code)를 만드는 과정이나 그 행위를 말합니다. 여기서 코드라는 것은 컴퓨 터에게 원하는 일을 수행하도록 컴퓨터가 이해할 수 있는 언어로 기술하는 것을 말합니다. 즉 흔 히 프로그래밍(Programming)과 동일한 말입니다. 디지털 시대인 21세기를 살아가는 이들에게 디지털 기기들을 능숙하고 적극적으로 다루는 것은 중요한 경쟁력이 될 것입니다. 글을 배우고 읽을 수 있다면 쓸 수도 있어야 하듯이, 디지털 기기 를 사용하기만 하는 것이 아니라 새로운 기술을 쓸 수도 있어야 합니다. 마치 글을 읽고 쓰는 것 을 배우는 것처럼, 이제는 디지털 기기를 다루고 내가 원하는 일을 수행할 수 있도록 하는 기술 은 기본 상식이 될 것입니다. 그렇기 때문에 코딩 교육은 미래를 준비하는 필수적인 교육이라고 할 수 있습니다. 1.1.3. 코딩을 배우는 이유
- 5. 코딩 교육에 대해 일부에서는 “운전을 하기 위해서 엔진 설계를 배워야 한다는 것과 같다” 라 며 회의적인 시각도 있습니다. 하지만 코딩 교육은 단순히 컴퓨터를 능숙하게 다루는 것을 목표 로 하지 않습니다. 코딩 교육의 목표는 해결해야할 문제에 대한 분석하고, 해결과정에 대한 논리적인 설계와 창의 적 방법으로 해결하는데 있습니다. 즉 논리적이고 창의적인 사고를 교육하는데 그 목적이 있습니 다. 컴퓨터에게 일을 시키기 위해서 – 프로그래밍 하는 과정에서 – 문제를 분석하고, 알고리즘(해결 방법)을 고안하고 우선순위에 맞게 배열해서 처리하는 것을 자연스럽게 익힐 수 있습니다. 1.2. 논리적 문제해결 과정 1.2.1. 문제 분석 여기 한 가지 문제가 있습니다. 코끼리를 냉장고에 넣는 것입니다. 이 문제를 어떻게 해결해야 할까요?
- 6. 여러 해법들 중에 한 가지를 소개하면 바로 1. 문을 연다 2. 코끼리를 넣는다 3. 문을 닫 는다 입니다. 문제를 분석해서 그 과정을 순서대로 나열한 방법입니다. 물론 이 방법이 실제 문제를 해결해 주지는 못하겠지만, 그 접근 방법은 관심을 가져볼 만 합 니다. 문제를 분석하고 해결하는 순서를 정리한 것입니다. 코딩을 하기 위해서는 내가 해결하고자 하는 문제, 이루고자 하는 목표에 도달하기 위해서 어 떠한 순서로 진행해야 하는가를 생각해야 합니다. 예를 들어 별을 이동시키는 경우를 보겠습니다. 도화지 가운데에 별이 놓여져 있습니다. 이 별을 도화지의 우측상단으로 이동시키고 싶습니다. 그리고 별이 거꾸로 되어 있으니 약간 회전시키는게 필요합니다. 별은 도화지에 붙어 있으므로 별만 이동시킬 수는 없고 도화지를 옮겨야 합니다. 방법 1: 이동한다 회전한다 문제없는 해결 방법으로 보입니다. 실제로 해보죠
- 7. 옮겨놓고 도화지를 돌리니까 원하는 위치로 옮겨지지 않습니다. 이번엔 다른 방법으로 해보겠 습니다. 방법 2: 회전한다 이동한다. 원하는 결과를 얻었습니다. 단순한 예제였지만, 문제 해결 과정을 어떠한 순서로 진행하느냐에 따라서 다른 결과를 얻게 되었습니다.
- 8. 코딩 교육을 통해 원하는 결과를 얻기 위해 여러 시행착오를 거쳐가며 문제를 분석하고 해결 방법을 찾아가는 과정에서 문제의 분석하는 방법과 창의적으로 해결하는 방법을 습득하게 됩니다. 1.2.2. 논리적 사고 컴퓨터가 이해할 수 있는 언어와 수준으로 코딩을 하는 과정에서 자연스럽게 논리적 사고를 배 우게 됩니다. 왜냐하면 컴퓨터는 비 논리적인 것을 이해하지 못하기 때문입니다. “키 큰 사람들의 사람수를 세” 라는 말은 논리적이지 않습니다. ‘키 큰 사람’ 의 기준이 없기 때 문입니다. 컴퓨터에서 이해시키기 위해서는 “키 큰 사람이란 180Cm이상 되는 사람이야” “키 큰 사람의 수를 세” 라는 구분되고 명확한 논리로 알려줘야 합니다. 엑셀을 사용해보신 분들은 어떤 셀들의 값을 더해서 총합을 구하고, 몇을 나눠서 평균을 구하 고 하는 과정을 해보셨을 겁니다. 이 과정에서도 컴퓨터에게 우리가 원하는 값을 계산 시키기 위 해서 논리를 사용했던 것입니다.
- 9. 위 그림에서 앵그리 버드가 돼지를 공격하기 위해서는 어떻게 해야 할까요? “돼지를 공격해” 라는 명령으로는 컴퓨터는 일을 수행하지 못합니다. 논리적인 명령이 아니기 때문입니다. 앵그리 버드가 지금 오른쪽을 바라보고 있기 때문에 “우회전 해” “한 칸 이동해” “좌회전 해” “세 칸 이동해” … 등으로 명령한다면 하나씩 명령을 수행하면서 돼지를 공격할 수 있게 됩니다. 이것을 스크래치 식 코딩 방법으로 표현하면 이렇습니다. 1.2.3. 순서도 이러한 논리적 명령의 순서를 차례로 그림으로 나타내는 것을 순서도라고 합니다. 순서도는 컴 퓨터에서 지시할 명령을 위에서 아래로 순서대로 그려낸 것을 말합니다.
- 10. 위에서부터 아래로 순서대로 진행해 가며 조건에 따라 분기되기도 하고 반복하기도 하면서 원 하는 결과에 도달하기까지 작성된 논리 표 입니다. 몇 개 안되는 간단한 다이어그램이지만 이것 만으로도 충분히 논리를 전개할 수 있고, 실제 코딩에서 이러한 조건들을 조합하여 작성하게 됩 니다. 코딩을 하는 과정도 순서도를 작성하는 것과 다르지 않습니다. 명령, 반복, 조건-분기를 조합하 여 생각의 순서를 작성하는 과정이 코딩하는 과정입니다.
- 11. 2. 스크래치 2.1. 스크래치 소개 일반적으로 프로그래밍에 사용되는 컴퓨터 언어인 C, Java, Python 등은 컴퓨터의 구조에 대한 이해와 구문(Syntax)과 방대한 라이브러리 등을 익혀야 하는 어려움이 있었습니다. 그래서 코딩을 학습하는 도중에 포기하는 경우가 많고 코딩은 어렵다는 인식을 갖게 되었습니다. 이 어려운 코 딩을 쉽게 접근할 수 있도록 MIT Media Lab의 Lifelong Kindergarten Group에서 여러 기관의 지원 을 받아 스크래치를 만들게 되었습니다. 스크래치는 코딩을 시작하는 학습자에게 프로그래밍에 대해 쉽고 직관적으로 접근할 수 있도록 마치 순서도와 같은 블록의 조합으로 프로그래밍을 할 수 있도록 만든 프로그래밍 언어의 하나 입니다. 공식 사이트는 https://scratch.mit.edu/ 입니다.
- 12. 스크래치 제작자가 들려주는 스크래치 이야기 https://youtu.be/Ok6LbV6bqaE 2.1.1. 시작하기 스크래치를 시작하기 위해서는 인터넷과 브라우저만 있으면 됩니다. Scratch 홈페이지에서 바로 시작해 볼 수 있습니다. 로그인을 하면 자기가 만든 코드를 저장할 수 있습니다. 하지만 로그인 하지 않더라도 바로 시작해 볼 수 있습니다. 홈페이지의 좌측 상단의 “만들기” 메뉴를 선택하는 것으로 시작할 준비는 완료됩니다.
- 13. 2.1.2. 스크래치 둘러보기 스크래치를 만들어 보기 전에 다른 사람들이 만들어서 공개한 것들을 살펴보면서 스케치가 어 떤 것이고 어떠한 것들을 만들 수 있는지 살펴보겠습니다. 탐험하기 메뉴를 선택해 보겠습니다. 많은 스크래치 사용자가 스스로 만든 스크래치들을 공유하고 있습니다. 가장 처음에 있는 Circle Wars 라는 스크래치를 선택해 봅시다.
- 14. 로딩이 끝나고 나면 위 그림처럼 나옵니다. 초록색 깃발을 선택해서 실행해 볼 수 있습니다. 녹색 깃발은 시작, 빨간색 원은 종료 입니다. 를 선택하면 게임화면을 크게 볼 수 있습니다. 여러가지 공유된 스크래치들을 실행해 보세요. 버튼을 누르면 어떻게 만들어 졌는지 스크립트를 볼 수 있습니다.
- 15. 이렇게 세계의 많은 사용자들이 스크래치를 만들고 공유하고 있습니다. 어떻게 만들었는지 스 크립트 내용도 볼 수 있어서 참고할 수도 있습니다. 이렇게 스크래치는 스프라이트와 스크립트를 조합하여 “무대”영역에서 여러가지 재미난 것들을 쉽게 만들고 공유할 수 있습니다. 2.1.3. 스크래치 화면 구성 이제 스크래치를 만들어 보겠습니다. 메뉴의 “만들기”를 선택하여 새로운 스크래치를 만드는 화 면으로 진입합니다. 스크래치는 크게 무대, 스프라이트, 블록, 스크립트 영역으로 구분됩니다. 블록 영역의 명령 블록을 사용하여 스크립트 영역에 조합하여 코딩하면 스프라이트에 지정된 주인공들이 무대 위에서 동작하는 방식입니다.
- 16. 2.1.4. 스크래치 시작 해보기 동작을 이해하기 위한 간단한 동작을 수행해 보겠습니다. 먼저 스프라이트 영역의 고양이를 선택해서 파란색 테두리가 나타나게 합니다. 블록 영역의 명령 블록을 하나 선택해서 스크립트 영역으로 드래그 해서 내려놓습니다. 그리고 이 블록을 더블클릭하면 고양이(선택된 스프라이트)가 그 동작을 수행하게 됩니다. 이 블록 하나를 꺼내고 더블클릭 해보세요. 고양이가 바라보는 방향이 오른쪽으로 조금씩 이동 하는 것을 볼 수 있습니다. 움직임의 간격을 조정하고 싶다면 ‘10’ 의 숫자를 크게 혹은 작게 변 경하면 그만큼 조금씩 또는 큼직하게 움직이게 됩니다. 이번에는 여러 동작을 함께 수행시켜 보겠습니다. 이렇게 블록이 서로 맞물리게 붙이면 붙어있는 블록들이 위에서 아래로 순서대로 수행됩니다.
- 17. 2.1.5. 무대의 좌표 무대는 가로 480, 세로 360 의 크기로 중점에 (0, 0) 좌표를 가지고 있습니다. 이동하기 블록으로 특정 좌표로 고양이를 이동시키면 스프라이트의 중심이 해당 좌표에 가도록 이동하게 됩니다.
- 18. 2.2. 스크립트 만들기 이제 명령 블록을 사용해서 스크립트를 만들어 보겠습니다. 스크립트는 크게 동작, 이벤트, 형태, 제어, 소리, 관찰, 펜, 연산, 데이터, 추가 블록 등으로 종류 가 구분되어 있습니다. 프로그래밍에는 모두 동일하게 (입력) (처리) (출력) 의 과정을 거치게 됩니다. 입력으로는 사용자가 누르는 키보드, 마우스 움직임, 소리(마이크), 카메라, 값 입력 등이 될 수 있을 겁니다. 이 입력을 바탕으로 적절한 처리를 하여 결과를 출력하게 됩니다. 출력에는 소리(스피커), 화면, 계산 결과 값 등등이 해당됩니다. 이에 따라 다시 구분해 보면 입력: 이벤트, 관찰, 펜, 데이터 처리: 동작, 제어, 연산, 추가 블록 출력: 동작, 형태, 소리 등으로 나눌 수 있습니다. 이제 하나씩 블록을 사용해 가면서 스크립트를 만들어 보겠습니다. 스크립트를 만드는 방법은 블록영역에서 원하는 블록 하나를 선택해서 스크립트 영역으로 드래 그 해서 이동시키고, 동작을 연결할 블록들을 이어 붙이 것입니다. 스크립트 영역의 블록을 삭제 할 때는 역으로 드래그해서 블록영역으로 다시 집어 넣으면 됩니다.
- 19. 2.2.1. 고양이 움직이기 시작 시점 스크립트가 처음 시작되는 시점은 무대 영역 우측상단에 있는 녹색 깃발을 클릭했을 때 입니다. 사용자가 마우스로 선택한 경우가 되기 때문에 이것은 입력에 해당합니다. 외부에서 이러한 입력 이 발생하는 것을 이벤트라고 합니다. 이벤트 블록 중에서 녹색 깃발을 클릭하는 이벤트를 꺼내 겠습니다. 블록 영역에서 이벤트 종류를 선택하고 블록을 드래그 하여 스크립트 영역으로 꺼내 면 됩니다. 이제 녹색 깃발을 눌렀을 때 하고자 하는 동작을 이 밑에 붙임으로써 동작을 시킬 수 있습니다.
- 20. 그리고 무대 영역에 있는 녹색 깃발을 눌러보면 동작 명령이 실행되는 것을 볼 수 있습니다. 고양이 움직이기 고양이를 오른쪽으로 움직이게 했습니다. 현재 좌표에서 10만큼 이동시키는 명령을 수행했기 때문입니다. 그러면 왼쪽으로 움직이게 하려면 어떻게 할까요? -10만큼 이동시키면 됩니다. 움직임 블록을 하나 더 붙이고 10 영역을 더블클릭하여 숫자를 직접 입력하여 -10으로 고치면 됩니다. 예상으로는 오른쪽으로 10만큼 이동한 후에 다시 왼쪽으로 10만큼 이동할 것으로 예상됩 니다. 하지만 실행해보면 고양이는 움직이지 않습니다. 왜냐하면 오른쪽으로 갔다가 다시 바로 왼쪽 으로 왔기 때문에 가만히 있는 것처럼 보이는 것입니다. 그럼 오른쪽으로 갔다가 조금 기다리고 다시 왼쪽으로 가도록 해보면 움직이는 것을 볼 수 있을 것 같습니다. 제어 블록에서 기다리기 블록을 꺼내서 움직이기 블록 사이에 넣어보겠습니다. 실행하면 오른 쪽으로 이동, 1초후 왼쪽으로 이동하는 결과를 볼 수 있습니다. 계속 움직이게 하기 이번에는 고양이를 한 번만이 아니라 계속 움직이게 해보겠습니다. 움직이기 블록을 계속 연달 하 붙이면 되겠지만 반복된 동작을 수행하기 위해 반복하기 블록을 사용하는 것이 더 좋을 것 같 습니다.
- 21. 반복하기 블록을 꺼내고 움직이기를 반복하기 블록 안에 넣었습니다. 반복하기 블록은 감싸고 있는 블록을 지정된 수만큼 반복해서 수행하게 됩니다. 기다리기를 넣지 않는 다면 움직이는 과 정을 볼 수 없이 한꺼번에 이동하게 될 것이므로 사이에 기다리기를 넣었습니다. 1초는 너무 기니 까 0.1초로 변경했습니다. 반복하기를 지정된 횟수만큼이 아닌 무한 반복하기로 바꿔봤습니다. 이제 실행하면 고양이가 무대 밖으로 나갈 때까지 계속 움직이게 됩니다. 무한 반복하기는 한 번 실행하면 끝나지 않기 때문에 끝내려면 정지 버튼 을 눌러줘야 합니다. 고양이 되돌아 가기 고양이가 화면 밖으로 나가는 것이 좋지 않습니다. 오른쪽 끝에 닿았을 경우 반대방향으로 이 동하도록 해서 화면을 좌우로 왔다 갔다 움직이도록 해보겠습니다.
- 22. 벽에 닿으면 튕기기 동작을 추가했습니다. 고양이가 움직이면서 벽에 닿게 되면 튕기며 반대방 향을 바라보게 되고, 바라보는 방향으로 계속해서 10만큼 움직이게 되어 화면 좌우를 왔다 갔다 반복해서 움직이게 됩니다. 그런데 벽에 닿아 튕기면서 좌우뿐만 아니라 상하도 뒤집어 졌습니다. 스프라이트의 튕기는 속 성이 상하좌우 모두 적용되도록 되어 있어서 그렇습니다. 스프라이트의 고양이를 오른쪽 버튼으로 클릭하여 Info 메뉴를 선택하고 정보 화면에서 회전 방식을 “좌우”로 변경했습니다. 이제 고양이가 원하는 대로 움직이는 것을 볼 수 있습니다.
- 23. 2.2.2. 키보드 제어 단계 내용 목표 화살표 키로 고양이를 움직일 수 있게 한다. 초기상태 고양이는 가운데 (0, 0) 좌표에 위치한다. 입력 화살표 키 (상, 하, 좌, 우) 처리 고양이의 현재 좌표를 기준으로 상: y 축으로 10만큼 이동 한다. 하: y 축으로 -10만큼 이동 한다. 좌: x 축으로 -10만큼 이동 한다. 우: x 축으로 10만큼 이동 한다. 출력 새로운 좌표에 고양이를 위치시킨다. 위의 목표를 해결하기 위해서 문제를 분석하고 논리적으로 설계한 결과 입니다. 이 과정을 하 나씩 블록을 사용해서 코딩해 나갑니다. 초기상태 입력-처리
- 24. 2.2.3. 마우스 제어 단계 내용 목표 마우스 클릭한 곳으로 고양이를 이동시킨다. 초기상태 고양이는 가운데 (0, 0) 좌표에 위치한다. 입력 마우스 클릭 좌표 처리 마우스가 클릭한 좌표로 고양이가 1초동안 이동시킨다. 출력 새로운 좌표에 고양이를 위치시킨다. 초기상태 입력-처리 완성
- 25. 2.2.4. 동시에 여러 동작 수행 단계 내용 목표 마우스 클릭한 곳으로 고양이를 이동시킨다. 초기상태 고양이는 가운데 (0, 0) 좌표에 위치한다. 고양이의 회전 방식은 ‘왼쪽, 오른쪽’으로 정한다. 입력 마우스 클릭 좌표 처리 마우스가 클릭한 좌표로 고양이가 1초동안 이동시킨다. 고양이는 움직이는 동안 달려가는 모양으로 움직인다. 고양이가 움직이는 동안 움직이는 방향을 바라본다. 출력 새로운 좌표에 고양이를 위치시킨다. 초기상태 입력 처리 – 고양이 1초동안 이동시키기
- 26. 처리 – 고양이가 달려가는 모양으로 움직이기 고양이 스프라이트에는 2개의 모양이 있습니다. 고양이 스프라이트를 선택한 상태에서 모양 탭을 보면 costume1 과 costume2 의 두가지 모양 이 있습니다. 이 두 개의 모양을 번갈아 보여주면 마치 달려가는 모습으로 보이게 될 것입니다. 모양을 바꾸는 것이 블록으로 처리할 수 있습니다. 반복적으로 모 양을 변경하기 위해서는 시간 간격을 두고 반복하면 됩니다.
- 27. 여기서 시작하기 제어 블록을 하나 더 사용했습니다. 시작하기 제어 블록은 녹색 깃발이 클릭 했을 때 시작되며 여러 개가 있을 경우 각각의 블록이 함께 실행됩니다. 처리 – 움직이는 방향을 바라보도록 하기 고양이가 움직이는 방향을 바라보도록 하기 위해서는 클릭하는 순간의 마우스 위치 (이동할 지 점)를 바라보도록 하면 됩니다. 이 동작 블록을 사용하게 되며, 마우스의 클릭 이벤트 이후 수행하면 되니까 고양이가 이동하는 블록을 이렇게 수정하겠습니다. 완료
- 28. 문제발생 코딩을 완료했고 동작도 잘 합니다. 하지만 한가지 문제가 남아있습니다. 문제는 고양이가 움직 이지 않고 있는데도 계속 달리고 있다는 것입니다. 평상시에는 가만히 있다가 움직이는 동안에만 달리게 하고 싶습니다. 이를 처리하기 위해서는 움직이는 중인지 아닌지를 판단할 필요가 있습니다. 그 판단을 위해서 움직이고 있는 상태인지 아닌지를 알 수 있도록 어딘가에 적어놓고 움직이는 블록에서 움직이고 있는 중일 때 모양을 변 경하면 될 것입니다. 현재 움직이는 중인지 아닌지 변하는 상태의 값을 저장하고 있는 것을 “변수” 라고 합니다. 그래서 변수를 하나 추가하고 이 변수에 움직이는 상태 값을 저장할 것입니다. 데이터 블록에서 변수를 하나 만듭니다. 이름은 아무거나 해도 좋습니다. 여기서는 isMoving 이 라고 정했습니다. 변수가 만들어 졌습니다.
- 29. 이 isMoving 변수에 평소에는 0 값을, 움직이고 있는 동안에는 1 값을 입력할 것입니다. 평소 에 0을 입력할 것이기 때문에 초기값으로 0을 입력합니다. 움직이는 동안은 마우스가 클릭 되었을 때 이고, 움직임이 끝났을 때는 이동이 완료된 후 입니 다. 마우스가 클릭 되었을 때 isMoving 값을 1로, 이동이 완료된 후에 다시 0을 지정합니다. 이제, 고양이의 달리는 모양을 변경하는 부분은 isMoving 값이 1인 경우에만 수행하도록 하면 됩니다. 조건에 따라 수행 여부를 결정하거나 수행 동작을 다르게 처리하는 블록은 제어의 만약 블록 입니다. 값을 비교하는 블록은 연산의 = 블록 입니다.
- 30. 조합하면 이렇게 만들어질 수 있습니다. 이제 만약 블록 내에 달리는 동작을 넣으면 됩니다. 완성
- 31. 2.3. 입력, 출력 2.3.1. 사용자 입력 받기 단계 내용 목표 사용자의 이름을 입력 받아 고양이가 인사하도록 한다 입력 사용자 이름 처리 이름을 입력 받아 “안녕, OOO님” 이라는 문장을 만든다 출력 “안녕, OOO님” 이라고 고양이가 말한다. 입력 처리 입력 받은 결과가 “대답” 이라는 변수에 담기게 됩니다. 입력 값 앞과 뒤에 새로운 문자를 결합 하여 하나의 문장을 만들어 냅니다. 출력
- 32. 완성 생각하기로 변경하기 말 풍선 사라지게 하기
- 33. 2.3.2. 소리내기 단계 내용 목표 고양이를 마우스로 클릭하면 소리가 나게 한다. 입력 마우스 클릭 처리 고양이가 클릭 되었을 때 소리 재생 출력 소리 입력 마우스 클릭은 방향키 입력처럼 시작 시점이 됩니다. 이벤트의 스프라이트 클릭 이벤트를 사용 합니다. 처리 스프라이트는 각자 모양과 소리를 가질 수 있습니다. 고양이 스프라이트는 meow 라는 소리를 하나 가지고 있습니다. 이 소리를 재생하도록 합니다. 출력
- 34. 완성 2.3.3. 값 화면에 출력하기 단계 내용 목표 고양이를 클릭할 때마다 회수를 화면에 표시한다. 초기상태 클릭 회수는 0부터 시작한다. 입력 마우스 클릭 처리 고양이가 클릭 되었을 때 회수를 1씩 증가 출력 화면에 회수 표시 초기상태 클릭 회수를 저장하기 위해서 변수를 하나 만듭니다. 데이터에서 변수만들기로 “클릭 회수” 라는 이름의 변수를 생성합니다. 생성된 변수 왼쪽의 체 크표시를 해두면 화면에 변수 이름과 값이 표시됩니다. 시작하면 이 변수 값을 0으로 초기화 합니다.
- 35. 입력 처리 1만큼 이라는 것은 1을 더한다는 뜻입니다. 1씩 감소하려면 -1만큼 바꾸기로 지정하면 됩니다. 출력 변수의 값이 변할 때마다 변경된 값이 화면에 출력됩니다. 완성
- 36. 2.4. 배경, 스프라이트 변경 지금까지 흰색 배경에 고양이 스프라이트를 가지고 사용해 왔습니다. 하지만 무대의 배경과 여 러 다양한 스프라이트를 사용할 수 있고, 직접 사진이나 이미지 파일을 등록할 수도 있고, 그림으 로 그려 추가할 수도 있습니다. 2.4.1. 배경 바꾸기 스크래치에서는 기본으로 다양한 무대 배경이미지를 제공하고 있습니다. 무대 하단의 배경 영 역의 첫번째 아이콘을 클릭해서 배경을 변경할 수 있습니다.
- 37. 배경을 선택하여 지정할 때마다 사용할 수 있는 배경 목록에 추가됩니다. 배경 목록은 배경 탭 에서 확인할 수 있습니다. 각 배경이 이름을 가지고 원하는 시점에 스크립트를 통해서 배경을 변경할 수 있습니다. 배경을 변경하는 것은 형태 블록의 배경 바꾸기 블록을 사용합니다. 예제
- 38. 2.4.2. 스프라이트 바꾸기 배경과 마찬가지로 스프라이트도 스크래치에서 제공되는 다양한 이미지들이 있습니다. 선택한 스프라이트 들은 스프라이트 영역에 추가됩니다. 스크립트 블록은 각 스프라이트에 지정됩니다. 따라서 고양이를 선택한 후에 만든 블록과 박쥐 를 선택해서 만든 블록은 각각 다른 블록이며 동시에 각각의 이벤트에 따라서 실행됩니다.
- 39. 예제 박쥐를 선택한 후에 입력한 스크립트는 박쥐에만 적용됩니다. 앞선 예제의 고양이와 함께 배치 하면 고양이와 박쥐가 서로 다른 속도로 이동하게 됩니다. 예제2 <고양이 스크립트>
- 40. <박쥐 스크립트> <박쥐와 고양이의 스크립트가 함께 실행되는 모습>
- 41. 2.4.3. 스프라이트끼리 영향 주기 한 스프라이트의 동작에 의해서 다른 스프라이트에 영향을 주어야 하는 경우, 예를 들어 서로 부딪히는 경우나, 또는 한 스프라이트의 상태에 따라서 다른 스프라이트가 등장하거나 다른 동작 을 취해야 하는 경우 이벤트를 주고받음으로써 처리할 수 있습니다. 충돌 처리 박쥐의 스크립트 입니다. 박쥐를 보이게 하여 등장시킨 후 고양이가 닿게 되면 사라지는(숨기는) 스크립트 입니다. 이벤트 전달 고양이의 스크립트 입니다. 고양이를 클릭했을 때 “집에가” 라는 메시지를 모든 스프라이트에게 전달합니다. 이를 방송한다고 합니다. 박쥐의 스크립트 입니다. “집에 가”라는 메시지를 받은 경우 사라지도록 반응하게 됩니다.
- 42. 2.5. 프로젝트 핑퐁 프로젝트 혼자하는 핑퐁게임을 만들려고 합니다. 공이 움직이면 마우스로 빨간색 또는 초록색 막대를 움 직여 공을 튕겨냅니다. 공은 좌우 벽에 부딪히거나 막대에 닿으면 튕겨 나가지만 상, 하의 벽에 닿으면 상대방의 점수가 올라가게 됩니다. 막대는 마우스를 따라서 좌우로 움직이게 되며, 빨간색 은 마우스의 위치를 따라서, 초록색은 마우스의 반대 방향으로 움직이게 됩니다. 2.5.1. 스프라이트 준비 스크래치를 새로 만들고 기본 고양이 스프라이트는 삭제합니다. 스프라이트 저장소에서 공으로 사용할만한 적당한 스프라이트를 하나 가져옵니다. 막대 스프라이트는 없으니까 그림을 그려서 새로 생성하겠습니다. 붓 모양의 아이콘을 클릭해서 새로운 스프라이트를 만듭니다. 그림판처럼 보이는 화면에서 초 록색, 빨간색 스프라이트를 각각 하나씩 만들어 줍니다. 각 스프라이트의 이름은 ball, red, green 으로 변경해 주었습니다.
- 43. <막대 스프라이트 그리기> 스프라이트의 그림은 그림 영역의 가운데에 그려야 합니다. 하지만 일단 그려놓고 가운데로 옮 기면 됩니다. 적당한 위치에 빨간색 직사각형을 그립니다. 우측상단에 십자선을 선택하고 빨간 막 대의 중점을 표시해 줍니다. 그러면 막대의 중점으로 표시한 부분이 화면의 가운데로 이동하게 됩니다. 이 중점은 스프라이트의 위치를 지정할 때 기준이 되는 기준점이 됩니다.
- 44. <준비된 스프라이트 세트> 2.5.2. 변수 준비 데이터 블록의 변수만들기로 “빨간 팀 점수” 와 “초록 팀 점수” 변수를 각각 하나씩 만들어 주 었습니다. 각 변수에 체크표시를 해두어 화면에 나타나도록 했습니다. 2.5.3. 무대 준비 무대에 빨강, 초록 막대와 공, 점수표를 적당한 위치에 배치하여 무대 준비를 마칩니다.
- 45. <준비된 무대 > 2.5.4. 빨간 막대 스크립트 마우스가 이동하는 것에 따라서 y 좌표는 아래쪽에 고정시키고 x 좌표만 마우스의 위치를 따라 서 이동하도록 하였습니다. 2.5.5. 초록 막대 스크립트
- 46. 초록 막대는 마우스와 반대로 움직일 것이기 때문에 -1을 곱해서 방향을 반대로 만들어 줍니다. 연산 블록의 곱하기 블록을 사용해서 -1을 곱해주고 위치 이동의 x 좌표에 대입해 주었습니다. 2.5.6. 공 스크립트 공 이동하기 우선 공의 시작 위치를 화면의 가운데 (0, 0) 에서 시작하도록 하였습니다. 회전시켜 이동하도록 할 것이기 때문에 회전 방식을 “회전하기”로 정했습니다. 공을 움직이게 하기 위해서 무한 반복하며 움직이기를 수행할 것입니다. 처음 움직이는 방향은 0~360도 사이의 값의 난수를 사용하여 임의의 각도로 회전시킨 후 반복해서 5씩 이동하게 했습 니다. 벽에 닿았을 때 우선 벽에 닿으면 무조건 튕기도록 해보겠습니다. 벽에 닿으면 튕기기 블록으로 무대 화면 내에서 튕기며 움직이는 것을 볼 수 있습니다.
- 47. 블록에 맞으면 튕기게 하기 스크립트끼리 닿는 것을 확인하는 관찰 블록을 통해서 블록에 공이 닿았을 때 90도 회전시켜 이동하는 방향이 꺾이도록 하였습니다. 점수 계산하기 공이 상단 또는 하단의 끝에 닿았는지를 확인해서 상대방의 점수를 증가합니다. 역시 스프라이 트까지 닿는지를 확인하는 기능을 활용하면 좋을 것 같습니다. 그래서 끝 벽 용 스프라이트를 하 나씩 더 만들어 배치합니다.
- 48. 이제 이 공과 이 끝의 선이 닿으면 상대방 점수를 증가시키도록 하겠습니다. 게임 초기화 게임이 처음 시작하면 점수를 0점으로 초기화하여 시작하고 어느 팀이든 점수를 얻으면 공의 위치를 처음 위치인 가운데로 이동시켜 새로운 방향으로 시작하도록 초기화 기능을 넣겠습니다.
- 50. 이것으로도 충분히 잘 동작하지만, 코드에 반복적으로 나타나는 부분이 있습니다. 이 부분을 하 나의 명령으로 만들어서 사용한다면 좀 더 간략하게 만들 수 있을 것 같습니다. 이 때 사용하는 블록이 추가 블록입니다. 변수를 추가하듯이 추가블록에서 블록을 추가합니다. 이름은 “공 초기화”로 지었습니다. 이런 블록 정의가 나타납니다. 여기에서 반복적으로 표현되는 블록들을 만들어 줍니다. 이제 추가된 “공 초기화” 블록을 사용해서 ball 스프라이트의 전체 스크립트를 다시 보면 다음 과 같습니다.
- 51. 완성 간단한 핑퐁 게임이 완성되었습니다. 배경이나 사운드, 첫 인트로 화면 등을 추가하면 더욱 멋 진 게임이 될 것입니다. 각자 이 핑퐁게임을 참고하여 더 발전시키거나 새로운 작품을 만들어 보 세요.
- 52. 3. 더 알아보기 스크래치는 쉽고 직관적으로 코딩을 공부할 수 있는 도구로 세계적으로 많은 사랑을 받고 있으 며, 교육수단으로 많이 활용되고 있습니다. 또한 배울 수 있는 자료도 많이 공개되어 있습니다. 3.1. 스크래치 학습하기 3.1.1. Open Tutorials https://goo.gl/NXDNf7 오픈 튜토리얼 (http://opentutorials.org) 사이트는 각종 여러 강좌를 무료로 공개하고 공유하는 사이트 입니다. 이 중 스크래치가 소개되었으며 모두 동영상으로 되어 있어 직접 보면서 따라할 수 있어 공부하기에 좋게 구성되어 있습니다.
- 53. 3.1.2. 울산대학교 강의자료 https://goo.gl/vFDL3b 울산대학교 공과대학에서 스크래치를 이용한 프로그래밍 수업에 대한 공개 자료 입니다. 스크 래치부터 시작하여 C 언어로 연결이 되도록 강의가 구성되어 있습니다. 스크래치를 이용하여 진 입장벽을 낮추고 프로그래밍을 시작할 수 있도록 정리가 잘 되어 있습니다. 문서 자료만 제공됩 니다.
- 54. 3.1.3. 관련 서적 이미 서점에는 많은 스크래치 관련 서적들이 출판되어 있습니다. 초등학생부터 대학생까지 다 양한 독자 층을 위한 책들이 준비되어 있기 때문에 목적과 수준에 따라 얼마든지 선택하여 학습 할 수 있습니다.
- 55. 3.2. 스크래치 활용하기 3.2.1. 앱 인벤터 http://appinventor.mit.edu/ 앱 인벤터는 MIT 와 구글이 함께 협력하여 개발된 프로그래밍 도구입니다. 스크래치 프로그래 밍을 통해서 안드로이드 앱을 만들 수 있습니다.
- 56. 스크래치를 사용할 수 있는 분들이라면 누구나 쉽게 안드로이드 휴대폰용 앱을 만들 수 있습니 다. 직접 자신의 휴대폰에 올려서 실행해 볼 수도 있고, 안드로이드의 플레이 스토어에 올려 판매 도 가능합니다.
- 57. 3.2.2. S4A http://s4a.cat/ Scratch for Arduino (S4A) 는 아두이노 프로젝트를 스크래치로 프로그래밍 할 수 있도록 제공하 는 툴입니다. 아두이노의 관심이 많아지고 있지만 프로그래밍에 적응하지 못하던 사용자들을 위 해서 스크래치 방식으로 프로그래밍 할 수 있도록 제공해 줍니다.
- 58. 3.2.3. Scratch X http://scratchx.org/ 스크래치를 이용하여 좀 더 다양한 기기와 연동하고 다양한 환경에서 프로그래밍을 할 수 있도 록 확장 버전이 진행되었는데, 그것이 Scratch X 입니다. 아직은 베타 버전이지만 충분히 훌륭하게 동작하고 있습니다. 아두이노를 비롯한 라즈베리 파이, 리틀비츠 등 지원하는 지지도 매우 다양합 니다. 마찬가지로 스크래치로 프로그래밍을 할 수 있는 분들이라면 쉽게 하드웨어와 연동하여 재미난 프로젝트들을 만들어 나갈 수 있습니다.