image2vedio 홈페이지 만들어보기

Posted by Albert 61Day 8Hour 32Min 49Sec ago [2025-12-07]

요즘 AI덕분에 이미지를 동영상으로 만들어주는 신세계를 맛보게 되었다.

이러한 기능을 만들어 보고 싶다는 생각이 들어서 한번 만들어봤다.

무료로 지원하는 Api를 찾다가 DeAPI, KlingAI 2개로 정하여 만들기는 했는데

KlingAI같은경우 무료 크래딧 으로는 API사용이 불가 하였다.

그래도 DeAPI 는 잘 작동하여 만들고 싶었던 기능은 구현하였다. ^^


기술 스택

  • Frontend: Next.js, React
  • Backend: Node.js, API Routes
  • Database: MySQL (사용자 정보 및 비디오 메타데이터 저장)
  • External APIs: KlingAI, DeAPI


    


주요 기능

1. 비디오 생성 (Video Generation)

  • 다중 엔진 지원: KlingAI와 DeAPI 두 가지 비디오 생성 엔진을 지원합니다. 사용자는 원하는 엔진을 선택하여 비디오를 생성할 수 있습니다.
  • 이미지 업로드: 비디오 생성의 기준이 될 이미지를 업로드할 수 있습니다.
  • 프롬프트 입력: 비디오의 내용을 설명하는 텍스트 프롬프트를 입력받아 생성에 반영합니다.
  • 동적 모델 선택: DeAPI 사용 시, 서버에서 사용 가능한 최적의 모델(예: LTX-Video)을 자동으로 조회하고 선택하여 안정적인 생성을 지원합니다.

2. 진행 상황 표시 (Progress Display)

  • 실시간 상태 확인: 비디오 생성 요청 후, 작업의 진행 상태가 실시간으로 표시됩니다.
  • 진행률 표시: '처리 중(Processing)' 상태일 때 주황색 배지와 함께 구체적인 진행률(%)이 표시되어 작업 완료 예상 시간을 가늠할 수 있습니다.

3. API 설정 (API Settings)

  • 개인화된 키 관리: 사용자는 자신의 KlingAI 및 DeAPI API 키를 직접 등록하여 사용할 수 있습니다. 이를 통해 공용 키가 아닌 개인 키를 우선적으로 사용하여 안정성을 높일 수 있습니다.
  • 보안 및 편의성:
  • 입력한 키는 데이터베이스에 암호화되어 저장됩니다.
  • 설정 페이지 진입 시, 저장된 키가 없으면 시스템 기본값(.env 파일 내용)을 보여줍니다.
  • 설정 변경 시 .env 파일의 내용도 함께 업데이트되어 시스템 전체에 반영됩니다.
  • 키 저장 전 유효성 검사 및 확인 창을 통해 실수를 방지합니다.


Github: https://github.com/visionboy/image2vedio






LIST

Copyright © 2014 visionboy.me All Right Reserved.