Instatic, 비주얼 편집과 정적 사이트 제작을 한곳에 묶었어요

Instatic, 비주얼 편집과 정적 사이트 제작을 한곳에 묶었어요

IT & AI 뉴스 썸네일

웹사이트를 직접 운영하려면 CMS, 프레임워크, 호스팅, 폼, 미디어 저장소를 따로 고르는 경우가 많아요. Instatic은 이 구성 요소를 하나의 Bun 서버에 묶고, 편집 결과를 시맨틱 HTML과 압축된 CSS로 내보내는 셀프호스팅 비주얼 CMS예요. 1

핵심 요약

구분	내용
운영 방식	비주얼 에디터, 콘텐츠, 미디어, 인증, 폼, 플러그인, 퍼블리셔를 한 Bun 서버에서 다뤄요.
데이터베이스	기본 개발 환경은 SQLite를 쓰고, 여러 작성자나 관리형 백업이 필요하면 PostgreSQL을 선택할 수 있어요.
공개 페이지	게시할 때 정적 파일을 만들며, 일반 경로에서는 프레임워크 부팅이나 데이터베이스 왕복을 줄여요.
확장 기능	백엔드 플러그인은 권한을 부여받은 QuickJS-WASM 샌드박스에서 실행돼요.
현재 단계	아직 0.0.x 버전이라 1.0 전에 API와 작업 방식이 바뀔 수 있어요.

1. Instatic은 사이트 제작 도구를 한곳에 모았어요

Instatic의 관리 화면은 React와 Vite로 만들었지만, 방문자가 받는 공개 페이지에는 React 런타임을 남기지 않는 구조예요. 페이지를 게시하면 HTML과 CSS를 디스크에 만들고, 자주 바뀌는 경로는 버전이 붙은 메모리 캐시로 처리해요. 방문자마다 달라지는 부분에는 약 1.1kB 크기의 런타임을 필요할 때만 불러온다고 프로젝트가 설명해요. 2

비주얼 편집기는 별도 미리보기 창보다 실제 캔버스 편집에 초점을 맞췄어요. 데스크톱과 모바일 같은 여러 브레이크포인트를 나란히 놓고 수정할 수 있어요. 재사용 컴포넌트에는 문자열, 숫자, 색상, 이미지, URL 같은 매개변수와 콘텐츠 슬롯을 붙일 수 있어요. 공통 머리글과 바닥글은 템플릿으로 관리하고, 게시물이나 상품 목록은 반복 레이아웃으로 배치해요.

728x90

콘텐츠도 같은 관리 환경에 들어 있어요. 페이지와 게시물, 사용자 정의 컬렉션, 폼 제출 데이터를 공통 데이터 모델로 다뤄요. 작성자는 초안, 예약, 공개 상태를 구분하고 공개본의 버전 기록을 확인할 수 있어요. 미디어 파일은 폴더와 사용 위치를 기준으로 관리해요. 역할별 권한, TOTP 2단계 인증, 로그인 실패 잠금, 감사 로그도 포함돼 있어요.

디자인 시스템은 Core Framework를 내장했어요. 브랜드 색상을 정하면 명도 단계의 색을 만들고, 화면 폭에 따라 바뀌는 글자 크기와 간격 체계를 설정할 수 있어요. 여기서 생성한 유틸리티 클래스는 하나의 작은 CSS 파일로 묶여요. 디자인 토큰을 바꾸면 해당 토큰을 쓰는 여러 페이지에 같은 규칙이 반영돼요.

AI 기능은 코드 덩어리나 이미지 시안만 주는 형태가 아니에요. 설명을 입력하면 캔버스에서 다시 편집할 수 있는 노드와 CSS를 만들어요. Claude, OpenAI, OpenRouter, 로컬 Ollama 가운데 모델 제공자를 고르고 직접 키를 연결하는 방식이에요. 사이트 제작 범위와 콘텐츠 편집 범위를 나눠 도구 접근 범위도 다르게 뒀어요.

플러그인 백엔드는 플러그인마다 분리한 QuickJS-WASM 워커에서 실행해요. 기본 상태에서는 파일시스템과 환경 변수에 접근할 수 없어요. 네트워크도 사이트 소유자가 호스트별 권한을 줘야 쓸 수 있어요. 다만 관리 화면 안에서 실행되는 확장 코드는 별도 영역이며, 설치할 때 `editor.code` 권한을 명시적으로 요구해요.

설치 선택지도 여러 개예요. Railway 템플릿은 SQLite와 PostgreSQL 구성을 제공해요. Render, Docker, VPS 배포 문서도 있어요. 로컬 개발은 Bun을 설치한 뒤 저장소를 내려받아 의존성을 설치하고 개발 서버를 실행하는 흐름이에요. 라이선스는 MIT라서 코드를 사용하고 수정하거나 재배포할 수 있어요. 저작권 고지와 라이선스 문구는 함께 유지해야 해요. 2

도입 전에 확인할 점

기능 목록은 넓지만 프로젝트가 스스로 0.0.x 버전이라고 밝혔어요. 1.0 전에는 API와 작업 방식이 달라질 수 있어요. 운영 사이트에 바로 적용하려면 업그레이드 절차, 데이터베이스와 업로드 폴더 백업, 플러그인 권한, 장애 시 복구 방법을 먼저 시험하는 편이 안전해요.

방문자 분석 기능도 아직 완성된 범위로 소개하지 않아요. 현재 분석 화면은 운영 상태, 감사 기록, 직접 보유한 폼 데이터에 집중해요. 개인정보를 고려한 자체 방문자 분석은 앞으로 추가할 항목으로 적혀 있어요. 기존 WordPress 플러그인이나 Webflow 연동 서비스에 의존하는 사이트라면 필요한 기능이 Instatic 플러그인 SDK에 있는지도 따로 확인해야 해요.

왜 중요한가요

Instatic이 제안하는 방식은 비주얼 제작 도구의 편리함을 유지하면서 공개 페이지의 결과물과 운영 데이터를 직접 보유하려는 팀에 맞아요. 특히 편집기 전용 속성과 프레임워크 런타임이 공개 HTML에 남는 문제를 피하고 싶은 개발자에게 비교 기준을 하나 더 줘요. 2

선택 기준은 기능 개수보다 운영 책임에 있어요. 셀프호스팅을 고르면 서비스별 월 비용과 계정 분산을 줄일 수 있지만, 서버 업데이트와 백업, 보안 패치도 운영자가 맡아요. Instatic은 여러 도구를 한 서버로 줄여 주지만, 그 서버가 멈췄을 때 복구할 준비까지 대신해 주지는 않아요.

현재 버전에서는 기존 Webflow, Framer, WordPress 사이트를 당장 옮기기보다 작은 콘텐츠 사이트나 내부 프로젝트로 먼저 시험하는 접근이 현실적이에요. 정적 출력물의 HTML 구조와 CSS 크기, 편집자 작업 속도, 폼 데이터 처리, 배포 후 되돌리기를 실제 조건에서 확인하면 도입 판단이 쉬워져요.

참고 자료

1. Instatic - Webflow, Framer, WordPress를 대체하는 오픈소스 셀프호스팅 비주얼 CMS — GeekNews
2. CoreBunch/Instatic — GitHub 공식 저장소