WEBVTT

00:00:00.989 --> 00:00:03.303
무언가를 움직이는 것처럼 
보이는 방법은 여러가지가 있어요

00:00:03.303 --> 00:00:05.241
하지만 기본적인 원리는 항상 같습니다

00:00:05.241 --> 00:00:07.482
만일 여러분이 처음부터 끝까지
한 묶음의 그림들을 가지고 있는데

00:00:07.482 --> 00:00:09.726
그림들이 조금씩 다르다고 했을 때

00:00:09.726 --> 00:00:11.462
그림을 빠르게 넘긴다면

00:00:11.462 --> 00:00:13.267
마치 움직이는 것 처럼 보일것이에요

00:00:13.267 --> 00:00:16.167
예전에는 모두 일일히 손으로 그려야 했어요

00:00:16.167 --> 00:00:19.696
그러다보니 3초정도의 애니메이션을 
만들기에도 긴 시간이 필요했지요

00:00:19.696 --> 00:00:22.797
하지만 운이 좋게도 
우리는 그때보다 미래에 살고있네요

00:00:22.797 --> 00:00:25.960
간단한 애니메이션은 코드를 이용하여 
매우 쉽게 만들 수 있거든요

00:00:25.960 --> 00:00:28.318
이제부터 어떻게 해야하는지 보여드리죠

00:00:28.318 --> 00:00:31.878
오른쪽을 보면 작은 자동차와 
예쁜 노랑색 배경이 보일거에요

00:00:31.878 --> 00:00:34.965
이 자동차는 제가 그렸어요

00:00:34.965 --> 00:00:38.575
아무튼 정말 멋진 배경색이 
설정되어 있는 것을 볼 수 있는데요

00:00:38.575 --> 00:00:42.771
자동차에는 외곽선이 그려져 있지 않아요
아마도 <i>noStorke()</i>(noStroke함수) 때문이겠죠

00:00:42.771 --> 00:00:46.151
먼저 자동차의 위치를 저장할 
새로운 변수(variable) <b>x</b>를 만들거에요

00:00:46.151 --> 00:00:48.916
그리고 맨 처음의 값은 10으로 줄게요
그리고 이 값을 바꾸면

00:00:48.916 --> 00:00:51.895
자동차가 앞 뒤로 움직입니다

00:00:51.895 --> 00:00:53.811
일단은 10으로 세팅할게요

00:00:53.811 --> 00:00:56.314
이곳을 보면 자동차의 색을 선택할 수 있어요

00:00:56.314 --> 00:00:58.823
그리고 자동차의 몸체가 
두개의 사각형으로 그려진 것을 알 수 있죠

00:00:58.823 --> 00:01:02.333
첫번째 사각형은 아래쪽을 그리고
두번째 사각형이 위쪽 부분을 그리고 있어요

00:01:02.333 --> 00:01:05.027
여기를 보면 똑같은 형태인 바퀴 2개가 있죠

00:01:05.027 --> 00:01:07.189
색을 선택하고 두개의 타원형(Ellipse)을 그립니다

00:01:07.189 --> 00:01:08.708
하나는 <i>x+25</i>에 위치에

00:01:08.708 --> 00:01:10.191
나머지는 <i>x+75</i>에 말이죠

00:01:10.191 --> 00:01:12.828
마지막으로 새로운 요소를 사용해야 해요

00:01:12.828 --> 00:01:15.169
이것은 function definition(함수 정의)라고 합니다.

00:01:15.169 --> 00:01:16.691
나중에 자세히 배울테니

00:01:16.691 --> 00:01:18.835
지금은 기억만 해주세요

00:01:18.835 --> 00:01:23.932
이 부분은 draw라는 단어와 
괄호들로 이루어져 있는데요

00:01:23.932 --> 00:01:25.190
여기서 괄호를 열고있고

00:01:25.190 --> 00:01:26.750
여기서 괄호를 닫았습니다

00:01:26.750 --> 00:01:30.530
이것을 드로우 루프(draw loop)나
애니메이션 루프(animation loop) 라고 부를게요

