2018년 9월 디자인과 코딩을 함께 다루는 유튜브 채널을 열었습니다. "타입과 미디어" 사이트는 당분간 유지할 계획이지만, 새로운 정보는 유튜브 비디오를 통해서 소개하겠습니다. 많은 관심 부탁드립니다! — 정대인

들어가며

세부 목차

프로세싱

도구 소개

타이포그래피와 코딩을 같이 다루기 위해서 선택한 도구는 Processing입니다. 프로세싱은 프로그래밍 언어 Java를 기반으로 하고 있으며, 프로그래밍을 어렵게 느끼는 아티스트나 디자이너들이 쉽게 접하고 공부할 수 있도록 만든 오픈 소스 프로젝트로, MIT Media Lab의 케이시 리즈 Casey Reas와 벤 프라이 Ben Fry 가 시작했습니다. 복잡하고 정교한 프로젝트보다는 프로토타이핑에 어울린다고 알려져있으나, 프로세싱을 주도구로 사용하는 아티스트와 디자이너들이 많이 있습니다.

프로세싱이 오픈 소스라는 것은 단지 무료로 사용할 수 있다는 의미 이외에도, 전세계의 다양한 사람들이 함께 만들어가는, 소스가 열려있다는 의미도 있습니다. 모두가 다양한 방법으로 프로세싱 프로젝트에 참여할 수 있습니다. 개발 경험이 있는 분들은 직접 프로세싱의 소스에 접근해서 버그 수정을 할 수 있고, 프로세싱을 시작하는 분들 또한 포럼에 올리는 질문, 버그 리포팅, 소스코드 공유를 통해서 커뮤니티에 기여할 수 있습니다.

왜 프로세싱?

코딩을 처음 시작하는 아티스트/디자이너가 선택할 수 있는 여러 언어가 있습니다. 먼저, 웹표준 언어인 자바스크립트를 이용한 수많은 라이브러리가 있으며, 파이썬을 기반으로 한 노드박스, C++를 기반으로 한 오픈프레임웍스, 그리고 그 밖에도 많은 도구가 존재합니다.

프로세싱을 선택한 이유는 활발한 온라인 커뮤니티, 기능을 확장시킬 수 있는 다양한 라이브러리들이 존재할 뿐만 아니라, 다양한 예제들이 존재하고, 관련된 서적들도 많이 나와있어서 스스로 학습하는 데에도 큰 무리가 없기 때문입니다. Processing.js 라이브러리를 사용하면, 프로세싱 코드를 웹페이지에 바로 사용할 수 있습니다. 이 웹사이트의 예제들도 Processing.js를 사용하였습니다. 프로세싱 코드를 독립된 어플리케이션이나 안드로이드 앱으로 출판할 수 있습니다. 또한, 프로세싱을 통해서 접한 프로그래밍의 기초 지식들은 다른 언어들을 배우는 데에도 큰 도움이 될 것입니다.

참고 웹사이트

먼저 알아야 할 것들

본격적으로 프로세싱에 대해 알아보기 이전에 필수적으로 알아야할 사항들을 몇가지 짚어보겠습니다.

이 웹사이트 이용방법

각 페이지의 끝에는 Disqus 코멘트가 달려있습니다. 코맨트에 코드를 삽입할 때에는,

<pre><code>
// 여기에 코드를 넣으새요.
</code></pre>

이렇게 <pre><code> 블럭을 이용하면 보기 좋게 포매팅이 됩니다.

프로세싱을 공부하는 방법

이 사이트에서 프로세싱을 사용하는 방법을 모두 다루는 것은 불가능합니다. 하지만, 프로세싱은 아티스트와 디자이너 사이에서 큰 인기를 얻고 있는 프로그래밍 언어입니다. 이미 프로세싱을 다룬 다양한 교재들이 나와있습니다. 한국어 교재들도 여럿 출판되었습니다. 무엇보다도 온라인 상에서 많은 자료를 찾아볼 수 있습니다.

대표적으로 프로세싱 공식 웹사이트에는 모든 함수와 기본적인 사용법을 다룬 레퍼런스, 기초부터 고급내용까지 다루고 있는 튜토리얼, 예제 등이 친절하게 안내되어 있습니다. 프로세싱을 처음 접하는 사람은 공식 웹사이트부터 살펴보시길 권합니다. 프로세싱의 또다른 강점은 바로 온라인 커뮤니티가 활성화되어있다는 것입니다. 공식 포럼에서 궁금한 점을 올바른 방식으로 질문하면, 전세계의 많은 유저들이 도와주려 할 것입니다.

