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

소개 영상
미디어 아티스트, 최건혁

“개발자와 협업하는 디자이너에서 탈피해
자유롭게 시각물을 표현하는 방법,
코딩 기반의 3D 인터랙티브 디자인을
완성하고 싶다면 지금 바로 주목하세요!”

그래픽 디자이너의
성장을 돕는 맞춤형
인터랙티브 코딩 클래스

정적인 그래픽 디자인을 넘어
시각 표현 능력을 확장시키는
3D 인터랙티브 디자인 콘텐츠에
도전하고 싶으신가요?

무료 강의로 충족되지 않았던
다양하고 실험적인 인터랙티브 실습,
콜로소에서 한 번에 해소하세요!

이번 클래스에서는
총 25가지의 예제를 제작해보며
가벼운 구현을 넘어 코딩을 기반으로 한,
보다 탄탄한 인터랙티브 아트워크를
만들어볼 수 있습니다.

전문 미디어 아티스트 최건혁의
인터랙티브 디자인 노하우를
지금 바로 공개합니다.

클래스 정보

영상 29회
강의 시간: 한 회차당
약 45분 내외
난이도: 초중급

사용 프로그램

- P5.js Web Editor (무료)
- Codesandbox (무료)
- Colab (무료)
- Adobe Illustrator
- 블렌더

동영상 정보

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

클래스 혜택

- 강의 PDF 자료
- 예제 코드 링크
(P5.js web editor 혹은
Codesandbox 혹은 Colab)
- 직접 제작한 svg / glb 파일

다채로운 인터랙션이
돋보이는 미디어 아티스트
최건혁의 포트폴리오

미디어 아티스트 최건혁의
클래스가 특별한 이유

P5.js, Three.js에 더해
셰이더 코딩까지 다루는
3D 인터랙티브 아트 강의

인터랙티브 디자인에 대한 니즈는 있지만
국내 자료 및 튜토리얼이 부족해
갈증을 겪었던 디자이너분들을 위해

*JavaScript, *GLSL, *Python 등
다양한 언어와 *P5.js, *Three.js,
*Colab, *CodeSandBox, *ModernGL과 같은
라이브러리 및 에디터를 활용한
코딩 학습을 도와드립니다.

셰이더 코딩을 다루는
콜로소 최초의 인터랙티브 강의로
고착화된 웹 및 그래픽을 넘어
2D와 3D를 아우르는 차별화된
그래픽을 완성해보세요!

툴 및 용어 개념 설명

<프로그래밍 언어>
*JavaScript : 웹의 동작을 구현하는 프로그래밍 언어. 강의에서는 이를 주로 그림을 그리기 위해 활용한다.
*GLSL : 셰이더 프로그램을 작성하기 위해 사용되는 언어.
*Python : 웹 애플리케이션, 소프트웨어 개발, 데이터 과학, 기계 학습(ML)에 널리 사용되는 프로그래밍 언어.

<라이브러리>
*P5.js : 웹에서 크리에이티브 코딩을 위해 사용되는 자바스크립트 라이브러리. 캔버스에 그림을 그리기 위해 특화되어 있으며, 다양한 레벨의 창작자들의 접근성을 위해 쉽고 간결한 구조를 가지고 있다.
*Three.js : 웹 캔버스에 그려지는 3D 컴퓨터 그래픽 제작에 사용되는 자바스크립트 라이브러리. 주로 웹에서의 게임 개발을 위해 만들어진 라이브러리다.
*ModernGL : 컴퓨터 그래픽 렌더링, GPU 컴퓨팅을 위해 사용되는 OpenGL의 파이선 래퍼. OpenGL보다 더 코드를 짧고 간결하게 쓸 수 있다는 장점이 있다.

<코드 에디터>
*P5.js Web Editor : P5js를 사용해 코드를 작성하고 실행할 수 있는 웹브라우저 기반 코드 에디터.
*CodeSandBox : VSCode 같은 개발 프로그램을 설치하지 않아도 웹브라우저에서 바로 웹 개발을 위한 코드를 작성할 수 있는 온라인 코드 에디터.
*Google Colaboratory : 브라우저에서 Python으로 코드를 작성하고, 코드를 클라우드 컴퓨팅으로 실행할 수 있도록 도와주는 웹에디터. 주로 머신러닝 관련된 분야에서 많이 활용되고 있다.

