Brand: 콜로소 - 당신을 위한 실무교육 No.1. | Coloso.
Availability: InStock

소개 영상
크리에이티브 코더, 정효

“마우스, 키보드, 사운드,
웹캠 영상 등 인풋 데이터와
함숫값을 가공하는 여러 사례를
학습하여 인터랙티브의 원리에
대한 이해를 높여보세요.”

전시, 그래픽 디자인 등
활용도 높은 인터랙티브 디자인,
입문부터 완성까지!

실험적이고 역동적인 디자인으로
나의 포트폴리오에 차별화를 더하고 싶다면?
전시장, 광고, 대형 사이니지 속
실시간으로 반응하는 현란한
아트워크를 직접 제작하고 싶다면?

TouchDesigner와 p5js를 활용해 누구나
나만의 인터랙티브 콘텐츠를 완성해 보는
이번 클래스를 놓치지 마세요.

복잡해보이는 코딩이라고 겁먹지 마세요.
TouchDesigner는 텍스트 코딩과 달리
코딩 입문자도 직관적으로 해석할 수 있습니다.
또한 언리얼, 웹 등 다양한 툴과의 호환성도 뛰어나
실무 필드에서 신흥 강자로 떠오르고 있습니다.

웹사이트부터 전시, 영상, 그래픽 디자인 등
무궁무진한 활용 범위를 자랑하며,
한 번 배우면 나만의 크리에이티브를
제한 없이 적극 실현할 수 있는 인터랙티브 디자인!

지금 바로 콜로소에서 직접 경험해 보세요.

'TouchDesigner'와 'p5js'란?

노드 방식의 TouchDesigner

TouchDesigner는 실시간 대화형 멀티미디어 콘텐츠를 제작하기 위한 노드 방식의 비주얼 프로그래밍 언어로, 실무 속 타 툴과의 호환성이 좋아 최근 디자인 업계에서 각광받고 있는 툴입니다.

커맨드 입력 방식의 p5js

p5js는 웹/앱 상에서 인터랙션 콘텐츠를 구현하기 위한 커맨드 입력 방식의 JavaScript 라이브러리의 일종으로, 웹 에디터를 통해 복잡한 Html, css 과정 없이 손쉬운 조작이 가능합니다.

클래스 정보

영상 20편
강의 시간: 한 회차 당
약 30분 내외
난이도: 초·중급

사용 프로그램

Touchdesigner
*해상도 1280x1280px까지 무료

JavaScript
*p5js:무료

동영상 정보

온라인 VOD
오디오 : 한국어
자막 : 없음

클래스 혜택

연습 예제 toe 15개, url 15개
아트워크 예제 toe 3개, url 3개
*toe- TouchDesigner
프로젝트 파일
*url- p5js 프로젝트 주소

크리에이티브 코더
정효 연사의 포트폴리오

크리에이티브 코더 정효의
클래스가 특별한 이유

TouchDesigner와 p5js
방식을 한 번에 배우는
인터랙티브 아트워크 제작 클래스

트렌드를 따라가는 것이 아닌,
트렌드에 앞선 디자이너가 되고 싶다면 더 이상
인터랙티브 아트워크 제작하기를 미루지 마세요.

이번 강의에서는 정적인 디자인을 넘어
다이내믹한 아트워크를 제작하기 위해 알아야 할
노드와 커맨드 입력 방식의 코딩을 모두 만나봅니다.

인터랙티브 비주얼 콘텐츠를 제작하기 위한
각종 툴을 30여 가지의 예제를 통해 다루어보며,
나에게 맞는 툴을 직접 선택하고 표현법까지 익혀봅니다.

지금까지 외면했지만, 업계에서 경쟁력 있는
디자이너로 거듭나기 위해 꼭 알아야 할
'인터랙티브 아트워크'

국내 유일무이한 이번 강의를 통해
생생하게 경험해 보시기 바랍니다.

이번 클래스에서 다루는
30여가지 예제 중
일부를 소개합니다.

연습 예제

입문자도 충분히 따라올 수 있는 연습 예제를 통해,
인터랙티브 아트워크 제작을 위한 밑거름을 다집니다.

오퍼레이터 활용하기
Luma Blur 적용하기
Time Machine 적용하기
거울 효과 응용하기

소리에 반응하는 움직임 만들기
3D 모델로 파티클 생성하기
스탬프 구현하기
마우스 따라오는 그래픽 만들기

마우스 오버 인터렉션
눈 깜빡임 만들기
슬라이더 구현하기
문자 트레이싱

아트워크 예제

앞서 배운 미니 예제를 한 장면에 담아보며,
완성도 높은 아트워크를 제작해 봅니다.

