23P by GN⁺ | ★ favorite | 댓글 1개
  • 문서/편집기/뷰어/발표 도구를 하나의 .bento.html 파일에 담아, 브라우저만 있으면 열고 편집하고 발표할 수 있는 PowerPoint 대체제
  • 570KB 파일 하나가 완전한 애플리케이션으로 동작하며, 계정/클라우드/설치 프로그램 없이 저장하고 이메일이나 AirDrop으로 전달할 수 있음
  • 슬라이드 데이터가 파일 내부의 읽을 수 있는 JSON으로 저장돼 Claude Code/Codex/Gemini/ChatGPT 같은 AI 에이전트가 파일을 직접 수정할 수 있음
  • 기존 .pptx도 AI에 함께 전달하면 단순 변환하는 대신 Morph/실시간 차트 같은 Bento 기능을 활용한 슬라이드로 다시 작성할 수 있음
  • Morph 전환/차트/영상/오디오/실시간 암호화 협업을 지원하며, Slides에 이어 DocsSheets도 같은 단일 파일 방식으로 제공할 계획임

파일 하나가 문서이자 앱

  • .bento.html 안에 슬라이드와 전체 편집 프로그램이 함께 들어 있음
  • 브라우저에서 파일을 열면 즉시 편집기가 실행되고, 저장하면 문서 데이터가 파일 자체에 다시 기록
  • 글꼴/이미지/차트도 함께 포함돼 파일 사본만으로 독립적으로 열고 발표할 수 있음
  • Offline 모드에서는 업데이트와 협업을 차단해 모든 작업을 로컬에서 처리
  • Bento/Slides에서 브라우저로 바로 실행하거나 단일 애플리케이션 파일을 내려받을 수 있음

AI 에이전트를 위한 문서 형식

  • 문서 데이터는 파일 상단의 <script type="application/bento+json" id="bento-doc"> 블록에 평문 JSON으로 저장됨
  • window.bento.doc으로 현재 문서를 읽고 window.bento.loadDoc(json)으로 수정된 문서를 불러올 수 있음
  • AI 에이전트는 애플리케이션 코드를 건드리지 않고 JSON만 수정해 슬라이드/차트/발표자 노트 등을 추가할 수 있음
  • Claude Code/Cursor/Aider 같은 코딩 에이전트뿐 아니라 파일 첨부를 지원하는 일반 챗봇에서도 사용할 수 있음
  • 파일을 지원하지 않는 챗봇에서는 JSON을 복사해 수정한 뒤 다시 붙여 넣을 수 있음
  • Ollama/llama.cpp/LM Studio를 사용하면 AI 편집도 완전히 로컬에서 실행 가능함
  • agents.md 를 제공해, AI 에이전트들이 Bento 를 제대로 활용할 수 있게 안내함

PowerPoint보다 웹에 가까운 발표 기능

  • 같은 id를 가진 요소를 슬라이드 사이에서 자연스럽게 움직이는 Morph 전환을 지원함
    • 기존 슬라이드를 복제하고 요소를 이동하거나 스타일을 바꾸면 별도의 타임라인을 만들지 않아도 전환이 구성됨
  • 자체 의존성 없는 차트 엔진으로 막대/선/원/산점도를 그림
    • 막대/선/원/산점도 차트가 발표 중에도 툴팁/확대/데이터 전환이 가능한 상태로 동작함
  • 영상과 오디오를 슬라이드 안에 포함하거나 외부 파일로 연결할 수 있음
  • 기존 PowerPoint 파일은 그대로 가져오는 방식이 아니라 AI가 Bento 문서로 다시 구성함
  • 발표자 화면/댓글/레이아웃/PDF 내보내기/여러 페이지 크기/8개 UI 언어도 지원함
  • 편집은 데스크톱 중심이지만 스마트폰에서도 보기와 발표가 가능

로컬 우선 협업

  • 파일에서 라이브 세션을 시작하면 같은 파일의 사본을 연 사용자가 협업 공간에 참여
  • 협업 데이터는 AES-GCM으로 종단간 암호화되며 중계 서버는 암호문만 처리함
  • 자체 CRDT가 실시간 편집과 오프라인 변경 사항 병합을 담당함
  • 파일 자체에 협업 키가 들어 있어 파일을 전달하는 것이 초대 방식으로 동작
  • 오프라인에서 갈라진 편집 내용도 다시 접속하면 양방향으로 병합됨

Bento/Suite 로드맵과 라이선스

  • 현재 배포 중인 Bento/Slides는 Bento/Suite의 첫 번째 애플리케이션임
  • Bento/DocsBento/Sheets를 각각 독립적인 자체 포함 .bento.html 파일로 제공할 계획임
  • Bento 자체 소프트웨어는 MIT License로 공개

댓글과 토론

