시작하기

발표와 파일 출력

독립 뷰어, 발표자 화면, 모션·미디어와 PNG·PDF·PPTX·MP4·portable 출력의 지원 범위를 설명합니다.

reopt design업데이트 2026년 11월 1일

1. 발표 화면 구성

DeckViewer는 슬라이드 탐색·전체화면·발표자 노트·타이머·포인터·발표자 창을 제공합니다. slideId와 onSlideChange를 함께 연결하면 외부 UI와 동기화할 수 있습니다. onPresent를 편집기에 전달하면 기본 발표 전환을 호스트 동작으로 대체합니다.

발표자 창과 전체화면은 브라우저의 사용자 동작·팝업 정책에 영향을 받습니다. 실제 발표 환경에서 창 열기, 키보드 이동, 미디어 재생, reduced-motion 설정을 확인하세요.

presentation-viewer.tsx

"use client";
import { DeckViewer } from "@reopt-ai/opt-deck/viewer";
import type { DeckDocument } from "@reopt-ai/opt-deck/server";
import "@reopt-ai/opt-deck/styles.css";

export function PresentationViewer({ document }: { document: DeckDocument }) {
  return (
    <DeckViewer
      document={document}
      locale="ko"
      controls
      showNotes={false}
      autoPlay={false}
      style={{ height: 720 }}
    />
  );
}

2. 형식별 보존 범위

JSON: 편집 문서 데이터. URL 참조 자산은 파일 바깥에 남을 수 있습니다. 다시 가져오기와 v1 변환을 지원합니다.
portable (.deck): 문서와 허용된 자산을 묶은 이동용 파일. 다시 가져와 편집합니다. 자산 접근 실패와 임베드 제한은 해결해야 합니다.
PNG: 현재 슬라이드의 래스터 이미지. 텍스트·요소를 다시 편집하는 형식은 아닙니다.
PDF: 검색 가능한 텍스트와 지원 벡터를 보존합니다. 지원하지 않는 효과는 요소 단위로 래스터화합니다.
PPTX: 텍스트·기본 도형·이미지·표·기본 차트를 편집 가능한 형태로 내보냅니다. 일부 효과·선 스타일은 이미지로 대체되며 글꼴은 내장하지 않습니다.
MP4: 공통 모션 시간 모델의 프레임과 음성을 합성합니다. H.264 인코딩을 지원하는 WebCodecs 환경이 필요합니다.

2. 형식별 보존 범위
항목	동작과 사용 기준
JSON	편집 문서 데이터. URL 참조 자산은 파일 바깥에 남을 수 있습니다. 다시 가져오기와 v1 변환을 지원합니다.
portable (.deck)	문서와 허용된 자산을 묶은 이동용 파일. 다시 가져와 편집합니다. 자산 접근 실패와 임베드 제한은 해결해야 합니다.
PNG	현재 슬라이드의 래스터 이미지. 텍스트·요소를 다시 편집하는 형식은 아닙니다.
PDF	검색 가능한 텍스트와 지원 벡터를 보존합니다. 지원하지 않는 효과는 요소 단위로 래스터화합니다.
PPTX	텍스트·기본 도형·이미지·표·기본 차트를 편집 가능한 형태로 내보냅니다. 일부 효과·선 스타일은 이미지로 대체되며 글꼴은 내장하지 않습니다.
MP4	공통 모션 시간 모델의 프레임과 음성을 합성합니다. H.264 인코딩을 지원하는 WebCodecs 환경이 필요합니다.

3. 기본 출력과 호스트 작업

기본 편집기의 내보내기 메뉴에서 형식을 선택합니다. onExport를 연결하면 pdf/pptx/mp4/portable 작업을 호스트가 처리합니다. JSON과 PNG는 이 콜백의 대상이 아닙니다.

콜백은 다운로드 또는 작업 완료까지 처리하고 실패 시 오류를 던집니다. 긴 작업을 서버 큐로 보내는 경우 생성·진행 조회·취소·완료 파일 전달을 호스트에서 구현합니다. 아래 예제는 완료 파일을 직접 반환하는 서버를 가정합니다.

export-presentation.tsx

import type { DeckEditorProps } from "@reopt-ai/opt-deck";

export const exportWithHost: NonNullable<DeckEditorProps["onExport"]> =
  async (format, document, signal) => {
    // Host-defined endpoint. It returns the completed file in this example.
    const response = await fetch("/api/presentation-export", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ format, document }),
      signal,
    });
    if (!response.ok) throw new Error("Export failed");
    const blob = await response.blob();
    signal.throwIfAborted();
    const url = URL.createObjectURL(blob);
    const link = window.document.createElement("a");
    link.href = url;
    link.download = "presentation." + (format === "portable" ? "deck" : format);
    window.document.body.append(link);
    link.click();
    link.remove();
    setTimeout(() => URL.revokeObjectURL(url), 30_000);
  };

4. 글꼴과 외부 자산

PDF 출력 전에는 실제 글꼴이 준비되어 있어야 합니다. 업로드 글꼴의 임베드 허용 범위를 존중하고, 금지된 글꼴은 교체한 뒤 출력합니다. PPTX 수신자는 같은 글꼴을 설치해야 하며 글꼴 대체로 줄바꿈과 배치가 달라질 수 있습니다.

원격 이미지·영상·폰트의 URL은 출력 환경에서도 접근 가능해야 합니다. 권한·만료·CORS 실패를 빈 요소로 숨기지 말고 사용자에게 해결 방법을 안내하세요. 미디어를 포함한 portable과 출력 파일은 다운로드 후 별도로 열어 확인합니다.

5. 모션·영상·음성

슬라이드 전환과 객체 애니메이션은 발표와 영상 출력이 공유하는 시간 모델을 사용합니다. 브라우저 화면 녹화를 최종 영상 출력으로 사용하는 방식은 아닙니다. 실제 재생에서는 브라우저의 자동 재생 제한과 코덱 지원을 확인합니다.

오디오는 편집기에서 선택할 수 있는 카드로 보이지만 출력 이미지에 카드가 나타나지는 않습니다. 발표의 오디오·비디오와 MP4 결과는 대표 시각의 화면, 트림 경계, 음성 신호를 함께 확인하세요.

6. 호환성 확인 순서

먼저 실제 사용하는 글꼴·한글·이모지·긴 문단·표·차트·미디어를 포함한 짧은 자료를 만듭니다. 편집기와 발표 화면을 비교하고, PDF는 검색과 글자 순서, PPTX는 요소 편집 가능성과 글꼴 대체, MP4는 지정 시각과 음성을 확인합니다.

임의 PPTX·.key 입력은 지원하지 않습니다. SVG 입력도 지원 가능한 경로만 편집 노드로 변환하며, 지원하지 않는 텍스트·효과는 거절됩니다. 가져오기 실패를 피하려고 검증을 생략하지 마세요.