[official skill] 알고리즘 아트

📌 참고: 이 문서는 공식 Claude Code 문서의 원문 + 레퍼런스입니다.

• 원문 링크를 직접 사용하셔도 됩니다
• 이 파일을 .claude/skills/ 하위에 복사하여 스킬로 등록할 수도 있습니다

(2026.03.15 기준)

알고리즘 철학은 코드를 통해 표현되는 계산적 미학 운동입니다. .md 파일(철학), .html 파일(인터랙티브 뷰어), .js 파일(생성 알고리즘)을 출력합니다.

이것은 두 단계로 진행됩니다:

1. 알고리즘 철학 작성 (.md 파일)
2. p5.js 생성 예술 제작으로 표현 (.html + .js 파일)

먼저, 이 작업을 수행합니다:

알고리즘 철학 작성

시작하려면, 다음을 통해 해석될 알고리즘 철학(정적 이미지나 템플릿이 아닌)을 만듭니다:

• 계산적 프로세스, 창발적 행동, 수학적 아름다움
• 시드된 랜덤성, 노이즈 필드, 유기적 시스템
• 파티클, 흐름, 필드, 힘
• 파라메트릭 변형과 제어된 카오스

핵심 이해

• 받는 것: 사용자의 미묘한 입력이나 지시 - 고려해야 하지만 기반으로 사용할 뿐 창작의 자유를 제한해서는 안 됩니다.
• 만드는 것: 알고리즘 철학/생성 미학 운동.
• 다음에 일어나는 일: 동일한 버전이 철학을 받아 코드로 표현합니다 - 90%의 알고리즘 생성과 10%의 필수 파라미터로 구성된 p5.js 스케치를 만듭니다.

이 접근법을 고려합니다:

• 생성 예술 운동의 선언문을 작성합니다
• 다음 단계에서 이를 살아있게 만드는 알고리즘을 작성합니다

철학은 다음을 강조해야 합니다: 알고리즘적 표현. 창발적 행동. 계산적 아름다움. 시드된 변형.

알고리즘 철학 생성 방법

운동에 이름 붙이기 (1-2단어): "Organic Turbulence" / "Quantum Harmonics" / "Emergent Stillness"

철학 표현하기 (4-6단락 - 간결하되 완전하게):

알고리즘적 본질을 포착하기 위해, 이 철학이 다음을 통해 어떻게 드러나는지 표현합니다:

• 계산적 프로세스와 수학적 관계?
• 노이즈 함수와 랜덤성 패턴?
• 파티클 행동과 필드 역학?
• 시간적 진화와 시스템 상태?
• 파라메트릭 변형과 창발적 복잡성?

핵심 가이드라인:

• 중복 방지: 각 알고리즘적 측면은 한 번만 언급합니다. 새로운 깊이를 더하지 않는 한 노이즈 이론, 파티클 역학, 수학적 원리에 대한 개념을 반복하지 않습니다.
• 장인정신을 반복적으로 강조: 철학은 최종 알고리즘이 수없이 많은 시간을 들여 개발한 것처럼 보여야 하고, 세심하게 다듬어졌으며, 해당 분야 최고의 전문가가 만든 것이라는 점을 반드시 여러 번 강조해야 합니다. 이 프레이밍은 필수적입니다 - "꼼꼼하게 제작된 알고리즘," "깊은 계산적 전문성의 산물," "세심한 최적화," "마스터 수준의 구현" 같은 표현을 반복합니다.
• 창작 여지 남기기: 알고리즘적 방향에 대해 구체적이되, 다음 Claude가 극도로 높은 수준의 장인정신으로 해석적 구현 선택을 할 수 있을 만큼 간결하게 유지합니다.

철학은 다음 버전이 아이디어를 정적 이미지가 아닌 알고리즘적으로 표현하도록 안내해야 합니다. 아름다움은 최종 프레임이 아닌 프로세스 안에 있습니다.

철학 예시

