Claude Code로 이미지와 동영상을 생성해 웹사이트에 넣는 방법

Claude Code로 이미지와 동영상을 생성하려면 MCP를 통해 외부 생성 서비스에 연결합니다. 지원 모델을 선택하고 정확한 요청의 비용을 확인한 뒤 승인을 기다리도록 지시합니다. 먼저 이미지를 만들고, 완료된 이미지의 생성 ID를 영상의 첫 프레임으로 지정한 다음 두 파일을 웹 프로젝트에 저장합니다.

예시는 카페 홈페이지입니다. 따뜻한 실내 사진, 부드러운 카메라 이동, 옆에 배치한 읽기 쉬운 글을 구성합니다. 포트폴리오나 제품 페이지에도 적용할 수 있습니다. 파일명과 생성 ID를 명확히 기록해 이미지, 영상, 페이지 위치의 대응 관계를 유지합니다.

Claude Code가 이미지와 동영상을 생성할 수 있나요?

Claude Code는 작업을 조율하고 웹 코드를 수정합니다. MCP는 외부 도구에 접근하게 해 줍니다. FlyAIgh는 선택한 이미지 또는 동영상 모델로 요청을 보내고 작업과 결과를 반환합니다. SVG나 HTML 작성, 업로드한 이미지 이해는 사진이나 동영상 생성과 서로 다른 기능입니다.

이 차이를 알면 방법을 고르기 쉽습니다. 간단한 아이콘, 차트, CSS 애니메이션은 코드만으로 충분할 수 있습니다. 사진 같은 장면이나 카메라 움직임을 생성하려면 적절한 미디어 모델을 사용합니다. MCP를 연결해도 모든 모델이 같은 입력, 길이, 해상도를 지원하는 것은 아닙니다.

생성 도구 연결하기

설치와 로그인을 마친 Claude Code와 유효한 FlyAIgh Basic 이상 구독이 필요합니다. Starter Pack만으로는 MCP를 사용할 수 없습니다. Claude Code 이용료와 FlyAIgh 생성 크레딧은 별도로 계산됩니다. FlyAIgh의 도구 → MCP에서 API 키를 만들고 필요하면 일일 크레딧 한도를 설정합니다.

아래 HTTP 연결 명령을 자신의 터미널에서 실행하면서 자리표시자를 자신의 키로 바꿉니다. 키가 저장된 클라이언트 설정은 비밀로 관리하고 저장소에 커밋하거나 웹 코드에 넣지 마세요. 글 끝의 FlyAIgh MCP 가이드에 최신 설정 방법이 있습니다. Claude Code에서 /mcp로 연결을 확인하고, claude mcp list로 설정된 서버를 볼 수도 있습니다.

claude mcp add --transport http flyaigh https://www.flyaigh.com/api/mcp \
  --header "Authorization: Bearer YOUR_FLYAIGH_API_KEY"

생성 전에 get_balance와 list_models를 호출하도록 요청합니다. 모델명을 추측하지 말고 반환된 모델 ID와 매개변수를 선택합니다. 자신의 사진을 쓰려면 upload_file을 호출합니다. 서명된 업로드 URL이 반환되면 파일 내용을 그 주소로 전송한 후 file_id를 사용해야 합니다. 로컬 경로나 임의의 이미지 URL은 이 참조 ID를 대신할 수 없습니다.

페이지의 용도에 맞는 이미지 만들기

스타일을 나타내는 형용사보다 레이아웃부터 정합니다. 이미지 위치, 화면 비율, 피사체 배치, 여백을 결정합니다. 이 예제는 16:9 이미지를 미디어 영역에 두고 제목은 옆에 HTML로 표시합니다. 글을 따로 수정할 수 있고 휴대전화에서도 읽기 편합니다.

사용 가능한 이미지 모델과 선택한 설정의 견적을 요청합니다. list_models의 가격은 기본 설정의 예시이며 quote가 실제 요청의 비용을 계산합니다. 승인한 뒤 generate_image를 실행합니다. 모델, 해상도, 품질, 참조 이미지를 바꾸면 견적도 달라질 수 있습니다.

get_job이 완료를 반환하면 영상으로 만들기 전에 이미지를 확인합니다. 구도, 불필요한 글자, 임의로 생긴 물체, 좁은 화면에서의 배치를 살펴봅니다. 승인한 이미지 ID와 프롬프트, 모델을 기록합니다. 여러 버전 중에서는 사용할 것을 명확히 선택합니다. 가장 최근 결과가 승인한 결과라는 보장은 없습니다.

승인한 이미지를 동영상으로 만들기

이미지를 승인한 뒤 i2v를 지원하는 동영상 모델을 고릅니다. 완료된 이미지 생성 ID를 first_frame으로 전달합니다. 그래야 선택한 이미지와 영상이 연결됩니다. 비슷한 장면을 글로만 설명하면 새 장면이 생성됩니다. 길이, 해상도, 화면 비율, 오디오 설정을 정해 생성 전에 다시 견적을 받습니다.

