스크래치3.0 스프라이트 모양만들기 – 형태고치기

형태고치기툴을 클릭하고 어떤 오브젝트를 클릭하여 형태고치기 모드로 들어가면 컨트롤포인트들이 보인다. 이 컨트롤포인트들은 굽은 모양이거나 꺽인모양이다. 컨트롤포인트가 굽은모양인지 꺽인모양인지 알 수 있으려면 해당 컨트롤포인트를 클릭해 보면 된다. 굽은 모양의 컨트롤포인트들은 옆에 보조점이 나타날 것이다. 이 보조점을 이동시켜 곡선의 모양을 바꿀 수 있다.  꺽인 모양의 컨트롤포인트들은 옆에 보조점이 없다.  그래서 꺽인 모양의 컨트롤포인트 근처에서 직선으로 나타난다.  컨트롤포인트를 꺽인 모양으로 또는 굽은 모양으로 상호 변환이 가능하다.  그 예를 보자.

[siteorigin_widget class="WP_Widget_Media_Image"][/siteorigin_widget]

사각형툴을 이용하여 임의의 사각형을 만들자.

[siteorigin_widget class="WP_Widget_Media_Image"][/siteorigin_widget]

형태고치기를 클릭하여 형태고치기 상태로 두면 4개의 컨트롤 포인트가 보인다. 모두 꺽인 모양의 컨트롤포인트들이다. 이 가운데 좌상의 한 컨트롤포인트를 클릭한다.  이를 굽은 모양의 컨트롤 포인트로 바꾸고자 한다.

[siteorigin_widget class="WP_Widget_Media_Image"][/siteorigin_widget]

굽은모양툴을 클릭하여 해당 컨트롤포인트를 굽은 모양의 컨트롤포인트로 바꾼다.

[siteorigin_widget class="WP_Widget_Media_Image"][/siteorigin_widget]

같은 방법으로 우하의(오른쪽 아래의) 컨트롤포인트도 굽은 모양으로 바꾸고 두 개의 컨트롤포인트를 더 추가하여 그림처럼 잎새모양이 되도록 적당히 조절한다.

[siteorigin_widget class="WP_Widget_Media_Image"][/siteorigin_widget]

밝기가 다른 두개의 초록색을 선택하여 그라데이션 채우기를 주자. 그리고 윤곽선의 굵기를 0으로하여 윤곽선을 보이지 않게 한다.

[siteorigin_widget class="WP_Widget_Media_Image"][/siteorigin_widget]

오브젝트를 복사 와 붙여넣기를 하여 하나 더 만든다.

[siteorigin_widget class="WP_Widget_Media_Image"][/siteorigin_widget]

새로 복사된 오브젝트에 칠하기를 하되 방사형 그라데이션을 준다. 이 때 흰색과 투명색을 선택한다.  흰색을 앞에 두고 투명색을 뒤에 둔다. 그렇게하여 흰색이 점점 투명색으로 퍼져가는 효과를 만든다.

[siteorigin_widget class="WP_Widget_Media_Image"][/siteorigin_widget]

두개의 오브젝트가 서로 완전히 겹치게 둔다.

[siteorigin_widget class="WP_Widget_Media_Image"][/siteorigin_widget]

형태고치기 툴을 선택하여 그림처럼 컨트롤포인트 한 점을 더블클릭하여 없앤다.

[siteorigin_widget class="WP_Widget_Media_Image"][/siteorigin_widget]

[siteorigin_widget class="WP_Widget_Media_Image"][/siteorigin_widget]

그림 처럼 다른 컨트롤포인트 한점을 조절하여 잎새의 반쪽부분을 형상화 한다. 잎새의 반쪽 부분이 살짝 꺽이어 빛을 받아 빛나는 모습을 형상화 한 것이다.

[siteorigin_widget class="WP_Widget_Media_Image"][/siteorigin_widget]

싱그러운 잎새의 모습이 완성되었다.

스크래치3.0 스프라이트 모양 만들기 – 백터모드에서 그리기

백터모드에서 그림을 그릴 때 처음 선택하는 도구는 붓, 선, 원, 또는 사각형 중에 하나이다.  붓은 펜 또는 타블릿 같은 하드웨어가 있을 때 쓰면 좋다. 하지만 마우스로 그림 그리기에는 적합하지 않다. 펜 또는 타블릿은 전문가들이 많이 활용하는 도구로 펜을 눌렀을 때의 압력에 따라 그려지는 선의 굵기가 바뀌고 실제 붓이나 펜으로 그림을 그리는 효과를 낼 수 있다. 하지만 마우스 만으로도 충분히 멋진 그림을 그릴 수 있다.