Hacker News 의견들
  • Bento 제작자임. 파일 상단에는 슬라이드 데이터인 일반 JSON 블록이 있어 읽거나 grep하거나 자동화 도구로 처리할 수 있음. 앱은 작은 로더를 통해 불러오는 base64 블롭이며, 브라우저의 DecompressionStream으로 압축을 풀어 패키지를 작게 유지하고 실행 시 외부 파일을 가져오지 않음
    File System Access API로 같은 파일에 JSON을 다시 쓰고, 지원되지 않으면 일반 다운로드로 대체하며 모든 업데이트는 ECDSA로 서명함. reveal.js를 기반으로 GSAP/Flip과 echarts를 추가했다가 크기와 동작 문제 때문에 애니메이션과 차트 기능을 모두 직접 다시 구현했음
    특히 CRDT 협업이 매끄럽게 작동하는 점이 만족스러움. Cloudflare Durable Objects에서 실행되는 작은 블라인드 릴레이는 클라이언트의 암호화된 데이터만 보며, 초대 파일을 공유해 세션을 시작하기 전까지 협업은 꺼져 있음. 사용자 키로 접근 권한을 관리해 읽기 전용 사용자를 둘 수 있고, 사용자별 실시간 협업 권한도 철회 가능함

    • 프로젝트를 위해 일주일 전에 새 GitHub 계정을 만든 것으로 보이는데, 유지보수와 보안 이력을 확인할 수 있는 다른 GitHub 계정도 있는지 궁금함
    • 단일 파일만 다루는데 CRDT가 어디서 작동하고 서버는 어디 있는지 궁금했음. TiddlyWiki는 좋아했지만 정착하지 못한 반면, 쉽게 편집 가능한 프레젠테이션은 이해하기 쉬운 활용 사례임
      협업 기능이 모든 사용자에게 기본 제공된다면 Cloudflare 계정에 트래픽이 몰릴 위험은 없는지도 궁금함
    • Reveal.js의 마법 같은 기능은 예시처럼 위아래로 이동하는 세로 슬라이드임. 하나의 슬라이드 덱에서 청중에 따라 아래로 내려가 기술 내용을 보여주거나 건너뛸 수 있음
      PowerPoint를 닮게 만들면서 이 기능을 뺀 듯하지만, Reveal.js에서 가장 좋아하는 기능이니 잊지 않았으면 함
    • Bento가 v2로 업그레이드됐을 때 v1 슬라이드 덱은 어떻게 되는지 궁금함. 업그레이드를 누르면 기존 JSON 슬라이드 데이터를 v2 셸로 내보낼 수 있어야 함
    • 악마 같은 Office 형식을 지원하는 길은 지옥으로 이어지므로, PowerPoint보다는 슬라이드 쇼라고 부르고 싶음. 이런 단순한 형식이 표준이 되고 오래된 형식은 사라지길 바람
  • 프레젠테이션 대신 작은 React 앱 제작에 초점을 둔 비슷한 도구를 만들었음. 예제 앱이 포함된 기본 HTML은 여기, 문서는 여기에 있으며 아직 다듬어지진 않았지만 충분히 사용할 만함
    JSX 변환기와 코드 편집기를 내장하고 파일 또는 localStorage 저장을 지원하며, 파일 저장·변환·편집을 담당하는 셸에서 JSX와 JSON 데이터를 분리해 내보낼 수도 있음
    미니 앱을 저장하는 iOS 앱도 만들었음. localStorage에만 의존하지 않고 데이터와 코드 변경을 장기 저장해 저장·새로고침 흐름이 매끄러움. 샌드박스가 저장된 앱의 네트워크 호출을 막지만 앱별로 허용할 수 있고, 향후 네이티브 편집기 같은 편의 기능도 추가하고 싶음

  • 이런 형태가 더 흔해질 것 같음. 많은 소프트웨어를 HTML·TypeScript·React 등으로 완전히 로컬에서 제공하고 상태도 로컬에 둘 수 있지만, 지금까지는 경제적 동기가 부족했음
    개인적으로 Kimi K3를 사용해 선형대수부터 양자물리까지 다루는 모바일 친화적 게임을 만들고 있음. 신경다양성 사용자를 배려하고 상태는 전부 로컬에 저장하며 GitHub Pages에서 제공해 해당 분야에 관심을 갖도록 하는 것이 목표임. 다양한 전문성과 시간이 필요해 LLM이 없었다면 경제성이 없었을 프로젝트이며, 직접 플레이하고 개선해 버그를 제거한 뒤 HN에 공개할 예정임

    • 편집 제어 기능과 콘텐츠가 하나의 HTML 파일에 들어가는 하이브리드 문서를 동료와 논의했음. Feather Wiki 같은 위키가 선례이며, SVG나 스프레드시트로 구현하면 어떤 모습일지 궁금함
  • 실시간 방명록을 즐겁게 사용했지만 결국 M1 Mac이 멈춰 강제로 재부팅해야 했음. HN 전체가 동시에 편집하는 상황이 아니라면 대부분 잘 작동하겠지만, Figma가 WASM과 맞춤형 렌더러를 쓰는 데는 이유가 있어 보임
    다른 사용자가 무관한 내용을 바꿀 때 현재 입력 초점이 초기화되지 않아야 함. 또한 랜딩 페이지와 예제 덱의 문구가 지나치게 LLM스럽고, HN 제출문이 훨씬 읽기 편함. 자유 오픈소스 소프트웨어로 공개한 점은 훌륭함

    • 스팸 때문에 방명록을 초기화해 현재 epoch 4임. 초점 초기화 문제는 한두 명만 참여시킨 테스트에서는 드러나지 않았지만 바로 수정할 예정임
      문구 문제에도 동의하지만 글쓰기에 자신이 없고 직장과 육아 사이에 시간이 부족해 점진적으로 고칠 생각임
  • 이런 단일 파일 웹 앱 개념을 알리고 있으며, 제안 중인 Wikipedia 초안에 Bento를 추가해도 좋겠음

    • 2013년에 만든 mdwiki도 해당할 듯함. 이미지·아이콘·스타일을 모두 인라인으로 포함하고 오프라인에서 작동하는 단 하나의 .html 파일이어서 농담 삼아 최초의 진정한 단일 페이지 앱이라고 불렀음
    • 이 초안은 독자를 you라고 부르는 등 Wikipedia 문서답지 않음. Wikipedia는 정립시키고 싶은 개념을 홍보하는 곳이 아니라 3차 자료여야 하므로 적절한 장소가 아닌 듯함
    • Ilograph 다이어그램도 이 예시처럼 독립 실행형 HTML로 내보낼 수 있음. 일종의 슬라이드 기능도 있으며 파일 크기는 약 560KB임
    • Hyperclay도 목록에 들어갈 수 있을 듯함
    • Bento를 시작했을 때는 TiddlyWiki만 알고 있었기에 이 목록을 살펴보겠음
  • Claude에 Bento 기술을 알려주기만 하면 쓸 수 있다는 점이 멋짐

  • 오랫동안 draw.io로 다이어그램을 만들면서, 문서를 편집기와 파일이 담긴 iframe 블롭처럼 저장하는 방식이 영리하다고 느꼈음. 다만 draw.io는 편집기 자체가 파일에 포함되지 않아 웹 연결로 코드를 불러와야 함
    이 방식을 주된 활용 사례로 삼을 수 있길 바랐는데 Bento가 상상했던 모습과 거의 같음

    • draw.io를 자주 사용해 이 방식도 검토했지만, 우선은 단일 로컬 파일로 시작하는 편이 낫다고 판단했음. 나중에 SSO 같은 기업용 기능이 필요해지면 호스팅도 타당할 수 있음
  • 기업 환경에서 매우 흔한 요구를 충족함. 회사 내 몇몇 팀은 기존 프레젠테이션·시각화 소프트웨어의 버그가 고쳐지지 않고 맞춤 기능도 추가되지 않아 클라우드나 데스크톱 제품을 버리고 HTML·JavaScript 기반 도구로 전환했음
    사내 IT 조직의 작은 권력자들은 긴장해야 할 듯함

    • 우리 회사에서도 기술자들이 멋진 웹 앱 프레젠테이션을 만들어 모두를 놀라게 하지만, 숫자가 잘못돼 오후 운영위원회 전에 수정해야 하면 Claude만 있고 Claude Code는 없는 비기술 담당자가 막막해짐. Claude Code를 기술자와 소프트웨어 엔지니어만 쓰도록 정한 탓임
  • 빈 Bento를 브라우저의 ‘사이트를 앱으로 설치’ 기능으로 PWA 설치하고, 작성자 이름 등을 자동 입력한 뒤 읽기 전용으로 만들어 사용자가 ‘다른 이름으로 저장’하게 하는 독립형 프레젠테이션 도구를 구상 중임
    작성자 정보 외에는 읽기 전용인 빈 기본 문서를 PWA로 설치하는 기능이 프로젝트에 포함되면 좋겠음

    • PWA도 고려했지만 전반적인 호스팅 여부는 아직 고민 중임. 기업용 활용을 지원하려면 결국 호스팅이 필요하겠지만 지금은 단순하고 멋진 도구를 만드는 데 집중하고 싶음
      호스팅 버전에서 사용자가 원하는 기능과 Bento의 특별한 원칙을 유지할 방법을 더 살펴볼 예정임
  • 코드 에이전트로 HTML 프레젠테이션을 만들면 결과가 꽤 좋음. 목적에 따라 Markdown 기반 Slidev를 사용하거나, 수학 표현 등이 특히 아름다운 Typst 슬라이드를 에이전트로 만들 수도 있음
    다만 제목을 보고 PowerPoint와 직접 관련된 도구라고 생각했는데, 실제로는 ‘프레젠테이션’의 동의어로 PowerPoint를 사용한 셈임. PowerPoint를 싫어하는 사람이 많다는 점에서 다소 아이러니함