ofTutorials - Introduction


이 챕터에서는 openFrameworks를 소개하고 여러분이 첫 프로젝트를 시작할 수 있도록 준비하는 과정을 소개합니다.

oF Logo

오픈프레임웍스가 뭔가요 ?

오픈프레임웍스는 실험적인 작업을 위한 간단하고 직관적인 프레임워크를 제공하여 생산적인 프로세스를 돕는 창조적 오픈소스 C++ 저작도구입니다. 이 저작도구는 범용적인 "접착제"의 역활을 하도록 디자인 되었으며 아래에 나열된 일반적으로 사용되는 라이브러리들을 포함하고 있습니다.

openFrameworks는 강력한 크로스플랫폼을 지원합니다. 현재만 하더라도 5개의 운영체제와(윈도우, 맥OSX, 리눅스, iOS, 안드로이드) 네 종류의 IDE(XCode, Code::Blocks, Visual Studio, Eclipse)를 지원합니다. API는 최소한으로, 그리고 쉽게 이해되도록 디자인 되었습니다.

간단히 요약하자면, openFrameworks는 코드를 사용하여 쉽게 무언가를 제작할 수 있는 도구라고 할 수 있습니다. 저희에게 상당히 유용한 이 툴이 여러분들께도 도움이 되었으면 좋겠습니다.

openFrameworks는 Zach Lieberman, Theodore Watson, and Arturo Castro ("the core")에 의해 활발히 개발되었으며, OF community의 도움을 받았습니다. openFrameworks는 두 선지자들의 은혜를 입었습니다: Casey Reas, Ben Fry에 의해 개발된 Processing development environment, 프로세싱 커뮤니티; 그리고 Ben Fry와 MIT Media Lab’s Aesthetics and Computation Group의 구성원들에 의해 개발된 비공개 c++ 배포판 ACU Toolkit입니다.

— openframeworks.cc/about

몇몇 이런 (openGL과 같은)퍠키지들은 다른 문서의 파트들보다 좀더 깊게 살펴볼 필요가 있습니다만, 이것들은 백그라운드단에서 동작하므로 아마도 절대 걱정할 필요가 없을것입니다. 이러한 각 라이브러리들은 자신만의 문법, 변환(conversion), 기교(quirk)가 있지만, 오픈프레임웍스의 아름다움은 이런것들에 대해 여러분이 걱정할 필요가 없다는 것입니다 — 오픈프레임웍스는 이러한 라이브러리들이 제공하는 기능들을 단일의, 일관적인 인터페이스로 제공합니다.

Q&A

  1. 이것은 프로그램인가요?

    오픈프레임웍스는 program이나 application자체는 아닙니다만, 여러분이 오픈프레임웍스를 사용해 여러분의 프로그램과 어플리케이션을 작성할 수 있습니다.

  2. 이것은 프로그래밍 언어인가요?

    오픈프레임웍스가 자체의 programming language를 구성하지는 않습니다. 오픈프레임웍스로 작성할때 작성하는 언어는 C++입니다.

  3. 그렇다면 이것이 라이브러리인가요?

    오픈프레임웍스는 사실 몇몇 software libraries로 만들어졌습니다만, 정확하게 말해 이러한 라이브러리들을 통합한다는 의미에서 보다 적절한 표현으로 소프트웨어 프레임워크라고 할 수 있습니다.

  4. 소프트웨어 프레임워크가 뭔가요?

    소프트웨어 프레임워크는 미리 만들어진 소프트웨어 기본 구조의 일종으로, 프로그래머가 어플리케이션이 해야만 하는 것들의 상위레벨 디테일들을 커스텀하기 위해 어플리케이션이 필요로 하는 하위 레벨 기능의 모든 것을 제공하도록 디자인되어있습니다. 프레임워크를 사용하는것과 라이브러리를 사용하는것의 차이점 중 하나는, 제어의 흐름이 반대라는 점입니다. 라이브러리는 여러분의 코드에 의해 바로 제어되어 일종의 작업을 수행합니다. 프레임워크에서 여러분의 코드는 프레임워크에 제어되는 이벤트에 응답하고, 다른 라이브러리의 기능에 접근하기 위해 프레임워크를 인터페이스처럼 사용합니다.

