당신의 사이트를 소유하세요. 사이트를 구축하는 즐거움을 누리세요.

비주얼 에디터(visual editor), 콘텐츠 엔진(content engine), 그리고 퍼블리셔(publisher)가 모두 하나의 Bun 서버에 상주하는 셀프 호스팅(self-hosted) CMS입니다. 여기서 생성되는 페이지들은 소스 보기(view-source)로 읽기에 충분할 만큼 깔끔합니다.

원클릭 배포(One-Click Deploy) · 빠른 시작(Quick Start) · 문서(Docs) · 플러그인(Plugins) · 로드맵(Roadmap)

YouTube에서 Instatic에 관한 소개 영상을 시청하세요.

현대적인 웹사이트는 보통 스택(stack)을 조립하는 것을 의미합니다: 헤드리스 CMS(headless CMS), 프레임워크(framework), 호스트(host), 폼 서비스(form service), 분석 벤더(analytics vendor), 이미지 CDN(image CDN) — 각각 별도의 비용, 대시보드, 그리고 새벽 2시의 장애(outage)를 동반합니다. Instatic은 이와 정반대의 선택을 합니다. 하나의 Bun 서버가 캔버스 에디터(canvas editor), 콘텐츠 엔진(content engine), 미디어(media), 인증(auth), 폼(forms), 플러그인(plugins), 그리고 퍼블리셔(publisher) 전체를 담고 있으며, SQLite 또는 Postgres를 기반으로 당신이 원하는 어디에서나 실행할 수 있습니다.

그 결과물로 나오는 것은 대부분의 빌더들이 조용히 타협하는 부분입니다: 페이지에 에디터의 기계적 장치들을 전혀 남기지 않은 채, 순수한 시맨틱 HTML(semantic HTML)과 압축된 CSS(compact CSS)를 제공합니다. 프레임워크 런타임(framework runtime)도, 빌더 속성(builder attributes)도, div soup도 없습니다. 대부분의 경우 사이트가 정적 파일(static file) 그 자체이기 때문에, 사이트가 정적 파일처럼 로드됩니다.

MIT 라이선스. 셀프 호스팅(Self-hosted). 당신의 것입니다.

Railway는 Instatic을 라이브로 실행하는 가장 빠른 방법입니다. 템플릿을 선택하고, 버튼을 누르고, 약 2분만 기다리세요. 그게 전부입니다. 비밀 키(secret keys)를 생성하고, 스토리지 볼륨(storage volume)을 연결하며, 상태 확인(health checks)을 자동으로 설정합니다. 터미널(terminal)을 열 필요조차 없습니다.

대부분의 사이트에는 SQLite가 적절한 기본값입니다. 저자 팀이 있거나 관리형 데이터베이스 백업을 원하는 경우에는 Postgres를 사용하세요.

새로운 Instatic 버전이 사용 가능해지면, 최신 이미지를 재배포하여 업데이트하세요. 데이터베이스와 업로드 파일은 연결된 스토리지에 유지되므로, 사이트를 처음부터 다시 구축할 필요 없이 앱 컨테이너만 교체할 수 있습니다.

자체 하드웨어를 선호하시나요? Instatic은 단일 Docker 이미지입니다:

INSTATIC_IMAGE=ghcr.io/corebunch/instatic:latest docker compose -f compose.prod.yml -f compose.sqlite.yml up -d

VPS, Postgres, Caddy를 이용한 HTTPS, Render 및 백업에 대한 전체 가이드는 docs/deployment에 있습니다.

대부분의 도구는 한 가지 작업만 수행하고 나머지는 사용자에게 떠넘깁니다. 한 곳에서 디자인하고, 다른 곳에서 빌드하며, 콘텐츠는 다른 곳에 보관한 다음, 네 번째 도구에서 분석 기능을 덧붙이는 식입니다. Instatic은 이 모든 것을 수행합니다. 실제 포함된 구성 요소는 다음과 같습니다.

에디터는 미리보기 창이 붙어 있는 양식(form)이 아니라, 진정한 캔버스입니다. 여러 개의 중단점(breakpoint) 프레임을 나란히 배치하고 함께 편집할 수 있습니다. 데스크톱 설정을 변경하면 모바일 프레임이 동일한 뷰에서 반응합니다. 실제 환경에서 작업하고 싶다면 라이브 모드(live mode)로 전환하여 전체 크기의 단일 페이지를 그 자리에서 직접 편집할 수 있습니다.