<개념>
*WebGL : 웹에서 컴퓨터 그래픽을 그리기 위해 사용되는 라이브러리. 강의에서는 이것을 직접 다루지 않고, 다른 라이브러리를 통해서 다룬다.
*OpenGL : 컴퓨터 그래픽을 그리기 위해 사용되는 라이브러리. 강의에서는 이것을 직접 다루지 않고, 다른 라이브러리를 통해서 다룬다.
*셰이더 프로그램 : 컴퓨터 그래픽스에서 다양한 그림을 빠르게 그릴 수 있도록 최적화된 프로그램. 버텍스 셰이더 (정점 셰이더라고 번역하는 경우가 있다) 프래그먼트 셰이더가 대표적인 구성요소다. 셰이더 프로그램은 개발 환경에 따라 OpenGL, WebGL 등의 라이브러리를 활용해 다룰 수 있다.
*버텍스 셰이더 : 컴퓨터 화면에 어떤 기하형태가 그려질지 정의해주는 프로그램이다.
*프래그먼트 셰이더 : 버텍스 셰이더에서 정보를 받아, 최종적으로 컴퓨터 화면의 픽셀에 어떤 색상이 그려질지 결정하는 프로그램이다.
*프레임 버퍼 : 컴퓨터 화면에 바로 그림을 그리지 않고, 그림을 잠시 컴퓨터에 저장한다. 이는 후에 그대로 화면에 그려지거나 다른 그림을 그리기 위한 정보로 활용되곤 한다.
*캔버스 : 웹 환경에서 이미지를 그리기 위해 많이 활용되는 요소. 글자 그대로 웹에서 그림을 그릴 수 있는 도화지이다.

총 25가지 제너레이티브,
인터랙티브 아트워크를
제작해봅니다.

Section 01. P5.js
P5.js를 활용해 총 5가지의 인터랙티브 아트워크를 실습합니다.

그라데이션과 퍼지는 효과
곡선으로 그리는 깃털 구조
곡선으로 그리는 뿌리 구조
셰이더 그라데이션
마우스 포인터 주변이 왜곡되는 이미지

Section 02. Three.js
Three.js를 활용해 총 17가지의 인터랙티브 아트워크를 실습합니다.

벡터 이미지로 만드는 3D 심볼
웹에서 적용한 3D 모델
애니메이션을 적용한 3D 모델
3D 모델 재질에 셰이더 추가하기
셰이더로 그리는 직사각형 그리드 패턴
그리드 패턴의 각 칸에 각기 다른 색 칠하기

셰이더로 메타볼 그리기
백버퍼를 활용한 텍스처 피드백
노이즈 함수를 활용한 복잡한 질감 표현
공간의 반사가 드러나는 만화경
셰이더로 그리는 기본 2D 도형

백버퍼 활용하기
수렴/발산하는 이미지
웹캠을 활용한 만화경 거울
셰이더로 복잡한 2D 그리기 1
셰이더로 복잡한 2D 그리기 2

Section 03. Colab / ModernGL
Colab을 활용해 셰이더로 1가지의 아트워크와 2가지의 영상을 제작해 봅니다.

코랩으로 공부하는 파이썬 기초 문법
파이썬/셰이더 합동 사용 환경 구축
셰이더로 그려진 그림 내보내기
여러 개의 패스로 그려진 그림 내보내기

최건혁
미디어 아티스트

안녕하세요.
뉴미디어, 인터랙티브 미디어,
제너러티브 아트, 크리에이티브 코딩 등의
이름으로 불리는 시각예술 분야에서
활동하고 있는 최건혁 입니다.

회화의 도구로 활용되는 코딩,
그리고 자율적으로 생성되는 회화에
관심을 가지고 작업하고 있습니다.

그래픽 디자이너 대다수가 개발 베이스의
실무자와 소통하는 것에 어려움을 느끼고,
본인 대신 코딩해줄 사람을 찾고 있는데요.

코딩으로 자신의 작업을 확장하고 싶은
그래픽 디자이너 또는 코딩 기반으로
이미지를 창작하는 시각 예술가분들이
어려움을 해결할 수 있는 실마리를 얻었으면 합니다.

최건혁

현) 프리랜서 개발자, 디자이너
전) 크리에이티브 코딩 문화공간 둥지 강사

이력 더보기

전) 1-2-3-4-5 스튜디오 개발자, 디자이너
전) 랜덤웍스 비주얼 R&D 2021~2022

