560KB의 HTML 파일, 어떻게 PPT에 도전장을 내미는가

도구오픈소스

데이터 소스:HN + web research · HN

서문: 숫자가 불러온 논쟁

2026년 7월 22일, Hacker News에 한 게시글이 올라왔다: “Show HN: Bento — PowerPoint 전체를 하나의 HTML 파일에 담았다.” 8시간 만에 591개의 추천과 141개의 댓글이 달렸다. 이 숫자 자체가 하나의 신호다 — 전 세계 가장 까다로운 기술 독자들이 모인 커뮤니티에서 이 정도 관심을 받았다면, 그 프로젝트가 어떤 실질적인 니즈를 건드렸다는 뜻이다.

링크를 열자 브라우저 탭 하나가 나타났고, 그 안에는 완전한 슬라이드 편집기가 있었다. 툴바가 있고, 썸네일 사이드바가 있고, 글자를 입력하고, 도형을 그리고, 차트를 삽입하고, 주석을 추가할 수 있었다. Esc를 누르면 편집 모드, 화살표 키로 프레젠테이션 재생, S를 누르면 발표자 보기가 열렸다. 특별해 보이지는 않았다 — 한 가지 사실을 제외하면: 이 편집기는 웹사이트도, 앱도 아닌, 그냥 하나의 HTML 파일이다.

Bento Slides 편집기 인터페이스 스크린샷 그림: Bento Slides의 편집 인터페이스. 상단 툴바, 왼쪽 썸네일, 메인 편집 영역, 하단 내비게이션 — 주류 슬라이드 소프트웨어와 다를 바 없지만, 이 모든 것이 560KB HTML 파일 안에서 작동한다.

“파일이 곧 소프트웨어다”

이 말은 Bento 프로젝트의 핵심 신조다. GitHub에서 전체 코드를 찾을 수 있었다 — 프로젝트 이름은 bento, 저자는 starfallg, MIT 오픈소스 라이선스다.

비교를 해보자. 표준 PowerPoint .pptx 파일은 XML, 이미지, 오디오 등의 리소스를 담은 압축 패키지지만, 그 자체로 실행되지는 않는다 — PowerPoint 소프트웨어(또는 웹용 Office 365)를 설치해야 열고 편집할 수 있다. Microsoft 365 개인용 연간 구독료는 수십만 원, 설치 패키지는 수 GB에 달한다.

반면 Bento의 방식은 정반대다: 소프트웨어를 파일 안에 넣었다.

bento.page/slides에 접속하면 브라우저에 곧바로 완전한 슬라이드 편집기가 나타난다. 이 “페이지”에서 콘텐츠를 만들고, 레이아웃을 조정하고, 애니메이션을 추가할 수 있다. 가장 놀라운 점은 Ctrl+S로 저장할 때 이 HTML 파일이 스스로를 다시 작성한다는 것이다 — 편집한 내용이 파일 자체에 기록된다. 다음에 이 파일을 더블클릭하면, 지난번에 저장한 모든 내용이 담긴 완전한 편집기가 다시 열린다.

파일 크기를 비교해 보았다:

항목크기추가 소프트웨어 필요 여부
Bento 기본 프레젠테이션~560 KB불필요, 브라우저만 있으면 됨
PowerPoint 설치 패키지3-5 GB설치 필요
Keynote 설치 패키지약 1.5 GB설치 필요
Google Slides 웹 버전네트워크 로딩 의존로그인 및 인터넷 필요

차이는 수천 배다. 이 비교 자체가 하나의 질문을 던진다: 프레젠테이션 하나에 왜 수 GB의 소프트웨어가 필요한가?

파일을 열어보자

Bento가 어떻게 이렇게 작을 수 있는지 이해하기 위해 파일 구조를 살펴봤다. .bento.html 파일은 외부에서 내부로 여러 계층으로 구성된다.

가장 바깥쪽은 표준 HTML 문서다. DOCTYPE 선언과 <head>, <body>가 있다. 즉 어떤 브라우저에서든 열 수 있다. 하지만 내부 구조는 색다르다.

