변수 표현 (Video Version)

Winston으로 다시 돌아와 봅시다

여러분은 지금 Winston의 위치를 나타내는

변수 x, y를 가지고 있어요

자, 우리는 Winston을 위로 올렸다가 내려오게 할 수 있고

작은 Winston 파티를 가져볼까요?
와!

멋지죠?

진행하기에 앞서 이 코드를
한번 살펴보도록 하죠

여기 위쪽에 Winston 얼굴의 가운데 위치인

변수 x, y를 가지고 있고

여기에서 그의 얼굴을 위한 타원을
그릴 때 이를 사용하고 있죠

그리고 그의 얼굴의 중심으로 부터
눈과 입의 위치를 정합니다.

눈의 위치를 이동하려면
변수 x, y에 값을 더하거나 빼면 됩니다

눈은 50 픽셀(pixels), 100 픽셀 떨어지게 되어있죠

예를 들면 입은

중심에서 오른쪽으로 50픽셀

그리고 아래쪽으로 40픽셀 이동해 있습니다

그러면 나머지는 어떠한 값들이 저장되는지 볼게요

이런식으로 각 줄 마다 살펴보면

데이터를 바꾸지 못하도록 한
숫자를 부르고 있는 것을 볼 수있어요

이 숫자들은 변수가 아닌 숫자 그대로이거나

어떤 변수값에 따라 값이 정해지는 숫자입니다

자 한번 우리가 만든 타원 얼굴을 봅시다!

여기서는 너비가 300, 높이가 300으로 지정되어있네요

faceSize같이 이를 대신할 변수를 만들 수 있습니다

그러면 faceSize = 300라고 쓰고
여기에서 faceSize를 전달할 수 있습니다

그러면 지금부터는 300이라는 값이 전달될 것입니다

좋아요, 계속 해보죠

여기에서는 모두 x, y, eyeSize를 사용하고 있습니다

하지만 여기 입 부분에는
너비와 높이를 각각

150, 150으로 설정되어있습니다

이제 mouthSize= 150을 써서
mouthSize 변수를 만들수 있고

여기에서 mouthSize 를 전달할 수 있습니다

그러면 변수의 값은 150이기 때문에

150이라는 값이 전달되게 됩니다

좋아요 우리는 이제 faceSize라는
간단하게 바꿀 수 있고

mouthSize와 eyeSize 값도 이처럼
간단하게 바꿀 수 있다는 것을

알아보았습니다.

좋아요 멋지네요

하지만 몇몇은 제가 도저히 좋아할 수 없네요

그러니 그것을 faceSize를 바꿀때 해보도록 하죠

얼굴 크기와 관련된 다른 것들도 바꾸고자 해요

그럼 만일 faceSize 가 이처럼 매우 작게 만들었다면

눈과 입 크기도 작게 만들고 싶을 것입니다

만약 얼굴 크기를 원래 크기의 절반으로 만든다면

눈과 입의 크기 역시 절반으로 해야할 것입니다

그렇지 않으면 눈과 입이 얼굴에 비해
너무 커지기 때문에 우스꽝스러운 얼굴이 되겠죠?

그 값들은 아무런 연관이 없습니다

그래서 우리는 어떠한 방법을 사용해서

mouthSize와 eyeSize 변수가

faceSize 변수와 연동되도록 하고 싶습니다

그러면 맨 처음 상태로 우선 되돌려볼게요

우리가 하고 자 하는 방법은

이 변수들을 faceSize 변수의 값을
기준으로 하도록 만드는 거에요

즉 mouthSize = faceSize/2라고 입력할 수 있습니다

우리는 얼굴의 부분을 위해서

얼굴크기의 절반을 가져올 거에요

만약 여러분이 분수를 잘 모른다면

분수에 대해서 공부할 수 있는

수많은 동영상들이
Khan Academy에 있으니 참고하세요

그럼 eyeSize를 faceSize/4로 지정합시다

완벽하지는 않지만 괜찮네요

아 7이 더 좋을 것 같네요

지금처럼 처음에 분수를 잘못 정했어도

언제든지 나중에 수정할 수 있습니다