다른 곳에는 없는 부분: Core Framework가 내장되어 있습니다. 이는 수천 명의 WordPress 전문가들이 이미 매일 사용하고 있는 디자인 토큰(design-token) 엔진이며, 여기서는 설치하고 기도하며 결과를 기다려야 하는 플러그인이 아니라 핵심 시스템으로 작동합니다.

자체적인 색조 스케일(shade scale)을 생성하는 컬러 토큰. 브랜드 색상 하나를 정의하면, 조정된 틴트(tints)와 쉐이드(shades)의 전체 세트를 자동으로 얻을 수 있습니다.
유동적이고 수학적인 타이포그래피 스케일(Type scales). 동기화해야 하는 40개의 수동 선택 폰트 크대신, 뷰포트(viewport)에 따라 크기가 조절되는 하나의 램프(ramp)를 사용합니다.
**간격 스케일(Spacing scales)**을 통해 모든 페이지와 모든 중단점이 동일한 리듬을 유지합니다.
**유틸리티 클래스 생성기(utility-class generator)**가 고정된 생성 클래스들을 하나의 작은 framework.css 파일로 출력합니다.

불필요한 요소(bloat)도, 중복된 규칙도, 요청하지 않은 기능도 없습니다.

전체 디자인 시스템은 데이터로 존재합니다. 토큰 하나를 변경하면 이를 사용하는 모든 페이지가 업데이트됩니다.

**모듈 (Modules)**은 빌딩 블록입니다: 컨테이너, 텍스트, 이미지, 버튼, 비디오, 리스트, 링크, SVG, 폼(forms) 등이 포함됩니다. 이를 캔버스 위로 드래그하여 원하는 대로 중첩(nest)할 수 있습니다. **시각적 컴포넌트 (Visual Components)**는 타입이 지정된 파라미터(parameters)와 이름이 지정된 슬롯(slots)을 가진 재사용 가능한 조각입니다. 파라미터는 문자열, 숫자, 불리언(boolean), 색상, 이미지, URL, 리치 텍스트(rich text), 열거형(enum), 또는 콘텐츠 전체 슬롯이 될 수 있습니다. 컴포넌트를 한 번 수정하면 사이트의 모든 인스턴스가 업데이트됩니다. 자기 자신을 참조하는 컴포넌트는 발생하기 전에 차단되므로, 자기 꼬리를 먹는 상황(nothing eats its own tail)은 발생하지 않습니다. **템플릿 (Templates)**은 공유되는 크롬(chrome, UI 프레임)을 처리합니다. 사이트 전체를 위한 하나의 레이아웃, 포스트 유형별 개별 레이아웃, 그리고 직접 디자인하는 실제 404 페이지가 제공됩니다. 콘텐츠는 아울렛(outlet)으로 흐르므로, 헤더와 푸터는 한 번만 작성하여 모든 것을 감싸도록 합니다. **루프 (Loops)**는 컬렉션(collection)에 대해 레이아웃을 반복합니다: 포스트, 페이지, 미디어, 또는 플러그인이 소스로 노출하는 무엇이든 가능합니다. 루프에 몇 가지 변형(variants)을 부여하면 진행 과정에서 이들을 교차하여 보여줍니다. 포스트 리스트, 제품 그리드, 갤러리에 유용합니다. 귀하의 CMS에 속하는 폼 (Forms). 의미론적 필드(semantic fields)로 폼을 구축하면 제출된 데이터가 귀하의 데이터 테이블에 저장됩니다. Instatic은 배치된 필드를 읽고 그에 맞는 테이블을 자동으로 생성할 수 있습니다. 제3자 폼 서비스, 임베드(embed), 또는 문의 양식에 대한 월간 비용이 필요 없습니다. 실제로 페이지를 편집하는 AI 에이전트. 원하는 내용을 설명하면 스크린샷이나 코드 덩어리가 아닌, 실제 편집 가능한 노드(nodes)로서 캔버스 위에 구축합니다. 마크업을 붙여넣을 때 사용하는 것과 동일한 임포트 파이프라인(import pipeline)을 통해 구조를 위한 시맨틱 HTML(semantic HTML)과 스타일을 위한 CSS를 작성합니다. 35개의 도구를 가진 사이트 범위(Site scope)는 페이지를 구축하고, 15개의 도구를 가진 콘텐츠 범위(Content scope)는 엔트리(entries)를 편집합니다. Claude, OpenAI, OpenRouter 또는 로컬 Ollama 등 귀하의 모델을 가져오세요. 귀하의 키, 귀하의 모델, 귀하의 비용으로 운영됩니다. 신뢰할 수 있는 임포트 (Imports). 가공되지 않은 HTML을 붙여넣으면 편집 가능한 노드를 얻을 수 있습니다. 또는 HTML, CSS, 이미지, 폰트를 포함한 전체 정적 사이트를 드롭하면, Super Import가 이를 페이지, 스타일 규칙, 디자인 토큰(design tokens), 미디어로 변환합니다.