"Organic Turbulence"
철학: 자연 법칙에 의해 제약된 카오스, 무질서에서 떠오르는 질서.
알고리즘적 표현: 레이어드 Perlin 노이즈에 의해 구동되는 흐름 필드. 수천 개의 파티클이 벡터 힘을 따르며, 그 궤적이 유기적 밀도 맵으로 축적됩니다. 여러 노이즈 옥타브가 난류 영역과 고요한 영역을 만듭니다. 색상은 속도와 밀도에서 나타납니다 - 빠른 파티클은 밝게 타오르고, 느린 것은 그림자로 사라집니다. 알고리즘은 평형에 도달할 때까지 실행됩니다 - 계산적 미학의 마스터가 수없이 많은 반복을 통해 다듬은, 꼼꼼하게 조율된 균형.

"Quantum Harmonics"
철학: 파동적 간섭 패턴을 보이는 이산 객체.
알고리즘적 표현: 그리드에 초기화된 파티클, 각각 사인파를 통해 진화하는 위상 값을 갖습니다. 파티클이 가까우면 위상이 간섭합니다 - 보강 간섭은 밝은 노드를, 상쇄 간섭은 빈 공간을 만듭니다. 단순한 조화 운동이 복잡한 창발적 만다라를 생성합니다. 공명적 아름다움을 생산하기 위해 모든 비율이 신중하게 선택된 세심한 주파수 보정의 결과.

"Recursive Whispers"
철학: 규모에 걸친 자기유사성, 유한한 공간에서의 무한한 깊이.
알고리즘적 표현: 재귀적으로 세분화되는 분기 구조. 각 가지는 약간 무작위화되지만 황금비에 의해 제약됩니다. L-system이나 재귀적 세분화가 수학적이면서도 유기적으로 느껴지는 나무 같은 형태를 생성합니다. 미묘한 노이즈 섭동이 완벽한 대칭을 깨뜨립니다. 선 두께는 각 재귀 수준마다 감소합니다. 모든 분기 각도가 깊은 수학적 탐구의 산물.

"Field Dynamics"
철학: 물질에 대한 영향을 통해 가시화되는 보이지 않는 힘.
알고리즘적 표현: 수학적 함수나 노이즈로 구성된 벡터 필드. 가장자리에서 태어나 필드 라인을 따라 흐르고, 평형이나 경계에 도달하면 소멸하는 파티클. 여러 필드가 파티클을 끌어당기고, 밀어내고, 회전시킬 수 있습니다. 시각화는 오직 궤적만을 보여줍니다 - 보이지 않는 힘의 유령 같은 증거. 힘의 균형을 통해 꼼꼼하게 안무된 계산적 춤.

"Stochastic Crystallization"
철학: 질서 있는 구조로 결정화되는 무작위 프로세스.
알고리즘적 표현: 무작위화된 원 패킹 또는 Voronoi 테셀레이션. 무작위 점에서 시작하여 이완 알고리즘을 통해 진화합니다. 셀이 평형에 도달할 때까지 밀어냅니다. 셀 크기, 이웃 수 또는 중심으로부터의 거리에 기반한 색상. 나타나는 유기적 타일링은 무작위이면서도 필연적으로 느껴집니다. 모든 시드가 고유한 결정적 아름다움을 만들어냅니다 - 마스터 수준 생성 알고리즘의 특징.

이것들은 축약된 예시입니다. 실제 알고리즘 철학은 4-6개의 충실한 단락이어야 합니다.

필수 원칙

• 알고리즘 철학: 코드를 통해 표현될 계산적 세계관을 만듭니다
• 결과물보다 프로세스: 아름다움이 알고리즘의 실행에서 나타난다는 점을 항상 강조합니다 - 각 실행은 고유합니다
• 파라메트릭 표현: 아이디어는 수학적 관계, 힘, 행동을 통해 소통합니다 - 정적 구성이 아닙니다
• 예술적 자유: 다음 Claude가 철학을 알고리즘적으로 해석합니다 - 창의적 구현 여지를 제공합니다
• 순수 생성 예술: 이것은 랜덤성이 있는 정적 이미지가 아닌 살아있는 알고리즘을 만드는 것입니다
• 전문적 장인정신: 최종 알고리즘이 꼼꼼하게 제작되고, 수없이 많은 반복을 통해 다듬어지며, 계산적 미학 분야 최고의 전문가에 의한 깊은 전문성의 산물처럼 느껴져야 한다는 점을 반복적으로 강조합니다

