Droidconbos andreas colubri processing header

모바일 앱과 센서 사용 앱, VR 앱까지 만들 수 있는 안드로이드용 Processing을 소개합니다.

Android용 Processing을 소개하고 2D, 3D 인터랙티브 그래픽을 효과적으로 프로그램할 수 있는 Processing 언어의 기초를 알려드립니다. 또한 스마트폰, 태블릿, 웨어러블, 스마트워치, 카드보드 VR 경험까지 다양한 안드로이드 기기에 이 기술을 적용하는 방법도 설명합니다. Processing은 2001년 MIT의 미디어 랩에서 예술 및 디자인 분야의 소프트웨어 활용 능력을 향상하는 프로젝트로 시작해서 현재에는 교육 및 제작 도구로 전 세계에서 널리 사용되고 있습니다. 안드로이드에 Processing을 사용하면 안드로이드 플랫폼의 구현 세부 사항보다 코드의 상호 작용과 시각적인 아웃풋에 좀 더 집중할 수 있습니다.


소개 (0:00)

저는 Andres Colubri입니다. 이번 강연에서는 제가 작업해온 프로젝트에서 어떤 내용이 추가됐는지 소개하려고 합니다. 특히 가상현실과 웨어러블에 다한 많은 기능들을 보여드릴 예정입니다.

Processing (0:23)

먼저 Processing이 무엇인지부터 말씀드리겠습니다. Processing은 아티스트와 디자이너를 위한 개발 환경이라고 할 수 있지만 이 설명만으로는 충분하지 않습니다. 좀 더 기술적으로 설명하면 다음과 같습니다.

실제적으로 Processing은 그리기를 위한 API입니다. 화면에 정말 쉽게 시각적인 아웃풋을 낼 수 있죠. 여러 다른 언어로 구현됐는데 처음에는 Java로 시작했고 이제 JavaScript와 Python 버전이 있습니다. 간단한 편집기도 함께 제공합니다.

하지만 이 설명으로도 아직 충분하지 않습니다. 저는 Processing이 커뮤니티 라고 설명하고 싶습니다. 즉, 예술과 기술을 혼합하려는 아티스트, 개발자, 학생과 과학자를 위한 커뮤니티입니다. 이 커뮤니티의 핵심 목표는 여러 다른 배경과 다른 관심사를 가진 여러 지역의 사람들을 끌어들여서 다양성을 두루 포함하는 것이죠. Processing의 핵심 원칙은 이 커뮤니티를 넓히고 다양한 관심사를 포함하는 것이라 생각합니다.

Processing의 역사 (3:39)

이번에는 Processing을 제품 아이디어를 빠르게 스케치할 수 있는 스케치북 측면으로 보여드리겠습니다. 사실 이렇게 아이디어를 스케치하고 반복한다는 것이 processing의 초기 목표였습니다. 간단하게 Processing의 역사를 설명하면 이렇습니다.

Processing 개발은 2001년에 시작됐으므로 꽤나 오랜 역사를 지니고 있습니다. 이 프로젝트는 Ben Fry와 Casey Rees가 캠브릿지 강 건너의 미디어 랩에서 시작했습니다. Design by Numbers 라는 기존 프로젝트에서 영감을 받았죠.

프로젝트 창시자들은 예술가와 디자이너에게 프로그래밍을 가르치는 교육 매체이자 프로토 타이핑 도구로 실제 자신들의 작업에 프로세싱을 사용하고자 했습니다. 따라서 프로그래밍 환경을 어떻게 사용하는지에 대한 스케치와 프로토타이핑 및 반복에 대한 아이디어를 만들면서 시각적 아웃풋을 신속하게 얻도록 구현해 나갔습니다. 그 결과 15년 동안 많은 사람들이 Processing으로 멋진 결과물을 만들어낼 수 있었습니다.

이런 개발 뉴스를 더 만나보세요

어떤 사용자는 위처럼 인상 깊은 뮤직 비디오를 만들기도 했습니다.

저는 처음 이 프로젝트에 오픈 georender 작업자로 참가하면서 이를 개선하고 더 빠르게 만들어서 사람들이 더 복잡한 그래픽을 구현할 수 있도록 노력했습니다. Processing이라는 도구를 통해 사람들이 놀라운 작업을 해내는 것을 보는 것은 정말 멋진 경험이었습니다.