복잡하게 들리나요?

사실 많은 다른 멀티미디어 창작 환경에서는 작업이 이런식으로 이루어집니다.

이런 상황을 고려해봅시다: 당신은 작가이자 당신의 영화를 감독하고 있으며, 영화 제작회사와 함께 작업하기로 결정했습니다. 제작회사는 장소를 예약하고, 모든 시설을 제공하고, 카메라 크루, 조명감독, 사운드 엔지니어 등 중요한 스태프들을 찾습니다. 이렇게 해야 모든이들이 세트에 정시에 도착하여 필요할때 작업이 가능하죠, 당신도 포함해서요. 당신의 역할은 세트장에 모든인원이 준비가 되었을대 뭘 해야할지 결정하는겁니다. 오픈프레임웍스는 여러분의 프로그램에서의 영화 제작회사와 같습니다. 관리해야할 것, 필요한 디테일을 관리하고 여러분이 창작에만 몰두할 수 있게 해주죠.


1. C++ is a programming language

앞 섹션에서 오픈프레임웍스는 프로그래밍 언어가 *아니*라, C++ 프로그램을 위한 소프트웨어 프레임워크라고 했습니다. 그렇다면 C++은 뭔가요?

Note : 이 문서는 여러분이 오픈프레임웍스를 통해 `C`언어에 익숙해지도록 안내하는 것을 목표로 하고 있습니다. 하지만 이는 bottom-up 방식으로 `C`를 소개하는 것에 너무 깊이 탐구하는 범위를 벗어나게 되므로, 이후에 여러분이 리스트된 추가적인 자료 부록들을 살펴본다면 많은도움이 될 것입니다.

`C`은 C 언어의 확장으로, 1979년에 벨 연구소에 의해 개발되었습니다. 이 두 언어 모두는 세상의 어떠한 컴퓨터 플랫폼에서도 동작이 가능한 범용 컴퓨터 언어입니다. 대부분의 기본 C 프로그램은 아래와 같이 생겼습니다:

// my first program in C++

#include <iostream>
using namespace std;

int main()
{
  cout << "Hello World!\n";
  return 0;
}

팁 : 이 프로그램의 한줄한줄은 cplusplus.com "Structure of a program" 튜토리얼에서 얻으실 수 있습니다.

이후 컴파일러를 통해 실행되면, 이 코드는 완전히 실행가능한 프로그램으로 생성됩니다. 이 프로그램은 콘솔에 "Hello World!"를 출력하는 아주 단순한 명령행 프로그램입니다만, 그럼에도 프로그램이지요. 아래 단계를 통해 직접해보실 수 있습니다:

Warning : 이 단계는 플랫폼에 따라 약간씩 다릅니다. 아래 지시들은 매킨토시 운영체제를 위한것으로, 실행을 위해 XCode가 설치되어있어야 합니다.

1.1. Your First compiling C++ Program

PlainText
  1. 위의 코드를 텍스트파일에 붙여넣고 바탕화면에 *hello.cpp*로 저장합니다.

    1. 만약 여러분이 텍스트 편집기를 사용한다면, 저장할때 "rich text"나 다른 포맷이 아닌, plain text"로 저장해야 합니다.

  2. /응용프로그램/유틸리티 로 가서, 터미널.app을 더블클릭합니다 Terminal.app

  3. 아래의 명령을 터미널 윈도우에 입력하고, 각 라인뒤에 엔터를 입력합니다:

cd Desktop <1>
g++ -o hello hello.cpp <2>
./hello <3>
  1. 바탕화면으로 이동("디렉토리 변경")합니다.

  2. g++ 프로그램을 이용하여 hello.cpp(소스코드 파일)를 "hello"라는 프로그램으로 컴파일합니다.

  3. 방금 생성된 "hello"를 실행합니다.

결과는 아래와 같습니다:

Hello World!

축하드립니다, 여러분은 방금 여러분의 첫번째 C++프로그램을 생성(그리고 실행)하였습니다! 바탕화면에 아래와 같은 화면이 보여질 것입니다:

Your First Program

이는 아마도 여러분이 사용해왔던 프로그램과는 다르게 보입니다 — 그리픽을 사용하며 윈도우를 실행하는 깜찍한 아이콘을 갖고 있는 그런 프로그램들 말이죠 — 하지만 그럼에도 이것도 프로그램입니다. 사실, 충분이 깊게 파고들면, 컴퓨터의 모든 프로그램은 hello 프로그램과 같습니다. 나머지는 장식같은것이죠.

중요: 지금 몇몇 분들의 비명소리가 들리는군요, 하지만 걱정마세요! 오픈프레임웍스로 시작하면 훨씬 흥미로워질테니깐요. 이 예제는 단지 C++ 기본의 하위레벨을 보여주기 위한 것입니다. 아마 여러분은 다시는 명령행모드에서 커맨드라인 프로그램을 컴파일할 일이 없을겁니다.

1.2. What is a compiler? and an IDE?

Flash나 프로세싱과 같은 프로그램을 사용해보셨다면, 코드를 작성하고 결과를 보기위해 "플레이 버튼을 누르는" 과정에 익숙하실 겁니다. 이것을 "컴파일" 또는 "컴파일링"이라고 하며, 이것이 바로 앞 섹션에서 했던 겁니다. 비디오 편집에 익숙하신 분이라면, 컴파일링은 렌더링과 비슷합니다. 개념은 "사람이 읽을 수 있는"코드를 컴퓨터가 실행할 수 있는 포맷으로 번역해야 한다는 것입니다. C, C++, Java, Objective-C, Fortran, Lisp, Pascal… 이것들은 모두 컴파일된 언어 입니다. 이것들이 숨은 것처럼 보여지지듯, 이 모든 언어들은 "사람이 읽을 수 있다"고 가정합니다. 이것들은 명확하게 작성되고, 읽히며 사람이 이해할 수 있습니다. 하지만 어떤 언어로 시작하든, 결국에는 컴퓨터가 이해할수 있는 무언가로 번역됩니다. 이를 기계 코드라고 합니다..

Note : PHP나 Python과 같은 몇몇 언어들은, "스크립트 언어"라고 합니다. 이 언어들은 컴파일링이 필요하지만, 컴파일과정은 프로그램 실행 직전에 발생합니다.

여러분의 코드를 가져다가 기계코드로 번역하는 작업을 하는 프로그램을 "컴파일러"라고 합니다. GCC는 가장 유명한 컴파일러중 하나입니다. 이녀석은 다양한 언어들을 컴파일 할 수 있습니다. GCC는 컴파일링을 위해서는 훌륭하지만, 정확히 어떻게 프로그램에게 여러분이 원하는 것을 하라고 전달하는 방법을 이해하는 것은 혼란스럽고 머리가 아픈 주제입니다. 앞 섹션에서는, "g++ -o hello hello.cpp"라는 아주 간단한 명령을 통해 프로그램을 컴파일 했습니다. 하지만 라이브러리를 사용한다거나, 특정 프로세서를 위해 코드를 최적화한다거나, 이미지 등등의 리소스들로 어플리케이션을 번들링하기 등등의 경우, 적당히 복잡한 오픈프레임웍스 프로젝트를 컴파일할 떄에는 수백라인의 특정한 문법과 다수의 헬퍼 도구들 가져오도록 CGG에게 말해줘야합니다. 이건 엄청나게 복잡한 과정이지요.

따라서 대신, 대부분의 개발자들은 코드 프로젝트를 관리하고 생성하는데 IDEs (Integrated Development Environments)를 사용합니다. 대부분의 IDE는 텍스트 데이터, 파일관리자, 컴파일러뿐만 아니라, 컴파일 프로세스의 세부사항 및 옵션의 모든것을 커스터마이징 할 수 있는 GUI인터페이스들을 포함하고 있습니다. 몇몇 유명한 IDE로는: Xcode, 비주얼 스튜디오, CodeBlocks, Eclipse, Netbean이 있습니다. 운영체제와 언어들을 위한 IDE는 많이 있습니다. 몇몇 IDE들은 특정 언어를 위한것도 있고, 다양한 언어들을 지원하기도 합니다.