파일 헤더 근처에 id가 “bento-doc”이고 type이 “application/bento+json”인 <script> 태그가 있다. 여기에는 슬라이드의 모든 데이터 — 각 페이지의 콘텐츠, 각 요소의 위치와 크기, 색상, 폰트, 애니메이션 설정 — 가 일반 텍스트 JSON 형식으로 저장되어 있다. 브라우저에서 “소스 보기”로 바로 확인할 수 있고, 형식도 읽을 수 있다.

이 설계에는 심오한 장점이 있다: 데이터와 코드가 분리되어 있지만, 하나의 파일에 공존한다. AI 도구는 이 JSON 블록을 직접 읽고 수정할 수 있고, 개발자는 텍스트 편집기로 내용을 검색하고 치환할 수 있으며, 버전 관리 도구는 줄 단위로 변경 사항을 비교할 수 있다.

파일의 나머지 부분, 즉 실제 “소프트웨어”는 압축된 JavaScript 코드 블록에 저장되어 있다. 이 코드는 몇 가지 핵심 부분으로 구성된다: Reveal.js 기반 프레젠테이션 엔진, 자체 개발 애니메이션 시스템, 자체 개발 차트 엔진, 그리고 Vue 기반 편집기 인터페이스. v0.7.0 이전에는 Bento가 GSAP으로 애니메이션을, ECharts로 차트를 구현했었다. 저자는 이를 모두 자체 개발 솔루션으로 교체했는데, 이유는 간단했다: 파일 크기를 1.3MB에서 560KB로 줄이기 위해서다.

GitHub에 있는 Bento 프로젝트 저장소 페이지 그림: Bento의 GitHub 프로젝트 메인 페이지. 260개 커밋, 389개 별표가 활발한 개발 속도를 보여준다. MIT 라이선스로 누구나 자유롭게 사용하고 수정할 수 있다.

백지 한 장과 스위스 군용 칼

Bento의 설계 방식을 비유하자면 가장 적절한 표현은: 백지 한 장 속에 완전한 스위스 군용 칼이 들어 있는 모습이다.

전통적인 오피스 소프트웨어 방식은 “먼저 도구를 사고, 그다음에 무언가를 만든다”는 것이다. 슬라이드를 만들려면 먼저 PowerPoint를 설치하고(혹은 Mac을 사서 Keynote를 쓰고), 그다음에 소프트웨어 안에서 새 파일을 만들어야 한다. 파일 자체는 취약하다 — .pptx 파일을 Office가 없는 사람에게 보내면 열 수가 없다.

Bento의 방식은 “완성된 것이 곧 도구다”이다. bento.page/slides에서 HTML 파일 하나를 다운로드하면, 그것이 바로 “프레젠테이션 껍데기”다. 그 안에서 창작하고 저장하면, 이 파일은 자체 완결형 프레젠테이션이 된다 — 콘텐츠이면서 동시에 그 콘텐츠를 열기 위한 모든 도구이기도 하다.

이 파일을 위챗, 이메일, AirDrop으로 동료에게 보내면, 동료가 더블클릭하여 여는 순간 바로 슬라이드를 볼 수 있다 — 바로 프레젠테이션할 수 있고, 바로 편집할 수 있다. 별도의 설치 과정이 필요 없고, 계정을 등록할 필요도 없다.

이러한 경험의 차이는 한 가지 간단한 시나리오로 설명된다:

프로젝트 매니저가 분기별 보고 PPT를 만들어서 상사에게 보냈다고 가정해보자. 상사가 휴대폰으로 파일을 열면 — 전통적인 방식에서는 “파일을 열 수 없습니다”라는 메시지나 형식이 깨진 화면을 보게 될 가능성이 높다. 하지만 Bento 방식에서는 브라우저만 있으면 디자이너가 의도한 그대로의 레이아웃, 애니메이션, 차트를 볼 수 있다.

협업 편집: 암호화 블라인드 전달의 설계 묘미

더 흥미로운 것은 Bento의 협업 편집 기능이다. 처음 든 의문은: HTML 파일 하나로 어떻게 여러 사람이 동시에 편집할 수 있을까? 데이터는 어디에 저장되지?

정답은: 데이터는 파일에 저장되고, 편집 내용은 암호화된 “블라인드 전달” 채널을 통해 동기화된다.