정리하자면 Processing이라는 도구는 커뮤니티의 일부입니다. 2012년 설립된 재단에서는 오픈 소스 개발을 돕기 위해 많은 프로그램을 진행하고 있습니다.

안드로이드의 Processing (11:15)

이제 안드로이드를 위한 Processing 버전을 소개하겠습니다. Processing 커뮤니티에서는 안드로이드뿐만 아니라 Ruby 등 다른 자매 프로젝트도 많이 진행하고 있습니다.

안드로이드 Processing은 두 가지로 설명할 수 있습니다.

먼저 Processing API를 사용해서 안드로이드 앱을 개발할 수 있는 라이브러리가 있습니다. 다른 하나는 Processing 개발 환경에서 코드를 작성하고 디바이스나 에뮬레이터로 실행할 수 있는 Processing 환경의 익스텐션입니다.

안드로이드 Processing은 안드로이드 개발을 쉽게 시작할 수 있도록 특화돼 있습니다. 다시 말해 프로토타이핑을 수행하는 방법과 상호작용 아이디어나 시각화 아이디어를 실험하는 방법에 중점을 두고 있습니다.

한편 안드로이드를 위한 Processing은 안드로이드 스튜디오를 대체하려는 목적으로 만들어지지 않았습니다. 모든 것을 할 수 있는 만능 툴이 아니라 시각적인 스케치를 만드는 데 특화돼 있습니다. 즉, UI를 만드는 라이브러리가 아닙니다. 물론 Processing으로 UI를 만들 수 있기는 합니다.

데모 (13:27)

이런 특징을 바탕으로 Processing의 작동 방식과 시각적인 아웃풋을 어떻게 빠르게 얻을 수 있는지 간단히 보여드리겠습니다. Java, JS, Python, 안드로이드 모드가 가능한데, 여기서는 Java 모드에서 간단히 작업하겠습니다.

아래 예제의 setup과 draw 함수는 모든 Processing 프로그램이 가진 스트럭처입니다. Draw에서 간단히 타원을 그려보겠습니다.


	void setup() {
		size(800, 400);
	}

	void draw() {
		ellipse(mouseX, mouseY, 20, 20);
	}
  

결과물의 맥락을 따로 설정하지 않고도 setupdraw 함수만으로 순식간에 아주 간단한 그리기 앱을 만들 수 있습니다.

이제 안드로이드에서도 같은 코드를 만들어보겠습니다. 모드를 안드로이드로 바꾸고 여러 옵션에서 앱을 위한 권한을 설정한 다음 원하는 타입으로 선택합니다.

일반적인 액티비티와 프래그먼트 기반 앱을 만들게 될 테지만 세부 내용을 직접 볼 필요가 없습니다. 단지 아웃풋을 제대로 보여주기만 하면 됩니다. 내부적으로 안드로이드 프로젝트를 생성해서 모든 디펜던시를 포함하고 결과를 기기로 보내주기 때문에 방금 만든 코드만을 가지고 기기에서 바로 실행할 수 있습니다.

이제 Processing이 일반적으로 어떻게 동작하는지와, 방금처럼 단순한 Java 코드가 어떻게 안드로이드 모드로 변환되는지 말씀드리겠습니다.

상세한 역사 (18:23)

사실 Processing은 새로운 것을 하는 것이 아닙니다. 안드로이드를 위한 Processing 프로젝트는 Andy Ruben이 Ben Fry에게 안드로이드용 월페이퍼를 위해 Processing을 사용할 수 있는지 물으면서 시작됐습니다.

물론 안드로이드 월페이퍼를 위해 시작되긴 했지만 Processing이 그런 것만 한다고 생각하면 오산입니다. 2014년과 2015년에는 VR과 안드로이드 웨어러블이 안드로이드용 Processing에 추가됐습니다. 이처럼 Processing은 끊임없이 발전하고 있습니다.

작년까지의 안드로이드용 Processing의 개발 사항을 보면 전형적인 앱과 sensors를 위한 글래스 지원, 배포를 위한 앱 내보내기 옵션 등이 진행됐습니다. 또한 최근에는 라이브 월페이퍼도 추가됐습니다. 7년 동안의 개발을 거쳐 라이브 월페이퍼로 스케치를 내보내고 설치할 수 있게 된 것이죠.

