웹사이트콘셉트 데모
MOTION HOUSE — AI 필름 제작 OS
시네마틱 브랜드 랜딩·인텔리전스 스튜디오·15초 AI 영상 편집기를 결합한 크리에이티브 OS
3개 통합 화면브랜드·대시보드·편집기
- 누구를 위해
- 브랜드 필름·숏폼 광고 기획부터 생성형 AI 모델 비교와 컷 편집까지 한곳에서 운영하려는 크리에이티브 스튜디오
- 무엇이 문제였나
- 생성형 AI 영상 도구가 단발성 프롬프트 입력에 그쳐, 15초 광고의 컷별 프롬프트·비율·모델 비교와 캠페인 진행률 관리가 분절되는 문제를 해결해야 했습니다.
- 무엇을 했나
- 시네마틱 에디토리얼 랜딩 페이지, 캠페인 인텔리전스 대시보드, 그리고 5개 장면 스토리보드 타임라인과 A/B 비교 슬라이더를 갖춘 15초 AI 필름 에디터를 하나의 워크스페이스로 구현했습니다.
- 무엇이 달라지나
- 새 프로젝트 생성, Kling·Seedance·Veo 엔진 전환, 장면 순서 변경, 9:16·4:5·16:9 비율 전환, A/B 비교, 새로고침 상태 유지, JSON 패키지 Export가 브라우저에서 즉시 작동합니다.

어떻게 움직이나
한 건의 일이 처음부터 끝까지 어떻게 흘러가는지 순서대로 보여드립니다.
브리프 한 건이 15초 AI 광고 필름으로 완성되기까지
재생을 누르거나 단계를 눌러 순서대로 살펴보세요.
브랜드 소개부터 캠페인 생성·컷 편집·A/B 비교·JSON 추출까지 한 화면에서 이어집니다
- 통합 화면
- 랜딩·스튜디오·편집기
- 멀티 모델
- Kling · Seedance · Veo
- 스토리보드
- 15초 · 5컷 타임라인
분절된 AI 영상 생성 과정을 디렉터 중심의 15초 스토리보드 워크플로우로 통합합니다.
직접 써보기
가상 브랜드로 만든 데모입니다. 주문·예약·상담은 실제로 전송되지 않습니다.
이렇게 해보세요
- 상단 스위처에서 01 Brand Film → 02 Intelligence → 03 Film Editor 3개 화면을 전환해보세요
- 02 Intelligence 대시보드에서 + New Campaign 버튼으로 새 광고 캠페인을 생성하면 즉시 15초 편집기로 연결됩니다
- 03 Film Editor 우측 패널에서 Kling 1.6 Pro · Seedance 2.0 · Veo 2 모델을 바꾸고 Re-Synthesize Cut으로 시드 재합성을 확인해보세요
체험 가이드 2개 더 보기
- 상단 9:16 · 4:5 · 16:9 비율 버튼과 A/B Compare 버튼을 눌러 슬라이더로 두 엔진 시안을 직접 비교해보세요
- 하단 5개 스토리보드 카드의 좌우 화살표로 컷 순서를 바꾸고 우측 상단 Export JSON으로 매니페스트를 내보내보세요
화면 크기를 바꿔 PC와 모바일에서 같은 흐름을 확인할 수 있습니다.
PUBLIC SITE + ADMIN OS
보이는 사이트와
운영하는 관리자까지
MOTION HOUSE — AI 필름 제작 OS 같은 공개 화면을 만든다면, 실제 담당자가 매일 사용할 관리자 환경도 함께 설계합니다. 오픈 이후 수정·응대·성과 확인과 장애 대응까지 한 프로젝트로 책임집니다.
통합 어드민 직접 보기AI 모델 라우팅·크레딧 예산
01Kling·Seedance·Veo 호출 쿼터와 프로젝트별 렌더 비용 임계치 관리
스토리보드 승인·마스터 릴리즈
02컷별 A/B 시안 컨펌 이력과 매체별(9:16·4:5·16:9) 납품 패키지 관리
콘텐츠·배너 CMS
03페이지와 프로모션을 직접 수정하고 승인·예약 발행
고객·문의 CRM
04유입 채널부터 담당자 배정과 후속 업무까지 연결
성과·전환 분석
05방문과 광고비를 문의·예약·주문·매출로 연결
권한·보안·백업
06역할별 권한, 변경 이력과 장애·복구 상태 관리
만든 범위
Obsidian Black·Warm Ivory·Acid Lime 팔레트와 스위스 그리드 타이포그래피를 바탕으로 제작한 AI 영상 스튜디오 웹 애플리케이션입니다. 비대칭 멀티컷 히어로와 인터랙티브 파이프라인을 담은 브랜드 랜딩(01), 모델별 생성 텔레메트리와 ROAS·검색·캠페인 생성 모달을 갖춘 인텔리전스 스튜디오(02), 그리고 5개 컷의 타임라인 순서 변경·프롬프트 편집·Kling/Seedance/Veo 엔진 배정·A/B 와이프 비교·JSON Export를 지원하는 15초 필름 에디터(03)를 상단 네비게이션으로 즉시 오가며 체험할 수 있습니다.
구현한 기능
- 멀티 모델 라우팅 (Kling · Seedance · Veo)장면 성격에 맞춰 Kling 1.6 Pro, Seedance 2.0, Google Veo 2 엔진을 컷별로 배정하고 프롬프트·시드·모션 강도를 즉시 재합성
- 15초 5컷 스토리보드 타임라인5개 장면의 순서를 실시간으로 교체하고 각 컷의 길이(Duration)를 조절해 15.0초 광고 마스터 타임을 정밀하게 맞춤
- 실시간 A/B 시안 비교 슬라이더 & 비율 전환9:16 릴스·4:5 피드·16:9 마스터 비율을 즉시 전환하고 두 생성 엔진의 색감·피사계 심도를 드래그 슬라이더로 비교
- 인텔리전스 대시보드 & JSON 마스터 Export캠페인 검색·필터·신규 브리프 생성부터 LocalStorage 자동 보존, 스냅샷 복원, 프로덕션 JSON 매니페스트 내보내기까지 완비
사용한 기술
React 19 · TypeScript · TailwindCSS · Framer Motion · Lucide Icons · LocalStorage Persistence
확인된 사실
- 핵심 화면
- 랜딩·스튜디오·15" 편집기
- AI 생성 엔진
- Kling · Seedance · Veo
- 편집 인터랙션
- 5컷 타임라인 · A/B 슬라이더
- 상태 보존
- LocalStorage + JSON Export
데모의 구현 범위입니다. 실제 고객 성과가 아니며, 브랜드와 인물은 체험을 위해 만든 가상 콘셉트입니다.