[참여 프로젝트]
2022 타이포잔치 사이사이, 문장부호 이어부르기, 2022
누누 웹사이트, 2022
Keebon Commerce 웹사이트, 2022
현대백화점 해피니스 산스 웹사이트, 2022
SWNA 리버럴 오피스 웹사이트, 2021
MMCA 미술로, 세계로 키오스크, 2021
Peaches 웹사이트, 2021
D8NE 웹사이트, 2021
컨버스 올스타 프로모션 웹사이트, 2021

[전시]
연장된 조각 개인전, Platz2, 2022
지렁이, 2022
빨간망토, 대전 신세계 갤러리, 2021
아파토피아, DDP 오픈 큐레이팅, 2020
여백공포증, 2019

Instagram

클래스 특징

총 25개의 예제로 하루에 하나씩!
한 달 만에 배우는 크리에이티브 코딩

누구나 만들 수 있는 간단한 아트워크부터 복잡한 아트워크까지 난이도 별로 차근차근 배울 수 있는 체계적인 커리큘럼을 준비했어요! 총 25개의 예제로 크리에이티브 코딩을 학습해보세요.

P5.js와 Three.js, Shader까지
3D 인터랙티브 올인원 학습 코스

따로따로 찾아 배우기 귀찮은 분들을 위해 JavaScript, GLSL, Python 등의 다양한 프로그래밍 언어와 P5.js, Three.js, Colab, CodeSandBox, ModernGL과 같은 라이브러리 및 에디터를 단 하나의 강의에서 모두 알려드립니다.

코드만으로 표현의 형태를 자유롭게
확장하는 제너레이티브 아트워크

기초 도형을 활용한 2D, 그라데이션, 곡선, 왜곡, 그리드 패턴, 노이즈 함수, 만화경, 메타볼 등 코드의 문법과 논리 및 수학 공식을 활용해 자율적으로 이미지를 생성하는 제너러티브 아트 장르를 경험해볼 수 있습니다.

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

자바스크립트와 캔버스를 활용해
그리는 방법

웹에서 코드를 활용해 그림을 그린다면 빼먹을 수 없는 캔버스 엘리먼트에 P5.js, Three.js 와 같은 라이브러리를 활용하여 그림을 그려봅니다.
벡터 그래픽에서
3D 로고를 제작하는 방법

어도비 일러스트레이터 혹은 유사 프로그램으로 벡터그래픽을 제작해보고, 내보낸 svg 파일을 바탕으로 블렌더를 활용해 간단한 3D 로고를 제작해봅니다.
기하 형태의 재질로
셰이더를 사용하는 방법

셰이더로 입체의 형태와 표면의 특성을 조작해보고, 이를 통해 셰이더의 여러 활용법 중 텍스처와 기하 형태의 좌표를 조작하는 기능을 터득합니다.

포스트 프로세싱 효과로
셰이더를 사용하는 방법

그려진 이미지를 한 차례 더 가공하는 포스트 프로세싱 효과를 터득한 뒤, 이전 프레임을 유지하는 백버퍼와 각 픽셀을 조작하는 셰이더가 만났을 때 어떤 표현이 가능한지 실험해 봅니다.
그림을 그리는 도구로
셰이더를 사용하는 방법

셰이더를 보조 수단이 아닌 그림을 그리기 위한 주요 수단으로 활용하고, 픽셀마다 색을 지정해주는 방식의 그리기가 어떤 사고의 변화를 요구하는지 이해해봅니다.
클라우드 컴퓨팅으로
영상 만들어보기

인쇄 목적의 커다란 낱장 이미지나 영상 제작을 목적으로 셰이더를 활용할 경우를 대비하여 구글 코랩을 이용해 부담 없이 렌더하는 간단한 방법을 알아봅니다.

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

SECTION 01. 웹에서 셰이더 활용 기초 - P5.js

01. 오리엔테이션

미디어 아티스트 최건혁
코딩으로 그림을 그린다는 것 / 코딩으로 그림을 그리는 사람들
이 강의에서 주로 다루는 셰이더란?
공부 레퍼런스 소개
강의 순서 소개

02. P5.js : 간단한 도형 그려보기

기본도형
커스텀 도형 그려보기

*미니예제 실습

03. P5.js : 깃털 그려보기

반복문 활용해서 그림 그려보기
노이즈 함수 사용해서 형태 변주해보기

*미니예제 실습

04. P5.js : 뿌리같은 구조 그려보기

자바스크립트 클래스
재귀적으로 반복되는 규칙

*미니예제 실습

05. P5.js / Shader : 셰이더 시작해보기