Android 웨어와 Google VR뿐만 아니라 안드로이드 스튜디오 통합을 위해서도 노력하고 있습니다. 안드로이드용 Processing으로 프로토타이핑을 한 후 프로젝트를 내보내서 안드로이드 스튜디오에서 다른 요소를 계속 추가할 수도 있습니다.

새로 추가된 모드 (20:52)

Processing으로 무엇을 할 수 있을지 감을 잡을 수 있도록 곧 공개할 새 버전에 대해서도 말씀드리겠습니다.

일단 모드 설치 방법부터 살펴보겠습니다. Processing 개발 환경(PD)의 모드 설치 UI를 사용해서 모드를 추가합니다. 다음으로 contribution manager에서 안드로이드 모드를 선택합니다. 안드로이드 모드를 설치하면 SDK를 설치하라는 메시지가 나옵니다. 안드로이드 스튜디오에서 사용하는 SDK와 별도로 SDK를 설치해서 충돌을 피할 수 있습니다.

두 번째 데모 (21:44)

앞서 아주 간단한 예제를 보여드렸는데, 헬로 월드급으로 간단한 예제를 하나 더 보여드리겠습니다. 기본 함수인 setup와 한 색상의 사각형을 그리는 draw 함수가 보입니다. 화면의 왼쪽이나 오른쪽을 누르면 해당 영역의 색상이 변하게 됩니다.


	void setup() {
		fullScreen();
		noStroke();
		fill(0);
	}

	void draw() {
		background(204);
		if (mousePressed) {
			if (mouseX < width/2) {
				rect(0, 0, width/2, height);
			} else {
				rect(width/2, 0, width/2, height);
			}
		}
	}
  

이제 이 스케치를 SDK로 내보냅니다. 이 과정에서 키 툴을 만들어지면서 필요한 정보를 요청합니다.

입자들을 가진 멋진 영상의 라이브 월페이퍼처럼 좀 더 복잡한 예제도 생각해 볼까요? 배경에서 신기한 방식으로 상호작용하는 입자를 정의해 보겠습니다. 이 입자 시스템은 복잡한 스케치를 설명하기 좋은 예제입니다.

이런 작업은 어떤 것을 보여주고 싶은지 생각하는 것부터 시작할 수 있습니다. 반 고흐의 “별이 빛나는 밤”처럼 유체와 같은 움직임을 생각해봤습니다. 사람들이 Processing 스케치를 온라인에서 올려둔 것을 둘러 보면 많은 것을 배울 수 있습니다.

저는 실제로 코드를 작업하기 전에 종이에 미리 스케치를 해보곤 합니다. 저는 입자들을 유체처럼 움직이길 바랬는데, Daniel Shiffman의 온라인 튜토리얼이나 책은 이런 아이디어를 실제 결과로 만드는데 많은 도움을 주었습니다. 이런 경험에서 기반 커뮤니티의 힘을 느낄 수 있었습니다.

자치 시스템이라는 아이디어를 사용해서 자율적으로 움직이는 입자를 만들었습니다. 세부 움직임을 제어할 필요 없이 입자가 특정 속도로 움직이는 방법을 정의한 다음 특정 속도의 필드를 따르기만 하면 흐름을 만들어낼 수 있습니다. 이런 아이디어를 통해 입자가 필드에서 움직이는 양상을 살펴본 다음 몇 가지 스케치를 만들기 시작했습니다.

데스크탑에서 마우스로 흐름을 만드는 실험을 했습니다. 기기 상이라면 속도를 정하기 위해 터치 스크린을 사용해도 될 겁니다. 자율 시스템을 만들기 위해 목성 표면의 이미지를 사용해서 각 픽셀의 강도를 측정하고 속도 흐름을 정했습니다.

기기에 저장된 사진을 처리해서 스케치에서 읽은 다음 이를 기반으로 입자 시스템을 생성할 수 있었습니다. 물론 실제로는 이보다 더 많은 일을 할 수 있을 겁니다.

워치 예제 (28:06)

이제 워치 페이스를 만들어 보겠습니다. 스케치를 작성하는 데 사용한 API로 워치 페이스를 만들 수 있습니다. 호선을 한 번 그려볼까요?


	void setup() {
		fullscreen();
		strokeCap(ROUND);
		stroke(255);
		noFill();
	}

	void draw() {
		background(0);
		if (wearAmbient()) strokeWeight(1);
		else strokeWeight(10);
		float angle = map(millis() % 60000, 0, 60000, 0, TWO_PI);
		arc(width/2, height/2, width/2, width/2, 0, angle);
	}
  

