AI 에이전트로 움직이는 디자인 캔버스

팀과 함께 디자인하세요. AI 에이전트, MCP, 그리고 GPU 가속 벡터 편집 도구가 함께합니다.

라이브러리

움직이는 디자인, Hana로 만들다

Hana로 만든 예시를 살펴보세요. 리믹스하고, 다시 만들어 보며 아이디어가 어떻게 프로덕션 수준의 경험이 되는지 탐색하세요.

디자인 도구

전문 디자인을 위한 익숙하고 강력한 도구

익숙한 디자인 도구와 고급 효과, 그리고 큰 프로젝트도 깔끔하게 관리할 수 있는 구조.

  • 프레임 기반 무한 캔버스
  • 벡터 네트워크와 불리언
  • 페이지와 섹션
  • 그라디언트, 글래스, 3D 셰이프
인터랙션과 애니메이션

디자인에 생명을 불어넣으세요

상태, 이벤트, 애니메이션으로 모션과 인터랙션을 더하세요. 직접 하거나 에이전트에게 맡기면 됩니다.

  • 상태와 이벤트
  • 트랜지션 액션으로 애니메이션
  • Follow 및 Look At 인터랙션
AI 에이전트

에이전트가 디자인하는 캔버스

Hana의 자체 에이전트가 캔버스에서 디자인하고, Claude, ChatGPT, Cursor 또는 모든 MCP 클라이언트에서 나의 에이전트도 함께할 수 있습니다.

  • 프레임, 효과, 인터랙션 제작
  • 여러 화면을 동시에 제작
  • MCP로 연결하는 나의 에이전트
  • 모든 결과물은 직접 편집 가능
에이전트 연결하기
인터랙션을 위해 설계

인터랙션을 위해 만든 디자인 툴

실시간 인터랙티브 인터페이스, 모션, 그래픽을 디자인하는 데 필요한 도구를 갖춘 빠르고 익숙한 인터페이스.

  • 익숙한 디자인 도구

    프레임, 펜 도구, 불리언, 도형 등으로 무한 캔버스에서 디자인하세요.

  • 강력한 인터랙션

    상태, 이벤트, 액션으로 인터랙티브 경험을 만드세요.

  • 애니메이션 경험

    상태와 트랜지션으로 디자인에 모션을 더하세요.

  • 시각 효과

    그림자, 블러, 노이즈, 글래스, 3D로 실시간 시각 효과를 만드세요.

  • 실시간 불리언

    정교한 불리언 시스템을 만들고 실시간으로 애니메이션하세요.

  • 벡터 네트워크

    벡터 네트워크를 만들고 독창적인 인터랙션을 더하세요.

  • 캔버스 미리보기

    캔버스에서 바로 인터랙션과 애니메이션을 미리 확인하세요.

  • 프로덕션용 내보내기

    인터랙티브 디자인을 웹사이트, 웹 앱, 디지털 제품에 통합하세요.

협업

실시간으로 함께 디자인하세요

무한 캔버스에서 실시간으로 협업하며 인터랙션을 디자인하고, 팀 전체를 위한 공유 워크스페이스에서 정리하세요.

실시간 멀티플레이어

같은 파일에서 팀 전체와 함께 디자인하세요.

역할 및 권한

편집자와 뷰어 역할을 개별적으로 완벽하게 관리하세요.

파일 관리

모든 파일과 프로젝트를 저장하고 관리하는 팀 공유 공간.

메모와 피드백

에디터 안에서 바로 팀에게 댓글을 남기거나 메모하세요.

내보내기

웹을 위한 인터랙션을 배포하세요

웹사이트, 웹 앱, 디지털 제품에 인터랙티브 경험을 매끄럽게 통합하세요.

마우스나 손가락을 움직여 인터랙션해 보세요씬 리믹스
index.html
<!-- Import the Hana Viewer -->
<script type="module"
  src="https://cdn.spline.design/@splinetool/hana-viewer@1.0.97/hana-viewer.js">
</script>

<!-- Add your design anywhere on the page -->
<hana-viewer
  url="https://prod.spline.design/HfFj1WYWsj69dY8U-Eld/scene.hanacode">
</hana-viewer>

Hana로 디자인을 시작하세요

에이전트를 연결하고, 팀을 초대하고, 오늘 첫 디자인을 배포하세요.