processing/p5.js

어떤 프로젝트인가요?

핵심 기능

• 01스케치를 빠르게 작성할 수 있는 간단한 setup() 및 draw() 구조.
• 02도형, 텍스트, 이미지를 위한 다양한 2D 드로잉 도구.
• 03시청각 작품, 인터랙티브 작업, 제너레이티브 작업 지원.
• 04풍부한 레퍼런스 문서, 튜토리얼, 시각적 예제.
• 05로컬에 설치하지 않고 코딩할 수 있는 브라우저 기반 웹 에디터.
• 06커뮤니티에서 만든 라이브러리로 기능 확장 가능.

활용 사례

• 시각적 피드백을 통해 학생들에게 프로그래밍 기초를 가르치기.
• 웹에서 인터랙티브 아트나 제너레이티브 비주얼 만들기.
• 브라우저에서 인터랙티브 디자인과 애니메이션 프로토타이핑하기.
• p5.sound 라이브러리와 함께 오디오 반응형 시각화 만들기.

빠른 시작

1. 1

   p5.js 웹 에디터를 열면 아무것도 설치하지 않고 코딩을 시작할 수 있습니다

2. 2

   p5.js 웹사이트의 Get Started 튜토리얼을 따라 해 보세요

사용 전 알아둘 점

• !주로 자원봉사자들이 관리하므로 issue에 대한 답변이 늦을 수 있습니다.
• !LGPL-2.1 라이선스가 적용됩니다. 약한 카피레프트 라이선스이므로 사용 전에 조건을 검토하세요.

포함된 컬렉션

토픽

자주 묻는 질문

p5.js은(는) 무엇인가요?

p5.js는 웹에서 창작 코딩과 드로잉을 하고 인터랙티브하거나 제너레이티브한 그래픽을 만들 수 있는 무료 오픈 소스 JavaScript 라이브러리입니다. p5.js는 아티스트, 디자이너, 교육자, 초보자가 브라우저에서 바로 그림을 그리고 애니메이션을 만들며 인터랙티브 그래픽을 구현할 수 있도록 해 주는 창작 코딩용 JavaScript 라이브러리입니다. setup()과 draw() 구조 덕분에 몇 줄의 코드만으로 쉽게 시작할 수 있으며, Processing의 핵심 원칙을 바탕으로 합니다.

p5.js은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

p5.js은(는) LGPL-2.1 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

p5.js은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. p5.js의 마지막 커밋은 2026년 11월 8일입니다.

p5.js은(는) 어디에 사용할 수 있나요?

시각적 피드백을 통해 학생들에게 프로그래밍 기초를 가르치기. 웹에서 인터랙티브 아트나 제너레이티브 비주얼 만들기. 브라우저에서 인터랙티브 디자인과 애니메이션 프로토타이핑하기. p5.sound 라이브러리와 함께 오디오 반응형 시각화 만들기.

p5.js는 어떻게 설치하나요?

p5.js 웹 에디터를 열면 아무것도 설치하지 않고 코딩을 시작할 수 있습니다 p5.js 웹사이트의 Get Started 튜토리얼을 따라 해 보세요

p5.js은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/processing/p5.js