WEBVTT

00:00:02.518 --> 00:00:03.908
다음의 세가지 단계를 거치면
앞으로 그림을 색을 칠하여

00:00:03.908 --> 00:00:06.528
만들수 있다는 것을 알 수 있을 거에요

00:00:06.528 --> 00:00:08.559
우선 배경색을 그려보도록 하죠

00:00:08.559 --> 00:00:11.870
그러기 위해서는 우선 "background"와 "("를 입력하고

00:00:11.870 --> 00:00:13.892
나머지 항목들은 자동으로 완성될 거에요

00:00:13.892 --> 00:00:17.093
보다 자세히보자면,이것은 실제로는 
함수 호출(function call)이라는것을 알아차릴거에요

00:00:17.093 --> 00:00:19.074
함수의 이름은 여기있고

00:00:19.074 --> 00:00:22.235
여기서는 <i>background</i>겠죠
그리고 괄호( ( ) )가 있어요

00:00:22.235 --> 00:00:24.778
그리고 세가지의 파라미터(parameter)들이 그 안에 있고
각각 쉼표(,)로 나뉘어져있어요

00:00:25.018 --> 00:00:31.032
이 세 숫자는 배경이 되는 색에서
각각 빨강, 초록, 파랑의 양을 나타내요

00:00:31.236 --> 00:00:34.792
그 숫자들은 0에서 255사이의 어느 숫자나 입력이 가능해요

00:00:35.142 --> 00:00:37.393
여기서 0은 그 색이 아예 없는것을 의미하고

00:00:37.393 --> 00:00:39.787
255는 그 색이 최대로 존재하는 것을 의미해요

00:00:39.787 --> 00:00:42.963
그래서 빨강색을 최대로 주고,
초록과 파랑을 아무것도 칠하지 않은 결과

00:00:42.963 --> 00:00:45.130
배경색이 매우 밝은 빨강색이 된거에요

00:00:45.130 --> 00:00:48.128
만일 맨 처음 준 값보다 작은 값을 빨강색에 주게 된다면

00:00:48.138 --> 00:00:49.662
그러면 배경이 조금 어두운 빨강색처럼 보일거에요

00:00:49.662 --> 00:00:51.332
이 숫자들을 가지고 계속해서 수정 할 수도 있고

NOTE Paragraph

00:00:51.332 --> 00:00:53.258
그리고 어떠한 색이 나오는지 볼 수도 있어요

00:00:53.258 --> 00:00:58.534
혹은 모든 세 숫자를 한번에 조종할 수 있는 
좌우로 끌어서 조종하는 법을 사용할 수 도 있어요

00:00:59.382 --> 00:01:00.671
우선은 <i>background</i>라는 함수가

00:01:00.671 --> 00:01:02.980
진짜로 무엇을 하는지 아는 것이 중요해요

00:01:02.980 --> 00:01:06.100
그 함수는 단순히 전체 캔버스 전체에
색이 칠해진 거대한 사각형을 그릴거에요.

00:01:06.370 --> 00:01:08.765
만일 그 함수를 프로그램의 맨 마지막부분으로 옮긴다면

00:01:08.765 --> 00:01:11.860
내가 그린 모든 도형들 위로
커다란 배경색으로 칠해진 사각형만을 그릴 거에요

00:01:12.165 --> 00:01:14.710
당신은 "이것은 너무하네! 누가 이런것을 원한다고..."
라고 생각할 거에요

00:01:14.715 --> 00:01:16.530
하지만 앞으로는 어떻게 될지 모르니

00:01:16.770 --> 00:01:18.610
지금부터라도 항상 맨 위에
배경색을 지정하는것을 남겨두세요

00:01:19.250 --> 00:01:20.669
그럼 지금부터는 도형에 색을 칠해볼까요!

00:01:20.819 --> 00:01:26.666
컴퓨터를 색을 칠하는 조수나, 어떠한 색깔의 집사로
생각하는 것은 무척 도움이 될 거에요

00:01:27.000 --> 00:01:29.357
보통 이러한 친구들은 색깔들을 담당하고 있을텐데

00:01:29.547 --> 00:01:34.590
이 색깔을 담당하는 친구는 
왼손에는 색을 칠하기 위한 마커를 들고 있고

00:01:34.620 --> 00:01:39.079
오른쪽 손에는 페인트 통 하나를 들고 있을거에요

