소프트웨어코딩

프로그래밍 교육용 언어

스크래치(scratch)를 통한 컴퓨팅 사고력 배양

 

컴퓨터 기본 사용법

보기

메뉴, 도구 상자, 아이콘, 펼침 단추, 스프라이트, 작업창, 무대창, 실행창 등

선택

마우스 포인터 위치 시킴

클릭, 화살표 키, Tab 키 등

실행

Enter, 클릭, 더블클릭, 드래그, 우클릭

취소 : 여백 클릭, ESC , Ctrl+Z

 

소프트웨어란?

하드웨어 : 웨어(ware)는 물건, 제품. 딱딱한 물건. 만질 수 있는 것. 컴퓨터 본체, 모니터, 키보드, 마우스 등

소프트웨어 : 만질 수 없는 것. 윈도우 화면, 아이콘, 음악, 문서편집 프로그램 등

시스템 소프트웨어 : 운영체제(윈도우, 리눅스, iOS). 마우스나 키보드 등 장치를 제어하는 프로그램(디바이스)

응용소프트웨어 : 그림판, 문서편집기, 계산기 등

소프트웨어 = 프로그램

프로그래밍이란?

프로그램을 작성할 때 사용하는 언어 :

프로그래밍 언어

컴퓨터가 이해하는 언어 :

기계어(이진수), 어셈블리어

일상 언어와 기호를 사용하는 프로그래밍 언어 :

고급 프로그래밍 언어. 소스(원시) 프로그램

고급 프로그래밍 언어를 저급 프로그래밍 언어로 바꾸기 :

컴파일러-> 어셈블러 -> 기계어. 인터프리터.

컴파일러와 인터프리터?

컴파일러를 이용하는 프로그래밍 언어 :

C, C++, 자바 등

인터프리터를 이용하는 프로그래밍 언어:

파이썬, 비주얼베이직, 자바스크립트. 스크립트 언어

 

스크래치는?

스크립트 언어. 스크립트 : 연극 대본.

 

코딩이란?

프로그래밍 할 때 실행 순서를 프로그래밍 언어의 명령어(코드)로 작성하는 일

프로그래밍은 더 큰 개념으로 코드 작성, 분석 및 구현, 기계 레벨 출력 생성, 디버깅, 컴파일, 테스트 및 구현 등 원하는 출력을 만들기 위한 모든 중요한 모든 영역을 포함

 

소프트웨어코딩이란?

초중고 정규과목으로 지정하면서 사용한 말

소프트웨어코딩 교육

주로 스크래치나 엔트리를 코딩 도구로 사용

스크래치 코딩을 블록코딩 혹은 소프트웨어 코딩이라 함

 

스크래치란?

문자로 된 코드 대신에 블록(Block)이라고 불리는 상자 모양의 명령을 마우스로 드래그해 조립, 프로그램을 구성해나가는 것

미국 MIT 미디어랩의 라이프롱 킨더가르텐 그룹에서 개발.

스크래치를 어떻게 실행하나요?

크롬 웹브라우저 프로그램으로 https://scratch.mit.edu 에 접속하여 상단 메뉴에 있는 만들기클릭.

지구본 아이콘 클릭 후, ‘한국어선택.

스크래치 가입 : 계정 갖기. 로그인 하면 저장하고 관리할 때 편하고 함께 공유할 수 있습니다.

 

스크래치 가입을 어떻게 하나요?

https://scratch.mit.edu 에 접속하여 상단 메뉴에 있는 스크래치 가입클릭

사용자 이름 : 영어, 숫자, -, _

비밀번호 : 비밀 번호 표시 체크해제 후

국가 : Korea, Republic of

이메일주소 : email1234@gmail.com

위에 적은 이메일 사이트에 로그인 후 Confirm your Scratch account이란 제목의 메일 클릭 후 계정 인증단추 클릭.

 

스프라이트(sprite)?

(장난 좋아하는)요정, 도깨비

게임 캐릭터

코카콜라 브랜드의 소다 제품명. 레몬 라임 드링크.

등장 인물

 

무대 크기는?

가로 480 픽셀, 세로 360 픽셀

스프라이트가 있는 위치는 가로 +-240, 세로 +-180.

 

블록이란?

동작, 형태, 소리, 이벤트, 제어, 감지, 연산, 변수, 나만의 블록 등

문장, 자료/변수(타원), 조건(6각형), 제어, 이벤트 블록 등

블록 조작 : 드래그

블록 조립과 분리 : 드래그 할 때 회색의 블록 음영 참조.

블록 복사 : 우클릭. ‘ 복사하기후 블록 조립(원하는 곳에서 클릭)

다른 스프라이트에 복사 : 원하는 블록을 다른 스프라이트로 드래그(그 스프라이트가 좌우로 움직임)

첫 번째 코딩 준비 작업 : 무대와 배우

[스프라이트/무대 관리 창]에서 [배경 고르기] 클릭

Beach Malibu 클릭

[스프라이트/무대 관리 창]에서 [스프라이트 고르기]를 클릭

Mouse1 클릭

스프라이트 이름 변경 : [스프라이트/무대 관리 창]상단에서 고양이’, ‘등으로 변경

