Bento 소개
에이전트에게 발표 자료를 맡기려 할 때 가장 먼저 막히는 것은 파일 형식입니다. .pptx 는 압축된 XML 묶음이라 손으로 고치기 번거롭고, 클라우드 문서 도구는 API 키와 권한 설정을 거쳐야 접근이 열립니다. 그래서 슬라이드를 만들어 주는 도구들은 대개 자체 서비스를 하나 세운 뒤, 그 안에서 생성한 결과를 내보내는 방식을 택해 왔습니다.
Bento는 문서와 편집기, 뷰어, 발표 모드를 HTML 파일 하나 에 함께 넣는 방향을 택했습니다. .bento.html 파일을 브라우저로 열면 그 파일 자체가 편집기가 되고, 저장하면 파일이 자기 안의 데이터 블록을 다시 써서 스스로를 갱신합니다. 받는 사람은 아무것도 설치할 필요가 없습니다. 셸 전체가 약 560KB로 압축되어 있고, 문서 데이터는 파일 앞쪽의 평문 JSON 블록에 그대로 남습니다.
이 구조가 AI 도구와 잘 맞는 이유가 여기에 있습니다. 문서가 이진 형식이 아니라 파일 안의 평문 JSON이므로, 파일을 읽고 쓸 수 있는 도구라면 플러그인도 API도 없이 슬라이드를 편집할 수 있습니다. nyblnet 이 2026년 7월 공개했고, bento/slides 는 현재 v1.0.15까지 배포되어 있습니다.
Bento를 AI 에이전트와 함께 쓰기
들어가는 길은 두 갈래입니다. 첫째는 파일 시스템에 접근할 수 있는 에이전트가 #bento-doc 블록의 JSON을 그 자리에서 고치는 방식으로, Claude Code와 Cursor, Aider 등이 여기에 해당합니다. Claude Code 사용자를 위해서는 저장소의 플러그인 마켓플레이스로 설치하는 bento-slides 스킬이 준비되어 있고, 이 스킬은 최신 Bento 앱 파일을 직접 내려받는 것까지 처리합니다.
/plugin marketplace add nyblnet/bento
/plugin install bento-slides@bento
둘째는 파일 접근이 없는 챗봇을 위한 왕복 방식입니다. Save → Copy document JSON 으로 문서를 복사해 모델에게 넘기고, 다시 써 온 결과를 붙여 넣습니다. 브라우저 콘솔에서는 window.bento.doc 로 읽고 window.bento.loadDoc(json) 으로 되돌려 쓰며, 이 쓰기는 실행 취소가 가능합니다.
에이전트용 안내서는 docs/agents.md 한 장으로 정리되어 있어 모델의 컨텍스트에 그대로 넣을 수 있습니다. 문서를 편집할 때 지켜야 할 규칙 하나는 JSON 안의 모든 < 를 유니코드 이스케이프인 \u003c 로 바꿔 두는 것입니다. 문서 블록 안에 리터럴 </script> 가 들어가는 사고를 막기 위해서입니다. Ollama나 llama.cpp, LM Studio로 띄운 로컬 공개 가중치 모델을 붙이면 작업 전체가 기기 밖으로 나가지 않습니다.
Bento와 기존 프레젠테이션 도구의 차이
| 항목 | 클라우드 프레젠테이션 도구 | Bento |
|---|---|---|
| 배포 단위 | 서비스 계정과 문서 링크 | .bento.html 파일 한 개 (약 560KB) |
| 문서 형식 | 서비스 내부 형식 또는 압축 XML | 파일 앞쪽의 평문 JSON 블록 |
| 편집기 위치 | 서버 또는 설치형 앱 | 문서 파일 안에 동봉 |
| 에이전트 접근 | API 또는 플러그인 필요 | 파일을 읽고 쓸 수 있으면 가능 |
| 협업 키 | 서비스가 보관 | 문서 파일 안에만 존재 |
문서 형식 자체는 docs/format.md 에 규범적으로 정의되어 있고, 파일이 어떻게 조립되는지는 docs/architecture.md 에 정리되어 있습니다.
Bento의 주요 기능
- 모프 발표(morph presenting): 같은 id를 가진 요소가 슬라이드 사이를 이동할 때 위치와 크기, 색, 그라디언트까지 애니메이션으로 이어집니다. 슬라이드를 복제해 배치를 바꾸면 움직임이 따라 만들어집니다.
- 실시간 협업: AES-GCM 종단간 암호화를 쓰며 키는 서버가 아니라 문서 파일 안에 있습니다. 파일 자체가 초대장이라, 사본을 연 사람이 방에 합류합니다. 오프라인 상태에서 한 수정은 문자 단위 텍스트 병합을 포함한 자체 CRDT로 다시 합쳐집니다.
- 차트: 막대와 선, 원, 산점도를 의존성 없는 자체 엔진으로 그리며 발표 중에도 살아 있어 툴팁과 확대가 동작합니다. 막대 차트가 원 차트로 바뀔 때 데이터도 함께 모프됩니다.
- 서명된 자체 업데이트: 릴리스는 ECDSA로 서명되어 앱 안에서 제안됩니다. 업데이트는 새 파일을 만들고 기존 파일은 되돌릴 지점으로 남습니다.
- 그 밖의 기능: 발표자 화면, 댓글, 레이아웃, 숨겨진 상호작용 상태, 호버 노출, 모션 경로, PDF 내보내기, 페이지 크기, 8개 UI 언어가 앞서 말한 560KB 안에 들어 있습니다.
오프라인 모드를 켜면 아무것도 기기를 떠나지 않습니다. 업데이트와 협업이 강제로 차단되고, 앱이 그 사실을 화면에 알립니다.
Bento의 내부 구조
문서 모델은 slides/src/model.ts 에 정의되어 있고, 렌더러 하나가 편집 캔버스와 썸네일, 발표 모드를 모두 그립니다. 발표 중 화면 전환은 Reveal.js가 담당하지만 모프는 DOM이 아니라 모델에서 계산합니다. 애니메이션 엔진과 차트 엔진, 협업 CRDT는 모두 자체 구현이고, CRDT는 수십만 회 규모의 수렴 검사로 퍼즈 테스트를 거쳤다고 밝히고 있습니다.
선택 사항인 동기화 중계 서버는 server/sync-worker/ 에 있으며 암호문만 보관합니다. 중계가 볼 수 있는 것은 암호문과 접속 시각, 방 키의 해시뿐이고 내용과 이름, 구조는 읽지 못합니다.
보안 모델의 한계도 함께 적혀 있습니다. 참가자 이름은 증명이 아니라 주장이며, 기업용 신원 확인은 서명된 프레임이 필요하지만 설계만 되어 있고 구현되지는 않았습니다. 실시간 협업 중의 실행 취소는 스냅샷 기반이라 같은 속성을 동시에 고친 다른 참가자의 수정을 되돌릴 수 있고, 편집은 데스크톱을 우선으로 만들어졌습니다. 자세한 위협 모델은 docs/collab-design.md 에 있습니다.
Bento 설치와 빌드
앱 파일을 그대로 받아 쓰는 것이 가장 빠릅니다. 계정도 설치 관리자도 필요하지 않습니다.
curl -fsSL https://bento.page/releases/slides/Bento_Slides.bento.html \
-o "Bento_Slides.bento.html"
소스에서 빌드하려면 Node 20 이상과 npm만 있으면 됩니다. 세워 둘 백엔드가 없습니다.
cd slides
npm install
npm run dev # 개발 서버 (http://localhost:5173)
npm run build:single # → dist-single/Bento_Slides.bento.html
CRDT 수렴 검사는 node scripts/test-sync.ts 로 돌립니다. 릴리스는 서명 키가 관리자 기기를 떠나지 않도록 로컬에서 만들어 배포합니다.
bento/slides 는 이 제품군의 첫 앱이고, 노트를 다루는 bento/spaces, 표와 시트를 다루는 bento/dash, 그리고 bento/vault 가 각각 자체 완결형 .bento.html 배포본으로 이어질 예정입니다.
Bento는 누구에게 유용한가
발표 자료 생성을 에이전트 워크플로에 붙이려는 사람에게 특히 잘 맞습니다. 문서가 평문 JSON이고 규범 문서와 에이전트 안내서가 따로 있어서, 모델이 파일을 어떻게 고쳐야 하는지 추측할 필요가 없습니다. 로컬 모델만으로 자료를 만들고 싶은 경우에도 파일 하나로 끝나는 구조가 유리합니다. 반대로 조직 계정 기반의 권한 관리나 감사 로그가 필요한 환경이라면, 참가자 이름이 증명되지 않고 기업 신원 연동이 구현 전이라는 점 때문에 지금 단계에서는 맞지 않습니다. 휴대폰에서 편집까지 해야 하는 경우도 마찬가지로, 현재 편집 경험은 데스크톱을 전제로 설계되어 있습니다.
Bento의 라이선스
Bento는 MIT 라이선스로 공개되어 있어 개인 및 상업적 목적으로 자유롭게 사용할 수 있습니다. 다만 파일 안에 함께 들어가는 구성 요소는 각자의 조건을 유지합니다. 번들된 런타임 구성 요소인 reveal.js와 Moveable, Selecto는 MIT이고, 내장 글꼴인 Fraunces와 Instrument Sans는 OFL이며, 갤러리 이미지는 퍼블릭 도메인입니다.
Bento 브라우저에서 바로 사용해보기
Bento 공식 홈페이지
Bento 에이전트용 문서
Bento 프로젝트 GitHub 저장소
더 읽어보기
-
slides-grab: HTML 슬라이드를 Claude Code와 Codex로 만들고 드래그로 편집하는 도구
-
Presenton: Gamma, Decktopus 등을 대체하는 것을 목표로 하는 오픈소스 AI 프레젠테이션 생성기
-
Anthropic, Claude에 업무 방식과 조직 환경에 맞게 직접 커스터마이징할 수 있는 Claude Agent용 Skills 기능 출시
이 글은 GPT 모델로 정리한 초안을 바탕으로 한 것으로, 원문의 내용 또는 의도와 다르게 정리된 내용이 있을 수 있습니다. 관심있는 내용이시라면 원문도 함께 참고해주세요! 읽으시면서 어색하거나 잘못된 내용을 발견하시면 댓글로 알려주시기를 부탁드립니다. 
이 도구를 직접 설치해 사용해보셨다면, 
파이토치 한국 사용자 모임
회원들을 위해 경험이나 팁을 댓글로 남겨주세요! 