00:01:39.209 --> 00:01:42.513
컴퓨터는 그 색을 가진 마커를 가지고
모든 바깥의 선들((outlines)을 그리고

00:01:42.513 --> 00:01:44.550
페인트 통을 이용해서 그 도형에 색을 채울거에요

00:01:44.550 --> 00:01:47.269
지금부터 마커는 검정색,
그리고 하얀색 페인트 통을 가지고 있다고 해요

00:01:47.499 --> 00:01:51.280
하지만 <i>stroke</i>함수를 이용하여 마커의 색을 바꿀 수도 있어요

00:01:51.531 --> 00:01:55.274
우리는 여기서도 자동완성(autocomplete)기능을 사용할 수 있고,
그 다음엔 색을 고를 수 있어요

00:01:55.274 --> 00:01:58.310
이것은 이 친구가 들고 있는 마커의 색을 바꾸어요

00:01:58.560 --> 00:02:00.230
그러므로 이 이후에 그려진 모든 도형들의

00:02:00.230 --> 00:02:02.180
바깥 선들은 핑크색으로 변할 거에요

00:02:02.320 --> 00:02:04.950
가끔 우리는 도형의 바깥 선을 그리지 않고 싶을때도 있지요?

00:02:05.010 --> 00:02:06.544
그럴때는 다음과 같이 함수를 사용하면 돼요

00:02:06.544 --> 00:02:10.175
<i>noStroke</i>라는 함수를 그리기 전에 사용해주면 돼요

00:02:10.175 --> 00:02:12.686
보는것과 같이 이 함수는 parameters를 따로 가지지 않으므로

00:02:12.686 --> 00:02:17.009
우리는 단순히 함수 이름 뒤에 "();"를 붙여주면 될거에요

00:02:17.009 --> 00:02:19.428
그러고 나면 도형들의 바깥 선들이 없는 것을 볼 수 있을거에요

00:02:19.868 --> 00:02:21.531
또한 우리는 이 친구의 페인트 통의 색을 바꿔 줄 수도 있어요

00:02:21.531 --> 00:02:24.594
<i>Fill</i>이라는 함수를 통해서 말이죠

00:02:25.484 --> 00:02:27.509
이 함수를 코드의 맨 앞에 넣고 나면

00:02:27.509 --> 00:02:29.924
모든 도형이 밝은 빨강색으로 채워질 거에요

00:02:30.024 --> 00:02:31.961
마치 <i>noStroke</i> 함수와 비슷하게

00:02:31.961 --> 00:02:37.308
<i>noFill</i>이라는 함수도 있습니다
이것 역시 파라미터(parameters)를 가지지 않아요

00:02:38.028 --> 00:02:41.297
이것은 도형들을 투명하게 만들어요
즉 아무것도 채우지 않는 것이죠

00:02:42.247 --> 00:02:44.273
그럼 지금부터 이 친구를 실제로 색칠하여 보죠

00:02:44.273 --> 00:02:46.987
그의 몸을 이루는 삼각형부터 칠해보아요

00:02:46.987 --> 00:02:50.362
<i>stroke</i>의 색을 정해주어 도형의 바깥선을 설정해요

00:02:51.219 --> 00:02:54.856
어두운 초록색으로 지정해볼까요?

00:02:56.246 --> 00:02:58.407
그 다음에는 색을 채워넣어보아요

00:02:58.757 --> 00:03:02.241
멋있어 보이나요?
제가보기엔 밝은 초록이 더 나을거 같아요

00:03:02.241 --> 00:03:04.475
바꾸어봅시다
훨씬 나아보이네요

00:03:04.965 --> 00:03:07.547
다음은 그의 얼굴이에요
얼굴에 초록색 외곽선을 원하지는 않으니

00:03:07.547 --> 00:03:10.189
<i>stroke</i>함수를 이용해서 바꾸어보겠어요

00:03:12.899 --> 00:03:17.802
어두운 갈색의 외곽선을 사용해보았어요

00:03:18.072 --> 00:03:19.987
그리고 <i>fill</i>함수를 이용해서
다른색으로 얼굴을 칠해볼게요

00:03:21.202 --> 00:03:24.777
이 색깔이 좋아보이나요?

00:03:25.217 --> 00:03:27.846
이 색이 얼굴의 색으로는 좋아보이네요

00:03:30.475 --> 00:03:33.104
다음의 두 줄은 두개의 원형 도형으로 손을 표시하는 것이에요

00:03:33.114 --> 00:03:35.641
이 손들은 얼굴과 동일한 색을 가지도록 하고싶다면

00:03:35.641 --> 00:03:38.489
따로 마커나 페인트통을 수정하거나 할 필요가 없어요

00:03:38.507 --> 00:03:40.837
위에서 쓴 <i>stroke</i>나 <i>fill</i>이 
그대로 적용되도록 조용히 놔두면 되요

00:03:40.837 --> 00:03:42.250
입부분으로 옮겨가보죠

00:03:42.460 --> 00:03:44.891
입은 단순히 하나의 선이에요

00:03:46.551 --> 00:03:50.592
그러므로 채울만한 공간이 없어서
<i>fill</i>함수를 사용할 수 없어요

00:03:50.672 --> 00:03:53.153
하지만 선의 색을 바꾸는 <i>stroke</i>를 사용하는것은 가능해요

00:03:54.063 --> 00:03:56.156
그럼 멋진 빨강색으로 입술을 칠해보죠

00:03:56.246 --> 00:03:57.814
다음은 안경의 차례네요

00:03:57.834 --> 00:04:00.005
다시한번 <i>stroke</i>를 사용해보죠

00:04:00.085 --> 00:04:01.748
안경테에는 어떤색이 어울릴까요?

00:04:01.838 --> 00:04:03.737
무난하게 검정색으로 합시다

00:04:05.816 --> 00:04:11.465
안경의 렌즈가 되는 사각형은
안경테와 같은 색이어야하므로

00:04:11.465 --> 00:04:14.796
<i>stroke</i>로 선의 색을 바꾸어주지 않아도 되지만
<i>fill</i>함수는 사용해야 할겁니다

00:04:17.126 --> 00:04:20.032
테와 어울리도록 검정색을 칠해봅시다

00:04:20.032 --> 00:04:22.487
그러고 나면 우리 친구가 드디어 색을 가지게 되었어요!