일렁이는 거울 효과 만들기
뭉게뭉게 파티클 효과 만들기

스프레이 페인팅 효과 만들기
마우스를 바라보는 캐릭터 만들기
원격으로 제어하는 아트웍

* 위 결과물은 해당 클래스에서 직접 만들게 될 실제 예제들입니다.

크리에이티브 코더 정효

현) 프리랜서 개발자
현) 크리에이티브 코딩 문화공간 둥지 대표

이력 더 보기

[참여 프로젝트]
설화수 컬쳐프로젝트 캠페인 영상 2022
DMZ 탐험 웹게임 <이름없는 땅> 2021
컨버스 올스타 프로모션 웹사이트 2021
세계문자심포지아2017 웹사이트 2017

[전시]
김중업건축박물관 특별전시 [미디어 아키텍쳐: 김중업, 건축예술로 이어지다]
Kote 그룹전 <Continuous Flow>

[공연]
JSCONF KOREA 2020 클로징 퍼포먼스
<TRACERS 2.5> 현대미술 퍼포먼스
부천아트벙커 B39 <PRECTXE : SHOWCASE vol.2 1001 Odyssey>

Instagram

정효
크리에이티브 코더

안녕하세요, 프리랜서
크리에이티브 코더 정효입니다.

저는 현재 문화공간 '둥지'를 운영하며,
고전적인 미디어 아트워크 스타일에서 벗어난
새로운 인터랙션 방식의 작업을 진행하고 있습니다.

실시간으로 반응하는 Web 기반 원격 퍼포먼스,
기존 인터페이스를 재해석해 캐릭터나 일러스트에
인터랙티브를 더하는 작업을 위주로 하고 있으며,
현대미술 퍼포먼스부터 미디어 아트 전시까지
다양한 예술 분야에 참여해 왔습니다.

미디어 아트, 인터랙티브 아트워크를
제작하고 싶지만 프로그래밍 언어라는 이유로
어렵게 생각하고 포기하시는 분들이 많은데요.

디자이너를 위해 코딩의 문턱을
시원하게 낮춘 이번 강의를 통해
획기적임과 동시에 무궁무진한 응용으로
효율성까지 겸비한 인터랙티브의
매력에 빠져보시길 바랍니다.

클래스 특징

어디서도 만날 수 없었던
크리에이티브 코딩 툴 입문 강의

실시간으로 움직이는 아트워크 제작을 위한 노드 방식과 커맨드 입력 방식의 코딩을 모두 배웁니다. 각 방식의 특성을 직접 비교/분석하고, 구현하고자 하는 매체에 적합한 방식을 선택할 수 있는 안목까지 길러봅니다.

데이터를 콘텐츠로!
인터랙티브 원리 및 발상법 익히기

마우스, 키보드, 사운드, 웹캠 영상 등 인풋 데이터와 함숫값을 가공하는 여러 사례를 학습하며 인터랙티브의 원리에 대한 이해를 높입니다. 이후 데이터를 콘텐츠로 스위치 하는 유연한 발상법까지 훈련해 봅니다.

30가지 미니 예제 실습으로 완성하는 5가지 인터랙티브 아트워크

입문자도 쉽게 배울 수 있도록 30여 가지의 미니 예제를 통해, 독창적인 키 아이디어가 담긴 콘텐츠를 구현하는 역량을 차근차근 강화합니다. 이 과정을 따라오다 보면, 직접 5개의 인터랙티브 아트워크를 완성할 수 있습니다.

클래스 구성
이런 것을 배웁니다

TouchDesigner
- 인풋 아웃풋 개념을 통해 노드
프로그래밍 프로세스 이해하기

인풋과 아웃풋의 개념으로 이루어진 노드 프로그래밍의 기본적인 프로세스를 익히고, 데이터 형태마다 연결되는 특성까지 익힙니다.
TouchDesigner
- 2차원 영역 속 표현 스킬 체화하기

0과 1 그리고 그 사이의 범위에서 원하는 양의 효과를 제어하는 법을 익히고, Luma Map을 통해 2차원 상의 영역에 이를 표현하는 법까지 배웁니다.
TouchDesigner
- 나만의 3D 아트워크 렌더링 하기

개체부터 카메라, 광원까지 3D 구현을 위한 3가지 구성 요소와 3D 그래픽과의 관계를 이해하고, 이것이 2차원으로 랜더링 된 결과물에 내가 원하던 느낌이 반영될 수 있도록 합니다.

p5js
- 기초 도형으로 숫자 데이터 이해하기