Bento에서 협업 세션을 시작하면 파일이 로컬에서 암호화 키 세트를 생성한다. 초대받은 협업자는 동일한 파일 복사본(그 안에 포함된 키도 함께)을 받는다. 각 사람의 편집 작업은 암호화된 후 Cloudflare Durable Objects에서 실행되는 중계 서버로 전송된다 — 이 서버는 오직 한 가지 일만 한다: 받은 암호화 데이터를 방 안의 다른 사람들에게 전달하는 것.

이 중계 서버는 “블라인드” 상태로 설계되었다 — 암호문을 전달할 뿐, 서버 자체는 사용자의 어떤 내용도 읽을 수 없다. 글자, 차트, 이미지, 심지어 이름조차 볼 수 없다. 그저 암호화된 데이터를 나르는 역할만 할 뿐이다.

동기화 엔진에는 CRDT(Conflict-free Replicated Data Types) 기술이 사용되었다. 이는 분산 시스템에서 널리 연구된 방법으로, 누구의 수정이 “최종”인지 중앙 서버가 판단할 필요 없이 여러 사람이 동시에 같은 데이터를 편집할 수 있게 해준다. Bento의 CRDT는 자체 개발되었으며, 저자는 HN 토론에서 특별히 언급했다: “가장 만족스러운 부분은 CRDT의 부드러움이다.”

또 하나 세심한 설계가 있다: 오프라인 편집이다. 네트워크 없이도 슬라이드를 수정할 수 있고, 연결이 복구되면 변경 사항이 자동으로 팀과 동기화된다. CRDT가 병합의 정확성을 보장한다 — “네가 고친 게 내가 고친 걸 덮어쓰는” 상황은 발생하지 않는다.

아버지가 여가 시간에 만든 프로젝트

HN 댓글에서 재미있는 배경을 발견했다. 누군가 저자에게 제작 기간과 AI 활용 정도를 물었다. 저자 starfallg의 답변: “지난주에 시작했고, 여가 시간을 활용했으며, 전부 Claude Code로 작성했습니다. 예전처럼 직접 코드를 쓰고 싶었지만, 재생에너지 회사에서 기술팀을 이끌고 있고 퇴근 후에는 취학 전 자녀를 돌봐야 해서 시간이 없었습니다.”

이 대목에서 여러 정보가 드러난다: Bento의 주요 코드는 AI 보조로 생성되었고(저자는 Claude Code 사용), 전체 프로젝트는 구상에서 공개까지 약 일주일 남짓의 여가 시간이 걸렸으며, 저자 본인은 기술 관리자로 일상 업무는 오피스 소프트웨어와 무관하다.

이것이 Bento의 설계가 전통적인 오피스 소프트웨어와 이토록 다른 이유를 설명해줄지도 모른다 — “예전 형식과의 호환성”이라는 역사적 부담도, “Office처럼 디자인해야 한다”는 경로 의존성도 없었기 때문이다. 이 프로젝트는 “개발자가 정말로 필요로 하는 것은 무엇인가”라는 관점에서 출발한 결과물이다.

560KB의 경계와 한계

물론, 탄생한 지 일주일 남짓된 프로젝트인 만큼 Bento에는 한계가 있다. 사용해보면서 몇 가지를 발견했다:

첫째, 현재로서는 중간 정도 복잡도의 프레젠테이션 제작에 적합하다. 매우 정밀한 레이아웃 제어, 복잡한 마스터 디자인, 대량의 고해상도 이미지 처리가 필요하다면 전통적인 도구가 여전히 더 성숙하다.

둘째, 협업 편집 기능은 현재 저자의 Cloudflare 계정이 제공하는 중계 서비스에 의존한다. 저자는 “비용이 매우 저렴하고 예산 범위 내”라고 밝혔지만, 많은 사용자가 동시에 사용하면 서비스 안정성에 변수가 생길 수 있다. 다만 코드가 완전히 오픈소스이므로, 어떤 팀이든 자체 중계 서버를 구축할 수 있다.