고양이와 쥐의 위치 변경 : 드래그

 

스크립트 작성

고양이 스프라이트 선택 후

이벤트 블록에서 녹색 깃발 클릭했을 때를 가져다 스크립트 창에 놓음

동작 블록에서 마우스 포인터 쪽 보기를 가져다 쥐 쪽 보기로 바꾸기

’10만큼 움직이기동작 블록

‘1초 기다리기제어 블록

무한 반복하기제어 블록으로 모든 블록을 감쌈.

 

스크립트 실행

[프로그램 실행 창]에서 전체화면단추 클릭

시작하기단추 클릭

멈추기단추 클릭

다시 전체화면단추 클릭

 

스프라이트 디버깅

고양이 : ‘회전 방식을 왼쪽 오른쪽으로 정하기동작블록과 ‘90도 방향 보기동작블록, 그리고 ‘x:-185 y:-119로 이동하기동작블록, ‘맨 앞쪽으로 순서 바꾸기형태블록을 무한 반복하기 블록 위쪽에

드래그 모드를 드래그 할 수 있는 상태로 정하기감지 블록을 무한 반복하기 블록 위쪽에

쥐에도 드래그 모드를 드래그 할 수 있는 상태로 정하기감지 블록을 넣음

 

저장하고 불러오려면?

상단 [메인 메뉴 바] 중앙에 있는 프로젝트 이름 창에 고양이와 쥐라고 입력하고 [파일 저장하기].

내 작업실에 저장됨

확장자 : sb3

공유단추 : 다른 사용자가 볼 수 있고 댓글과 평가를 받을 수 있다

프로젝트 페이지 보기단추 : 작성한 프로그램 사용 방법 또는 참고사항 등 작성

스크립트 보기단추 : 프로그래밍(코딩)

불러오기 : [파일 컴퓨터에서 가져오기(Lord from your computer)]

사막을 걷는 고양이에게

무대 : Desert

 

일정 시간 동안 계속 걷게 하려면?

‘100번 반복하기제어 블록

걷는 모양처럼 보이게 하려면?

다음 모양으로 바꾸기형태 블록

 

벽에 닿으면 방향을 바꿔 다시 걷게 하려면?

벽에 닿으면 튕기기동작 블록

보여줄 시간이 필요한데

애니메이션은 시간(타임라인)을 조절하는 것

‘0.3초 기다리기제어 블록

 

중간 실습 자료 :

사막걷는고양이.sb3
0.12MB

고양이와 티키타카?

스페인어로 탁구공이 왔다갔다 한다는 뜻

고양이를 클릭하자

이 스프라이트를 클릭했을 때이벤트 블록

야옹 재생하기소리 블록

이름이 뭐니? 라고 묻고 기다리기감지 블록

안녕! 말하기형태 블록

안녕!’ 변수 대신 가위와 나무 결합하기연산 블록

가위변수 대신 반가워, ’

나무변수 대신 대답감지 블록

 

고양이 모양의 중심 바꾸려면?

[모양] 탭에서 고양이를 다른 곳으로 드래그 하여 이동하면, 공간 중앙에 모양의 중심이 있음

고양이 얼굴과 앞발 뒷발 꼬리 등을 전부 선택하여 이동하려면 고양이가 다 포함되도록 드래그 하여 점선 사각형이 고양이를 다 포함시켜야 함

고양이 앞발이 모양의 중심에 놓이게 함

모양의 중심에 따른 회전

[모양] 탭에 보면 모양 1과 모양 2가 있는데, 모양 1의 중심을 앞발에 옮긴 상태

스크립트 :

모양을 모양 1로 바꾸기형태 블록

시계 방향으로 36도 회전하기동작 블록

‘0.5초 기다리기제어 블록

’10번 반복하기제어 블록으로 위 두 블록 감싸기

모양을 모양 2로 바꾸기형태 블록

시계 방향으로 36도 회전하기동작 블록

‘0.5초 기다리기제어 블록

’10번 반복하기제어 블록으로 위 두 블록 감싸기

 

함께 프로젝트를 모아놓으려면?

스튜디오를 만들고, 다른 스튜디오에 참여합니다

스튜디오는 Scratcher가 된 이후에 만들 수 있습니다. 스크래처는 공유을 10여개 정도 하면 됩니다.

상단 메뉴에서 자신의 아이디 단추를 클릭

나타난 펼침 메뉴에서 내 작업실

상단에 있는 새 스튜디오

Allow anyone to add projects에 체크를 하면 다른 사람이 내가 만든 스튜디오에 프로젝트를 추가할 수 있음

Untitled Studio에 적절한 이름 정해 주기

검색 창에 ‘ok2021san21’ 입력 후 엔터

스튜디오 탭에서 ok2021san21을 클릭

‘스튜디오 팔로우하기단추 클릭

팔로운 한 스튜디오는 아이디 펼침 메뉴 중 [내 정보] 에 나타남

Ok2021san21 스튜디오에서 ‘프로젝트 추가하기’ 항목에서 ‘프로젝트 훑어보기’단추 클릭하여 공유길 원하는 프로젝트 우측 상단에 있는 더하기 아이콘 클릭하고 ‘완료’ 클릭하여, 프로젝트를 이 스튜디오에 올려 놓을 수 있음

 

