1주차: OT 및 P5.js 소개

오늘의 학습 목표

이 수업이 끝나면 여러분은: - 수업 전체 구조와 평가 방식을 이해합니다 - P5.js가 무엇인지, 왜 미디어아트에 사용하는지 이해합니다 - P5.js Web Editor에서 기본 도형을 그려볼 수 있습니다

전반부 — 수업 소개와 P5.js란?

코딩으로 만든 예술

우리가 앞으로 배울 것은 코드로 시각적 예술 작품을 만드는 것입니다.

대형 미디어아트 — 영감의 대상: - Refik Anadol - “Machine Hallucinations”: AI가 수백만 장의 이미지를 학습해서 만든 유동적 영상 조각 - teamLab - “Borderless”: 관객의 움직임에 반응하는 꽃, 물, 빛의 인터랙티브 설치

P5.js 작품 — 여러분이 이번 학기에 만들 수 있는 것: - 마우스를 따라 움직이는 파티클 시스템 (13주차) - Perlin Noise 기반 흐르는 선 패턴 (12주차) - 음악에 반응하는 비주얼라이저 (14주차)

직접 확인해보기

OpenProcessing — P5.js 작품을 검색하고 브라우저에서 바로 실행해볼 수 있습니다
검색 키워드: particle mouse, perlin noise flow, audio visualizer

핵심 포인트

위 대형 작품은 영감의 대상이고, P5.js 사례는 여러분이 이번 학기 안에 실제로 만들 수 있는 수준입니다.

수업 운영 안내

강의 구조:

교시	내용	형태
1교시	새로운 개념과 이론	강사 주도 강의
2교시	심화 내용과 실전 사례	강사 주도 + 라이브 코딩
3교시	배운 내용으로 직접 만들기	학생 주도 실습

평가 방식:

항목	비중	설명
출석	20%	매 수업 출석 체크
과제	20%	실습과제 4회 + 개인과제 1회
중간고사	20%	8주차, 1~7주차 범위 시험
기말고사	40%	인터랙티브 미디어 콘텐츠 제작

기말 프로젝트

기말은 시험이 아니라 인터랙티브 미디어 콘텐츠를 직접 만들어서 제출하는 것입니다. 시연영상과 소스코드를 제출하면 됩니다.

주차별 로드맵:

구간	주차	내용	키워드
전반부	1~7주	P5.js 기초	도형, 변수, 반복, 조건, 함수, 배열, 클래스
중간고사	8주	시험	1~7주 범위
후반부	9~14주	Nature of Code 응용	벡터, 물리, 데이터, 노이즈, 파티클, 사운드
기말	15~16주	프로젝트	인터랙티브 콘텐츠 제작 + 제출

P5.js란?

Processing에서 P5.js로

2001년, MIT Media Lab에서 시각 예술가와 디자이너가 코딩을 쉽게 배울 수 있도록 Processing이라는 언어가 탄생했습니다. 2014년에는 Processing의 철학을 웹으로 가져온 P5.js가 등장했습니다.

Processing	P5.js
Java 기반	JavaScript 기반
별도 프로그램 설치 필요	브라우저에서 바로 실행
결과물 공유 어려움	URL 하나로 즉시 공유
데스크톱 전용	웹, 모바일 어디서든

핵심 포인트

P5.js는 설치할 것이 없습니다. 브라우저만 열면 바로 코딩할 수 있고, 만든 작품도 링크 하나로 바로 공유할 수 있습니다.

왜 P5.js인가? — 다른 툴과 비교

P5.js는 TouchDesigner나 Unity 같은 최신 그래픽 툴에 비해 기능이 제한적입니다. 3D 렌더링도 약하고, 대규모 실시간 처리엔 부족한 면이 있습니다. 그런데 바로 그게 장점입니다.

도구	특징	진입장벽	배우면 남는 것
TouchDesigner	노드 기반 실시간 비주얼	높음	TouchDesigner 사용법
Unity / Unreal	고성능 3D, 게임엔진	매우 높음	엔진 사용법
After Effects	모션 그래픽, 영상 합성	중간	AE 사용법
P5.js	코드 기반 크리에이티브	낮음	프로그래밍 사고력 + 웹 기술

툴 사용법 vs 프로그래밍 사고력