움직임은 화면 묘사와 분리해서 설명합니다. 카메라는 천천히 다가가고, 김은 약하게 움직이며, 컵은 고정합니다. 페이지에 맞는 지원 범위 내의 짧은 길이부터 시작합니다. 차분한 홈페이지 영상을 원한다면 큰 장면 전환까지 함께 요구하지 않습니다. 첫 프레임은 생성을 유도하지만 모든 물체나 로고의 픽셀을 고정하지는 않습니다.

반환된 영상 작업 ID로 get_job을 호출해 진행 상황을 확인합니다. 완료되면 끝까지 보고 소리가 있으면 함께 듣습니다. 컵 모양, 경계, 카메라 이동, 마지막 프레임을 살펴봅니다. 작업이 완료되어도 시각적 오류가 남을 수 있습니다. 반복 재생하려면 마지막에서 처음으로 돌아갈 때 튀는지 확인합니다.

파일을 내려받아 웹사이트에 넣기

승인한 이미지와 완료된 영상을 내려받습니다. get_job이 반환하는 비공개 파일 다운로드 링크는 1시간 뒤 만료됩니다. 필요하면 get_job을 다시 호출해 새 링크를 받습니다. 임시 서명 URL을 웹사이트의 영구 미디어 주소로 쓰지 마세요. 이미지 ID, 영상 ID, 프롬프트, 모델, 최종 파일명의 대응 기록을 남깁니다.

Next.js에서 public/media의 파일은 /media로 제공됩니다. 다른 프레임워크는 해당 정적 파일 디렉터리나 자신의 CDN을 사용합니다. 예제는 실제 JPEG인 hero-poster.jpg와 브라우저에서 재생 가능한 MP4인 hero.mp4를 전제로 합니다. 필요하면 파일을 변환합니다. PNG 확장자를 .jpg로 바꾸기만 해서는 형식이 변환되지 않습니다. 공개 페이지에 API 키나 생성 호출을 넣지 마세요.

HTML 예제는 기본 재생 컨트롤과 포스터 이미지를 제공하며 사용자가 재생을 시작합니다. preload="none"은 영상을 미리 요청하지 않도록 지정하지만 브라우저 동작은 다를 수 있습니다. 좁은 화면에서는 세로로 배치하며 글과 미디어를 분리합니다. React JSX에서는 className, playsInline 등 JSX 속성 표기를 사용합니다.

<section class="hero">
  <div>
    <h1>Your page heading</h1>
    <p>Your introduction</p>
  </div>
  <video controls playsinline preload="none"
    poster="/media/hero-poster.jpg"
    width="1280" height="720">
    <source src="/media/hero.mp4" type="video/mp4">
    <a href="/media/hero.mp4">Download video</a>
  </video>
</section>
<style>
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: center;
  }
  .hero video {
    display: block;
    width: 100%;
    height: auto;
  }
  @media (max-width: 48rem) {
    .hero { grid-template-columns: minmax(0, 1fr); }
  }
</style>

수정과 비용 관리하기

생성마다 따로 승인하고 견적을 잔액 및 키 한도와 비교합니다. API 키의 일일 한도는 지출을 제한하는 데 도움이 되지만 수정 작업을 무료로 만들지는 않습니다. 지원되는 도구 호출에서 expected_credits는 견적 변경을 방지하는 장치이며 프로젝트 전체 예산은 아닙니다.

제출 여부가 불확실하면 먼저 기존 작업을 확인합니다. 24시간 이내 같은 요청에 같은 idempotency_key를 다시 쓰면 중복 작업 생성을 막습니다. 같은 키로 매개변수를 바꾸면 충돌이 발생합니다. 새로운 결과물을 만드는 수정은 새 요청이므로 크레딧이 들 수 있습니다. 생성에 성공했지만 마음에 들지 않는 영상은 작업 실패와 다릅니다.

• 연결되지 않으면 /mcp, HTTP 엔드포인트, API 키, 자격을 충족하는 활성 구독을 확인합니다.
• 참조가 거부되면 자신의 계정에서 완료한 이미지나 업로드가 끝난 file_id를 사용합니다. i2v에서는 first_frame에 넣습니다.
• 미디어가 사라지면 get_job으로 만료 링크를 갱신하고 내려받은 파일을 안정적인 경로에서 제공합니다. 다시 생성할 필요가 없습니다.
• 재생이나 잘림에 문제가 있으면 형식, 네트워크 응답, 모바일 크기, CSS를 확인합니다. cover 방식은 피사체 일부를 가릴 수 있습니다.

출처와 관련 가이드

기능 구분은 Anthropic 공식 문서, 도구 이름과 참조 방식은 FlyAIgh의 현재 MCP 구현을 기준으로 합니다. 페이지 예제는 표준 HTML 영상 동작을 사용합니다. 실제 실행할 때 최신 모델 옵션과 견적을 확인하세요.

• Claude: 이미지 생성 기능 설명
• Claude Code: MCP로 도구 연결하기
• FlyAIgh: MCP 설정 및 도구 설명
• MDN: HTML video 요소
• FlyAIgh에서 이미지 움직이기
• 유용한 참조 이미지 준비하기
• 제품 사진으로 홍보 영상 만들기