오픈프로세싱이나 스케치패드 등의 웹사이트에서도 다른 이들의 소스코드를 보고 분석하며 공부할 수 있습니다.

인터넷 연결이 되지 않는 환경이라고 해도 프로세싱 어플리케이션에는 수많은 예제가 기본으로 포함되어있습니다. 이런 예제들의 소스를 보고 이해하는 것도 좋은 공부방법입니다.

프로세싱 다운로드 및 설치

먼저 프로세싱 웹사이트에서 운영체제에 맞는 프로세싱 버전을 다운로드하고 설치합시다. 설치 방법은 여타 프로그램들과 별반 다르지 않습니다. 프로세싱은 비영리 프로젝트로 많은 사람들이 개인적인 시간을 투자해서 발전시켜 온 플랫폼입니다. 따라서 프로세싱을 사용하고 그 가치를 인정하고 도움을 받았다면, 소액을 기부하는 것도 좋을 것입니다. 지금 당장 기부할 생각이 없다면 No donation을 선택하고, 다운로드 페이지로 이동할 수 있습니다.

프로세싱 폴더/파일 관리

프로세싱을 설치하고 실행하면 ‘내문서’ 폴더에 Processing이라는 폴더가 생성됩니다. 여기에 우리가 만드는 다양한 스케치와 기타 관련 폴더/파일들을 저장할 수 있습니다. Processing 폴더를 사용하는 것은 의무는 아니지만, 한 곳에서 모든 파일들을 관리할 수 있다는 이점이 있습니다.

프로세싱 코드 파일은 .pde확장자를 가집니다. 여기서 주의할 것은 pde 파일 이름과 이를 감싸고 있는 폴더의 이름이 같아야한다는 것입니다. 예를 들어, myExample.pde파일은 반드시 myExample폴더 내에 있어야 프로세싱이 코드를 실행할 수 있습니다.

프로세싱 기본 설정

Preferences 메뉴로 들어가봅시다. 이 곳에서 프로세싱 스케치가 저장되는 기본 장소를 설정할 수 있습니다. 기본값은 ‘내문서’ 폴더입니다. 백업 등의 이유로 다른 곳에 기본 저장소를 만들고 싶으면, 여기서 변경할 수 있습니다.

프로세싱 에디터에서 한글 사용은 완벽하지 않습니다. Enable complex text input 옵션을 켜고, 프로세싱을 재시동하면 편집창에서 한글이 분리되지 않고 써지기는 하나, 받침이 없는 글자의 경우, 완벽하게 표현할 수 없습니다. 현재로서 이부분에 대한 해결책은 없습니다. 차선책으로, 다른 일반 텍스트 에디터에서 한글을 쓰고 복사해서 붙여넣는 방법이 있습니다. 서브라임 텍스트와 같은 외부 에디터를 사용해서 이 문제를 피해갈 수는 있습니다.

프로세싱 스케치의 흐름

우리가 작성한 코드를 실행하면 프로세싱은 제일 위 첫 줄부터 시작해서 마지막 줄까지 순서대로 실행해서 그 결과를 한 화면에 표시한 후, 멈추게 됩니다. 이렇게 만든 스케치는 단지 원하는 내용을 화면에 표시하는 데에는 문제가 없지만, 애니메이션이나 사용자의 인풋을 받거나 할 수는 없습니다.

동적인 스케치를 만들려면 setup()draw()함수를 사용해서 작성해야 합니다.

setup() 안에는 프로그램이 실행될 때 최초로 한번만 실행되는 내용들이 들어가야 합니다. 예를 들어, 실행창의 크기를 설정하는 size()의 경우에는 처음에 한 번 설정하면 다시 변경하지 않을 것이므로 setup()내에 위치시킵니다.

계속해서 변화하거나 동적으로 인풋을 받아야하는 것들은 draw() 내에 작성합니다. 예를 들어, 배경색을 프로그램 실행 중에 재설정할 필요가 있다면, draw()내에 위치시키고 다양한 방법으로 색을 변경해줄 수 있습니다.

