Bento: 단일 파일 HTML 프레젠테이션 도구

Bento는 데크 데이터, 뷰어, 편집기를 포함한 전체 애플리케이션을 단일 HTML 파일에 통합하는 프레젠테이션 도구입니다. 이 아키텍처를 사용하면 계정, 설치, 외부 서버 의존 없이 어떤 최신 브라우저에서 프레젠테이션을 열고, 바로 편집하고, 저장할 수 있습니다.

핵심 아키텍처: 단일 파일 앱

Bento는 소프트웨어 자체가 파일인 '단일 파일 웹 앱'으로 작동합니다. 런타임이 HTML 문서에 고정되어 있어, 프레젠테이션이 시간이 지나도 '썩지' 않으며 브라우저가 이용 가능한 한 접근 가능하게 유지됩니다.

기술적 구현

창작자 starfallg에 따르면, HTML 파일은 두 개의 주요 섹션으로 나뉩니다:

• Slide Data: 파일 상단 근처에 위치한 평범한 JSON 블록으로, 외부 도구 또는 AI 에이전트가 문서를 읽고 검색(grep-able)할 수 있게 합니다.
• Application Logic: 앱은 작은 셈을 통해 로드되는 base64 블록 형태로 저장됩니다. DecompressionStream을 사용하여 브라우저에서 애플리케이션을 팽창시켜 파일 크기를 작게 유지합니다(기본 데크는 약 560 KB).

데이터 지속성과 업데이트

Bento는 사용자가 저장(⌘S)할 때 File System Access API를 사용하여 JSON 데이터를 동일한 HTML 파일에 다시 씁니다. 또한 시작 시 서명된 매니페스트를 확인하여 업데이트를 처리하지만, 이 기능은 사용자가 비활성화할 수 있습니다.

주요 프레젠테이션 기능

Bento는 움직임과 인터랙티브 데이터에 중점을 둔 고충실도 프레젠테이션 경험을 제공합니다.

동적 전환 및 모션

Bento는 애니메이션을 처리하기 위해 GSAP/Flip을 사용합니다. 동일한 ID를 공유하는 요소들이 슬라이드 사이에서 위치, 크기, 색상, 그라데이션을 애니메이션화하는 'Morph' 전환 기능을 제공하여 원활한 시각적 흐름을 만듭니다.

인터랙티브 및 라이브 데이터

정적 슬라이드와 달리, Bento는 라이브 차트와 인터랙티브 상태를 통합합니다:

• 라이브 차트: 차트는 활성 툴팁과 줌 기능을 가진 실제 인스턴스입니다. 데이터는 동일한 데이터 세트를 유지하면서 서로 다른 차트 유형(예: 막대 차트에서 원형 차트 또는 산점도)으로 모프할 수 있습니다.
• 인터랙티브 장면: 사용자는 단일 슬라이드 내에서 '장면'을 만들 수 있습니다. 이는 버튼을 통해 연결되어 요소를 재배치하거나 레이아웃을 변경할 수 있는 기본적으로 숨겨진 상태이며, 다음 슬라이드로 넘어가지 않아도 됩니다.
• 라이브-연결 테이블: 테이블의 데이터를 편집하면 관련된 차트와 성장선이 실시간으로 업데이트됩니다.

콘텐츠 제작

Bento는 Esc 키를 눌러 접근할 수 있는 내장 편집기를 포함하고, 마크다운을 지원하여 즉시 타이포그래피 및 서식(불릿, 코드 블록, 취소선)을 제공합니다.

협업 및 보안

Bento는 오프라인 우선이지만, '블라인드 릴레이' 시스템을 통해 선택적 실시간 협업을 지원합니다.

• CRDTs 및 암호화: 협업은 Conflict-free Replicated Data Types(CRDTs)와 암호화된 데이터로 구동됩니다. Cloudflare Durable Objects에 호스팅된 릴레이는 암호화된 페이로드만 보아 프라이버시를 보장합니다.
• 액세스 제어: 협업은 초대 파일 공유를 통해 시작됩니다. 액세스는 사용자 키를 통해 관리되며, 창작자는 읽기 전용 권한을 부여하거나 사용자의 접근을 취소할 수 있습니다.

커뮤니티 피드백 및 통찰

Hacker News의 사용자들은 도구의 유용성과 잠재적 개선점에 대해 다음과 같은 사항을 논의했습니다:

"에이전트와의 편집 및 동료와의 공유에 완벽합니다. 모바일에서도 잘 작동하며, 이미지와 비디오 임베딩도 flawlessly 작동합니다."

"모든 필요한 것이 단일 파일에 있다는 사실을 아는 것이 그렇게 만족스러울 수 있습니다."

한 사용자(@aag)는 개인 정보 보호와 관련된 차이점을 지적했는데, 홈 페이지에서 'nothing phones home'이라고 주장하지만 일부 Bento 파일에는 cloudflareinsights.com 비콘이 포함되어 있었습니다. 다른 사용자들은 접근성을 위해 모든 애니메이션을 비활성화하는 설정을 추가하거나 도구를 Pandoc의 출력 형식으로 통합하는 것을 제안했습니다.