Visibox를 Claude·Cursor·Codex로 조작해 CSS 효과 만들기
Visibox는 를 함께 제공해 Claude 같은 가 앱의 많은 기능을 직접 다룰 수 있다. 설정 메뉴에서 한 번의 클릭으로 Visibox MCP를 등록하고, 가 Visibox와 제대로 연결됐는지 확인할 수 있다. 연결 뒤에는 AI가 기존 효과들을 읽고 작성 규칙을 파악한 다음, 새 CSS 효과를 만들어 프로젝트에 넣을 수 있다.
예시 효과는 제임스 본드 영화처럼 화면을 원형 구멍으로 좁히고, 음악 재생에 맞춰 그 원이 움직이는 방식이다. 완성된 효과는 몇 번의 클릭으로 클립에 적용할 수 있다. 핵심은 AI가 모든 결정을 대신하는 것이 아니라, 사람이 원하는 결과를 말하면 AI가 반복적이고 세밀한 코딩 작업을 처리하는 흐름이다.
Visibox 효과는 웹페이지를 꾸밀 때 쓰는 CSS로 만들어지기 때문에, 코드 작성에 강한 가 이런 시각 효과 작업에도 잘 맞는다. 같은 방식으로 프로젝트 편집, 클립 재배치, 음악 수정, 셰이더 기반 비주얼라이저 제작에도 AI를 쓸 수 있다.
핵심 포인트
- Visibox는 를 통해 와 연결될 수 있다.
- 설정 메뉴에서 Visibox MCP를 등록하고 연결 여부를 확인할 수 있다.
- AI가 기존 CSS 효과를 읽고 규칙을 익힌 뒤 새 효과를 만든다.
- 완성된 효과는 프로젝트에 넣고 클립에 적용할 수 있다.
- CSS 효과뿐 아니라 클립 편집, 음악 수정, 셰이더 기반 시각화에도 같은 접근을 쓸 수 있다.