모든 충돌은 무언가가 작성되기 전에 사용자에게 표시되며, 전체 가져오기(import) 작업은 단 한 번의 실행 취소(undo)로 되돌릴 수 있습니다.

모든 것을 아우르는 단일 콘텐츠 모델. 페이지, 포스트, 컴포넌트, 커스텀 컬렉션(custom collections), 그리고 당신이 만들어낸 모든 구조화된 테이블은 모두 동일한 저장소인 data_tables와 data_rows에 존재합니다. 구석에 숨겨진 특별 대우를 받는

당신이 게시하지 않은 것은 그들이 볼 수 없습니다.

직접 구성하는 대시보드. 드래그, 크기 조정 및 재배치가 가능한 타일 위젯 기반의 12컬럼 그리드(12-column grid)입니다. 사용자 지정(customize) 모드에서 필요한 위젯을 추가하면 레이아웃이 사용자별로 저장됩니다. 플러그인은 동일한 그리드에 자체 위젯을 제공할 수 있습니다.

잊지 않는 감사 로그 (Audit log). 로그인, 콘텐츠 변경, 역할 편집, 플러그인 생명주기(lifecycle) 등 모든 의미 있는 관리자 작업은 하나의 행(row)을 작성합니다. 이는 추가 전용(append-only) 방식이므로, 누군가 몰래 다시 작성할 수 있는 것이 아니라 누가, 무엇을, 언제 했는지에 대한 실제 기록이 됩니다.

당신의 소유인 폼 데이터 (Form data). 제출된 데이터는 귀하의 자체 테이블에 저장됩니다. 이를 쿼리(query)하고, 내보내고(export), 이를 기반으로 구축하십시오. 중간에 개입하는 벤더(vendor)는 없습니다.

오늘날의 분석(analytics) 인터페이스는 의도적으로 운영 중심적입니다. 즉, 제3자 방문자 추적 대신 대시보드 상태, 감사 이력 및 소유한 폼 데이터를 제공합니다.

모든 CMS에는 플러그인이 있습니다. 여기서의 차이점은 백엔드 플러그인 코드가 실행되는 위치입니다.

Instatic 플러그인은 매니페스트(manifest)가 포함된 zip 패키지입니다. 서버 엔트리포인트(entrypoint)는 **QuickJS-WASM 샌드박스 (sandbox)**를 호스팅하는 플러그인별 워커(worker)에서 실행됩니다. 파일 시스템, 환경 변수, 그리고 사이트 소유자가 허용하지 않는 한 네트워크가 전혀 없는 환경이며, 한 번에 하나의 호스트만 허용됩니다. 에디터 확장(editor extensions) 및 앱 유형의 관리자 페이지는 다릅니다. 이들은 관리자 창에서 실행되며 설치 전에 명시적인 editor.code 권한이 필요합니다.

SDK를 통해 플러그인은 다음을 추가할 수 있습니다:

• HTTP 라우트(routes) 및 자체 관리자 페이지
• 스토리지(storage) 및 예약된 백그라운드 작업(scheduled background jobs)
• 루프 데이터 소스(Loop data sources), 따라서 콘텐츠 루프가 어디에서든 데이터를 가져올 수 있음
• 캔버스 모듈 (Canvas modules) — 에디터에 나타나는 새로운 블록
• 미디어 스토리지 어댑터(media storage adapters) 및 프론트엔드 에셋(frontend assets)
• 설치, 활성화 및 그 이후를 아우르는 생명주기 훅(lifecycle hooks)

플러그인 시스템 문서와 템플릿 플러그인으로 시작하세요.

게시된 Instatic 페이지는 대부분 디스크에 놓여 있는 파일일 뿐입니다. 부팅해야 할 프레임워크도, 하이드레이션 (hydration) 단계도, 일반적인 경로에서의 데이터베이스 왕복 (database round-trip)도 없습니다. 브라우저는 의미론적 HTML (semantic HTML)과 압축된 CSS 번들 (CSS bundles)을 내려받기만 하면 끝납니다. 방문자와 콘텐츠 사이에 거의 아무것도 없기 때문에, 페이지가 즉각적으로 느껴집니다.