선도구는 직선을 그린다.  일단은 그렇다. 하지만 형태고치기 도구를 이용하여 어떠한 곡선으로도 바꿀 수 있다.

 

[siteorigin_widget class="WP_Widget_Media_Image"][/siteorigin_widget]

백터모드에서 선을 하나 그려보자.

[siteorigin_widget class="WP_Widget_Media_Image"][/siteorigin_widget]

그려진 직선의 형태를 바꾸어 보기로 하자. 그러기 위해서는 우선 형태고치기툴을 클릭하고 그려진 직선을 클릭한다.

[siteorigin_widget class="WP_Widget_Media_Image"][/siteorigin_widget]

곡선으로 바꾸기 위하여 직선위 임의의 한 점을 클릭하여 드래그하여 보자. 그 점을 컨트롤포인트라고 한다. 그렇게 컨트롤포인트 하나가 추가되었고 만들어진 컨트롤 포인트 옆으로 보조점 두개가 보이는데 이 점의 위치를 바꾸어 줌으로써 곡선의 모양이 달라진다. 이렇게 만들어진 곡선을 베이지어곡선이라 부른다.

[siteorigin_widget class="WP_Widget_Media_Image"][/siteorigin_widget]

곡선 위의 한 점을 클릭하고 드래그하여 컨트롤포인트 한 점을 더 추가해 보자.

[siteorigin_widget class="WP_Widget_Media_Image"][/siteorigin_widget]

곡선의 굵기와 색깔을 바꾸어 보자. 굵기를 0으로 하면 곡선이 사라진다.

[siteorigin_widget class="WP_Widget_Media_Image"][/siteorigin_widget]

폐곡선이 아니더라도 채우기가 가능하다. (스크래치2.0에서는 폐곡선에서만 채우기가 가능했었다.) 채우기색이 없다는 것은 투명하다는 것이고 투명색으로 칠해져 있다고 해도 된다. 투명색으로 칠해져 있는 것을 투명하지 않은 다른 색으로 바꾼다고 생각하자. 단색으로 채울 수 도 있고 그라데이션(한 색에서 다른 색으로 서서히 변하면서 채워짐)으로 채울 수 있다. 그라데이션으로 채우기 위해서는 두개의 색이 필요하지만, 그 중 한 색을 투명색으로 지정할 수도 있다. 그라데이션 효과는 3가지가 있는데, 좌우로 그라데이션, 상하로 그라데이션, 그리고 방사형 그라데이션이 준비되어 있다.

[siteorigin_widget class="WP_Widget_Media_Image"][/siteorigin_widget]

채워진 곡선이 완성되었다.

스크래치3.0 스프라이트 모양 만들기 – 백터모드와 비트맵모드

모양탭을 클릭하면 기본적으로 백터모드의 이미지편집창이 보인다.  편집창 하단에 비트맵으로 바꾸기 버튼을 클릭하면 비트맵 모드 화면의로 바뀐다.  다시 백터로 전환하기 버튼을 클릭하면 백터모드로 바뀐다. 그림 그리던 중간에 함부로 모드를 전환하면 곤란한 문제가 생길 수 있다. 만일 백터이미지를 일단 비트맵 이미지로 바꾸면 다시 원래대로의 백터 이미지로 바꿀 수 없다는 것에 주의하라. 그러므로 그림을 그리기 전에 어떤 모드로 그릴지 선택해야만 한다.

백터모드의 화면
비트맵모드의 화면

비트맵모드에서는 비트맵이미지를 그릴 수 있고 백터모드에서는 백터이미지를 그릴 수 있다.  비트맵이미지는 픽셀이라는 점으로 그려진 그림이다. 픽셀은 매우작은 점이라 잘 보이지 않지만 그림 편집창 아래의 돋보기를 계속 클릭해 보면 그 정체가 드러난다. 스크래치에서 하나의 픽셀은 색상, 채도, 밝기의 값을 가질 수 있고 우리는 그 값들을 그 픽셀의 속성이라 부른다. 스크래치에서 그림은 가로로 480개의 픽셀, 세로로 360개의 픽셀이 놓일 수 있다. 총 172800개의 픽셀이 놓일 수 있다. 이것을 해상도[latex]480\times 360[/latex]이라 부른다. 일반적인 디지탈카메라로 찍은 사진 해상도(보통 천만 픽셀)에 비하면 무척 작은 그림인 셈이다. 비트맵그림을 확대해 보면 픽셀들의 정체가 드러나면서 마치 계단같은 형상들이 보인다.  이것은 비트맵그림의 단점으로 어느정도 이상 확대하기가 곤란하다.  이것을 보고 사람들이 말하길 비트맵 이미지는 확대하거나 축소하면 그림이 깨진다 라고 한다.