숫자 데이터를 입력해 기본 도형을 2차원 상에서 픽셀로 구현해 보고, 이를 통해 인터랙티브 아트워크에 필요한 수치 감각을 익힙니다.
p5js
- 값을 지정해 원하는 애니메이션 표현하기

시간 또는 인풋 디바이스의 데이터 값에 따라 생기는 변화를 시각적으로 표현해 보고 이것이 인터랙티브, 애니메이션과 어떤 관계를 가지는지 이해해 봅니다.
p5js
- 원격 통신 콘텐츠 구현부터 활용까지

각각의 툴에서 원격 통신을 구현하기 위한 기능을 익히고, 이를 활용하기 위한 적절한 인터페이스와 인터랙션의 형태를 배웁니다.

커리큘럼
커리큘럼을 보여드려요

SECTION 01. TouchDesigner 시작하기: 2D 그래픽과 인터랙션

01.오리엔테이션: 인터랙티브 작업물의 다양한 표현과 매체

연사 소개와 작업 포트폴리오 소개
매체에 따른 인터랙션의 종류와 예시들
상황에 따라 적합한 툴을 선택하는 방법

02. TouchDesigner : 인터페이스와 노드 코딩

TouchDesigner UI 설명
마우스와 단축키 조작 방법
Node - 오퍼레이터와 컴포넌트 설명
Movie File In / Level / Transform 오퍼레이터 연결해 보기

03. TouchDesigner : TOP 오퍼레이터 다루기

Composite 오퍼레이터로 영상 합성해 보기
Rectangle / Circle 오퍼레이터와 Composite 오퍼레이션 옵션의 원리
Luma Map으로 영상 마스킹 하기

04. TouchDesigner : 웹캠을 활용한 인터랙션

Luma Blur 오퍼레이터와 Luma Map 활용
Displace 오퍼레이터와 Luma Map 활용
Time machine / Texture 3D 오퍼레이터와 Luma Map 활용

05. TouchDesigner : TOP 오퍼레이터 활용 아트웍 제작

3D 씬 구현을 위한 컴포넌트 3요소
일렁이는 구체 만들기
Luma Blur / Displace 응용하여 효과 주기
파라미터 값에 따라 다른 느낌 주기

SECTION 02. TouchDesigner 활용하기: 3D 그래픽과 인터랙션

06. TouchDesigner : SOP 오퍼레이터 다루기

다양한 입체도형 오퍼레이터와 정점의 개념
Geometry 적용하기
Camera / Light 다루기
Mat 오퍼레이터와 질감 표현

07. TouchDesigner : CHOP 오퍼레이터 다루기, 사운드 인풋

Speed 오퍼레이터로 변하는 값 만들기
LFO 오퍼레이터로 반복되는 값 만들기
사운드 인풋을 활용하여 그래픽에 변화 주기

08. TouchDesigner : SOP 오퍼레이터 활용 아트웍 제작

Particle 오퍼레이터 활용하기
Instancing으로 원하는 개체 복사하기
3D 모델 형상으로 생성되는 파티클 효과 만들기
파라미터 값에 따라 다른 느낌 주기

09. TouchDesigner : DAT 오퍼레이터와 통신

Touch In Out 오퍼레이터로 통신 하기
Wifi 내 다른 컴퓨터간의 통신
다양한 통신 방법에 따른 장단점 소개

SECTION 03. p5js 기초: 기본 도형으로 인터랙티브 아트웍 만들기

10. p5js : 웹에디터 인터페이스와 코딩 시작하기

p5js 소개
웹에디터 인터페이스 설명
canvas 생성과 background 함수로 배경색 칠하기, 색상 값 입력 방법

11. p5js : 기본 도형 그리기

rect / circle 함수로 사각형과 원 그리기
fill / stroke 함수로 도형에 스타일 입히기
point / line / triangle의 꼭짓점 입력과 도형 그리기
push / pop / translate를 활용해 도형들을 레이어화 하기

12. p5js : 함수 호출과 인터랙션

mouse 관련 호출 함수와 인터랙션
keyboard 관련 호출 함수와 인터랙션
draw 함수 호출을 이해하고 애니메이션 만들기
frameCount / mouseX / mouseY 시스템 변수 활용하기

13. p5js : 인터랙티브 아트웍 제작

frameCount로 일정하게 변하는 그래픽 만들기
마우스를 따라오는 그래픽 만들기
인터랙티브 아이디어들과 좋은 인터랙션 만드는 방법

SECTION 04. p5js 심화 : 변화하는 값과 인터랙션

14. p5js : 변수와 조건문

인터랙션에 따라 변하는 값 저장하기
변하는 값에 따른 그래픽 표현
조건문으로 다이내믹한 변화 만들기

15. p5js : 상태에 따라 변화하는 그래픽 만들기

