그림 그리기 개요

이 동영상은 칸아카데미-프로그래밍 분야의 자막과 번역을 만드는데, 작업자들이 이해하기 쉽도록, 칸아카데미의 툴로 코딩을 하며 설명을 한 것입니다. 자세한 사항은 아래 동영상들을 보시는 것을 추천합니다.
https://www.khanacademy.org/cs/programming

프로그래밍을 시작해봐요

프로그래밍을 하려면
도형과 수학을 알아야 해요

걱정하지 마세요

조금만 배우면
도형들이 화면에서 이리 저리 움직이게 할 수 있어요

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

우리 함께 해봐요

직사각형을 그려볼거에요

직사각형을 그리려면 rect 명령어를 써야해요

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

괄호를 닫고 세미콜론을 입력하세요

직사각형이 그려졌네요

간단하죠?
하나를 더 그려볼거에요

다른 숫자들을 입력해볼게요

처음 두 인자는 큰 수로
뒤의 두 인자는 작은 수로 입력했어요

다른 직사각형이 그려졌네요

첫번째 인자를 바꾸면, 움직이기 시작하네요

마지막 인자를 바꾸면 높이가 바뀝니다
재미있죠?

왜 그러는지 궁금하지 않아요?

컴퓨터는 지시한 일만 합니다
말 잘듣는 강아지처럼 말이죠

강아지에게 다음과 같이 명령할 수 있겠죠
앉아! 멈춰! 뒹굴어봐!

코드를 통해 컴퓨터 강아지를 앉게 하라면
어떻게 명령해야 할까요?

sit 이라는 명령어를 쓰고,
괄호를 열고 닫으면 되요

세미콜론[ ; ]을 마지막에 입력하면

명령이 완성되었습니다
이제 컴퓨터 강아지는 앉을거에요

칸 아카데미는 컴퓨터 강아지가 아니에요
앉거나 뒹구는 법을 몰라요

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

여기서 rect 는 명령어(함수명)이고

괄호를 열고 닫는 것은
명령(함수)를 수행하라는 의미입니다

명령(함수)의 마지막에는 세미콜론 ; 을 입력합니다.

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

rect 명령(함수)를 다시 한번 살펴볼게요

함수명이 여기에 있고, 괄호가 있네요

이 인자들은 뭘까요

컴퓨터에게 rect 만 입력해서는
컴퓨터는 자세한 사항을 알지 못해요

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

여러분들이 제 생각을 읽을 수 없으니
몇가지 질문을 하겠죠

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

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

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

하지만, 뭔가 모자라죠

좌우로는 어디에 그려야 할 지 알겠는데
위아래로는 어디에 그려야 하지?

저는 200이라는 숫자를 하나 더 말할거에요

종이의 위쪽 모서리를 0,
아래쪽 모서리를 400 이라고 정의했을때 말이에요

200 이니 중간이겠구나!

잘했어요
직사각형을 바로 이곳에 그려야 하죠

이곳이 왼쪽에서 100, 아랫쪽으로 200 인곳이니까요

하지만 아직도 뭔가가 부족하죠

직사각형이 얼마나 커야되요?

너비를 150 으로 하는건 어때? 라고 답하면

이 지점이 100 이고, 여기가 400 이니까

폭을 150 으로 하려면
여기까지 그리면 되겠네요

대략 너비가 150이라면
이렇게 그리면 되겠어

얼마나 높게 그려야되? 라고 물어보면

그리 높지 않아도 되. 50 으로 해줘
라고 말할거에요

50 이라면 이정도 높이겠네?

완벽해!

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

직사각형을 그려볼게요

직사각형 하나 그리는데
참 많은 일이 필요하죠?

하지만
단지, 숫자 4개를 말했을 뿐이에요

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

컴퓨터로 그렸을 때도
직사각형은 이렇게 그려져야 해요

실은, 컴퓨터도
이러한 방식으로 직사각형을 그려요

강의 초반에 언급했던
명령어 rect를 쓰고

괄호를 열고 숫자 4개를 써요

100, 200, 150, 50

괄호를 닫고 세미콜론[ ; ]을 입력해요

이게 바로 우리가 원했던 사각형이네요

그런데 솔직히 말해서,

컴퓨터로 그린 직사각형이
우리가 원했던 것과는 약간 다르네요

숫자들이 약간 다른것 같네요

우리가 손으로 그린 직사각형과
컴퓨터로 그린 것을 일치시켜보고 싶어요

오른쪽으로 조금 옮기고

위쪽으로 조금 올리고

폭을 조금 작게 하고

높이를 조금 낮게 했어요

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

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

직사각형 하나를 더 그려보면서, 그 과정을 살펴볼까요?

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

위쪽 모퉁이에 위치한 직사각형을 그려봐요

어디에 위치해야 하는지 생각해봐요

왼쪽에서 0, 위쪽에서 0 인 곳에 위치할 것 같아요

매우 작은 직사각형일수도 있죠
너비는 50, 높이는 10인 매우 작은 직사각형이에요

이제 직사각형을 그려봐요

rect 를 입력하고
이 인자들을 반점 , 으로 구분해요

이제, 화면에 메시지가 뜨네요

에러 메시지네요
[ 닫는 괄호 ) 가 없습니다 ]

아, 진짜 깜박했네요
끝 부분에 괄호를 닫아주면, 완벽하죠?

이번엔 다른 에러 메시지에요
[ 세미콜론 ; 이 없습니다 ]

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

이거 하나 기억해요

문장의 끝에 마침표를 쓰듯이,
코드의 끝은 세미콜론 ; 을 써야 합니다

이 사실을 깜박했었네요

끝부분에 세미콜론을 입력해요
이제 모든것이 완벽하네요

우리가 원하는대로
작은 직사각형이 그려졌는지 확인해볼까요?

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

이제 rect 함수가 어떻게 동작하는지 완벽히 이해했어요

지금까지
인자들이 의미하는 바를 배웠고

함수명과 괄호를 입력해야 한다는 것을 배웠고

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

지금까지 많은 것을 배웠습니다

직접 실습해보세요
그러면 이해하실 수 있을거에요

다음 시간에는, 다양한 도형들을 그려볼거에요

그리고 굉장한 것들을 해볼거에요

색을 실해보고, 화면에서 움직이도록 해볼거에요