모션사이츠, 영화 같은 웹사이트 만드는 클로드 스킬 오픈소스 공개

모션사이츠가 클로드를 통해 평범한 AI 레이아웃 대신 영화 같은 비주얼을 갖춘 웹 랜딩페이지를 제작할 수 있는 오픈소스 스킬 motionsites-web-builder를 공개했습니다.

AI가 만든 웹사이트가 늘 뻔해 보이는 이유는 모호한 기획, 실제 미디어 에셋의 부재, 그리고 완성된 결과물을 AI 스스로 확인하지 않는다는 점 때문입니다. 이 스킬은 700개 이상의 웹 디자인 자산을 기반으로 이 세 가지 문제를 직접 해결합니다.

핵심 기능과 작동 방식

단순히 그럴듯한 디자인을 요구하는 프롬프트가 아니라, 정밀한 디자인 규격과 자동화된 검수 루프를 에이전트에 심어주는 구조입니다.

스킬 내부에는 모션사이츠에서 가장 인기 있는 40개의 무료 디자인 예시가 탑재되어 있습니다. 사용자가 요구사항을 전달하면 클로드는 가장 적합한 예시를 참조해 디테일과 감도를 맞춥니다.

에셋 부족을 해결하기 위해 공개 호스팅된 미디어 쉘프도 제공합니다. 50개 이상의 고화질 배경 영상, 30개의 투명 3D 컷아웃, 29개의 이미지가 번호가 매겨진 시트 형태로 정리되어 있어 클로드가 직접 눈으로 보듯 에셋을 선택합니다.

구현 가능한 테크닉 레시피도 55개 이상 포함되어 있습니다. 매끄러운 비디오 루프, 리퀴드 글래스, 단어별 블러 헤드라인, 마우스 스크럽 비디오, 스포트라이트 효과, Three.js 기반 실시간 3D 모델 렌더링 등이 대표적입니다.

코드 작성이 끝나면 플레이라이트를 활용한 자동 검수 루프가 동작합니다. 스크린샷을 찍어 깨진 에셋, 모바일 화면 넘침, 폰트 적용 여부, 비디오 재생 상태를 스스로 점검하고 수정합니다.

코드를 직접 생성하는 대신 Lovable, Bolt, v0, Cursor, Manus, Google AI Studio, Kimi 등에 최적화된 프롬프트만 따로 추출해 주는 모드도 지원합니다.

설치 및 실행 방법

깃허브의 Motionsites-AI/claude-skill 저장소 릴리스에서 zip 파일을 내려받아 바로 사용할 수 있습니다.

클로드의 커스터마이즈 메뉴 내 스킬 탭에서 압축파일을 업로드해 활성화하면 되며, 설정에서 코드 실행 기능이 켜져 있어야 합니다.

플러그인 CLI 명령어로 설치하거나 로컬 클로드 스킬 디렉터리에 직접 복사해 넣는 것도 가능합니다. 스크린샷 자동 검수 기능을 완전히 쓰려면 pip 명령어로 플레이라이트와 크로미움을 설치해 두는 것이 좋습니다.

설치가 끝나면 고급 스마트 반지 랜딩페이지나 건축 사진작가의 미니멀한 포트폴리오를 만들어 달라는 식으로 자연스럽게 요청하면 됩니다.

스킬의 명령어와 코드는 MIT 라이선스로 배포됩니다. 내장된 프롬프트와 미디어 에셋의 저작권은 모션사이츠에 있지만, 이 스킬로 생성하는 웹사이트 내에서는 자유롭게 쓸 수 있습니다.

왜 중요한가

1인 개발자나 크리에이터 입장에서 고급 인터랙션과 3D 효과가 들어간 웹사이트를 외주 없이 빠르게 구현할 수 있다는 점에서 활용 가치가 매우 높습니다.

특히 플레이라이트로 화면을 캡처해 에이전트가 직접 모바일 깨짐이나 폰트 문제를 잡는 루프는 기존 AI 코딩 도구의 한계를 잘 보완했습니다. 다만 내장된 미디어는 범용 샘플 성격이 강하므로, 실제 제품 페이지로 완성도를 높이려면 전용 고화질 누끼 및 영상 소스를 갖추는 준비가 필요합니다.