twinkle twinkle little star 노래방

배경 : Party

실습할 작은별 노래 받는 곳 : https://77story.tistory.com/87 페이지 제일 아래.

작은별 노래 업로드 하기 :

소리. ‘소리 고르기단추 소리 업로드하기

배경 스크립트 :

클릭했을 때 : 10번 반복하기(Twinkle_Twinkle_Little_Star_vocal 끝까지 재생하기)

 

음악 파일을 어디에서 구하나요?

구글 회원가입

구글 사이트에서 ‘Google 단추 클릭

YouTube 아이콘 클릭, 상단 좌측에 있는 로그인단추 클릭. 아이디와 비밀번호 입력.

상단에서 만들기아이콘 클릭 후 펼침메뉴에서 동영상 업로드클릭

‘내 프로필’ 작성 창이 나타나면, 이름이나 별칭을 입력하고 ‘채널 만들기’ 클릭.
‘동영상 업로드’ 단추 클릭. ‘계속’. 파일 선택은 하지 않고 ‘동영상 업로드’ 창 닫기.

좌측 메뉴에서 오디오 보관함클릭.

보관함 검색 또는 필터링클릭. 펼침 메뉴에서 장르클릭. ‘어린이선택 후 적용

다운로드를 원하는 곡에 마우스 위치시키면 오른쪽 끝에 다운로드보이는데 이를 클릭.

 

무대에서 춤출 스프라이트 작업 어떻게 하나요?

스프라이트 추가 : Ballerina

Ballerina 스크립트 :

클릭했을 때 : 무한 반복하기(다음 모양으로 바꾸기, 0.5초 기다리기)

클릭했을 때 : 전주가 10여초 나와요~^^10초 동안 말하기

 

클릭했을 때이벤트 블록을 두 번 따로 사용하나요?

하나의 클릭했을 때이벤트 블록을 사용하면 10초 동안 말한 후에 무한반복 제어 블록이 실행됨

참고로, 그냥 말하기는 계속 말풍선이 나타납니다.

 

하단에 노래 가사를 보이게 하는 작업 어떻게 하나요?

빈 스프라이트 추가 :

[스프라이트 고르기 그리기]

스프라이트 이름을 가사로 바꿉니다

배경 모양 1’가사1’로 이름 바꾸기 하고

‘Twinkle, twinkle, little star’라고 흰 색 글자로 입력합니다(텍스트 도구 선택 후 작업창 클릭. 글자 모두 선택 후 채우기 색에서 채도를 흰 색으로 선택)

글자 테두리 조절점을 조절하여 적당한 크기로

스프라이트 관리 창에서 x : 5, y: -150

노래 가사를 노래방 가사처럼 보이게 하는 작업 어떻게 하나요?

가사 스프라이트 위에 하단 배경색과 같은 직사각형 스프라이트를 추가합니다

스프라이트 이름을 막대로 하고 작사각형 도구를 선택하고 작업창에 드래그 하여 가사를 다 덮을 수 있는 크기로 만듭니다

 

배경색과 같은 색을 어떻게 선택하나요?

무대의 모양 탭에서 채우기 색 펼침창에서 스포이트 아이콘을 클릭 후 하단 색상을 클릭합니다

막대 스프라이트를 이동하여 가사를 다 가리게 합니다

 

다시 가사를 보이게 하려면 어떻게 하나요?

투명도 효과를 50으로 정하기형태 블록

또는 ‘x: 470 y: -136 으로 이동하기형태 블록

470? 무대는 +240까지 아닌가요?

직사각형의 모양의 중심이 가운데이므로 직사각형이 모두 무대 밖으로 그러니까 오른쪽으로 가게 하려면 무대를 벗어난 x측 위치로 해야 합니다.

 

막대 스크립트 :

 

두 번째 가사 작업은 어떻게 하나요?

모양 탭에서 가사1’을 복사하여 가사2’를 만들고 두 번째 가사로 바꾸어줍니다

가사1’을 어떻게 복사하나요?

가사1’ 썸네일에 마우스 위치시키고 우클릭. 나온 메뉴에서 복사

두 번째 가사 : How I wonder what you are

두 번째 가사로 어떻게 바꾸나요?

구글 검색(검색어 : twinkle twinkle little star) 후 두 번째 가사를 복사(Ctrl+C)

텍스트도구 선택 후 흰 글자 부분을 두 번 클릭 후 모두 선택(Ctrl+A) 후 붙여넣기(Ctrl+V)

 

가사 스프라이트 스크립트

Ballerina 스프라이트 스크립트

가사 스프라이트 스크립트 전체

막대 스프라이트 스크립트 전체

실습 자료 : 

Twinkle_Twinkle_Little_Star_vocal.mp3
5.26MB
작은별.txt
0.00MB
작은별2절까지.sb3
4.82MB

결과물 :

https://scratch.mit.edu/projects/481166819 첫 움직임

https://scratch.mit.edu/projects/314199679 작은별

 

 

 

Posted by 오미자컴
,