TouchDesigner나 Unity는 “이 툴을 쓰는 방법” 을 배우는 것입니다. 툴이 바뀌면 처음부터 다시 배워야 합니다. P5.js는 프로그래밍 자체를 배우는 것입니다. 변수, 반복, 함수 — 이 개념은 어떤 언어에서도 동일하게 쓰입니다.

P5.js의 강점:

#	강점	설명
1	설치 없이 바로 시작	브라우저 하나면 충분, 어디서든 실행 가능
2	즉각적인 피드백	코드 한 줄 바꾸면 결과가 바로 반영
3	코드 사고력	노드 기반 툴과 달리, 프로그래밍 논리 자체를 익힘
4	자연스러운 확장	WebGL, ml5.js(머신러닝), Tone.js(사운드)로 연결 가능
5	거대한 커뮤니티	OpenProcessing에 수십만 개 오픈소스 작품 공개

핵심 정리

P5.js는 미디어아트 입문의 가장 좋은 첫 번째 언어입니다. P5.js로 프로그래밍 기초를 익히면, 이후에 TouchDesigner나 Unity를 배울 때 훨씬 수월합니다.

코드 = 새로운 표현 도구

기존 도구	코드
하나씩 직접 그림	규칙을 정하면 컴퓨터가 수천 개를 그림
같은 것 반복하기 힘듦	반복은 컴퓨터가 가장 잘하는 것
결과물이 고정	관객이 터치하면 반응하는 작품 가능
우연성 제한적	랜덤 요소로 매번 다른 결과

전반부 핵심 요약

이 수업은 코드로 시각적 예술 작품을 만드는 수업입니다
P5.js는 기능이 많은 툴은 아니지만, 프로그래밍 사고력 자체를 키워주는 도구입니다
전반부에 기초를 쌓고, 후반부에 응용하고, 기말에 자기 작품을 만듭니다

후반부 — P5.js 첫 체험

개발환경 설정

P5.js Web Editor 접속 및 회원가입

접속 주소:

https://editor.p5js.org

오른쪽 위 Sign Up 버튼을 눌러 회원가입합니다. 구글 계정으로 하면 빠릅니다.

주의사항

회원가입을 하지 않으면 스케치를 저장할 수 없습니다. 브라우저를 닫는 순간 코드가 사라집니다.

에디터 화면 구성

┌──────────────────────────────────────────────┐
│   재생  ■ 정지     [스케치 이름]    [저장]    │
├────────────────────┬─────────────────────────┤
│                    │                         │
│   코드 영역         │    미리보기 (캔버스)      │
│   (왼쪽)           │    (오른쪽)              │
│                    │                         │
├────────────────────┴─────────────────────────┤
│   콘솔 (에러 메시지가 여기 나옵니다)             │
└──────────────────────────────────────────────┘

왼쪽: 코드를 작성하는 영역
오른쪽: 실행 결과가 표시되는 캔버스
아래: 에러 메시지가 나오는 콘솔

첫 실행

아무것도 수정하지 말고, 왼쪽 위 재생 버튼을 눌러보세요.

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
}

오른쪽에 회색 네모가 나타나면 성공입니다. 이것이 우리가 앞으로 그림을 그릴 캔버스입니다.

[선택] 로컬 개발 환경 설정

웹 에디터 없이 자기 컴퓨터에서 직접 p5.js를 실행하는 방법입니다. 인터넷이 없을 때나 파일을 직접 관리하고 싶을 때 유용합니다.

1단계 — 프로젝트 폴더 만들기 & 서버 실행:

mkdir my-sketch && cd my-sketch
python3 -m http.server 3000

2단계 — index.html 파일 생성:

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.3/p5.min.js"></script>
</head>
<body>
  <script src="sketch.js"></script>
</body>
</html>

3단계 — 브라우저에서 확인:

브라우저 주소창에 localhost:3000 입력 → 파일 저장 후 새로고침하면 변경사항이 반영됩니다.

로컬 서버 실행 방법 비교

방법	명령어	비고
Python (기본 설치됨)	`python3 -m http.server 3000`	대부분 별도 설치 불필요
Node.js	`npx serve .`	Node.js 설치 필요
Vite	`npx vite`	저장 시 자동 새로고침

