제너러티브 아트
정해진 규칙에 따라 형태와 움직임이 만들어지는 예술.
“선들이 가까워지면 휘어지고, 멀어지면 다시 펴지게 해줘.”
DECK · CREATIVE CODING STARTER KIT
코드로 만드는
첫 미디어 아트
원하는 화면을 말하고, 짧게 만들어보고, 움직임을 다듬어보세요.
처음 시작하는 사람을 위한 용어와 도구, 복사해서 쓰는 프롬프트 6개.
- 01아이디어 고르기1번으로 소재와 생성 규칙을 정합니다.
- 02짧은 시안 만들기2~4번 중 원하는 방식 하나를 고릅니다.
- 03비교하며 다듬기6번으로 좋은 부분을 유지하며 수정합니다.
참고할 코드를 찾을 때는 5번을 사용하세요. 대괄호 [ ] 안의 예시는 원하는 내용으로 바꾸고, 음악 반응 작품에는 음악 파일을 첨부하세요.
화면을 설명하는 단어
이름보다 뜻을 먼저
미디어 아트는 영상·소리·빛 같은 매체를 사용하는 예술입니다. 제너러티브 아트는 정한 규칙에 따라 형태와 움직임을 만드는 방식이며, 코드는 그 규칙을 구현하는 도구입니다.
파티클
점·먼지·모래·빛처럼 화면을 구성하는 작은 입자.
“입자들이 모여 큰 띠를 만들고 가장자리부터 흩어지게 해줘.”
흐름장
위치마다 다른 방향과 세기로 입자나 선을 움직이는 흐름.
“여러 방향의 흐름이 만나 작은 소용돌이를 만들게 해줘.”
재질감·물성
무엇으로 만들어진 것처럼 보이고 움직이는지.
“얇은 비단처럼 빛을 반사하고 당겨진 부분에 주름이 생기게 해줘.”
구성·밀도·깊이감
요소의 배치, 화면을 채우는 정도, 앞뒤 공간의 느낌.
“화면은 풍성하게 채우고 큰 형태와 작은 디테일에 차이를 줘.”
오디오 리액티브
실제 소리의 크기나 음역에 반응하는 움직임.
“저음에는 큰 형태가, 고음에는 작은 주름이 반응하게 해줘.”
심리스 루프
영상의 끝과 시작이 자연스럽게 이어지는 반복.
“마지막과 첫 장면의 위치·방향·속도가 자연스럽게 이어지게 해줘.”
어떤 도구로 만들까요?
공식 사이트로 연결
라이브러리는 그림·움직임·소리 기능이 들어 있는 코드 도구상자입니다. p5.js 또는 Three.js로 시작하고, 필요한 기능에 따라 보조 도구를 더하세요.
복사해서 시작하기
코딩 AI에 붙여넣기
도구+소재+생성 규칙+재질+움직임+화면 구성+결과물
01처음 시작할 때아이디어부터 정하기
도구와 소재를 함께 고르는 기획용 프롬프트.
나는 코딩과 미디어 아트를 처음 배우는 사람이야. 코드로 형태와 움직임을 만드는 제너러티브 아트를 제작하고 싶어. 내가 관심 있는 소재나 느낌은 [실, 빛, 유리, 도시, 연결, 긴장 등]이야. 초보자가 시작할 수 있는 아이디어 3개를 제안해줘. 각각 다음 내용을 쉬운 말로 설명해줘. 1. 화면에서 실제로 무엇이 보이는지 2. 어떤 규칙으로 움직이고 변하는지 3. 어떤 재질과 색이 어울리는지 4. p5.js와 Three.js 중 어떤 도구가 적합한지 5. 먼저 만들어볼 짧은 시안에는 무엇을 담을지 색과 분위기에 더해 형태가 하는 행동을 구체적으로 설명해줘. 지금은 기획만 정리해줘.
02p5.js · 2D빛 입자로 첫 작품 만들기
작은 입자가 모이고 흩어지는 흐름을 만들어봅니다.
p5.js로 브라우저에서 볼 수 있는 제너러티브 아트를 만들어줘. 나는 초보자이므로 실행 방법도 순서대로 알려줘. 작은 빛 입자들이 여러 방향으로 흐르다가, 가까워지는 곳에서는 굵은 띠를 만들고 다시 흩어지게 해줘. 흐름장을 이용해 일부에는 작은 소용돌이가 생기게 해줘. 입자의 크기와 밝기에 차이를 줘서 깊이감이 느껴지게 하고, 화면은 풍성하게 채우되 큰 흐름이 알아보기 쉽게 보여야 해. 움직임은 바로 알아볼 수 있을 만큼 분명하게, 급격한 점멸이나 빠른 화면 전환 없이 이어지게 해줘. 먼저 10~15초 정도 관찰할 수 있는 시안을 만들어줘. 입자 수·속도·색을 조절하는 기능도 넣어줘.
03Three.js · 3D금속 리본으로 입체 만들기
빛과 재질, 서로 다른 움직임으로 공간감을 만듭니다.
Three.js로 여러 개의 금속 리본이 움직이는 3D 미디어 아트를 만들어줘. 리본들이 서로 가까워지고 벌어지며 꼬였다 풀리는 규칙을 사용해줘. 크기가 큰 리본과 작은 리본을 섞고, 각각 다른 타이밍과 방향으로 움직이게 해줘. 비스듬한 조명으로 금속의 반사와 굴곡이 드러나게 해줘. 카메라는 고정하고, 형태 자체의 움직임으로 변화를 보여줘. 화면 전체가 동시에 위아래로 뛰는 동작은 피하고 싶어. 필요하면 GSAP으로 움직임의 순서와 가속·감속을 조절해줘. 먼저 짧은 시안을 만들고, 속도와 재질을 바꾸는 방법도 알려줘.
04Three.js · 사운드음악에 반응하는 천 만들기
음악 파일을 첨부한 뒤 사용하세요.
첨부한 음악에 실제로 반응하는 미디어 아트를 만들어줘. 화면은 Three.js로 구현하고, 소리 처리는 필요한 도구를 선택해줘. Tone.js를 사용한다면 어떤 역할을 맡기는지도 설명해줘. 화면에는 얇은 천처럼 보이는 표면이 있고, 음악에 따라 봉우리·깊은 골·작은 주름이 움직이면 좋겠어. 저음에는 넓은 굴곡이 이동하고, 고음에는 작은 주름이 반응하도록 연결해줘. 회백색 재질과 비스듬한 빛으로 형태가 명암으로 드러나게 해줘. 음악의 실제 분석값이 움직임에 연결되어야 해. 음악을 멈추거나 다른 음악을 넣었을 때 반응 차이도 확인해줘. 시작·정지·음량 조절 기능을 넣고, 변화가 잘 드러나는 짧은 구간부터 보여줘.
05레퍼런스 조사좋은 공개 코드 찾아보기
기존 구현을 비교하고 작품에 활용할 방법을 찾습니다.
[만들고 싶은 화면이나 움직임]을 구현한 공개 코드를 찾아줘. GitHub나 CodePen에서 실제로 작동하는 코드와 데모 3개를 찾아, 각각 다음 내용을 초보자에게 설명해줘. - 어떤 화면과 움직임을 만들 수 있는지 - 사용하는 라이브러리가 무엇인지 - 내가 쉽게 바꿀 수 있는 부분이 무엇인지 - 구현의 한계와 재사용 가능한 라이선스인지 그중 하나를 바탕으로 나만의 작품으로 발전시킬 방향 2개를 제안해줘. 참고하는 기술과 새로 만드는 형태·움직임을 구분해서 설명해줘. 아직 코드를 적용하지 말고 비교부터 해줘.
06비교와 마무리결과를 보고 수정·완성하기
좋았던 부분을 유지하며 짧은 구간으로 비교합니다.
현재 작품에서 마음에 드는 부분은 [재질, 색, 구도 등]이고, 아쉬운 부분은 [움직임이 약함, 너무 복잡함, 형태가 안 보임 등]이야. 좋은 부분은 유지하면서 아쉬운 부분을 수정해줘. - 무엇이 움직이고 변하는지 짧게 봐도 알아볼 수 있게 해줘. - 큰 형태의 변화와 작은 디테일을 함께 보여줘. - 여러 부분이 서로 다른 타이밍으로 움직이게 해줘. - 전체 인상은 편안하되 변화는 분명하게 보여줘. 수정 전후의 같은 10초 구간을 비교할 수 있게 보여줘. 고해상도 출력 전에 형태와 움직임부터 확인하고 싶어. 최종 제작 시에는 사용할 화면의 비율·영상 길이·해상도·소리 유무를 확인해서 적용해줘. 반복 재생이 필요하면 끝과 시작도 연결해줘. 프로젝트에 실행 방법과 수정한 내용을 기록해줘. 브라우저에서 재생되는 시안과 저장된 영상 파일을 구분해서 알려줘.