00:01:30.530 --> 00:01:35.295
이 괄호들 사이에 있는 내용들은
매우 빠르게 반복하여 수행되는데

00:01:35.295 --> 00:01:36.702
그것이 루프라고 부르는 이유입니다

00:01:36.702 --> 00:01:41.792
괄호 밖에있는 것들은 
프로그램이 시작할 때 한번만 실행됩니다

00:01:41.792 --> 00:01:45.529
따라서 애니메이션의 첫 단계는
괄호 안으로 코드들을 모두 옮기는 것이에요

00:01:45.529 --> 00:01:47.833
그림이 계속해서 그려지도록 하기 위해서 말이죠

00:01:47.833 --> 00:01:51.661
그림을 그리는 코드를 모두 가져와서

00:01:51.661 --> 00:01:53.681
이 루프안에 넣어주세요

00:01:53.681 --> 00:01:57.011
코드들이 괄호 안으로 옮긴 것을 기억하도록

00:01:57.011 --> 00:02:02.471
이것을 선택하고 탭키를 눌러 
들여쓰기(indent)를 해줍시다

00:02:02.471 --> 00:02:05.746
그러면 이 코드들이 괄호 안에 있다는 것을 
쉽게 알 수 있습니다

00:02:05.746 --> 00:02:10.438
그러고나서 보면 모든 것이 같고,
아무것도 변하지 않았다고 할 수있어요

00:02:10.438 --> 00:02:12.438
왜냐하면 처음으로 
드로우 루프를 실행하면 컴퓨터는

00:02:12.438 --> 00:02:14.411
'새로운 변수 x를 만들고 10으로 설정 후,

00:02:14.411 --> 00:02:17.214
두개의 사각형과 두개의 타원형을 그리자' 라며 
작업할 거에요

00:02:17.214 --> 00:02:20.824
일을 마치면 다시 맨 위로 돌아가서
'좋아 새로운 변수 x를 만들고 10으로 설정한 다음

00:02:20.824 --> 00:02:24.289
두개의 사각형과 두개의 타원형을 그리자' 
라며 작업하고

00:02:24.289 --> 00:02:28.383
다시 '좋아 새로운 변수 x를 만들고 10으로 설정한 다음 두개의...'라며 계속 똑같이 작업할거에요

00:02:28.383 --> 00:02:31.151
아무것도 바뀌지 않았어요
이것은 애니메이션으로 보이지도 않죠

00:02:31.151 --> 00:02:34.660
단순히 똑같은 사각형과 타원형을 
계속해서 반복하여 그렸습니다

00:02:34.660 --> 00:02:40.395
움직이는 것처럼 보이고 싶다면 그림이 
조금씩 바뀌어야 한다고 했던 것을 기억하죠?

00:02:40.395 --> 00:02:42.761
그러므로 이 자동차를 앞으로 움직이게 하고싶다면

00:02:42.761 --> 00:02:45.361
이 변수(variable) <b>x</b> 의 값을 바꾸어 주어야 해요

00:02:45.361 --> 00:02:48.052
그러니까 이것을 11로 바꾸어보죠

00:02:48.052 --> 00:02:51.117
그렇게 하면 맨 처음 한번만 11이 되네요

00:02:51.117 --> 00:02:57.564
컴퓨터가 실행을 할 때마다 계속해서 <i>x</i>의 값을 
변경하여 가져오려면 어떻게 해야할까요?

00:02:57.564 --> 00:02:59.877
좋아요 여기서 마법같은 트릭을 보여드리죠

00:02:59.877 --> 00:03:02.789
var x가 새로운 변수를 만드는 것을 기억하시죠?

00:03:02.789 --> 00:03:08.061
드로우 루프(draw loop) 안에 있을때 <i>x</i>라 불리는 
새로운 변수를 매 루프마다 만들고 있어요

00:03:08.061 --> 00:03:10.467
이 변수를 루프의 바깥쪽에서 만들 수도 있는데요

