WEBVTT

00:00:00.970 --> 00:00:02.539
프로그래밍을 시작해봐요

00:00:02.539 --> 00:00:05.254
프로그래밍을 하려면
도형과 수학을 알아야 해요

00:00:05.254 --> 00:00:06.300
걱정하지 마세요

00:00:06.300 --> 00:00:08.246
조금만 배우면
도형들이 화면에서 이리 저리 움직이게 할 수 있어요

00:00:08.246 --> 00:00:10.974
색깔도 바꾸고,
그 외에 재밌는 것들을 프로그래밍 해 볼거에요

00:00:10.974 --> 00:00:12.342
우리 함께 해봐요

00:00:12.342 --> 00:00:14.348
직사각형을 그려볼거에요

00:00:14.348 --> 00:00:16.532
직사각형을 그리려면 rect 명령어를 써야해요

00:00:16.532 --> 00:00:20.846
괄호를 열고, 숫자 4개를 입력하세요
이 숫자 4개가 무엇을 의미하는지는 나중에 알려줄게요


00:00:20.846 --> 00:00:23.830
괄호를 닫고 세미콜론을 입력하세요

00:00:23.830 --> 00:00:25.815
직사각형이 그려졌네요

00:00:25.815 --> 00:00:27.756
간단하죠?
하나를 더 그려볼거에요

00:00:27.756 --> 00:00:29.751
다른 숫자들을 입력해볼게요

00:00:29.751 --> 00:00:33.981
처음 두 인자는 큰 수로
뒤의 두 인자는 작은 수로 입력했어요

00:00:33.981 --> 00:00:35.701
다른 직사각형이 그려졌네요

00:00:35.701 --> 00:00:41.003
첫번째 인자를 바꾸면, 움직이기 시작하네요

00:00:41.003 --> 00:00:47.698
마지막 인자를 바꾸면 높이가 바뀝니다
재미있죠?

00:00:47.698 --> 00:00:50.765
왜 그러는지 궁금하지 않아요?

00:00:50.765 --> 00:00:55.506
컴퓨터는 지시한 일만 합니다
말 잘듣는 강아지처럼 말이죠

00:00:55.506 --> 00:01:01.873
강아지에게 다음과 같이 명령할 수 있겠죠
앉아! 멈춰! 뒹굴어봐!

00:01:01.873 --> 00:01:05.512
코드를 통해 컴퓨터 강아지를 앉게 하라면
어떻게 명령해야 할까요?

00:01:05.512 --> 00:01:15.511
sit 이라는 명령어를 쓰고,
괄호를 열고 닫으면 되요

00:01:15.511 --> 00:01:17.340
세미콜론[ ; ]을 마지막에 입력하면

00:01:17.340 --> 00:01:22.039
명령이 완성되었습니다
이제 컴퓨터 강아지는 앉을거에요

00:01:22.039 --> 00:01:27.644
칸 아카데미는 컴퓨터 강아지가 아니에요
앉거나 뒹구는 법을 몰라요


00:01:27.644 --> 00:01:32.031
하지만 직사각형을 그리는 방법은 알아요
rect 라고 입력하면 되요. 간단하죠

00:01:32.031 --> 00:01:37.268
여기서 rect 는 명령어(함수명)이고

00:01:37.268 --> 00:01:40.817
괄호를 열고 닫는 것은
명령(함수)를 수행하라는 의미입니다

00:01:40.817 --> 00:01:43.116
명령(함수)의 마지막에는 세미콜론 ; 을 입력합니다.

00:01:43.116 --> 00:01:47.436
이와같은 방식을 통해, 컴퓨터는 
rect 라는 명령(함수)을 인식하고 수행하게 됩니다

00:01:47.436 --> 00:01:49.967
rect 명령(함수)를 다시 한번 살펴볼게요

00:01:49.967 --> 00:01:53.672
함수명이 여기에 있고, 괄호가 있네요

00:01:53.672 --> 00:01:56.870
이 인자들은 뭘까요

00:01:56.870 --> 00:02:01.272
컴퓨터에게 rect 만 입력해서는
컴퓨터는 자세한 사항을 알지 못해요

00:02:01.272 --> 00:02:09.669
여러분들에게 제가 종이 한장을 드릴게요
제가 생각한 그대로 직사각형을 그려주시겠어요?

