크리에이티브 코더 정효 Details
소개 영상
크리에이티브 코더, 정효
“마우스, 키보드, 사운드,
웹캠 영상 등 인풋 데이터와
함숫값을 가공하는 여러 사례를
학습하여 인터랙티브의 원리에
대한 이해를 높여보세요.”
전시, 그래픽 디자인 등
활용도 높은 인터랙티브 디자인,
입문부터 완성까지!
실험적이고 역동적인 디자인으로
나의 포트폴리오에 차별화를 더하고 싶다면?
전시장, 광고, 대형 사이니지 속
실시간으로 반응하는 현란한
아트워크를 직접 제작하고 싶다면?
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>
정효
크리에이티브 코더
안녕하세요, 프리랜서
크리에이티브 코더 정효입니다.
저는 현재 문화공간 '둥지'를 운영하며,
고전적인 미디어 아트워크 스타일에서 벗어난
새로운 인터랙션 방식의 작업을 진행하고 있습니다.
실시간으로 반응하는 Web 기반 원격 퍼포먼스,
기존 인터페이스를 재해석해 캐릭터나 일러스트에
인터랙티브를 더하는 작업을 위주로 하고 있으며,
현대미술 퍼포먼스부터 미디어 아트 전시까지
다양한 예술 분야에 참여해 왔습니다.
미디어 아트, 인터랙티브 아트워크를
제작하고 싶지만 프로그래밍 언어라는 이유로
어렵게 생각하고 포기하시는 분들이 많은데요.
디자이너를 위해 코딩의 문턱을
시원하게 낮춘 이번 강의를 통해
획기적임과 동시에 무궁무진한 응용으로
효율성까지 겸비한 인터랙티브의
매력에 빠져보시길 바랍니다.
클래스 특징
어디서도 만날 수 없었던
크리에이티브 코딩 툴 입문 강의
실시간으로 움직이는 아트워크 제작을 위한 노드 방식과 커맨드 입력 방식의 코딩을 모두 배웁니다. 각 방식의 특성을 직접 비교/분석하고, 구현하고자 하는 매체에 적합한 방식을 선택할 수 있는 안목까지 길러봅니다.
데이터를 콘텐츠로!
인터랙티브 원리 및 발상법 익히기
마우스, 키보드, 사운드, 웹캠 영상 등 인풋 데이터와 함숫값을 가공하는 여러 사례를 학습하며 인터랙티브의 원리에 대한 이해를 높입니다. 이후 데이터를 콘텐츠로 스위치 하는 유연한 발상법까지 훈련해 봅니다.
30가지 미니 예제 실습으로 완성하는 5가지 인터랙티브 아트워크
입문자도 쉽게 배울 수 있도록 30여 가지의 미니 예제를 통해, 독창적인 키 아이디어가 담긴 콘텐츠를 구현하는 역량을 차근차근 강화합니다. 이 과정을 따라오다 보면, 직접 5개의 인터랙티브 아트워크를 완성할 수 있습니다.
나의 부족함을 채워주는
연사의 1:1 코칭
개인 프로젝트에 대한 평가와 QnA를
동시에 진행함으로써, 나의 실력을 몇 단계 이상
업그레이드할 수 있습니다.
– 코칭권 구매 후 개인 포트폴리오와 클래스 관련 질문 3개를 보내주시면 연사님이 직접 피드백을 해 드립니다.
– 질문 접수일 기준 2주 1회, 순차적으로 답변됩니다.
최대 영업일 기준 21일 정도 소요될 수 있으니
참고하시기 바랍니다.
* 1:1 코칭권은 클래스 + 코칭권 패키지를 구매한 분들에 한해 적용됩니다.
클래스 구성
이런 것을 배웁니다
-
TouchDesigner
- 인풋 아웃풋 개념을 통해 노드
프로그래밍 프로세스 이해하기인풋과 아웃풋의 개념으로 이루어진 노드 프로그래밍의 기본적인 프로세스를 익히고, 데이터 형태마다 연결되는 특성까지 익힙니다. -
TouchDesigner
- 2차원 영역 속 표현 스킬 체화하기0과 1 그리고 그 사이의 범위에서 원하는 양의 효과를 제어하는 법을 익히고, Luma Map을 통해 2차원 상의 영역에 이를 표현하는 법까지 배웁니다. -
TouchDesigner
- 나만의 3D 아트워크 렌더링 하기개체부터 카메라, 광원까지 3D 구현을 위한 3가지 구성 요소와 3D 그래픽과의 관계를 이해하고, 이것이 2차원으로 랜더링 된 결과물에 내가 원하던 느낌이 반영될 수 있도록 합니다.
-
p5js
- 기초 도형으로 숫자 데이터 이해하기숫자 데이터를 입력해 기본 도형을 2차원 상에서 픽셀로 구현해 보고, 이를 통해 인터랙티브 아트워크에 필요한 수치 감각을 익힙니다. -
p5js
- 값을 지정해 원하는 애니메이션 표현하기시간 또는 인풋 디바이스의 데이터 값에 따라 생기는 변화를 시각적으로 표현해 보고 이것이 인터랙티브, 애니메이션과 어떤 관계를 가지는지 이해해 봅니다. -
p5js
- 원격 통신 콘텐츠 구현부터 활용까지각각의 툴에서 원격 통신을 구현하기 위한 기능을 익히고, 이를 활용하기 위한 적절한 인터페이스와 인터랙션의 형태를 배웁니다.
- 평생 수강
- 최저가
한번 구매로, 평생 시청하세요.
12.31 (토) 가격이 인상됩니다.
조만간 가격이 인상될 예정입니다.
지금 구매하세요!
인터뷰
크리에이티브 코더 정효가
하고 싶은 이야기
평소 작업하실 때,
스스로의 강점을 무엇이라고
생각하시나요?
저는 인터랙티브 혹은 모션그래픽을 작업할 때, 그래픽과 움직임을 만들어내는 규칙을 모듈화합니다. 모듈화된 규칙은 실시간으로 변형이 가능하고 또 다른 모듈과 결합하여 사용할 수도 있습니다. 한 가지 규칙으로 여러 가지 응용물을 파생시킬 수 있기 때문에 짧은 시간에 많은 종류의 다이내믹한 결과물을 만들어 낼 수 있는 것이 작업 방식에 있어 저만의 강점이라고 생각합니다.
이번 강의에서 연사님만의
강점이 어떻게 녹아있을까요?
이번 강의는 커리큘럼 속 다양한 예제를 통해 형태, 움직임, 인터랙션을 구현하기 위한 다양한 기능 모듈들이 직접 결합해 봅니다. 모듈 간의 다양한 조합과 제어 가능한 설정값을 익혀, 다양한 스타일의 그래픽과 모션 표현법을 경험할 수 있습니다. 가량 파티클 예제에서 중력 값의 방향과 난기류 값의 크기에 따라 피어오르는 불꽃과 쏟아지는 자갈과 같은 상반된 느낌의 아트웍 표현이 모두 가능해지는 것이죠.
인터랙션 디자인의 전망에 대해
어떻게 생각하시나요?
기존 디자인 툴만으로는 실현할 수 없는 고차원적이고 비정형적인 그래픽에 대한 수요가 늘고 있습니다. 미술관부터 광고까지 인터랙티브 미디어를 쉽게 접하게 되면서 대중들도 이에 익숙해졌죠. 그렇기에 인터랙션 디자인을 프로그래밍 언어라고 심각하게 생각하여 포기하지 말고, 이번 강의를 통해 쉽게 접하여 다양한 인터랙션 아트웍을 직접 경험해 보시기 바랍니다.
사용 프로그램
안내드립니다.
본 클래스는 TouchDesigner (2021.16410 NON-COMMERCIAL) 과 p5js (1.4.0)로 진행됩니다.
원활한 수강을 위해 해당 버전의 프로그램을 별도로 설치해 주시길 바랍니다.
*TouchDesigner (2021.10330 NON-COMMERCIAL) 이후 버전으로도 수강 가능합니다.
*p5js (0.9.0) 이후 버전으로도 수강 가능합니다.
*TouchDesigner은 해상도 1280x1280px이상으로 작업하기 위해서는 별도의 구매가 필요합니다.



