일단 같이 해봐요 / 셰이더 코드 써보기
픽셀 좌표란?
간단한 그라데이션 그려보기

*미니예제 실습

06. P5.js / Shader : 간단한 도형을 그리고 셰이더로 가공해보기

P5 CreateGraphics 활용 / 간단한 도형 그리기
마우스 주변 이미지 왜곡해보기
P5.js에서만 셰이더를 사용하면 아쉬운 이유

*미니예제 실습

SECTION 02. 웹에서 셰이더 활용 기초 - Three.js

07. CodeSandbox 소개

CodeSandbox 소개 크롬 개발자 도구 소개 셰이더 작업을 위한 환경 소개

08. 벡터 그래픽에서 3D 심볼 제작

Adobe Illustrator 로 몇가지 간단한 벡터그래픽 그리고, svg로 내보내기
Blender로 svg 불러오고, 간단한 3D 로고 만들어보기
glb 확장자로 내보내기

*미니예제 실습

09. Three.js : GLTF 3D 모델 로딩

Threejs의 GLTFLoader 클래스로 모델 로드하기
Threejs OrbitControl 클래스 활용해서 모델 확인해보기
간단한 재질(환경맵) 적용해보기
간단한 빛, 그림자 적용해보기

*미니예제 실습

10. Three.js : 간단한 3D씬 그려보기

반복문 활용하여 이전에 만든 3D 로고 주변에 몇가지 기하형태 배치해보기
간단한 애니메이션 적용해보기
오디오에 반응하게 만들어보기

*미니예제 실습

11. Three.js / Shader : 3D 모델의 재질에 셰이더 적용해보기

Three.js ShaderMaterial 활용해서 그려보기

*미니예제 실습

12. Three.js / Shader : 프레임버퍼 셰이더를 활용하기 위한 환경 구축

프레임버퍼에 대하여
Three.js WebGLRenderTarget 활용해서 프레임버퍼에 그릴 수 있는 환경 구축 및 클래스로 정리

*미니예제 실습

13. Three.js / Shader : 픽셀좌표와 체커보드 그리기

픽셀좌표에 관하여 / 픽셀좌표를 이용한 그리기에 관하여
앞으로 진행해볼 셰이더를 활용한 그리기 소개
픽셀좌표의 왜곡에 관하여
픽셀좌표의 왜곡으로 만들 수 있는 다양한 종류의 반복

*미니예제 실습

14. Three.js / Shader : 그리드를 나누고, 각 그리드에 다양한 색 채워보기

유사난수생성 함수에 관하여
유사난수생성 함수와 픽셀좌표 왜곡을 이용해서 그리기

*미니예제 실습

15. Three.js / Shader : 노이즈를 활용해 복잡한 질감 그려보기

노이즈 함수의 특성 이해 / 노이즈 함수란 무엇일까요?
노이즈 함수 시각화
도메인 워핑

*미니예제 실습

16. Three.js / Shader : 만화경 그려보기

공간의 반사 / 반복이 일어나는 원리
회전시켜보기 - 선형변환

*미니예제 실습

17. Three.js / Shader : 웹캠 활용해서 만화경 거울 만들어보기

사용 가능한 카메라 기기 확인
셰이더로 카메라 인풋 가져오기
카메라 인풋 왜곡해보기
만화경 거울 만들어보기

*메인예제 실습

18. Three.js / Shader : 간단한 2D 그림 그리기

이니고의 2D SDF 도형들
도형을 조합해서 그리는 여러가지 방법들 min, max, smin 등

*미니예제 실습

19. Three.js / Shader : 메타볼 그려보기

메타볼은 무엇일까요?
위키피디아에 묘사된 공식 적용해서 그려보기
2D SDF 활용해서 그려보기

*미니예제 실습

20. Three.js / Shader : 복잡한 2D 그림 그려보기 1

간단한 그림 그려보기
반복되는 공간

*메인예제 실습

21. Three.js / Shader : 복잡한 2D 그림 그려보기 2

간단한 그림 그려보기
반복되는 공간 / 겹치는 공간

*메인예제 실습

22. Three.js / Shader : 모션블러 만들어보기

백버퍼의 개념
백버퍼 활용한 작업을 위한 환경 구축
백버퍼를 활용해서 간단한 모션블러 만들어보기
3D로고로 만든 3D씬에 적용해보기

*미니예제 실습

23. Three.js / Shader : 백버퍼를 활용한 텍스처 어드벡션