아직 본격적으로 코딩을 하기 전이라서 이 개념이 혼란스러울 수 있지만, 일단, setup()내의 내용은 제일 먼저 한번만 실행된다는 것, draw()내의 내용은 프로그램이 종료될 때까지 계속해서 순서대로 반복적으로 실행된다는 것만 기억하세요!

void setup() {
  // 프로그램을 실행할 때 제일먼저 한번만 실행되는 것들
  size(600, 200);
}

void draw() {
  // 반복해서 실행되는 것들
  background(100);
}

주석 달기

프로세싱에서 주석 또는 코멘트는 // 이렇게 두개의 슬래시(forward slash)로 시작하는 줄을 말합니다. 위의 예제에서 둘째 줄이 이에 해당합니다. 포워드 슬래시는 키보드에서 마침표 오른쪽에 위치하고 있습니다. 코멘트로 시작하는 줄은 프로세싱이 실행 시에 건너뜁니다. 따라서, 그 줄의 내용은 실행되지 않습니다.

왜 주석이 필요할까요? 먼저, 프로그램을 테스트할 때 매번 지우고 다시 쓰고 하는 대신에 필요한 부분만 주석 처리해서 실행되지 않게 할 수 있습니다. 이렇게 하면, 문제가 있는 코드를 진단하기 훨씬 수월하겠지요. 또한, 프로그래머 스스로를 위한 메모 역할도 합니다. 각각의 코딩 블록이 어떤 역할을 하는지 표시해놓으면 나중에 코드를 다시 보았을 때 기억을 더듬어가기 쉬워집니다.

주석을 달지 않는다고 해서 결과물에 차이가 생기는 것은 아니지만, 프로그램이 복잡해질수록 필수적인 요소이니, 항상 주석을 다는 습관을 기르는 것이 좋습니다. 프로세싱에서는 한글 입력이 여의치 않은 관계로 영어로 달기를 권합니다.

여러줄의 주석을 일일히 // 슬래시를 사용해주기는 매우 불편합니다. 여러줄을 한꺼번에 주석처리하고 싶을 때는 /*로 시작해서 */로 끝내주면 됩니다.

/*
	여러 줄을 한꺼번에
	주석처리할 수 있습니다.
*/

알서 말한 바와 같이 주석처리된 부분은 프로세싱 실행 시에 무시됩니다.

창의 크기 정하기

프로세싱 실행 창의 크기를 정할 때 size()함수를 이용합니다.

size(w, h);

‘w’는 너비(가로)를 말하고, ‘h’는 높이(세로)를 말합니다. 가로 600 픽셀, 세로 200 픽셀의 창을 만들고 싶으면 에디터에 이렇게 코드를 작성하고 실행하면 됩니다:

void setup() {
  // set the window size
  size(600, 200);
}

void draw() {
	
}

배경색 정하기

size()에 이어서 한가지 함수를 더 알아보겠습니다. 창의 배경색을 정하고 싶을 때 background()함수를 사용합니다.

background(colorValue);

색상값은 0255사이의 숫자로 표현해줍니다. 컴퓨터 모니터는 기본적으로 RGB 가산혼합 색상체계를 사용합니다. 따라서, 숫자는 빛의 강도를 말해줍니다. 0의 경우는 빛이 없으므로 검은색, 255의 경우에는 흰색이 됩니다.

void setup() {
  // set the window size
  size(600, 200);
}

void draw() {
  // set the background color to black
  background(0);
}

위의 예제처럼 background(0)라고 draw()함수 안에 적어넣고 스케치를 실행합니다. 창의 내부가 검은색인 것을 확인할 수 있습니다.

웹디자인에서 주로 사용되는 HEX 색상코드에 익숙한 분들은 background(#ff0000) 이런 식으로 헥스 값을 직접 입력할 수도 있습니다. 같은 색을 RGB 방식으로 표현하면, background(255, 0, 0)가 됩니다. 둘 다 배경을 빨간 색으로 설정해줍니다.

void setup() {
  size(600, 200);
}

void draw() {
  background(255, 0, 0);
  //background(#ff0000);
}

더 배우기

프로세싱의 기본기를 다질 수 있는 좋은 온라인 자료들을 소개합니다.