백터이미지는 픽셀이라는 개념이 없다. 대신 오브젝트라는 개념이 있다. 오브젝트는 선, 원, 다각형, 곡선 따위를 말한다. 그림 그릴 수 있는 화면이 도화지라고 생각해 보면 이 도화지 정 중앙을 (0,0)으로하는 좌표평면이 있어 [latex]x[/latex]축으로는-240부터 240까지,  [latex]y[/latex]축으로는 -180부터 180까지 눈금이 있는 가상의 수직선이 존재한다.  우리는 (-30,50)의 위치에서 반지름 10인 원 따위의 그림을 그릴 수 있다.  이렇게 그려진 선, 원, 다각형들이 모여 하나의 그림을 형성하는 것이다.  이렇게 만들어진 그림은 화면을 확대하거나 축소해도 깨지는 일이 없다. 화면을 확대하거나 축소할 때마다 그상태의 화면에서 그림을 다시 그려주기 때문이다.

 

숏코드를 일시적으로 동작 정지하고플 때

워드프레스에서 멋진 개념중 하나인 숏코드가 때로는 동작 안했으면 할 때가 있다. 대표적으로 코드내에 숏코드를 쓸 때 이다. 예를들어 KoLaTeX 플러그인을 사용하여 LaTeX 코드를 삽입한 문장의 소스코드를 보이고자 한다고 하자. 각괄호로 둘러싸인 쇼트코드를 포함한 소스코드가 화면에 보여져야 하는데 <pre><code>태그로 감싸도 쇼트코드가 실행(?)되는 바람에 전혀 다른 소스코드가 되어 버린다.

이런경우, [쇼트코드] ... [/쇼트코드] 대신 [[쇼트코드]...[/쇼트코드]] 처럼 맨처음 시작하는 각괄호와 맨 마지막 곽괄호를 이중각괄호로 한다.

싱글쇼트코드인 경우 [쇼트코드] 를 [[쇼트코드]] 로 하면 되겠다.

[plugin]KaLaTeX

이 플러그인을 발견하고 참으로 반가왔다. 홈페이지에서 LaTeX을 편하게 쓸 수 있다는 것을 이제야 발견하다니... 워드프레스에서 플러그인 이라는 기능이 참으로 멋지다.

글을 쓸 때 [latex]ax^2 + bx + c = 0[/latex] 처럼 인라인 TeX 코드를 넣을 수 있고 [latex display="true"]x = \frac{-b \pm \sqrt{b^2 -4ac}}{2a}[/latex] 처럼 디스플레이모드도 가능하다.

글을 쓸 때 [[latex]ax^2 + bx + c = 0[/latex]] 처럼 인라인 TeX 코드를 넣을 수 있고 [[latex display="true"]x = \frac{-b \pm \sqrt{b^2 -4ac}}{2a}[/latex]] 처럼 디스플레이모드도 가능하다.

비슷한 기능을 하는 다른 LaTeX 플러그인 이 있는 듯 하지만 KaLaTeX은 설정이 무척 간단하고 사용이 쉽다.

joyfulgenie 홈페이지 만들다.

2018년 8월 9일은 이 사이트를 처음 연 날이다.

그냥 프레임만 있고 내용은 아무것도 없는 상태.  이 글이 첫번째 포스팅이다. dothome에서 joyfulgenie.com이라는 도메인을 만들고 그 도메인에 무료무제한호스팅을 신청하여 연결하였다. CMS는 워드프레스, 그런데 나는 워드프레스에 생짜 초보다. 제로보드보다는 훨씬더 직관적이고 쉬워보이기한데, 배우면서 채워나간다는 심정으로 시작한다.

이 홈페이지에서는 나의 주 업인 수학과외(학원)에 관한 관리, 진행, 홍보 그리고 관련 글들을 실을 예정이다. 아울러 교육청 관련 교육업무와 그로인해 생성되는 컨텐츠들 그리고 나의 취미와 관련된 컨텐츠 등을 올리겠다.

시간이 지나면 어떻게 바뀌어 있을까? 그리고 이 비즈니스는 어떻게 바뀌어 있을까? 사뭇 훗날의 변화된 모습을 기대하며 조심스레 홈페이지를 열어본다.

홈페이지를 처음으로 열고 찍은 화면