상태에 따라 점층적으로 변하는 그래픽 디자인하기
최댓값 제한 주기
값 초기화를 통해 인터랙션 반복시키기

16. p5js : Vector를 활용한 복잡한 인터랙션

dist 함수를 활용한 인터랙션
Vector의 개념과 createVector 함수
Vector로 사칙연산하기
limit 매소드로 움직임 제한하기

17. p5js : 인터랙티브 아트웍 제작

캐릭터 얼굴 디자인하기
마우스를 따라 움직이는 모션 만들기
부분별로 범위 조절하여 입체적인 느낌 만들기
인터랙션 별로 추가적인 변화 만들기

SECTION 05. 원격제어를 활용한 인터랙티브 아트웍

18. 웹서버 구현하기

glitch 서비스 소개
웹페이지에 내 p5js 프로젝트 올리기
인터랙션에 따른 통신 적용하기
통신된 값으로 그래픽 변화 주기

19. p5js로 웹앱 만들기

버튼 구현하기
슬라이더 구현하기
컨트롤러로 p5js 프로젝트와 인터랙션 하기

20. p5js 모바일 웹앱을 활용한 TouchDesigner 제어

TouchDesigner 아트웍에 socket.io 오퍼레이터 연결하기
파라미터에 따라 다른 인터랙션 적용하기
원격 인터랙션 아이디어와 사례들 소개

인터뷰
크리에이티브 코더 정효가
하고 싶은 이야기

Question. 01
평소 작업하실 때,
스스로의 강점을 무엇이라고
생각하시나요?

저는 인터랙티브 혹은 모션그래픽을 작업할 때, 그래픽과 움직임을 만들어내는 규칙을 모듈화합니다. 모듈화된 규칙은 실시간으로 변형이 가능하고 또 다른 모듈과 결합하여 사용할 수도 있습니다. 한 가지 규칙으로 여러 가지 응용물을 파생시킬 수 있기 때문에 짧은 시간에 많은 종류의 다이내믹한 결과물을 만들어 낼 수 있는 것이 작업 방식에 있어 저만의 강점이라고 생각합니다.

Question. 02
이번 강의에서 연사님만의
강점이 어떻게 녹아있을까요?

이번 강의는 커리큘럼 속 다양한 예제를 통해 형태, 움직임, 인터랙션을 구현하기 위한 다양한 기능 모듈들이 직접 결합해 봅니다. 모듈 간의 다양한 조합과 제어 가능한 설정값을 익혀, 다양한 스타일의 그래픽과 모션 표현법을 경험할 수 있습니다. 가량 파티클 예제에서 중력 값의 방향과 난기류 값의 크기에 따라 피어오르는 불꽃과 쏟아지는 자갈과 같은 상반된 느낌의 아트웍 표현이 모두 가능해지는 것이죠.

Question. 03
인터랙션 디자인의 전망에 대해
어떻게 생각하시나요?

기존 디자인 툴만으로는 실현할 수 없는 고차원적이고 비정형적인 그래픽에 대한 수요가 늘고 있습니다. 미술관부터 광고까지 인터랙티브 미디어를 쉽게 접하게 되면서 대중들도 이에 익숙해졌죠. 그렇기에 인터랙션 디자인을 프로그래밍 언어라고 심각하게 생각하여 포기하지 말고, 이번 강의를 통해 쉽게 접하여 다양한 인터랙션 아트웍을 직접 경험해 보시기 바랍니다.

사용 프로그램
안내드립니다.

본 클래스는 TouchDesigner (2021.16410 NON-COMMERCIAL) 과 p5js (1.4.0)로 진행됩니다.
원활한 수강을 위해 해당 버전의 프로그램을 별도로 설치해 주시길 바랍니다.

*TouchDesigner (2021.10330 NON-COMMERCIAL) 이후 버전으로도 수강 가능합니다.
*p5js (0.9.0) 이후 버전으로도 수강 가능합니다.
*TouchDesigner은 해상도 1280x1280px이상으로 작업하기 위해서는 별도의 구매가 필요합니다.

추천 클래스
당신이 놓치지 말아야 할
추천 클래스

Q. 한 계정으로 클래스를 구매해
지인과 함께 나눠 수강해도 될까요?

Coloso는, 구매된 클래스영상을 구매자 한 사람에게만 제공하는 것을 원칙으로 하고 있으며, 이를 어길 시 법적으로 책임을 물을 수 있습니다.
클래스 수강 중 다중사용으로 적발되면 계정이 자동 차단되며 영구적으로 사용 제한이 될 수 있으니 각별히 유의 바랍니다.

+ 더 알아보기

Search Input