알고리즘 철학은 4-6개 단락이어야 합니다. 의도한 비전을 하나로 모으는 시적인 계산적 철학으로 채웁니다. 같은 요점을 반복하지 않습니다. 이 알고리즘 철학을 .md 파일로 출력합니다.

---

개념적 씨앗 도출

핵심 단계: 알고리즘을 구현하기 전에, 원래 요청에서 미묘한 개념적 실마리를 파악합니다.

필수 원칙:
개념은 알고리즘 자체에 내재된 미묘하고 틈새적인 레퍼런스입니다 - 항상 직접적이지 않으며, 항상 세련됩니다. 해당 주제에 익숙한 사람은 직관적으로 느낄 수 있어야 하고, 다른 사람들은 단순히 훌륭한 생성 구성을 경험합니다. 알고리즘 철학은 계산적 언어를 제공합니다. 도출된 개념은 영혼을 제공합니다 - 파라미터, 행동, 창발 패턴 속에 보이지 않게 엮인 조용한 개념적 DNA입니다.

이것은 매우 중요합니다: 레퍼런스는 작품의 깊이를 높이면서도 스스로를 드러내지 않을 만큼 정제되어야 합니다. 알고리즘적 하모니를 통해 다른 곡을 인용하는 재즈 뮤지션처럼 생각합니다 - 아는 사람만 알아차리지만, 모두가 생성적 아름다움을 감상합니다.

---

P5.JS 구현

철학과 개념적 프레임워크가 수립되면, 코드로 표현합니다. 진행하기 전에 잠시 생각을 정리합니다. 작성한 알고리즘 철학과 아래의 지침만을 사용합니다.

0단계: 먼저 템플릿 읽기

핵심: HTML을 작성하기 전에:

1. Read 도구를 사용하여 templates/viewer.html을 읽습니다
2. 정확한 구조, 스타일링, Anthropic 브랜딩을 학습합니다
3. 그 파일을 영감이 아닌 문자 그대로의 시작점으로 사용합니다
4. 모든 고정 섹션을 정확히 그대로 유지합니다 (헤더, 사이드바 구조, Anthropic 색상/폰트, 시드 컨트롤, 액션 버튼)
5. 파일의 주석에 표시된 변수 섹션만 교체합니다 (알고리즘, 파라미터, 파라미터를 위한 UI 컨트롤)

하지 말 것:

• HTML을 처음부터 만들기
• 커스텀 스타일링이나 색상 스키마 만들기
• 시스템 폰트나 다크 테마 사용하기
• 사이드바 구조 변경하기

따를 것:

• 템플릿의 정확한 HTML 구조를 복사합니다
• Anthropic 브랜딩을 유지합니다 (Poppins/Lora 폰트, 밝은 색상, 그래디언트 배경)
• 사이드바 레이아웃을 유지합니다 (Seed → Parameters → Colors? → Actions)
• p5.js 알고리즘과 파라미터 컨트롤만 교체합니다

템플릿이 기반입니다. 그 위에 구축하되, 다시 만들지 않습니다.

---

갤러리 수준의 계산적 예술을 만들기 위해, 알고리즘 철학을 기반으로 사용합니다.

기술 요구사항

시드된 랜덤성 (Art Blocks 패턴):

// 재현성을 위해 항상 시드를 사용합니다
let seed = 12345; // 또는 사용자 입력의 해시
randomSeed(seed);
noiseSeed(seed);

파라미터 구조 - 철학을 따릅니다:

알고리즘 철학에서 자연스럽게 나오는 파라미터를 설정하려면, "이 시스템의 어떤 특성을 조정할 수 있는가?"를 고려합니다.

