하이진재즈블렌드 제2회 정기공연 · LED 영상팀 · Generative Art Lab

코드로 만드는 미디어 아트 시안

팝티스트홀 LED 전체(가운데·양측·맨 양측·천장)에 올릴 시안을 만들고 비교하는 곳입니다. 작품은 sketches/ 폴더마다 하나씩이고, 숫자 키로 열고, 작품 안에서는 ?로 단축키를 봅니다.

함께 만드는 사람 구요한 곡별 레이아웃·홀 규격 도구·이 랩 · 육대근(DECK) 원안 키트·영상 기술 리드 · 이태극 시각 학습 스튜디오·내부 갤러리·로비 디자인

팝티스트홀 몰입 보기

실제 홀 사진의 LED 자리에 시안을 입혀 보고, 3D 홀 안으로 들어가 객석에서 걸어 다니며 봅니다. 작품은 페이지 안에서 바꿉니다.

몰입해 보기 M 3D로 들어가기 GIF

작품

팝티스트홀에 올리는 기준 (11/05 기술팀 답신 기준)

크기, 간격, 배치도, 납품 규격은 팝티스트홀 LED 스크린 페이지에 모아 두었다.

도구 5종: 화면을 그리는 주력 2 + 움직임·소리·물리를 보태는 보조 3

  1. p5.js주력 · 2D

    점·선·입자·흐름·패턴을 가장 짧은 코드로. 첫 시안에 가장 쉽다.

    청산별곡 선 흐름, 스윙·팝아트 패턴, 곡별 목업 전부
  2. Three.js주력 · 3D

    입체, 조명, 그림자, 금속·실크·유리 재질과 카메라.

    메인·측면·천장을 잇는 입체 배경, 리본·천, 객석 보기
  3. GSAP보조 · 타이밍

    무엇이 언제 움직이고 멈출지, 시차(stagger)와 가속·감속.

    구역이 차례로 켜지는 순서, 로비 멤버 카드 전환
  4. Tone.js보조 · 소리

    소리를 만들거나 음원을 재생하고, 리듬·음량을 화면에 연결.

    공연 MR 반응 실험과 녹화 (클릭 후 소리 시작)
  5. Matter.js보조 · 물리

    중력, 낙하, 튕김, 쌓임을 자동으로 계산. 도형 200개 안팎까지.

    통통 튀는 팝아트 도형, 엔딩 컨페티

새 작품 만들기

  1. 로컬 랩 폴더에서 Claude Code를 엽니다(claude). 이 사이트는 보기·시험용이고, exports/ 저장·MP4 변환·두 파일 나누기(split)는 로컬 랩(npm run dev)에서 됩니다.
  2. prompts/의 프롬프트 하나를 붙여넣습니다. 대괄호 [ ] 안만 바꾸면 됩니다.
  3. 새 작품이 이 목록에 자동으로 나타납니다. 열어서 R로 10초를 녹화해 비교합니다.

템플릿

    크레딧

    1. 원안 키트 · 영상 기술 리드육대근 (DECK)

      「코드로 만드는 첫 미디어 아트」 용어·도구·프롬프트 키트를 만들어 팀에 공유했다. 이 랩의 프롬프트와 작업 흐름은 이 키트에서 출발한다.

      dexa.art ↗
    2. 시각 학습 스튜디오 · 내부 갤러리 · 로비 디자인이태극

      키트를 눈으로 보고 만지며 익히는 학습 스튜디오, 5000×3000 제출 기준·큐시트·샘플 정리.

      LED 학습 스튜디오 ↗
    3. Generative Art Lab · 곡별 레이아웃 · 홀 규격 도구구요한

      팝티스트홀 LED 실측 좌표, 실제 비율 ↔ 제출 변환, 객석·몰입 보기, 곡별 목업과 전체 공간 작품.

      cmdspace.work ↗
    4. Made withCMDSPACE 커맨드스페이스

      지식관리와 생성형 AI로 일하는 방식을 연구하고 가르치는 곳.

      cmdspace.work ↗

    하이진재즈블렌드 제2회 정기공연(2026.12) LED 영상팀 · 원안 육대근(DECK) · 시각 학습 스튜디오 이태극 · Generative Art Lab 구요한(CMDSPACE). 공연 음원과 단원 사진은 이 사이트에 올리지 않는다.