00:02:09.669 --> 00:02:14.866
여러분들이 제 생각을 읽을 수 없으니
몇가지 질문을 하겠죠

00:02:14.866 --> 00:02:21.062
첫째로, 어느 위치에 그려야 하나요?
라고 묻는다면, 저는 이렇게 답할거에요

00:02:21.062 --> 00:02:29.815
종이의 왼쪽 모서리를 0, 오른쪽 모서리를 400 으로
정의하는건 어때요? 라고 동의를 구할거에요

00:02:29.815 --> 00:02:37.034
그리고, 제가 100 이라는 숫자를 말하면
대략적으로, 어디에 그려야 할지 알 수 있겠죠?

00:02:37.034 --> 00:02:39.853
하지만, 뭔가 모자라죠


00:02:39.853 --> 00:02:43.884
좌우로는 어디에 그려야 할 지 알겠는데
위아래로는 어디에 그려야 하지?

00:02:43.884 --> 00:02:46.896
저는 200이라는 숫자를 하나 더 말할거에요

00:02:46.896 --> 00:02:52.784
종이의 위쪽 모서리를 0,
아래쪽 모서리를 400 이라고 정의했을때 말이에요

00:02:52.784 --> 00:02:56.842
200 이니 중간이겠구나!

00:02:56.842 --> 00:03:02.390
잘했어요
직사각형을 바로 이곳에 그려야 하죠

00:03:02.390 --> 00:03:06.350
이곳이 왼쪽에서 100, 아랫쪽으로 200 인곳이니까요

00:03:06.350 --> 00:03:09.886
하지만 아직도 뭔가가 부족하죠

00:03:09.886 --> 00:03:12.368
직사각형이 얼마나 커야되요?

00:03:12.368 --> 00:03:16.848
너비를 150 으로 하는건 어때? 라고 답하면

00:03:16.848 --> 00:03:21.132
이 지점이 100 이고, 여기가 400 이니까

00:03:21.132 --> 00:03:25.796
폭을 150 으로 하려면
여기까지 그리면 되겠네요

00:03:25.796 --> 00:03:29.461
대략 너비가 150이라면
이렇게 그리면 되겠어

00:03:29.461 --> 00:03:31.218
얼마나 높게 그려야되? 라고 물어보면

00:03:31.218 --> 00:03:33.468
그리 높지 않아도 되. 50 으로 해줘
라고 말할거에요

00:03:33.468 --> 00:03:37.346
50 이라면 이정도 높이겠네?

00:03:37.346 --> 00:03:39.234
완벽해!

00:03:39.234 --> 00:03:42.643
선생님이 부탁한대로
이 위치에 이런 모습으로 직사각형을 그릴 줄 알아요!

00:03:42.643 --> 00:03:44.792
직사각형을 그려볼게요

00:03:44.792 --> 00:03:47.492
직사각형 하나 그리는데
참 많은 일이 필요하죠?

00:03:47.492 --> 00:03:50.358
하지만
단지, 숫자 4개를 말했을 뿐이에요

00:03:50.358 --> 00:03:58.164
100 만큼 왼쪽에서, 200 만큼 아래인 위치에서
150 의 너비로, 50 의 높이로 그려달라 했어요


00:03:58.164 --> 00:04:01.253
컴퓨터로 그렸을 때도
직사각형은 이렇게 그려져야 해요

00:04:01.253 --> 00:04:03.923
실은, 컴퓨터도 
이러한 방식으로 직사각형을 그려요

00:04:03.923 --> 00:04:06.613
강의 초반에 언급했던
명령어 rect를 쓰고

00:04:06.613 --> 00:04:09.993
괄호를 열고 숫자 4개를 써요

00:04:09.993 --> 00:04:14.253
100, 200, 150, 50

00:04:14.253 --> 00:04:16.353
괄호를 닫고 세미콜론[ ; ]을 입력해요

00:04:16.353 --> 00:04:19.473
이게 바로 우리가 원했던 사각형이네요

00:04:19.473 --> 00:04:22.423
그런데 솔직히 말해서,

00:04:22.423 --> 00:04:25.715
컴퓨터로 그린 직사각형이
우리가 원했던 것과는 약간 다르네요

00:04:25.715 --> 00:04:27.266
숫자들이 약간 다른것 같네요