스케치 구조는 앞서 본 예제들과 같습니다. setupdraw가 있고 워치가 ambient 모드인지 확인하는 부가적인 함수도 있습니다.

또한, 바디 센서를 활용할 수 있습니다. 아래 예제처럼 워치로 심박수를 잴 수 있는 센서에 쉽게 접근해서 심장 박동의 리듬을 따르는 타원을 만들 수 있죠.


	void draw() {
		background(0);
		translate(0, wearInsets().bottom/2);
		if (wearAmbient()) {
			fill(255);
			text(bpm + " bpm", 0, 0, width, height);
		} else {
			int period = 750;
			if (0 < bpm) period = 60000 / bpm;
			float x = (millis() % period) / 1000.0;
			float k = 1/(0.25 * (period/1000.0));
			float a = impulse(k, x);
			float r = (0.75 + 0.15 * a) * width;
			translate(width/2, height/2);
			fill(247, 47, 47);
			ellipse(0, 0, r, r);
		}
	}

	float impules(float k, float x) {
		float h = k * x;
		return h * exp(1.0 - h);
	}
  

센서에서 분당 심박수를 가져와서 코드를 통해 타원의 크기를 제어하는 코드입니다. 센서 정의에 필요한 패키지를 가져오고 삼박수에 대한 액세스 권한을 요청했습니다.

컨텍스트를 초기화하고 컨텍스트를 얻은 후 센서를 추가하고 리스너를 붙여서 그리는 아주 간단한 예제입니다.

스마트 스케치에서 시각적 출력을 생성할 수 있도록 Processing 스케치에도 같은 구조가 있습니다. 이를 활용해서 보다 정교한 일을 할 수 있죠.

예를 들어 활동 추적을 좀 더 흥미진진한 UI로 만들 수 있습니다. 나무를 키우는 것 같이 시각적으로 멋진 아웃풋을 보이면 더 매력적인 앱이 될 겁니다.

가상현실 (32:54)

많은 관심을 받고 있는 가상현실에 대해서도 말씀드리겠습니다. 가상현실 분야에서는 여러 흥미로운 작업들이 이뤄지고 있는데, 특히 Tilt Brush의 경우 공간에 그림을 그릴 수 있어서 정말 멋집니다.

또다른 프로젝트는 위 그림과 같은 헤드셋을 쓰고 박쥐나 사슴과 같은 동물들의 시야를 경험하는 것입니다. 동물이 어떻게 보는지 상상하는 데서 시작했죠.

이런 정말 새로운 매체를 사람들이 이제 막 사용하기 시작했습니다. Processing은 이런 시각적인 스케치와 실험을 쉽게 할 수 있도록 돕고 있으며, 갓 시작한 VR 매체를 확장할 수 있는 수단이 될 것이라 기대합니다.

Processing에서 VR을 사용하는 방법은 앞에서 보여드린 예제처럼 정말 쉽습니다. 전에 데스크탑 버전에서 사용한 것과 같은 Processing 기본 구조가 웨어, 월페이퍼, VR에도 모두 있습니다.


import processing.vr.*;

void setup() {
	fullScreen(PVR.STEREO);
}

void draw() {
	background(157);
	lights();
	rotateX(frameCount * 0.01f);
	rotateY(frameCount * 0.01f);
	box(500);
}

또한, 3D 스케치를 하는 것도 정말 간단합니다. 같은 코드를 단지 VR 앱에서 실행하기만 하면 됩니다. 별다른 설정을 할 필요도 없고, 단지 import processing.vr.*;를 추가한 다음, 스테레오 렌더를 사용해서 전체 화면에 이미지를 만들기만 하면 됩니다. 특별한 작업을 하지 않아도 3D Processing 튜토리얼만 따르면 내부적으로 알아서 처리해줍니다.

일반적인 3D 렌더링과 달리 위 코드에는 화면 중앙에 배치하는 내용이 없습니다. VR을 사용하면 화면 중앙에 물체들이 자동으로 정렬됩니다. 또한 Y축이 위쪽을 향한다는 점을 주의해야 합니다. 첨언하자면 VR 앱을 만들 때 가장 중요한 것은 사용자들이 움직임 때문에 어지럽지 않도록 배려하는 것입니다.