셋째, 현재 파일 형식은 독점적인 JSON 구조다. 소스 코드가 공개되어 있고 형식을 읽을 수는 있지만, .pptx 형식과의 직접적인 변환 채널은 없다. 저자는 한 가지 방법을 제시했다: .pptx 파일을 AI에 넘기고, AI가 Bento 형식 규격에 맞춰 재생성하도록 하는 것이다.

이 프로젝트의 진정한 의미

Bento를 단순히 “PowerPoint를 대체하는 도구”로만 본다면, 그 뒤에 담긴 사고를 충분히 살리지 못하는 것이다. Bento가 던지는 더 가치 있는 질문은: AI가 코드를 쓸 수 있는 시대에, 소프트웨어의 배포 방식이 재고되어야 하지 않을까?

전통적인 소프트웨어 배포 방식 — 설치 패키지 다운로드, 런타임 의존성 설치, 계정 등록, 클라우드 서비스 로그인 — 이 프로세스는 점점 더 많은 경량 도구들에게는 과도한 절차가 되고 있다. Bento는 다른 답을 제시한다: 소프트웨어와 콘텐츠를 하나의 파일로 융합하고, 브라우저를 실행 환경으로 삼아, 파일 자체에 인프라가 전혀 필요 없는 “자가 실행 능력”을 부여하는 것이다.

이 아이디어는 사실 새롭지 않다. 20여 년 전 TiddlyWiki가 비슷한 방식을 시도한 적이 있다 — 자기 완결형 HTML 파일 하나가 Wiki 엔진이자 Wiki 콘텐츠인 방식이었다. TiddlyWiki는 아직도 충성도 높은 사용자층을 보유하고 있지만, 주류 시장에는 진입하지 못했다.

하지만 시대가 달라졌을 수 있다. 브라우저의 성능은 과거와 비교할 수 없을 정도로 향상되었고(File System Access API로 웹 앱이 로컬 파일을 직접 읽고 쓸 수 있게 되었고, WebCrypto API는 브라우저 수준의 암호화를 제공한다), 현대적인 프론트엔드 도구 체인은 복잡한 단일 페이지 애플리케이션 구축을 더욱 효율적으로 만들었으며, AI 보조 코딩은 이런 아이디어를 구현하는 기술적 장벽을 크게 낮추었다. Bento는 바로 이러한 트렌드들의 교차점에 서 있다.

HN 댓글에서 이런 글을 보았다: “이 프로젝트는 AI 시대에 아무것도 하지 않는 Google Workspace 팀에 대한 완벽한 고발이다.” 이 평가가 공정하든 그렇지 않든, Bento는 분명 생각해볼 질문을 던진다: 560KB의 HTML 파일로 이미 프레젠테이션의 편집, 발표, 협업 전 과정이 가능한데, 정말 수백 GB의 Office 제품군과 월 구독료를 내는 클라우드 서비스가 필요한가?

답은 단순한 “예” 또는 “아니오”가 아닐 것이다. 현실 세계의 대부분 사용자는 Bento의 가벼움과 간결함도 필요하지만, 전통적인 오피스 소프트웨어의 안정성과 생태계 호환성도 필요로 할 수 있다. 하지만 Bento의 존재 자체가 적어도 다른 길의 가능성을 보여준다 — 더 가볍고, 더 자유롭고, 더 “자기 것”인 길을.

참고 링크:

  • Show HN: Bento — Hacker News 원본 게시글 및 토론 (591추천, 141댓글)
  • Bento 프로젝트 GitHub 저장소 — nyblnet/bento, MIT 라이선스, 260개 커밋
  • Bento/Slides 온라인 데모 — 열면 바로 사용 가능한 편집기, 내장 기능 데모 슬라이드 포함
  • Bento 공식 웹사이트 — Templates Gallery 및 프로젝트 소개
  • TiddlyWiki — 자기 완결형 HTML 파일 Wiki 시스템, Bento 설계의 선배
  • Reveal.js — 오픈소스 HTML 프레젠테이션 프레임워크, Bento의 기본 렌더링 기반
  • Cloudflare Durable Objects — Bento 협업 중계 서비스의 인프라
  • File System Access API — Bento가 “자체 저장”을 가능하게 하는 브라우저 API