AI 영상 제작 서비스 — 웹 편집기와 프론트엔드 고도화

크랩스의 AI 영상 제작 서비스에서 Next.js 프론트엔드와 API 연동을 담당하고, 후속 계약으로 타임라인·자막·미리보기 등 영상 편집 기능을 고도화했습니다. 자동 생성 이후에도 사용자가 장면과 자막을 다듬고 결과를 확인할 수 있는 웹 편집 환경을 구현했습니다. 최초 프론트엔드 개발과 후속 본편집 고도화, 두 차례의 고객 계약을 하나의 제품 개발 사례로 정리했습니다. 제공받은 기획·디자인과 API를 기준으로 Next.js·React 화면을 구현하고 Remotion 기반 편집 흐름을 연결했습니다. 프론트엔드·API 연동·편집기 고도화에 집중해 생성 결과를 사용자가 직접 다룰 수 있는 제품 경험으로 완성했습니다. 공개 화면은 당시의 편집기 작업 기록이며, 영상 속 콘텐츠는 UI 시연용 예시입니다. 타임라인과 자막: 클립과 자막을 탐색하고 편집하며 결과를 미리 볼 수 있는 작업 화면을 구현했습니다. 에셋과 서버 연동: 영상·이미지 등 에셋 업로드와 편집 데이터 저장을 제공된 API에 연결했습니다. 본편집 고도화: 후속 개발에서 크롭, 화면 구성 조절 등 브라우저 기반 영상 편집 기능을 보강했습니다. 구조와 인계: FSD 기반 프론트엔드 구조, 브라우저 테스트와 오류 대응, 소스코드 인계를 담당했습니다.