공지사항

VanillaFront란?

VanillaFront 2026. 9. 9. 14:22

VanillaFront — 빌드 도구 없는 순정(Vanilla) 엔터프라이즈 UI 프레임워크

한 줄 소개

VanillaFront는 순수 JavaScript(ES6 Modules)만으로 만들어진 B2B 엔터프라이즈 UI 프레임워크입니다. Webpack도, Babel도, npm install도 필요 없습니다. 브라우저가 그대로 읽고, 그대로 실행합니다.

  • 제품명: VanillaFront (v2.0)
  • 개발사: 비앰브이시스템즈 주식회사
  • 아키텍처: SPA · MVP(Model-View-Presenter) 패턴
  • 렌더링: Shadow DOM + Adopted StyleSheets
  • 빌드 도구: 없음 (No Build)

왜 "Vanilla"인가

프런트엔드 생태계는 지난 10년간 도구의 도구의 도구로 두꺼워져 왔습니다. 프로젝트 하나 시작하려면 수백 MB의 node_modules, 매년 갈아엎히는 번들러, 프레임워크 메이저 업그레이드마다 반복되는 마이그레이션 비용 — 엔터프라이즈 현장에서 이건 재앙에 가깝습니다.

VanillaFront는 정반대 방향입니다.

  • 의존성 0. 표준 브라우저 API만 사용
  • 파일 저장 → 새로고침이 곧 개발 사이클
  • 10년 뒤에도 그대로 실행되는 코드 (표준 ES6는 사라지지 않으니까)

제품 라인업

VanillaFront는 단일 라이브러리가 아니라 하나의 제품군입니다.

제품설명

구분  
UI Framework 코어 라이브러리. 120여개의 컴포넌트, 다수의 테마 지원 ,  변경가능.
VanillaFront Editor WYSIWYG 컴포넌트 빌더 — 드래그로 화면을 그리면 코드가 됩니다
VSCode Extension 위 두 에디터를 VSCode 안에 iframe으로 임베드. 코드/디자인/저장이 한 창에서
클로드 바이브 코딩지원 클로드 바이브 코딩 가능

 

 

컴포넌트 카탈로그 (120여개)

엔터프라이즈 화면에 필요한 건 대부분 이미 들어 있습니다.

  • 레이아웃  — Page, Panel, Rows, Columns, GridDiv, Section, StickyDiv …
  • 버튼  — Toggle, Compound, Split, Menu, Trapezoid …
  • 폼 입력  — Input, Number, Combobox, Filterbox, DatePicker, ColorPicker … (라벨 없는 PureField / 라벨 있는 Field 각 24개)
  • 그리드 — Grid, TreeGrid, DynamicGrid, PivotGrid + 페이지네이션
  • 차트 / 스파크차트
  • 다이어그램 — Flow, BPMN, DataFlow, Schedule(Gantt), FileMap
  • 지도 — OpenLayers, V-World 연동

한국어 · 영어 · 스페인어 3개 언어 사전이 기본 탑재되어 있습니다.

코어 패턴

View — 선언형 UI 트리

export default class MyView extends Va.View {
    config() {
        return {
            tagName: 'page',
            tags: [{
                tagName: 'panel',
                tags: [
                    { tagName: 'h1', innerHTML: '주문 목록' },
                    { tagName: 'button', label: '조회', onClick: 'onSearch' }
                ]
            }]
        };
    }
    onSearch(btn, evt) { /* ... */ }
}
Va.registerView('/view/order/OrderList', MyView);

JSX도, 템플릿 컴파일러도 없습니다. 그냥 객체 트리입니다.

 

 

VSCode Extension — 이 프로젝트의 진짜 무기

여기가 VanillaFront가 "또 하나의 UI 라이브러리"에서 벗어나는 지점입니다.

VSCode 안에서 VanillaFront Editor를 webview로 열면:

  1. 왼쪽에서 코드를 편집하고
  2. 오른쪽에서 결과 화면을 즉시 확인하며
  3. 저장 · undo/redo가 VSCode의 것과 동기화됩니다

AI가 생성한 컴포넌트 코드를 곧바로 시각적으로 확인하고, 커스텀 컴포넌트를 등록해서 팀 자산으로 재사용할 수 있습니다. WYSIWYG 도구가 IDE 안에 살아 있는 셈입니다.

백엔드 스택  (VanillaFront는 백앤드에 관여하지 않습니다.)

  • 개발 프로필은 src/main/resources/static/을 직접 서빙 → 저장 후 새로고침 = 반영
  • 운영 배포 시에만 gulp로 라이브러리 난독화 (필수아님)

누구를 위한 프레임워크인가

  • 프런트엔드 빌드 스택에 지친 엔터프라이즈 시스템 개발팀
  • 화면을 디자인하듯 조립하고 싶은 SI/솔루션 개발자
  • 5년 · 10년 유지보수해야 하는 장기 프로젝트 담당자
  • AI로 UI를 생성하되 즉시 눈으로 확인하며 다듬고 싶은 팀

요약

"프레임워크의 프레임워크"에 지친 사람들에게, 브라우저 표준만으로 충분한 답을 제시합니다.

빌드 없음. 의존성 없음. 만든 대로 실행됩니다. 그리고 그 위에 엔터프라이즈 화면을 만들 모든 조각이 이미 준비되어 있습니다. 그리고 ES6 기반의 최신 자바스크립트 문법으로 동작합니다.

 

티스토리툴바