아마도 여러분은 Flash,프로세싱, VVVV, MaxMSP들로 모면할 수 있을수도 있습니다 — 대부분의 중요한 기능들이 있지요. IDE가 이런 툴들과 다른점이라면 일반적으로 비어있다는 점입니다 — IDE는 특정한 기능을 포함하지 않습니다. 언급한 도구들은, 반대로, 일반적으로 특정 목적을 위해 최적화된 다양한 기능을 내장하고 있습니다. 예를들어 Flash는 웹에서 동작하는 프로그램을 컴파일하고, 프로세싱은 빠른 프로토타이핑을 위한 도구라고 할 수 있죠.

오픈프레임웍스는 분명히 많은 기능들을 포함하고 있습니다. 오픈프레임웍스의 차이점이라면, 자신만의 IDE를 포함하고 있지 않다는 점입니다. 기술적으로, 여러분이 오픈프레임웍스 프로젝트를 생성하기 위해서 어떠한 IDE라도 사용할 수 있습니다. 하지만, 컴파일러와 붙이는 작업은 어려울 수 있습니다. 어떤 복잡한 IDE라도 프로젝트를 세팅하는것 역시 복잡하고 지루할 수 있습니다. 오픈프레임웍스에서는 주요한 3가지 플랫폼과 3종류의 다른 IDE를 위한 프로젝트 제작 탬플릿이 공을 들여 구현되어 있으므로, 여러분은 그냥 다운받아 코딩을 시작하시면 됩니다.

오픈프레임웍스를 시작하기 위해서, 여러분의 운영제제와 IDE용 파일을 다운받아 설치할 수 있습니다. 설치를 위한 가이드는 아래에서 찾을 수 있습니다:

1.2.1. Windows

1.2.2. Mac

1.2.3. Linux

1.3. What Can I Make with oF?

아래의 프로젝트 모음은 오픈프레임웍스로 제작할 수 있는 범주를 보여주기 위함입니다.

1.3.1. Puppet Parade

by Emily Gobeille and Theo Watson

Puppet Parade is an interactive installation by Emily Gobeille and Theo Watson of Design I/O that allows children to use their arms to puppeteer larger than life creatures projected on the wall in front of them. This dual interactive setup allows children to perform alongside the puppets, blurring the line between the ‘audience’ and the puppeteers and creating an endlessly playful dialogue between the children in the space and the children puppeteering the creatures.

— creativeapplications.net

More Information

1.3.2. Interactive Wall at UD

The 36-foot wall at the University of Dayton’s admission center engages prospective students and reveals videos of student life at UD. The wall displays continuously changing patterns of generative graphics, which respond to the presence of people in front of the wall.

The field of cubes is animated with waves of activity, and a viewer’s presence causes them to rotate and unveil POV videos of a student experience. The viewers can explore the videos moving around to reveal different video fragments. When viewers stand together, their silhouettes join to reveal more of the video. When no one is present in the interaction area the installation displays typographic animations overlaid on the dynamically animated graphic patterns.

For more video documentation and details of design and development process see the Case Study.

— flightphase.com

More information

1.3.3. Scramble Suit

by Arturo Castro and Kyle McDonald

One great thing about openFrameworks is that how easy to incorporate C++ code from pretty much any library. To that end, Arturo and Kyle used a Face Tracker library by Jason Saragih to create a face-replacement technique that Kyle named "Scramble Suit" inspired by fictional technology from Philip K. Dick’s 1977 novel, "A Scanner Darkly". It’s effectively a cloak that hides the identity of the wearer by making it impossible to describe or remember them.

1.4. Why openFrameworks?

오픈프레임웍스는 존재하고 있는 창의적인 코딩 프레임워크 뿐만이 아닙니다. 그렇다면 왜 여러분이 오픈프레임웍스를 사용해야(혹은 사용하지 않아야) 하나요?

곧 준비됩니다…

1.5. Additional oF Resources