let params = {
  seed: 12345,  // 재현성을 위해 항상 시드를 포함합니다
  // colors
  // 알고리즘을 제어하는 파라미터를 추가합니다:
  // - 수량 (얼마나 많이?)
  // - 스케일 (얼마나 크게? 얼마나 빠르게?)
  // - 확률 (얼마나 가능성 있게?)
  // - 비율 (어떤 비율로?)
  // - 각도 (어떤 방향으로?)
  // - 임계값 (언제 행동이 변하는가?)
};

효과적인 파라미터를 설계하려면, "패턴 유형"으로 생각하기보다 시스템이 조정 가능해야 하는 속성에 집중합니다.

핵심 알고리즘 - 철학을 표현합니다:

핵심: 알고리즘 철학이 무엇을 만들지 결정해야 합니다.

철학을 코드로 표현하려면, "어떤 패턴을 사용해야 하나?"가 아니라 "이 철학을 코드로 어떻게 표현할까?"를 생각합니다.

철학이 유기적 창발에 관한 것이면, 다음을 고려합니다:

• 시간이 지나면서 축적되거나 성장하는 요소
• 자연 법칙에 의해 제약된 무작위 프로세스
• 피드백 루프와 상호작용

철학이 수학적 아름다움에 관한 것이면, 다음을 고려합니다:

• 기하학적 관계와 비율
• 삼각 함수와 하모닉스
• 예상치 못한 패턴을 만드는 정밀한 계산

철학이 제어된 카오스에 관한 것이면, 다음을 고려합니다:

• 엄격한 경계 내의 무작위 변형
• 분기와 위상 전이
• 무질서에서 떠오르는 질서

알고리즘은 철학에서 흘러나오며, 옵션 메뉴에서가 아닙니다.

구현을 안내하려면, 개념적 본질이 창의적이고 독창적인 선택을 알리도록 합니다. 이 특정 요청의 비전을 표현하는 무언가를 만듭니다.

캔버스 설정: 표준 p5.js 구조:

function setup() {
  createCanvas(1200, 1200);
  // 시스템을 초기화합니다
}

function draw() {
  // 생성 알고리즘
  // 정적(noLoop)이거나 애니메이션일 수 있습니다
}

장인정신 요구사항

핵심: 마스터리를 달성하려면, 마스터 생성 아티스트가 수없이 많은 반복을 통해 도달한 것처럼 느껴지는 알고리즘을 만듭니다. 모든 파라미터를 신중하게 조율합니다. 모든 패턴이 목적을 가지고 나타나도록 합니다. 이것은 무작위 노이즈가 아닙니다 - 이것은 깊은 전문성을 통해 다듬어진 제어된 카오스입니다.

• 균형: 시각적 노이즈 없는 복잡성, 경직성 없는 질서
• 색상 조화: 무작위 RGB 값이 아닌 사려 깊은 팔레트
• 구성: 랜덤성 속에서도 시각적 위계와 흐름을 유지합니다
• 성능: 부드러운 실행, 애니메이션인 경우 실시간 최적화
• 재현성: 같은 시드는 항상 동일한 출력을 생산합니다

출력 형식

출력물:

1. 알고리즘 철학 - 생성 미학을 설명하는 마크다운 또는 텍스트
2. 단일 HTML 아티팩트 - templates/viewer.html에서 구축된 자체 완결형 인터랙티브 생성 예술 (0단계와 다음 섹션 참조)

HTML 아티팩트에는 모든 것이 포함됩니다: p5.js(CDN에서), 알고리즘, 파라미터 컨트롤, UI - claude.ai 아티팩트나 모든 브라우저에서 즉시 작동하는 하나의 파일. 처음부터가 아닌 템플릿 파일에서 시작합니다.

---

인터랙티브 아티팩트 생성

알림: templates/viewer.html은 이미 읽었어야 합니다 (0단계 참조). 그 파일을 시작점으로 사용합니다.

생성 예술의 탐색을 가능하게 하기 위해, 단일 자체 완결형 HTML 아티팩트를 만듭니다. 이 아티팩트가 claude.ai나 모든 브라우저에서 즉시 작동하도록 합니다 - 설정이 필요 없습니다. 모든 것을 인라인으로 임베드합니다.

핵심: 고정 vs 변수

templates/viewer.html 파일이 기반입니다. 필요한 정확한 구조와 스타일링을 포함합니다.

