Sneak Peek (Video Version)

This is just a screen grab of our interactive coding talk-through, prepared to make captioning and translation easier. It is better to watch our talk-throughs here:
https://www.khanacademy.org/cs/programming/

자, 이제 프로그램을 만들어 볼까요?

지금은 아무것도 없지만 이 강의가 끝날 때엔 정말 대단한 것을 볼 수 있을 거예요. 마치 미니 드로잉 프로그램처럼 말이죠.

칸 아카데미의 처음 몇 개의 강의를 들어보고

어떤 일들을 할 수 있을 지 그 가능성을 한 번 타진해 보세요.

지금 당장 모든 걸 이해할 필요는 없답니다.

지금은 단지 앞으로 어떤걸 배우게 되는지, 또 어떤 일들을 할 수 있는지 알아보는 시간을 가지시기 바랍니다.

자, 이제 시작해 볼까요? 그런데 아무 것도 없군요.
심심하게 말이죠. 그럼 뭔가를 그려 보도록 하죠.

이곳에 타원을 그릴꺼예요. 동그라미 비슷한 것... 아시죠?

그리고 이제 여러분은 제가 어떻게 타원을
그리는지 아시게 될거구요.

짜잔! 타원이 생겼네요. 마술같죠?

이렇게 쉽게 타원을 그릴 수 있었던건 칸 아카데미 프로그래밍 강의 환경에 이미 구현된 특별한 기능 때문이랍니다.

고맙게도 타원도 그 중 하나죠.

이 숫자들에 대해서는 너무 걱정하지 마세요.

이 숫자들에 대해서는 "그리기 시작" 강의에서 배울 수 있어요.

하지만 잠깐 설명해 드리죠.

이 숫자들을 변경하면 볼 수 있는 것처럼 처음 숫자는 수평(가로) 위치를 말해요.

두 번째 숫자는 위 아래(수직) 위치를 결정하구요.

세번째 숫자는 타원의 가로 크기, 마지막 숫자는 타원의 세로 크기를 나타냅니다.

지금 이해가 되지 않아도 걱정하지 마세요.

하지만 정말 다시 듣고 싶다면 지금 당장
이 동영상을 앞으로 돌려 다시 확인해 보실 수 있습니다.

이런 자세한 내용들은 강의를 들으면서 차차 배울 수 있어요.

지금 알아둘 것은 이 숫자들이 타원의 크기와 위치를 결정한다는 것입니다.

자, 이렇게 타원을 그려보았습니다.
하지만 단지 원하나로는 그다지 인상적이지 않을 수도 있어요.

그래서 조금은 더 복잡한 걸 해보려구요.
자 아까 만들었던 타원을 여기에 이렇게 넣을께요.

됐네요.
하지만 변한게 없고 여전히 그닥 인상적이지 않을 수도 있어요.

그래서 지금부터 좀 더 인상적인 걸 보여 드릴께요.
예를 들어 이 프로그램을 움직이도록 해볼까요?

이제 보시는 것 처럼 수 많은 타원이 그려지기 시작하고 이 원들이 제 마우스를 따라 움직이는 것을 볼 수 있으실 거예요.

이 동영상을 멈추고 여러분의 마우스를 한 번 움직여 보세요.

신기하죠? 어떻게 이렇게 할 수 있을까요?

이 수 많은 타원들은 과연 어디서 왔을까요?

이와 관련된 모든 것은 "애니메이션 시작" 강의에서 배울 수 있답니다. 하지만 궁금해 하시는 여러분을 위해 말씀드리자면 이건 컴퓨터가 프로그램에게 계속 "타원을 그려", "타원을 그려"라고 말을 하기 때문에 가능한 거예요.

이렇게 많이 그리라고 명령을 내리면
프로그램이 지치지 않을까 하는 엉뚱한 상상을 할 수도 있지만
프로그램은 지치지 않고 마술과 같이 "그리기"를 계속할 수 있답니다.

그래서 끝도 없이 타원이 그려지는 것이랍니다.

그리고 마우스를 움직일 때마다 마술과 같은 "그리기" 명령이 내려져 타원이 그려지는 것이죠.

단지 명령을 한 번 썼을 뿐인데 말이죠.

그럼 프로그램은 타원을 어디다 그려야 하는지는 대체 어떻게 아는 것일까요?

그러니까 대체 어떻게 이렇게 마우스를 따라올 수 있는 걸까요?

이에 대해서도 "마우스 인터렉션" 강의에서 배우게 될 거예요.

간단히 말하자면 두 개의 마우스 관련 언어를 사용해서
컴퓨터가 매번 프로그램에게 지금 마우스가 어디에 있다고 말해주는 거예요.

"MouseX" 와 "MouseY".
이들이 마우스 관련 특정 언어예요.

다시 한 번 말하지만 지금 꼭 알아야 할 필요는 없어요.
하지만 "MouseX"는 마우스의 수평(가로) 위치를 나타내고요.

"MouseY"는 수직 위치, 즉 위 아래 위치를 나타냅니다.