00:03:10.467 --> 00:03:13.467
그 변수는 오직 한번만 만들어지게 되겠지요

00:03:13.467 --> 00:03:19.770
그러면 컴퓨터가 그 코드를 실행하고 
변수 <i>x</i>를 볼 때마다 마지막으로 사용했던 변수와

00:03:19.770 --> 00:03:22.770
똑같은 변수를 다시 사용할 수 있습니다

00:03:22.770 --> 00:03:31.295
이처럼 이 변수를 드로우 루프의 바깥쪽에 만들어서
변수를 오직 한번만 생성하도록 만들고

00:03:31.295 --> 00:03:35.612
이 코드가 실행될때 그 안의 변수 <i>x</i>는 계속해서 
밖에서 만든 같은 변수를 다시 사용하게 될겁니다

00:03:35.612 --> 00:03:38.269
마지막으로 사용한 변수는 
우리가 지정한대로 11일거에요

00:03:38.269 --> 00:03:41.757
이대로 놔두면 항상 11로 남아있을테니 
지금부터 마법을 부려볼게요

00:03:41.757 --> 00:03:52.984
드로우 루프의 어디서든 <i>x</i>의 값을 조금만 바꿔보죠
예를 들면 다음과 같이 엑스값에 1을 더해봅시다

00:03:52.984 --> 00:03:54.931
좋아요 작동하네요!

00:03:54.931 --> 00:03:59.823
하지만 매우 이상해요 이런 결과를 원하지 않았어요

00:03:59.823 --> 00:04:02.823
드로우 루프 안에서 
배경을 그리는 부분이 빠졌네요

00:04:02.823 --> 00:04:04.147
자동차를 계속해서 그리고 있지만 
예전에 그렸던 차를 그대로 둔 상태로

00:04:04.147 --> 00:04:07.147
새로운 차를 예전에 그렸던 차 위에 
그리고 있는 것을 볼 수 있는 것이죠

00:04:07.147 --> 00:04:12.190
드로우 루프의 맨 위쪽에 
다음과 같은 코드를 넣어주세요

00:04:12.190 --> 00:04:15.984
그리고 <i>Restart</i>버튼을 누른 다음 
다시 한번 자동차를 봅시다

00:04:15.984 --> 00:04:18.269
좋아요! 완벽해요!

00:04:18.269 --> 00:04:22.386
만일 조금 더 빠르게 만들고 싶다면
<i>x</i>의 값을 많이 바꾸면 돼요

00:04:22.386 --> 00:04:26.532
값을 10으로 변경해보면 화면에서 사라지네요
반대로 숫자를 빼보면 어떻게 될까요

00:04:26.532 --> 00:04:28.862
예를 들어 "x-10"을 하면

00:04:28.862 --> 00:04:34.552
자동차가 다시 나타났어요!
만일 다시 숫자를 더하면... 다시 가버리네요

00:04:34.552 --> 00:04:36.550
지금까지 배운 것 중 
중요한 사항들을 기억하세요

00:04:36.550 --> 00:04:43.325
이것들은 드로우 루프(draw loop)라고 불리며 
코드를 넣으면 계속해서 그림을 그리게 되요

00:04:43.325 --> 00:04:46.290
그리고 변수는 드로우 루프의 밖에 만들어야 합니다

00:04:46.290 --> 00:04:52.015
루프 안에서 매번 마지막에 사용한 변수를 
다시 사용할 수 있도록 하는 것입니다

00:04:52.015 --> 00:04:55.854
드로우 루프 안에서 변수의 값을 
조금씩 바꾸어보세요

00:04:55.854 --> 00:05:02.315
기존에 가지고 있던 값에 작은 수를 
더하거나 빼는 식으로 설정합니다

00:05:02.315 --> 00:05:07.333
그림 그리는 코드에 변수를 사용한다면
매번 조금씩 달라보이게 되므로

00:05:07.333 --> 00:05:09.793
움직이는 것처럼 보일거에요!