어드벡션이란? / 이 개념을 이해하면 어떤 작업이 가능해질까요?
노이즈 함수를 활용한 어드벡션

*미니예제 실습

24. Three.js / Shader : 텍스처 어드벡션 다양하게 활용해보기

발산 / 수축하는 이미지
3D로고와 같이 사용해보기

*메인예제 실습

SECTION 03. 코랩 활용해서 셰이더로 영상 만들어보기 - Colab / ModernGL

25. Colab : 코랩과 파이썬, 그리고 영상

코랩 소개 / 파이썬 소개
코랩으로 영상 만들기의 장점
코랩으로 OpenGL을 사용하려 할때 생기는 문제 / 극복 방법

26. Colab : 코랩 경험해보기

조건문 / 반복문 / 함수 / 클래스 등 간략하게 문법 살펴보기
구글드라이브 마운트
PIL로 이미지 로드해보기

*미니예제 실습

27. Colab / Shader : 코랩에서 셰이더로 그리기 1

ModernGL 설치
셰이더 프로그램으로 프레임버퍼 업데이트할 수 있는 환경구축
셰이더 프로그램으로 이미지 만들어보기
PIL로 낱장 이미지로 결과 확인
MoviePy로 쉐이더로 그려지는 이미지 영상으로 만들어보기

*미니예제 실습

28. Colab / Shader : 코랩에서 셰이더로 그리기 2

코랩에서 ModernGL 활용하여 인풋 이미지 사용할 수 있는 환경 구축
여러개의 패스를 활용한 그리기

*미니예제 실습

29. 마무리

공부를 지속하는 것에 관하여
셰이더 코드와 프레임 버퍼로 그리는 3D
파티클 시뮬레이션 GPGPU?
유체 시뮬레이션
반복하고 변주하는 것에 관하여
공부해볼만한 추가 레퍼런스 / 도구 / 주제들 살펴보기

인터뷰
미디어 아티스트 최건혁이
전하고 싶은 이야기

Question.01
이번 강의의 기획 의도와
차별화 포인트는 무엇인가요?

단순히 기술 구현이 아닌, 그림을 그리기 위한 수단으로 코딩을 활용할 수 있는 방법을 제시하고자 합니다. 따라서 어떤 완성된 웹을 디자인하거나 개발하는 것보다는, 웹에서 사용 가능한 캔버스 엘리먼트에 어떤 방식으로 그림을 그릴 수 있는지에 초점이 맞춰져 있습니다. 그렇기 때문에 거의 매 강의마다 2~3가지 이상의 작은 결과물을 쌓아 올리며 학습의 추진력에 박차를 가할 수 있습니다.

Question.02
강의를 통해 수강생들은
어떤 것을 얻어갈 수 있을까요?

셰이더 코드를 활용해 더욱 독특한 웹페이지를 제작할 수 있습니다. 또한, Javascript, GLSL, Python 등의 다양한 언어와 P5.js, Three.js, ModernGL 과 같은 다양한 라이브러리를 활용해, 비단 웹뿐만 아니라 컴퓨터 그래픽스 전반에서 코딩을 활용해 이미지를 창작하는 능력을 기를 수 있습니다.

Question.03
수강생 및 후배 디자이너분들께
하고 싶은 말은 무엇인가요?

디자인과 개발을 분리해 접근하는 전통적인 생태계에서, 코딩 기반의 창작자가 자신의 자리를 찾는 것은 쉬운 일이 아닐 것으로 생각됩니다. 반대로, 그래픽 디자이너가 코딩에 어느 정도 숙달되고 이를 자신의 현업에 활용하기 시작할 때 사실상 개발자로 협업하는 경우가 많습니다. 이번 강의를 통해 코딩 기반 창작 능력을 기르고 커리어에 대한 고민을 해결했으면 좋겠습니다.

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

본 강의는 하단의 프로그램들로 진행되며,
원활한 수강을 위해 최신 버전의 해당 프로그램을 별도로 구매 및 설치해주시길 바랍니다.

- P5.js Web Editor (무료)
- Codesandbox (무료)
- Colab (무료)
- Adobe Illustrator 또는 svg 확장자로 내보내기 가능한 모든 소프트웨어
- 블렌더 또는 glb 확장자로 내보내기 가능한 모든 3D 모델링 소프트웨어

*프로그램 및 준비물은 별도로 제공하지 않습니다.

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

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

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

+ 더 알아보기

Search Input