Visibox 받기 →
← 모든 뉴스사용법

Claude, Cursor, Codex로 Visibox CSS 효과 만들기

Claude가 완전히 새로운 Visibox 효과를 처음부터, 라이브로, 단 몇 분 만에 만들어요.

Visibox 5에는 MCP 서버가 내장되어 있어요. 어렵게 들리지만, 데스크톱 AI 어시스턴트가 앱 안으로 들어와 실제 작업을 할 수 있다는 뜻이에요. 위 영상에서는 Claude를 Visibox에 연결하고, 제가 직접 짤 줄 모르는 효과를 만들어 달라고 해요. 제임스 본드 스타일의 총구 아이리스로, 화면을 원 모양으로 가리고 트랙에 맞춰 이리저리 튀는 효과예요. 몇 분 뒤 이 효과가 제 프로젝트에 들어와 있고, 바로 클립에 얹을 수 있어요.

설치할 플러그인도, 배울 효과 언어도 없어요. 원하는 걸 설명하면 어시스턴트가 손이 많이 가는 부분을 처리하고, 여러분은 연출가 자리를 지키면 돼요.

Visibox의 효과는 그냥 CSS예요

이게 가능한 비결은 Visibox 효과가 평범한 CSS라는 데 있어요. 모든 웹 페이지의 스타일을 입히는 바로 그 언어예요. 기술적으로 들리지만, 폐쇄적인 독자 효과 형식과는 정반대예요. CSS는 인터넷에서 가장 문서화가 잘된 것 가운데 하나라서, 코드를 잘 쓰는 AI 어시스턴트라면 이미 Visibox 효과도 잘 써요.

어시스턴트가 아무 정보 없이 짐작으로 쓰는 것도 아니에요. 연결되면 프로젝트에 이미 있는 효과를 읽고, Visibox가 기대하는 규칙을 익히고, 거기에 맞는 새 효과를 써요. 직접 디버깅해야 하는 코드 조각이 아니라, 실제로 불러와서 돌아가는 효과가 나와요.

영상에서 볼 수 있는 내용

처음부터 끝까지 잘라 낸 부분 없이 보여 줘요.

  • 한 번만 연결하세요. 설정 메뉴에서 클릭 한 번으로 Visibox MCP 서버를 등록해요.
  • 연결을 확인하세요. 어시스턴트가 무엇을 할지 설명만 하는 게 아니라 실제로 Visibox와 대화하고 있는지 간단히 확인해요.
  • 효과를 설명하세요. 평범한 말로 총구 아이리스 효과를 요청해요.
  • 만들어지는 과정을 지켜보세요. 어시스턴트가 기존 효과를 읽고, CSS를 쓰고, 새 효과를 프로젝트에 추가해요.
  • 클립에 얹으세요. 다 만들어지면 클릭 몇 번으로 클립에 적용할 수 있어요.

주도권은 여러분에게 있어요

핵심은 “AI가 대신 해 준다”가 아니에요. 예전 같으면 문서를 읽거나 누군가를 고용해야 했던 지루하고 손이 많이 가는 작업이 이제 문장 하나면 끝난다는 거예요. 공연이 어떻게 보일지, 무엇이 언제 나갈지, 무엇을 남길지는 여전히 여러분이 정해요. 어시스턴트는 무대 스태프이고, 연출가는 여러분이에요.

같은 방식은 효과 말고도 훨씬 넓게 쓸 수 있어요. 연결된 어시스턴트는 프로젝트를 편집하고, 클립을 재배치하고, 곡을 손봐 줄 수 있어요. 오디오 반응형 비주얼라이저도 만들 수 있는데, 더 까다로운 분야라 AI에 훨씬 잘 맞아요. 이 내용은 별도 가이드에서 다뤄요. Claude, ChatGPT, Gemini로 AI 음악 비주얼라이저 만들기

쓸 수 있는 어시스턴트

Visibox는 MCP 프로토콜을 지원하는 모든 데스크톱 어시스턴트와 함께 작동해요. 이 영상을 녹화한 시점 기준으로 다음과 같아요.

  • Claude Desktop과 Claude Code (Anthropic)
  • Cursor
  • Visual Studio Code
  • OpenAI Codex
  • Gemini CLI

지원 도구는 계속 늘어나고 있어요. 자세한 설정 방법은 Visibox 매뉴얼에 있어요.

직접 해 보세요

Visibox는 무료로 시작할 수 있고, 2주 동안 모든 Pro 기능이 열려 있어서 어시스턴트를 연결하고 나만의 효과를 몇 개 만들어 볼 수 있어요. Visibox를 다운로드하고 AI에게 보고 싶은 걸 말해 보세요.