Search Input






클래스 상세 정보


  • -
  • -
  • -
  • -



[6월작심백일]크리에이티브 코더 정효 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여가지 예제 중
일부를 소개합니다.

연습 예제

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

아트워크 예제

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

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


크리에이티브 코더 정효

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

이력 더 보기

[참여 프로젝트]
설화수 컬쳐프로젝트 캠페인 영상 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개의 인터랙티브 아트워크를 완성할 수 있습니다.

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

커리큘럼

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

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

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

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

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

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

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

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

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

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

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

  1. 3D 씬 구현을 위한 컴포넌트 3요소
  2. 일렁이는 구체 만들기
  3. Luma Blur / Displace 응용하여 효과 주기
  4. 파라미터 값에 따라 다른 느낌 주기
SECTION 02. TouchDesigner 활용하기: 3D 그래픽과 인터랙션

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

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

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

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

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

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

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

  1. Touch In Out 오퍼레이터로 통신 하기
  2. Wifi 내 다른 컴퓨터간의 통신
  3. 다양한 통신 방법에 따른 장단점 소개
SECTION 03. p5js 기초: 기본 도형으로 인터랙티브 아트웍 만들기

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

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

11. p5js : 기본 도형 그리기

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

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

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

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

  1. frameCount로 일정하게 변하는 그래픽 만들기
  2. 마우스를 따라오는 그래픽 만들기
  3. 인터랙티브 아이디어들과 좋은 인터랙션 만드는 방법
SECTION 04. p5js 심화 : 변화하는 값과 인터랙션

14. p5js : 변수와 조건문

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

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

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

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

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

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

  1. 캐릭터 얼굴 디자인하기
  2. 마우스를 따라 움직이는 모션 만들기
  3. 부분별로 범위 조절하여 입체적인 느낌 만들기
  4. 인터랙션 별로 추가적인 변화 만들기
SECTION 05. 원격제어를 활용한 인터랙티브 아트웍

18. 웹서버 구현하기

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

19. p5js로 웹앱 만들기

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

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

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

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

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

+ 더 알아보기

유의사항

[유의사항] - 상황에 따라 사전 공지 없이 할인이 조기 마감되거나 연장될 수 있습니다. - 결제 완료를 하신 분들은 좌측 상단 [나의 강의장] 클릭 시 바로 영상 시청하실 수 있습니다. 기입해주신 이메일 주소와 연락처로 결제 완료 및 수강 안내 이메일과 문자가 전송될 예정이니 연락처와 이메일을 정확하게 기입 부탁드립니다. - 콘텐츠는 향후 당사의 일정에 따라 추가 또는 업데이트 될 수 있습니다. [환불규정] 환불금액은 정가가 아닌 실제 결제금액을 기준으로 계산됩니다. 수강 시작 후 7일 이내 그리고 3강 미만 수강 시에는 100% 환불 가능합니다. 수강 시작 후 7일 이내이나 3강 이상 수강하신 경우, 또는 3강 미만 수강하셨으나 수강 시작 후 7일 초과인 경우 전액 환불 불가하고 수강 시 수강기간인 2주 (14일) 대비 잔여일에 대해 당사의 환불규정에 따라 아래와 같이 환불 가능합니다. : 환불요청일시 기준 수강시작 후 7일 초과 10일 이하 경과 시, 실 결제금액의 1/2에 해당하는 금액을 환불 : 환불요청일시 기준 수강시작 후 10일 초과 시, 환불금액 없음 : 해당 환불규정은 1:1 코칭권에도 동일하게 적용됩니다. 단, 회원이 강의와 함께 제공되는 강의자료를 다운로드하는 경우 해당 자료 또는 정보가 포함된 회차의 클래스영상을 이용한 것으로 간주합니다. *회차가 표기 되지 않은 자료는 무료로 제공됩니다. [총 학습기간] 정상 수강기간(유료 수강기간) 최초 2주(14일), 무료수강기간은 15일차 이후로 무제한이며, 수강기간과 무료수강기간 모두 동일하게 시청 가능합니다. [수강시작일] 수강 시작일은 Coloso가 수강안내를 한 날짜부터 기간이 산정됩니다. Coloso의 사정으로 수강시작이 늦어진 경우에는 해당 일정 만큼 수강 시작일이 연기됩니다. 천재지변, 폐업 등 서비스 중단이 불가피한 상황에는 서비스가 종료될 수 있습니다. 재생 시간에 관계없이, 영상이 재생된 경우 수강한 것으로 간주합니다. [1:1 코칭권 이용방법] <1:1 코칭권>을 구매한 수강생에게는 연사님이 포트폴리오와 질문사항에 피드백을 제공합니다. 본 상품은 강의 수강권 구매시 1회 구매 및 이용가능하며, 추가 구매가 불가능합니다. 이용방법 : 본인의 포트폴리오 결과물(최대 3개) 및 질문(최대 3개)을 보내주시면 21일(영업일 기준) 이내로 피드백을 제공합니다. 이용기한 : 결제일로부터 90일 이내(이 후 이용권 소멸) 제출방식 : feedback@coloso.co.kr로 [본인의 콜로소 ID / 전화번호]를 적고, [포트폴리오 파일]을 첨부해 보내주세요. * 사전 예약 고객의 이용 기한은 결제일이 아닌 영상 오픈 후 90일 이내 * 각 강의별 피드백 내용이 다를 수 있으며, 멘토링 등 일부 코칭권은 사용 방법이 상이하니, 자세한 사항은 페이지 내의 코칭권 부분을 참고해 주시기 바랍니다.
[유의사항] - 기간 선택 옵션은 구매 시점부터 선택하신 옵션에 해당하는 기간만큼 수강이 가능하며, 일시정지 및 기간 연장이 불가합니다. - 기간 선택 옵션은 평생시청 옵션으로의 전환은 불가합니다. - 평생시청 옵션으로 수강을 원할 시 판매중인 평생시청 옵션을 구매하셔야 합니다. [환불규정] - 본 이벤트성 강좌는 특별강좌에 해당하며, 특별강좌에 대해서는 별도의 취소 환불규정이 적용될 수 있습니다. - 환불 금액은 정가가 아닌 실제 결제 금액을 기준으로 계산됩니다. - 재생 시간에 관계없이, 영상이 재생된 경우 수강한 것으로 간주합니다. *기간 선택 옵션에 대한 환불 규정은 아래와 같습니다. - 회원이 강의와 함께 제공되는 자료 또는 정보를 다운로드 하는 경우 해당 영상을 이용한 것으로 간주 합니다. - 결제 후 7일 이내, 3개 미만의 강의를 수강하신 경우 전액 환불이 가능합니다. - 결제 후 7일 이내, 3개 이상의 강의를 수강하신 경우 수강한 강의 수에 해당하는 금액 공제 후 환불이 가능합니다. (% 차감) 예) 10개 중 3개를 수강하신 경우 결제 금액에서 30% 차감 후 환불 - 결제 후 7일 초과 시에는 환불이 불가합니다