시작하기

opt-deck

React 앱에 편집 가능한 발표자료를 임베드하고, 브랜드·고객별 버전·AI 제안·발표·출력을 하나의 문서로 연결합니다.

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

목적에 맞는 가이드

처음 임베드하는 단계부터 AI·저장·출력의 호스트 계약까지, 필요한 순서로 읽을 수 있습니다.

설치와 첫 임베드패키지 설치, 런타임 자산 호스팅, controlled 편집기와 독립 뷰어를 연결합니다.문서 모델과 편집v2 문서, 원자적 명령, undo/redo, 브랜드와 고객별 자료의 변경 규칙을 설명합니다.AI 생성과 변경 제안모델 응답을 검증 가능한 문서 변경으로 바꾸고, 검토·취소·충돌·undo까지 연결합니다.저장·자산·공유 연동호스트가 자동 저장, 충돌 감지, 복구, 자산 업로드와 읽기 전용 공유를 구현하는 기준입니다.발표와 파일 출력독립 뷰어, 발표자 화면, 모션·미디어와 PNG·PDF·PPTX·MP4·portable 출력의 지원 범위를 설명합니다.API 레퍼런스와 문제 해결공개 컴포넌트·콜백·controller·서버 함수의 계약과 주요 오류의 해결 방법을 정리합니다.

1. 한 문서로 이어지는 작업

편집기는 자유 배치 캔버스, 여러 장을 훑는 전체 보기, 발표 화면을 제공합니다. 텍스트·벡터·표·차트·이미지·영상은 이미지로 합쳐진 슬라이드가 아니라 개별적으로 편집할 수 있는 장면 요소입니다.

브랜드에 맞는 기본 자료를 만든 뒤 고객별 버전으로 파생하고, 원본의 후속 변경을 비교해 선택 반영할 수 있습니다. 수동 편집과 AI 제안 적용은 같은 검증·트랜잭션 규칙을 사용합니다.

2. 용도에 맞는 진입점

@reopt-ai/opt-deck: DeckEditor·Deck·useDeck과 편집 타입. 앱에서 편집 경험을 제공할 때 사용합니다.
@reopt-ai/opt-deck/viewer: DeckViewer 전용 진입점. 편집 패널과 출력 인코더를 제외하고 읽기·발표 화면을 구성합니다.
@reopt-ai/opt-deck/server: 문서 스키마·마이그레이션·트랜잭션·브랜드 파생·AI 계약. React 클라이언트나 DOM이 필요 없는 경로입니다.
@reopt-ai/opt-deck/json-render: 덱 json-render 계약(deckCatalog, Spec 렌더·편집, 프롬프트, 스트림)을 가져옵니다. 덱은 표준 json-render Spec이고, 장면 엔진이 그 렌더러입니다.
@reopt-ai/opt-deck/opt-charts: 선택 설치한 opt-charts의 데이터 차트 31종과 카드형 시각화 4종을 연결하는 어댑터.
@reopt-ai/opt-deck/opt-datagrid: 선택 설치한 opt-datagrid로 스프레드시트 데이터를 편집하고 발표용 표를 삽입하는 어댑터.
@reopt-ai/opt-deck/styles.css: 편집기와 뷰어 스타일을 앱에서 한 번 가져옵니다. 런타임 WASM·폰트 파일은 별도로 호스팅합니다.

2. 용도에 맞는 진입점
항목	동작과 사용 기준
@reopt-ai/opt-deck	DeckEditor·Deck·useDeck과 편집 타입. 앱에서 편집 경험을 제공할 때 사용합니다.
@reopt-ai/opt-deck/viewer	DeckViewer 전용 진입점. 편집 패널과 출력 인코더를 제외하고 읽기·발표 화면을 구성합니다.
@reopt-ai/opt-deck/server	문서 스키마·마이그레이션·트랜잭션·브랜드 파생·AI 계약. React 클라이언트나 DOM이 필요 없는 경로입니다.
@reopt-ai/opt-deck/json-render	덱 json-render 계약(deckCatalog, Spec 렌더·편집, 프롬프트, 스트림)을 가져옵니다. 덱은 표준 json-render Spec이고, 장면 엔진이 그 렌더러입니다.
@reopt-ai/opt-deck/opt-charts	선택 설치한 opt-charts의 데이터 차트 31종과 카드형 시각화 4종을 연결하는 어댑터.
@reopt-ai/opt-deck/opt-datagrid	선택 설치한 opt-datagrid로 스프레드시트 데이터를 편집하고 발표용 표를 삽입하는 어댑터.
@reopt-ai/opt-deck/styles.css	편집기와 뷰어 스타일을 앱에서 한 번 가져옵니다. 런타임 WASM·폰트 파일은 별도로 호스팅합니다.

3. 렌더링과 상태의 경계

DeckDocument v2에 내용·브랜드·자산·모션을 보관하고, 선택·카메라·드래그 중 미리보기는 편집 세션 상태로 관리합니다. CanvasKit/Skia 캔버스와 발표·썸네일·출력 어댑터가 같은 장면과 텍스트 조판을 사용합니다.

각 편집기는 독립된 history를 갖습니다. 앱이 문서를 소유하려면 value/onChange를 사용하고, 자체 명령 UI와 history를 만들려면 useDeck을 사용합니다. 서로 다른 두 store를 같은 undo 기록처럼 취급하지 마세요.

4. 세 가지 디자인 컬렉션

createDeckDocument의 design은 editorial, product, executive 중에서 선택합니다. 각 컬렉션은 12개의 편집 가능한 샘플 슬라이드를 제공합니다. Playground에서 요소를 직접 바꾸고 Explore에서 결과를 확인할 수 있습니다.

editorial: 타이포그래피 중심의 소개·브랜드 스토리.
product: 제품 설명·기능·지표를 담는 제품 소개.
executive: 근거·비교·제안 중심의 의사결정 자료.

4. 세 가지 디자인 컬렉션
항목	동작과 사용 기준
editorial	타이포그래피 중심의 소개·브랜드 스토리.
product	제품 설명·기능·지표를 담는 제품 소개.
executive	근거·비교·제안 중심의 의사결정 자료.

5. 지원 범위와 현재 한계

JSON·portable .deck·편집 가능한 SVG 경로를 가져올 수 있고 PNG·PDF·PPTX·MP4를 출력합니다. 임의 PPTX 또는 Keynote 파일을 원래 편집 구조로 복원하는 가져오기와 실시간 다중 사용자 편집은 제공하지 않습니다.

PPTX의 지원 요소는 편집 가능한 형태로 출력되지만 일부 효과는 요소 단위 이미지로 대체됩니다. 글꼴 대체와 미디어·인코더 지원은 실제 수신 환경에서 확인해야 합니다. 현재 검증 기록은 모든 환경의 시각 품질이나 성능을 보증하지 않습니다.