SVG 패스 애니메이션 & 캔버스 드로잉 노드 에디터 - 클레이 3D 노드 스튜디오

SVG 패스 애니메이션 & 캔버스 드로잉 노드 에디터(Clay Node Studio)는 웹 브라우저 상에서 선, 도형, 파동, 나선 및 자유 손그림 패스를 다양한 모션을 띤 애니메이션 노드와 직관적인 베지에 와이어로 연결하여 감각적인 2D 벡터 모션아트와 캔버스 파티클 이펙트를 제작할 수 있는 고성능 3D 클레이모피즘 비주얼 스튜디오입니다.

별도의 복잡한 코딩 없이 반응형 캔버스 인터페이스 위에서 드래그 앤 드롭 및 터치로 노드를 배치하고 실시간으로 파라미터를 미세 조절하며, 완성된 결과물을 브라우저 즉시 재생용 .svg 파일, HTML/CSS/JS 코드, PNG 스냅샷, JSON 프로젝트로 다운로드할 수 있습니다.

🌟 핵심 주요 기능

• 🎨 입체감 있는 3D 클레이모피즘 (Claymorphic 3D UI) 디자인:
  • 부드러운 볼륨감과 파스텔/비비드 톤의 3D 입체 그늘 및 그림자, 볼록한 버튼 및 와이어 글로우 이펙트를 갖춘 프리미엄 디자인입니다.
  • 데스크톱 마우스 드래그는 물론 모바일/태블릿 터치 제스처를 지원하여 어느 기기에서나 편안하게 노드를 조작할 수 있습니다.
• 🧩 풍부한 모듈형 노드 라이브러리:
  • 도형 & 소스 노드: 별(Star), 원/타원(Circle), 다각형(Polygon), 사인 파동(Wave), 나선형(Spiral), 커스텀 SVG 패스(d="...") 지원.
  • 자유 캔버스 드로잉 노드: 인터랙티브 캔버스 위에서 손그림/마우스/스타일러스로 자유롭게 그린 라인을 Smooth Bezier SVG 패스로 자동 변환합니다.
  • 애니메이션 & 트랜스폼 노드: Stroke Dash Offset 라인 드로잉 애니메이션, 패스 형상 간 부드러운 모핑, 360도 회전 및 바운싱 크기 변형.
  • 3D 컬러 & 글로우 필터 노드: 레인보우 라이브 쉐이딩, 네온 3D 글로우 필터, 입체 드롭 그림자 효과.
  • 캔버스 파티클 이미터 노드: 벡터 패스를 따라 흩날리는 캔버스 입자 dust/sparkle 파티클 효과.
• 🚀 실시간 파이프라인 evaluation & 라이브 뷰포트:
  • 그래프 연결 상태와 각 노드의 파라미터(속도, 두께, 색상, 입자 수, 중력 등)를 변경하는 즉시 라이브 플로팅 뷰포트에 60 FPS로 반영됩니다.
• 📥 다양한 포맷의 다운로드 & 내보내기:
  • 독립 실행형 SVG (.svg): 자바스크립트 라이브러리 없이 웹페이지/디자인 도구에서 자체 애니메이션이 실행되는 pure SVG 파일 다운로드.
  • 웹 임베드 코드 (HTML/CSS/JS): 본인 블로그나 웹 앱에 복사해서 붙여넣을 수 있는 깔끔한 코드 생성.
  • 고화질 PNG 스냅샷: 원하는 렌더링 프레임을 고해상도 PNG 이미지로 저장.
  • JSON 프로젝트 파일 (Save & Load): 노드 구조와 연결 상태 전체를 .json 프로젝트로 저장하고 다시 불러와 수정 가능.

🛠️ 사용 방법 (How to Use)

1. 데모 프레셋 실행:
   • 상단 헤더의 ⭐ 스타 모핑, 🌈 네온 파동, ✨ 파티클 트레일, 🌀 사이버 스파이럴 버튼을 눌러 준비된 노드 조합을 확인해보세요.
2. 노드 추가 및 배치:
   • 좌측 ‘노드 보관함’에서 원하는 노드를 클릭하거나 캔버스로 드래그하여 생성합니다.
   • 노드 헤더를 잡고 드래그하여 자유롭게 배치합니다.
3. 와이어 연결:
   • 노드의 우측 출력 포트(Output) 동그라미를 마우스나 손가락으로 누른 채, 다른 노드의 좌측 입력 포트(Input)로 드래그하면 아름다운 글로우 곡선 와이어가 연결됩니다.
4. 실시간 파라미터 조절:
   • 노드를 클릭하면 우측 ‘속도, 두께, 색상, 애니메이션 파동’ 속성창이 열립니다. 슬라이더나 컬러 피커를 옮기며 실시간 반응을 확인하세요.
5. 결과물 내보내기:
   • 상단 🚀 내보내기 버튼을 클릭하여 SVG 파일, HTML 코드, PNG 이미지, JSON 프로젝트를 다운로드하세요.

자주 묻는 질문 (FAQ)

어떻게 시작하나요?

앱을 열면 제공되는 기본 설정과 화면 안내를 확인할 수 있습니다. 먼저 예시 상태에서 주요 조작을 살펴본 뒤, 목적에 맞게 입력값이나 도구를 변경해 보세요.

별도 설치가 필요한가요?

이 앱은 웹 브라우저에서 실행하도록 구성되어 있습니다. 원활한 사용을 위해 최신 브라우저와 안정적인 인터넷 환경을 권장합니다.

결과가 예상과 다르게 보이면 무엇을 확인해야 하나요?

현재 선택한 설정, 입력값, 화면 크기, 브라우저 상태에 따라 결과가 달라질 수 있습니다. 초기화 또는 예시 설정으로 돌아간 뒤 값을 하나씩 바꿔 확인하면 원인을 파악하기 쉽습니다.