[선택] 바이브 코딩: AI와 함께 만들기

바이브 코딩이란 AI에게 원하는 결과를 설명하면 AI가 코드를 작성해주고, 결과를 확인하면서 반복 수정하는 방식입니다.

기본 워크플로우:

단계	행동
1⃣ 요청	AI(Claude Code, ChatGPT 등)에게 만들고 싶은 것 설명
2⃣ 생성	AI가 `sketch.js` 코드 작성
3⃣ 확인	로컬 서버 또는 웹 에디터에서 결과 확인
4⃣ 수정	`"색을 바꿔줘"`, `"더 빠르게 해줘"` 등으로 피드백
5⃣ 반복	만족할 때까지 3~4 반복

프롬프트 예시

"마우스를 따라 파티클이 생기는 p5.js 코드 만들어줘"
"클릭하면 원이 퍼져나가는 인터랙션 효과 만들어줘"
"Perlin Noise로 유기적으로 흐르는 선 패턴 만들어줘"

바이브 코딩의 함정

AI가 코드를 써줘도 코드를 읽고 이해하는 노력이 필요합니다. 변수, 반복, 함수 개념을 알아야 AI 코드를 내 아이디어대로 수정하고 발전시킬 수 있습니다. AI는 도구이고, 예술적 판단은 여러분이 합니다.

setup()과 draw() — P5.js의 핵심 구조

P5.js 코드는 두 가지 핵심 함수로 구성됩니다.

함수	언제 실행?	비유
`setup()`	프로그램 시작할 때 딱 한 번	도화지 준비하기
`draw()`	그 이후 계속 반복 (1초에 약 60번)	계속해서 그림 그리기

function setup() {
  createCanvas(400, 400);  // 가로 400, 세로 400 캔버스 생성
}

function draw() {
  background(220);  // 배경을 밝은 회색(220)으로 칠하기
}

createCanvas(400, 400) → 가로 400, 세로 400 크기의 도화지를 만듭니다
background(220) → 배경을 220번 회색으로 칠합니다 (0=검정, 255=흰색)

핵심 포인트

draw()는 1초에 60번씩 계속 반복됩니다. 지금은 매번 같은 회색을 칠하고 있어서 변화가 보이지 않지만, 나중에 움직이는 요소를 넣으면 애니메이션이 됩니다.

기본 도형 그리기

원 (ellipse)

draw() 함수 안에, background(220); 아래에 한 줄을 추가합니다.

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  ellipse(200, 200, 80, 80);  //  원 그리기
}

ellipse(x, y, 가로, 세로) — 4개의 숫자 의미:

매개변수	의미	위 코드에서의 값
첫 번째	x 위치 (왼쪽에서 얼마나 떨어진 곳)	200
두 번째	y 위치 (위에서 얼마나 떨어진 곳)	200
세 번째	가로 크기	80
네 번째	세로 크기	80

예시로 이해하기

가로와 세로가 같으면 원, 다르면 타원이 됩니다. ellipse(100, 300, 120, 60) → 위치가 바뀌고 납작한 타원이 됩니다. 숫자를 바꿔보면서 감을 잡아보세요!

사각형 (rect)

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  ellipse(200, 200, 80, 80);
  rect(50, 50, 100, 60);  //  사각형 그리기
}

rect(x, y, 가로, 세로) — 사각형은 왼쪽 위 꼭짓점의 위치를 지정합니다.

주의사항

원(ellipse)은 중심 위치를, 사각형(rect)은 왼쪽 위 꼭짓점 위치를 지정합니다. 이 차이를 기억하세요!

선 (line)

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  ellipse(200, 200, 80, 80);
  rect(50, 50, 100, 60);
  line(0, 0, 400, 400);  //  대각선 그리기
}

line(x1, y1, x2, y2) — 시작점과 끝점 좌표를 지정합니다.

참고

캔버스의 좌표계에서 (0, 0)은 왼쪽 위 모서리입니다. 아래로 갈수록 y값이 커집니다. 수학에서 배운 좌표계와 y축 방향이 반대입니다. 이것은 다음 주에 자세히 배웁니다.

도형 함수 정리