00:04:27.266 --> 00:04:31.460
우리가 손으로 그린 직사각형과
컴퓨터로 그린 것을 일치시켜보고 싶어요

00:04:31.460 --> 00:04:34.546
오른쪽으로 조금 옮기고

00:04:34.546 --> 00:04:37.163
위쪽으로 조금 올리고

00:04:37.163 --> 00:04:39.538
폭을 조금 작게 하고

00:04:39.538 --> 00:04:42.658
높이를 조금 낮게 했어요

00:04:42.658 --> 00:04:46.164
이제, 우리가 손으로 그린것과
정확히 일치하는 직사각형을 그렸어요

00:04:46.164 --> 00:04:52.170
숫자들이 의미하는 바를 이해했기 때문에
숫자를 바꾸어서, 원하는 모양으로 그릴 수 있었어요


00:04:52.170 --> 00:04:54.857
직사각형 하나를 더 그려보면서, 그 과정을 살펴볼까요?

00:04:54.857 --> 00:04:59.239
이러한 방식의 장점은
어느곳이든 원하는 직사각형을 그릴 수 있다는 점이에요

00:04:59.239 --> 00:05:03.243
위쪽 모퉁이에 위치한 직사각형을 그려봐요

00:05:03.243 --> 00:05:05.938
어디에 위치해야 하는지 생각해봐요

00:05:05.938 --> 00:05:09.599
왼쪽에서 0, 위쪽에서 0 인 곳에 위치할 것 같아요

00:05:09.599 --> 00:05:16.480
매우 작은 직사각형일수도 있죠
너비는 50, 높이는 10인 매우 작은 직사각형이에요

00:05:16.480 --> 00:05:18.427
이제 직사각형을 그려봐요

00:05:18.427 --> 00:05:22.834
rect 를 입력하고
이 인자들을 반점 , 으로 구분해요

00:05:22.834 --> 00:05:25.892
이제, 화면에 메시지가 뜨네요

00:05:25.892 --> 00:05:31.377
에러 메시지네요
[ 닫는 괄호 ) 가 없습니다 ]

00:05:31.377 --> 00:05:34.442
아, 진짜 깜박했네요
끝 부분에 괄호를 닫아주면, 완벽하죠?

00:05:34.442 --> 00:05:38.538
이번엔 다른 에러 메시지에요
[ 세미콜론 ; 이 없습니다 ]

00:05:38.538 --> 00:05:42.596
[Show me where] 를 클릭하면
컴퓨터는 우리가 방금 입력했던 줄을 지적할거에요

00:05:42.596 --> 00:05:43.572
이거 하나 기억해요


00:05:43.572 --> 00:05:47.552
문장의 끝에 마침표를 쓰듯이,
코드의 끝은 세미콜론 ; 을 써야 합니다

00:05:47.552 --> 00:05:48.596
이 사실을 깜박했었네요

00:05:48.596 --> 00:05:51.854
끝부분에 세미콜론을 입력해요
이제 모든것이 완벽하네요


00:05:51.854 --> 00:05:55.845
우리가 원하는대로
작은 직사각형이 그려졌는지 확인해볼까요?

00:05:55.845 --> 00:06:03.363
이전에 그렸던 직사각형처럼, 숫자를 바꾸면
커지기도 하고, 움직이기도 하고, 원하는 곳에 위치시킬 수 있어요

00:06:03.363 --> 00:06:06.185
이제 rect 함수가 어떻게 동작하는지 완벽히 이해했어요

00:06:06.185 --> 00:06:08.490
지금까지
인자들이 의미하는 바를 배웠고

00:06:08.490 --> 00:06:12.096
함수명과 괄호를 입력해야 한다는 것을 배웠고

00:06:12.096 --> 00:06:15.392
반점으로 인자들을 구분해야 한다는 것과
끝으로 세미콜론을 입력해야 한다는 것을 배웠습니다

00:06:15.392 --> 00:06:16.511
지금까지 많은 것을 배웠습니다

00:06:16.511 --> 00:06:19.057
직접 실습해보세요
그러면 이해하실 수 있을거에요

00:06:19.057 --> 00:06:21.423
다음 시간에는, 다양한 도형들을 그려볼거에요

00:06:21.423 --> 00:06:23.240
그리고 굉장한 것들을 해볼거에요

00:06:23.240 --> 00:06:26.120
색을 실해보고, 화면에서 움직이도록 해볼거에요