Bento - 편집·보기·데이터·협업을 HTML 파일 하나에 담은 PowerPoint
요약
Bento는 데이터, 편집, 협업 기능을 단일 HTML 파일에 통합한 혁신적인 프레젠테이션 도구입니다. JSON 데이터와 base64 블롭을 활용해 외부 파일 없이 실행되며, CRDT와 Cloudflare Durable Objects를 통해 매끄러운 실시간 협업을 지원합니다.
핵심 포인트
- 단일 HTML 파일 내에 JSON 데이터와 앱 로직을 포함하여 이식성 극대화
- CRDT 기반의 실시간 협업 및 Cloudflare를 활용한 보안 릴레이 구현
- File System Access API를 통한 로컬 파일 직접 편집 지원
- 로컬 중심의 소프트웨어 아키텍처(HTML/TS/React) 지향
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임
오랫동안 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를 싫어하는 사람이 많다는 점에서 다소 아이러니함
AI 자동 생성 콘텐츠
본 콘텐츠는 GeekNews의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기