그 속도는 조절하는 설정값이 아닙니다. 여러분이 신경 쓸 필요가 없는 세 가지 계층을 통해 게시 방식에서 자연스럽게 도출되는 결과입니다:

정적 페이지는 게시할 때 디스크에 직접 구워지며 (baked straight to disk) 원자적 (atomically)으로 교체됩니다. 방문자에게는 렌더링 (render) 결과가 아닌 파일이 제공됩니다. **진정으로 변경되는 경로 (Routes)**는 버전 관리되는 인메모리 캐시 (in-memory cache)를 거칩니다. 게시를 하면 버전이 올라가므로, 오래된 항목은 지연된 방식 (lazily)으로 누락되며 아무도 오래된 페이지를 보지 못합니다. 방문자마다 달라지는 소수의 진정한 부분들은 자동으로 감지되며 약 1.1 kB 정도의 런타임 (runtime)에 의해 지연 로딩 (lazy-loaded)됩니다. 이 단락보다 더 작습니다.

최종적으로 나오는 결과물은 처음부터 끝까지 순수한 HTML과 압축된 CSS입니다. 에디터의 어떤 것도 따라오지 않습니다. 공개 페이지에 React가 없으며, 에디터 런타임도 없고, 마크업 (markup)에 프레임워크도 없습니다. 그리고 단지 HTML과 CSS일 뿐이기에, 그 무엇도 여러분의 사이트를 인질로 잡지 않습니다. 읽을 수도 있고, 어디든 호스팅할 수 있으며, 가져가서 떠날 수도 있습니다. 디자인의 완전한 주도권은 게시자에게 있습니다.

Bun만 있으면 됩니다. 그 외에는 필요 없습니다. 기본 개발 설정은 SQLite에서 실행되므로, 별도로 구축해야 할 추가 서비스가 없습니다.

git clone https://github.com/corebunch/instatic.git
cd instatic
bun install
...

http://localhost:5173을 엽니다. 첫 방문 시 사이트 및 소유자 계정 생성 과정을 안내합니다.

실제로 배포되는 방식을 보고 싶으신가요? bun run start를 실행하면 관리자 페이지를 빌드하고 http://localhost:3001/admin의 Bun 서버에서 제공합니다.

백업을 한 문장으로 요약하자면: 데이터베이스(Postgres 덤프 또는 SQLite 파일)와 uploads 폴더를 백업하면 사이트 전체를 백업한 것입니다 — 자세히 보기.

우리는 Motion.page와 Core Framework를 만든 팀입니다. 이 도구들은 주로 WordPress 환경에서 수천 명의 사람들이 생업으로 웹사이트를 구축하는 데 사용하고 있습니다.

우리는 다른 플랫폼들을 조금 더 견딜 만하게 만드는 데 수년을 보냈습니다. 그러다 어느 시점에 이르자 명백한 질문 하나가 머릿속을 떠나지 않았습니다. 만약 그 밑바탕이 되는 기반 자체가 처음부터 완벽하다면 어떨까? 우회해야 할 레거시 (Legacy)도 없고, 우리가 건드릴 수 없는 마크업 (Markup)도 없으며, 우리가 사이트를 계속 지켜볼 수 있는 곳에 두어야만 유지되는 비즈니스 모델도 없는 그런 상태 말입니다.

그래서 우리는 Instatic을 만들었습니다. 그리고 Core Framework를 핵심 시스템으로 연결하여 가져왔습니다. 덕분에 사용자들이 이미 의존하고 있는 색상 음영 (Color shades), 타이포그래피 스케일 (Type scales), 간격 (Spacing), 유틸리티 클래스 (Utility classes)가 별도로 설치하여 운에 맡겨야 하는 추가 기능 (Add-on)이 아니라, 제품의 일부로서 포함됩니다.

솔직하게 말씀드리자면: 이것은 버전 0.0.x입니다.

위에서 언급한 모든 것들 — 캔버스 (Canvas), Core Framework, 유니버설 콘텐츠 모델 (Universal content model), 샌드박스형 플러그인 (Sandboxed plugins), AI 에이전트 (AI agent), 폼 (Forms), 루프 (Loops), 템플릿 (Templates), 미디어 (Media), MFA, 감사 로그 (Audit log), 원클릭 배포 (One-click deploy), 클린 퍼블리셔 (Clean publisher) — 는 결승선이 아니라 출발선입니다. 앞으로 나올 것들은 다음과 같습니다: