알고리즘 아트 (Algorithmic Art)
공식p5.js로 시드 기반 제너러티브 아트를 만들고, 파라미터를 실시간으로 조절할 수 있는 인터랙티브 뷰어까지 한 번에 생성해 주는 공식 스킬입니다.
디자인·UI중급★ 167,136⑂ 19,920AI 점수 9/10마지막 업데이트: 2026. 8. 7.
무엇을 해주나
코드로 그림을 그리는 '제너러티브 아트'를 처음부터 끝까지 만들어 줍니다. 진행 방식은 두 단계입니다.
- 알고리즘 철학(.md): "Organic Turbulence", "Stochastic Crystallization" 같은 미학 운동 이름과 4~6단락의 선언문을 먼저 작성합니다. 어떤 노이즈, 어떤 입자 거동, 어떤 수학적 관계로 표현할지 방향을 정하는 단계입니다.
- p5.js 구현(.html): 그 철학을 실제 코드로 옮깁니다. 결과물은 CDN에서 p5.js를 불러오는 단일 HTML 파일로, 브라우저에서 바로 열립니다.
뷰어에는 시드 표시/이전·다음·랜덤·특정 시드 점프, 파라미터 슬라이더, 컬러 피커, Regenerate·Reset·Download PNG 버튼이 포함됩니다. randomSeed()/noiseSeed()를 항상 사용하므로 같은 시드는 항상 같은 그림을 만들어, Art Blocks 스타일의 에디션 탐색이 가능합니다.
이런 분께 추천
- 플로우 필드, 파티클 시스템, 보로노이 같은 제너러티브 아트를 코드로 만들어 보고 싶은 분
- 발표 자료·굿즈·NFT·프린트용 추상 비주얼을 대량 변형으로 뽑아야 하는 디자이너
- p5.js를 배우는 중이라 잘 정리된 실전 예제 코드가 필요한 분
- 특정 작가 작품을 베끼지 않는, 저작권 안전한 오리지널 비주얼이 필요한 팀
활용 예시
- "심해의 해류를 주제로 알고리즘 아트를 만들어 줘" → 레이어드 펄린 노이즈 플로우 필드 + 입자 궤적 누적 작품과 노이즈 스케일·입자 수 슬라이더가 달린 HTML 뷰어 생성
- "우리 브랜드 컬러 3색으로 포스터용 배경 100종 뽑고 싶어" → 컬러 피커가 붙은 뷰어에서 시드 1~100을 넘겨 보며 마음에 드는 것만 PNG로 저장
- "재귀 분기 구조로 나무 같은 형태를 만들어 줘" → L-system/재귀 세분화 기반 알고리즘과 분기 각도·깊이·선 굵기 파라미터 제공
· · · 설치 가이드 · · ·
Claude 앱에 설치 (터미널 필요 없음)
- 아래 버튼으로 ZIP 파일을 받으세요.
- Claude 설정 → Capabilities에서 '코드 실행 및 파일 생성'을 켭니다. (한 번만)
- Claude에서 Customize → Skills → + → '스킬 업로드'를 누르고 받은 ZIP을 올립니다.
Claude Code에 설치
Claude에게 맡기기 — 아래 문장을 Claude Code에 붙여넣으세요
클로드스킬마트에서 찾은 스킬을 설치해줘. GitHub 저장소 anthropics/skills 의 skills/algorithmic-art 폴더를 내 ~/.claude/skills/algorithmic-art/ 에 그대로 복사해줘. 설치가 끝나면 이 스킬로 무엇을 할 수 있는지 한 줄로 알려줘.
직접 명령으로 설치하기
git clone https://github.com/anthropics/skills.git /tmp/anthropic-skills && mkdir -p ~/.claude/skills && cp -r /tmp/anthropic-skills/skills/algorithmic-art ~/.claude/skills/⚠ 제3자가 만든 스킬입니다. 설치 전 원본 저장소를 한 번 확인하세요.
- 터미널(맥은 터미널, 윈도우는 Git Bash)을 엽니다.
- 스킬 저장소를 내려받습니다:
git clone https://github.com/anthropics/skills.git - 스킬 폴더가 없으면 만듭니다:
mkdir -p ~/.claude/skills - 폴더 전체를 복사합니다(템플릿 파일이 함께 있어야 합니다):
cp -r skills/skills/algorithmic-art ~/.claude/skills/ ls ~/.claude/skills/algorithmic-art를 실행해SKILL.md와templates/viewer.html이 있는지 확인합니다.- Claude Code를 재시작한 뒤 "플로우 필드로 알고리즘 아트를 만들어 줘"처럼 요청하면 스킬이 자동으로 호출됩니다.
- 생성된 HTML 파일을 더블클릭해 브라우저에서 열고, 슬라이더와 시드 버튼으로 변형을 탐색하세요.