카드보드를 위한 VR 코드입니다. 스테레오 렌더가 있고 processing VR을 불러옵니다. 또한 일반 앱이나 월페이퍼 대신 VR 앱을 실행하도록 했습니다. 선택한 물체를 조준할 수 있는 코드인데, 카드보드는 컨트롤이 제한적이므로 사물을 바라보는 것으로 컨트롤하도록 했습니다.

카메라와 앞을 향하는 벡터를 가지고 포인터를 만드는 것만 빼면 다른 것은 Processing의 3D 스케치와 거의 같습니다.

정말 간단한 코드이지만 앞으로 VR로 만들 수 있는 가능성을 이해하는 데 도움이 되면 좋겠습니다.

결론 (38:42)

우리는 안드로이드 스튜디오와 Processing을 통합하고자 합니다. 예를 들어 Processing으로 시각화한 내용을 어떤 앱에 통합할 수 있습니다. 실제로 저는 생체 의학 분야에서 일하면서 이런 방식으로 건강 관련 앱을 만들고 있습니다.

위 이미지는 환자의 데이터를 입력한 의료 앱으로 데이터를 시각화하는 앱입니다. 환자의 사망률을 시각화하고 치료 옵션을 선택할 수 있습니다. 가운데 박스가 Processing으로 인터렉티브 하게 시각화 한 부분입니다. 나머지는 일반적인 데이터 입력 폼을 사용했죠.

이 앱은 현장에서 데이터를 수집하고 머신 러닝을 하는 큰 프로젝트의 일환입니다. 스케치를 안드로이드 프로젝트로 내보내고 안드로이드 스튜디오에서 나머지 부분을 만들었습니다. Processing 개발 환경에 있던 스케치가 앱 내부의 클래스로 거듭난 겁니다.

Processing 스케치를 어떻게 메인 액티비티에 포함했을까요? 위 코드처럼 스케치 객체를 만들어서 레이아웃에 넣으면 됩니다. 매우 간단하게 두 요소를 통합할 수 있습니다.

또한, 저는 Processing으로 웨어러블 스케치와 핸드 헬드 스케치를 작성하고 있습니다. Processing으로 활동을 추적하는 것처럼 정보들을 폰에서 시각화하는 앱을 만들 수 있습니다.

사실 아직까지는 두 개의 앱을 별도로 만들어서 합치고 안드로이드 스튜디오에 보내야 하기 때문에 약간 편법처럼 보이긴 합니다. Processing으로 핸드 헬드와 웨어 앱을 만들고 수동으로 그 프로젝트를 웨어 프로젝트의 모바일 폴더에 넣어야 하는 방법이죠. 그런 다음 업데이트를 해서 데이터에 다른 코드를 추가할 수 있습니다. 여기까지 하면 이 프로젝트를 안드로이드 스튜디오에서 열어서 컴파일하고 기기에 설치할 수 있습니다.

하지만 이런 방법을 사용해서 좀 더 복잡한 프로젝트를 개발 중이라도 Processing으로 시각화나 스케치한 결과물을 안드로이드 스튜디오에서 통합할 수 있습니다.

다음: Realm Java의 새로운 기능을 만나 보세요!

General link arrow white

컨텐츠에 대하여

2017년 4월에 진행한 Droidcon Boston 행사의 강연입니다. 영상 녹화와 제작, 정리 글은 Realm에서 제공하며, 주최 측의 허가 하에 이곳에서 공유합니다.

Andres Colubri

Andres Colubri는 바이오메디컬 데이터 시각화 및 모델링과 예술 및 디자인을 위한 인터랙티브 그래픽을 연구하는 연구원입니다. 아르헨티나에서 수학 박사 학위를 취득했으며 UCLA의 디자인 미디어 아트 부서에서 MFA를 취득했습니다. 코드 기반의 미술 제작에 중점을 둔 프로그래밍 언어, 환경 및 커뮤니티인 Processing 프로젝트의 멤버로, 현재 웨어러블 기기 및 VR 지원을 포함하는 안드로이드용 Processing의 새 버전을 개발하고 있습니다.

4 design patterns for a RESTless mobile integration »

close