그 값들이 맞다는 생각이 들때까지
그 값을 조정하세요

좋아요, 이제 여러분이 얼굴의 크기를 다시 바꾸어보면

눈과 입의 크기도 다시 설정되고 있는 것이 보이나요?

멋지네요!

하지만 문제가 있어요

눈과 입이 얼굴이 매우 작은 경우에는

여전히 얼굴과 어울리지 않게 만들어집니다

정확히는 사이즈는 맞지만, 문제는 얼굴과의 거리입니다

도대체 무슨일이 일어난 것일까요?

우리가 타원이 그려질 위치를 정할때

눈은 x를 –50, y를 –50에 위치하도록
입은 x를 +100, y를 –60로 정했어요.

그러므로 심지어 얼굴 크기가 단지 50 픽셀(pixels)이 되더라도

여전히 눈은 얼굴과 어울리지 않게
얼굴의 중심으로부터

–50 픽셀 떨어진 위치에 그려지게 됩니다

그래서, 우리는 50과 100과 코드의 이런 숫자들을 위해서

이들 또한 faceSize의 분수형태로 만들어야 합니다

그러면 앞으로 faceSize값을 바꾸게 되더라도

눈과 입의 떨어진 정도도

또한 같이 바뀌게 될 것입니다

그러면 제가 말한 것들을 확인하기 위해서 먼저 눈을 살펴봅시다

x – 50, x - 50 픽셀이네요

이것은 눈이 얼굴의 중심으로부터 50픽셀
왼쪽에 위치한다는 것을 말합니다

그러면 여기에 실제로 분수값을 사용해 볼게요

이 값을 faceSize/6으로 해볼게요

그러면 얼굴 크기의 1/6이 되겠죠

좋아요
그 다음으로 50을 faceSize/6으로 해줍시다

이제 얼굴의 크기를 바꾸더라도

눈이 정확한 위치에 있는 것을 확인할 수 있습니다

멋진 눈을 가지고 있구나 Winston!

다른 쪽의 눈도 도움이 필요한 것 같네요

그럼 100을 얼굴크기의 1/3인
faceSize/3 으로 바꾸어줍니다

그리고 60을 얼굴 크기의 1/5인 faceSize/5로 써줍시다

좋아요 이제는 크기를 바꾸어보아도 멋지네요

하지만 입은 여전히 문제네요

그러면 조금 내려가서 이제는 입을 살펴보도록 하죠

이것을 faceSize/6으로 설정하고

이 부분은 faceSize/7로 할게요

좋아요, 이제 모든 게 완벽하게 끝났습니다
그럼 이제 확인해보죠!

드디어 Winston을 정말 작게 만들 수 있게 되었고

여전히 그의 눈과 입이 얼굴안에 있도록 만들었어요

저는 Winston이 이것을 정말 좋아할거라고 생각해요

좋아요 여러분!

지금까지 한 것을 되짚어보도록 하죠

맨 윗줄에서 우리는 변수들을 가지고 있고

200이라는 값을 한 변수에 저장하는 것으로 시작해서

그 다음 mouthSize와 eyeSize 변수들을

이 값의 분수의 형태로 연동되게 만듭니다

그 결과 만일 faceSize가 200이라면

mouthSize는 100일 것입니다

하지만 faceSize를 300으로 바꾸면

mouthSize는 150으로 변하게 될 것입니다

이 값은 이렇게 비례하여 변화합니다

내려가서 얼굴과 떨어진 정도를 계산할때

역시 분수를 사용하고 있습니다

왜냐하면 우리는 떨어진 정도가
faceSize에 비례하여

바뀌기를 원하기 때문입니다

우리는 단지 그렇게 되도록 만들었고

그래서 다른 모든 값들에 영향을 미치는
하나의 변수를 가지게 되었습니다

우리는 변수와 변수의 표현들을 이용할 수 있게 되었습니다

이제는 다른 변수들의 값에

변수들이 연동되도록 어떻게 만드는지 이해할 수 있고

프로그램에서 더욱 많은 것을 할 수 있을 것입니다

기념으로 윈스턴을 크게 만들어봅시다!

커져보자 Winston! 계속!

멈추지 말고 계에에에속!