고정 (항상 정확히 그대로 포함):

• 레이아웃 구조 (헤더, 사이드바, 메인 캔버스 영역)
• Anthropic 브랜딩 (UI 색상, 폰트, 그래디언트)
• 사이드바의 시드 섹션:
  • 시드 표시
  • Previous/Next 버튼
  • Random 버튼
  • Jump to seed 입력 + Go 버튼
• 사이드바의 액션 섹션:
  • Regenerate 버튼
  • Reset 버튼

변수 (각 작품마다 커스터마이즈):

• 전체 p5.js 알고리즘 (setup/draw/classes)
• 파라미터 객체 (예술에 필요한 것을 정의)
• 사이드바의 Parameters 섹션:
  • 파라미터 컨트롤 수
  • 파라미터 이름
  • 슬라이더의 최소/최대/단계 값
  • 컨트롤 유형 (슬라이더, 입력 등)
• Colors 섹션 (선택):
  • 일부 예술은 색상 선택기가 필요합니다
  • 일부 예술은 고정 색상을 사용할 수 있습니다
  • 일부 예술은 단색일 수 있습니다 (색상 컨트롤 불필요)
  • 예술의 필요에 따라 결정합니다

모든 작품은 고유한 파라미터와 알고리즘을 가져야 합니다! 고정 부분은 일관된 UX를 제공합니다 - 나머지 모든 것이 고유한 비전을 표현합니다.

필수 기능

1. 파라미터 컨트롤

• 숫자 파라미터를 위한 슬라이더 (파티클 수, 노이즈 스케일, 속도 등)
• 팔레트 색상을 위한 색상 선택기
• 파라미터 변경 시 실시간 업데이트
• 기본값으로 복원하는 리셋 버튼

2. 시드 내비게이션

• 현재 시드 번호 표시
• 시드를 순환하는 "Previous"와 "Next" 버튼
• 무작위 시드를 위한 "Random" 버튼
• 특정 시드로 이동하는 입력 필드
• 요청 시 100개의 변형 생성 (시드 1-100)

3. 단일 아티팩트 구조

<!DOCTYPE html>
<html>
<head>
  <!-- CDN의 p5.js - 항상 사용 가능 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>
  <style>
    /* 모든 스타일링을 인라인으로 - 깔끔하고 최소한 */
    /* 캔버스가 위에, 컨트롤이 아래에 */
  </style>
</head>
<body>
  <div id="canvas-container"></div>
  <div id="controls">
    <!-- 모든 파라미터 컨트롤 -->
  </div>
  <script>
    // 모든 p5.js 코드를 여기에 인라인으로
    // 파라미터 객체, 클래스, 함수
    // setup()과 draw()
    // UI 핸들러
    // 모든 것이 자체 완결형
  </script>
</body>
</html>

핵심: 이것은 단일 아티팩트입니다. 외부 파일 없음, 임포트 없음(p5.js CDN 제외). 모든 것이 인라인입니다.

4. 구현 세부 사항 - 사이드바 구축

사이드바 구조:

1. Seed (고정) - 항상 정확히 그대로 포함:

• 시드 표시
• Prev/Next/Random/Jump 버튼

2. Parameters (변수) - 예술을 위한 컨트롤을 만듭니다:

<div class="control-group">
    <label>Parameter Name</label>
    <input type="range" id="param" min="..." max="..." step="..." value="..." oninput="updateParam('param', this.value)">
    <span class="value-display" id="param-value">...</span>
</div>

파라미터 수만큼 control-group div를 추가합니다.

3. Colors (선택/변수) - 예술에 조정 가능한 색상이 필요하면 포함:

• 사용자가 팔레트를 제어해야 하면 색상 선택기를 추가합니다
• 예술이 고정 색상을 사용하면 이 섹션을 건너뜁니다
• 예술이 단색이면 건너뜁니다

4. Actions (고정) - 항상 정확히 그대로 포함:

• Regenerate 버튼
• Reset 버튼
• Download PNG 버튼

요구사항:

• 시드 컨트롤이 작동해야 합니다 (prev/next/random/jump/display)
• 모든 파라미터에 UI 컨트롤이 있어야 합니다
• Regenerate, Reset, Download 버튼이 작동해야 합니다
• Anthropic 브랜딩을 유지합니다 (UI 스타일링, 예술 색상이 아닌)

아티팩트 사용

HTML 아티팩트는 즉시 작동합니다:

1. claude.ai에서: 인터랙티브 아티팩트로 표시됩니다 - 즉시 실행
2. 파일로: 저장하고 모든 브라우저에서 열기 - 서버 불필요
3. 공유: HTML 파일을 보내기 - 완전히 자체 완결형

---

변형 및 탐색

아티팩트에는 기본적으로 시드 내비게이션(prev/next/random 버튼)이 포함되어 있어, 여러 파일을 만들지 않고도 변형을 탐색할 수 있습니다. 사용자가 특정 변형을 강조하고 싶으면:

• 시드 프리셋을 포함합니다 ("변형 1: Seed 42", "변형 2: Seed 127" 등의 버튼)
• 여러 시드의 썸네일을 나란히 보여주는 "Gallery Mode"를 추가합니다
• 모두 같은 단일 아티팩트 내에서

이것은 같은 판에서 시리즈 프린트를 만드는 것과 같습니다 - 알고리즘은 일관되지만, 각 시드는 잠재력의 다른 측면을 드러냅니다. 인터랙티브 특성은 사용자가 시드 공간을 탐색하여 자신만의 즐겨찾기를 발견한다는 것을 의미합니다.

---

창작 프로세스

사용자 요청 → 알고리즘 철학 → 구현

각 요청은 고유합니다. 프로세스는 다음을 포함합니다:

1. 사용자의 의도 해석 - 어떤 미학을 추구하는가?
2. 알고리즘 철학 작성 (4-6단락) - 계산적 접근 방식을 설명
3. 코드로 구현 - 이 철학을 표현하는 알고리즘을 구축
4. 적절한 파라미터 설계 - 무엇이 조정 가능해야 하는가?
5. 매칭 UI 컨트롤 구축 - 해당 파라미터를 위한 슬라이더/입력

상수:

• Anthropic 브랜딩 (색상, 폰트, 레이아웃)
• 시드 내비게이션 (항상 존재)
• 자체 완결형 HTML 아티팩트

나머지 모든 것은 변수:

• 알고리즘 자체
• 파라미터
• UI 컨트롤
• 시각적 결과

최상의 결과를 달성하려면, 창의성을 신뢰하고 철학이 구현을 안내하도록 합니다.

---

리소스

이 스킬에는 유용한 템플릿과 문서가 포함되어 있습니다:

• templates/viewer.html: 모든 HTML 아티팩트의 필수 시작점.

  • 이것이 기반입니다 - 정확한 구조와 Anthropic 브랜딩을 포함합니다
  • 변경하지 않을 것: 레이아웃 구조, 사이드바 구성, Anthropic 색상/폰트, 시드 컨트롤, 액션 버튼
  • 교체할 것: p5.js 알고리즘, 파라미터 정의, Parameters 섹션의 UI 컨트롤
  • 파일 내의 상세한 주석이 유지할 것과 교체할 것을 정확히 표시합니다

• templates/generator_template.js: p5.js 모범 사례와 코드 구조 원칙을 위한 참조.

  • 파라미터 구성, 시드된 랜덤성 사용, 클래스 구조화 방법을 보여줍니다
  • 패턴 메뉴가 아닙니다 - 이 원칙을 사용하여 고유한 알고리즘을 구축합니다
  • 알고리즘을 HTML 아티팩트에 인라인으로 임베드합니다 (별도 .js 파일을 만들지 않습니다)

핵심 알림:

• 템플릿은 영감이 아닌 시작점입니다
• 알고리즘은 고유한 것을 만드는 곳입니다
• 흐름 필드 예제를 복사하지 않습니다 - 철학이 요구하는 것을 만듭니다
• 하지만 템플릿의 정확한 UI 구조와 Anthropic 브랜딩은 반드시 유지합니다