함수	설명	매개변수
`ellipse(x, y, w, h)`	타원/원	중심 x, 중심 y, 가로, 세로
`rect(x, y, w, h)`	사각형	왼쪽위 x, 왼쪽위 y, 가로, 세로
`line(x1, y1, x2, y2)`	선	시작점 x, 시작점 y, 끝점 x, 끝점 y

색상 맛보기

fill(R, G, B) 함수로 도형의 채우기 색을 지정합니다.

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);

  fill(255, 0, 0);        //  빨간색으로 채우기
  ellipse(200, 200, 80, 80);

  fill(0, 0, 255);        //  파란색으로 채우기
  rect(50, 50, 100, 60);
}

RGB 색상표:

코드	색상
`fill(255, 0, 0)`	빨강
`fill(0, 255, 0)`	초록
`fill(0, 0, 255)`	파랑
`fill(255, 255, 0)`	노랑
`fill(0, 0, 0)`	검정
`fill(255, 255, 255)`	흰색

주의사항

fill()을 한번 쓰면 그 아래에 있는 모든 도형에 적용됩니다. 색을 바꾸고 싶으면 다음 도형 전에 fill()을 다시 써야 합니다. 물감을 묻히는 것과 비슷합니다 — 빨간 물감을 묻히면 다른 색을 묻힐 때까지 계속 빨간색으로 그려집니다.

같이 해보기: 간단한 얼굴 그리기

오늘 배운 ellipse()와 fill()만으로 얼굴을 그려봅시다.

참고

코드를 치다 보면 에러가 날 수 있습니다. 아래 콘솔에 빨간 글씨가 나오면 당황하지 말고 확인해보세요. 에러는 정상입니다!

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(255, 220, 180);   // 살구색 배경

  // 얼굴
  fill(255, 230, 200);
  ellipse(200, 200, 180, 200);

  // 왼쪽 눈
  fill(255);
  ellipse(160, 180, 40, 40);
  fill(0);
  ellipse(160, 180, 20, 20);

  // 오른쪽 눈
  fill(255);
  ellipse(240, 180, 40, 40);
  fill(0);
  ellipse(240, 180, 20, 20);

  // 코
  fill(255, 200, 170);
  ellipse(200, 210, 15, 20);

  // 입
  fill(200, 100, 100);
  ellipse(200, 245, 40, 15);
}

완성!

ellipse()와 fill()만으로 얼굴이 완성됩니다. 숫자를 바꿔서 나만의 얼굴로 만들어보세요. 눈 위치, 색, 코 크기 등을 자유롭게 바꿔보세요!

생각해보기

눈 크기를 더 키우면 어떤 느낌이 될까요?
배경색을 바꾸면 전체 분위기가 어떻게 달라질까요?
fill() 없이 도형을 그리면 어떻게 될까요?

스케치 저장하기

Ctrl+S (맥은 Cmd+S)를 눌러 저장합니다. 위에 스케치 이름을 클릭해서 Week1_MyFace 같은 이름으로 바꿀 수 있습니다.

로그인한 상태라면 자동으로 계정에 저장됩니다. 다음에 접속해도 My Sketches에서 찾을 수 있습니다.

오늘의 전체 요약

전반부: 이 수업은 P5.js로 코드 기반 미디어아트를 만드는 수업입니다. 전반부 기초 → 후반부 응용 → 기말 프로젝트 구조입니다. 후반부: P5.js Web Editor에서 setup()/draw() 구조를 이해하고, ellipse(), rect(), line(), fill()로 기본 도형과 색상을 사용해보았습니다. [선택]: 로컬 환경(python3 -m http.server)과 바이브 코딩(AI + 터미널) 워크플로우를 소개했습니다.

참고 자료

자료	설명
P5.js 공식 레퍼런스	함수가 궁금할 때 찾아보는 사전
The Coding Train	Daniel Shiffman의 P5.js 유튜브 강좌
OpenProcessing	P5.js 작품 공유 커뮤니티

(선택) 다음 주 사전 학습 영상

필수는 아니지만, 미리 보면 다음 주 수업이 더 수월합니다. - The Coding Train “1.2 p5.js Web Editor” (약 10분) - The Coding Train “1.3 Shapes & Drawing” (약 10분)

다음 주 예고: 좌표계를 제대로 배우고, 변수를 사용해서 도형이 마우스를 따라다니게 만들어봅니다!