Simon Willison이 자신의 데이터 탐색 도구 Datasette에 'Claude Artifacts'를 본뜬 새 기능을 붙였다 — 사용자가 직접 만든 HTML+자바스크립트 앱이 내 데이터베이스에 안전하게 질문을 던질 수 있게 된다.

한눈에datasette 위에서 동작하는 새 플러그인 datasette-apps 공개각 앱은 격리된 iframe-sandbox에서 실행되며 SQL 쿼리로 내 DB에 접근content-security-policy로 외부 도메인 통신을 차단해 데이터 유출을 막음

실무자: 사내 데이터 위에 가벼운 도구를 만들 때, 별도 백엔드 없이 단일 HTML 파일만으로 시작할 수 있다. 리더: AI가 만든 코드를 내부 데이터에 붙일 때 "안전하게 시도해 본다"는 패턴이 가능해진다.

2026년 6월 18일, 오랜 기간 오픈소스 데이터 도구를 만들어 온 Simon Willison이 datasette-apps라는 새 플러그인을 공개했다. 한 줄로 말하면 "내 데이터베이스에 직접 말을 거는 작은 웹앱을, 위험 없이 호스팅하는 도구"다. 본인은 이를 두고 "Claude Artifacts를 datasette용으로 다시 상상한 것"이라고 표현했다.

Datasette Apps로 만든 타임라인 예제 앱 스크린샷

이미지: Datasette Apps로 만든 타임라인 검색 앱 예시, 출처: Datasette Apps: Host custom HTML applications inside Datasette

무엇이 일어났나

datasette는 원래 SQLite 데이터베이스 파일을 웹으로 탐색·공유하게 해 주는 오픈소스 도구다. 이번에 추가된 datasette-apps 플러그인은 여기에 한 단계를 더한다. 사용자는 단일 HTML 파일(자바스크립트와 CSS 포함)을 데이터베이스 옆에 올려두기만 하면 된다. 그 파일은 자동으로 격리된 작은 화면 — iframe-sandbox — 안에서 실행되고, await datasette.query("content", "select ...") 같은 한 줄로 데이터베이스에 질문을 던질 수 있다.

Simon Willison 본인이 라이브 데모로 두 개를 공개했다. 하나는 단순히 두 테이블의 행 개수를 보여 주는 십수 줄짜리 예제, 다른 하나는 뉴스·블로그·릴리스 세 테이블을 합친 full-text-search 타임라인 앱이다. 후자는 사용자가 검색창에 글자를 입력할 때마다 UNION ALL로 합쳐진 SQL을 호출해 1,953건 중 200건을 골라 보여 준다.

왜 중요한가

그동안 AI 채팅 도구로 '한 화면짜리 도구'를 만들어 본 사람은 많다. ChatGPT의 Canvas나 Claude Artifacts가 대표적이다. 하지만 그런 도구는 거의 항상 "내 진짜 데이터"와 분리되어 있다. 가계부 데이터를 보여 주는 차트를 만들고 싶어도, 실제 가계부 파일은 매번 복사해 붙여 넣어야 한다.

datasette-apps는 정확히 이 간극을 메운다. AI에게 "내 블로그 글 중 최근 5개 제목을 보여 주는 앱을 만들어 줘"라고 부탁하면, 만들어진 HTML이 그대로 내 데이터베이스의 blog_posts 테이블을 읽어 화면을 그린다. 별도의 서버, API 키, 배포 작업이 필요 없다.

누가 이득, 누가 손해

사내 위키 옆에 작은 검색 도구를 붙이고 싶었던 데이터 분석가, SQLite 한 덩어리에 가족 사진 메타데이터를 모아 두고 갤러리 앱을 만들고 싶었던 개인 사용자에게 가장 좋다. 반대로 "AI가 만들어 주는 즉석 앱"을 별도 SaaS로 팔던 회사 입장에서는 오픈소스 대안이 하나 늘어난 셈이다.

더 깊이

가장 흥미로운 부분은 안전 장치다. AI가 만든 코드를 내 데이터베이스에 들이려면 두 가지를 막아야 한다. 첫째, 그 코드가 내 페이지의 쿠키나 비밀을 훔쳐 가지 못하게 한다. 둘째, 그 코드가 내 데이터를 외부 서버로 몰래 빼돌리지(이른바 data-exfiltration) 못하게 한다.

Willison은 첫 번째를 <iframe sandbox="allow-scripts allow-forms">로 막고, 두 번째를 content-security-policy (CSP) — 웹 페이지가 어떤 외부 주소와 통신할 수 있는지 정해 두는 규칙 — 로 막는다. 흥미로운 점은, HTML 안에 <meta http-equiv="Content-Security-Policy"> 태그로 박아 둔 CSP는 그 안에서 실행되는 자바스크립트가 지우거나 바꿀 수 없다는 사실이다. Willison은 별도의 실험에서 이를 확인했고, 그 결과를 이번 설계의 기반으로 삼았다.

아직 알 수 없는 것

Willison의 글은 "방어를 깊게 쌓는다(defense in depth)"는 입장이지만, AI가 생성한 코드가 데이터베이스에 쓰기 권한을 가진 stored-queries와 결합될 때 어떤 사고가 가능한지에 대한 정답은 아직 없다. 실제 운영 환경에서 사용자가 늘어나야 드러날 문제들이다.

5분 실습 (쉬움 · 5분)

  1. agent.datasette.io에 들어가 GitHub 계정으로 로그인한다.
  2. 우측 상단 메뉴에서 "Apps → Create app"을 누른다.
  3. 페이지 아래쪽 "Use AI to build this app"의 "Copy prompt" 버튼을 누르고, 그 프롬프트를 Claude나 ChatGPT 채팅창에 붙여 넣는다.
  4. 그 뒤에 "블로그 글 중 최근 5개 제목을 카드 형태로 보여 줘"처럼 원하는 앱을 한 문장으로 추가한다.
  5. AI가 만들어 준 HTML을 다시 Datasette의 HTML 편집기에 붙여 넣고 "Create app"을 누른다.

더 읽어보기