VanillaFront 튜토리얼 — 1. 시작하기

블로그 첫 편입니다. VanillaFront가 무엇인지, 왜 만들었는지, 그리고 HTML 파일 하나로 시작하는 가장 짧은 경로까지 정리합니다.

VanillaFront란

한 줄로 말하면 — 빌드 도구 없이 순수 JavaScript(ES6 Modules)만으로 만드는 B2B 엔터프라이즈 UI Framework 입니다.

웹팩·바벨·npm install 필요 없음
브라우저가 표준 ES6 모듈을 그대로 읽어 실행
파일 저장 → 새로고침이 곧 개발 사이클
그 위에 약 120종의 UI 컴포넌트(버튼·필드·그리드·차트·다이어그램)를 미리 제공

왜 만들었나

1. Vanilla JS의 활용

어떤 프레임워크를 쓰든 결국 우리는 다시 Vanilla JS로 돌아옵니다. 라이브러리를 확장하거나 응용할 때 표준 JS 지식이 없으면 벽에 부딪히죠. VanillaFront는 처음부터 표준 ES6를 그대로 사용하면서 SPA를 만들 수 있게 설계했습니다.

2. 컴포넌트 내장

대부분의 웹 프레임워크는 UI 컴포넌트를 별도 서드파티에 맡깁니다. 그 결과 라이브러리별 파편화, 접근 제한, 기능 제한이 생깁니다. VanillaFront는 확장 가능한 120+ 컴포넌트를 프레임워크 안에 통합해 제공합니다.

3. JSON 기반 UI 선언

JSX 같은 비표준 문법 대신, JSON 객체 트리로 UI를 선언합니다. 데이터 표현에 적합한 표준 문법을 그대로 활용하는 것이 가독성과 조립성에서 유리하다고 판단했습니다.

4. SPA 기반 + 라우팅 내장

Single Page Application이 기본 형태이며, 라우팅·상태·뷰 시스템을 직접 지원합니다. MPA 안에서 부분적으로 사용해도 됩니다.

5. No Build 원칙

소스 그대로 웹서버 루트에 두면 바로 실행됩니다. 최소화·난독화가 필요할 때만 gulp로 빌드할 수 있습니다. Webpack은 지원하지 않기로 결정 — 번들링의 이점보다 dynamic import의 잇점이 크다고 봤기 때문입니다.

6. 반응형 웹

데스크톱·태블릿·모바일을 분리하지 않습니다. 하나의 컴포넌트가 미디어쿼리 형태의 속성으로 각 환경에 대응합니다.

7. VSCode Extension WYSIWYG

Visual Studio Code용 VanillaFront Editor 플러그인으로 화면을 위지윅으로 조립할 수 있습니다. 코드만으로도, 위지윅만으로도, 둘을 오가며도 개발 가능합니다.

가장 짧은 시작 — HTML 파일 하나

원한다면 JSP·HTML 페이지의 일부로도 쓸 수 있고, 단독 SPA로도 쓸 수 있습니다. 가장 간단한 형태부터 봅시다.

<!DOCTYPE html>
<html>
<head>
    <title>Vanilla Front example</title>
    <meta charset="utf-8">
    <link href="./lib/va.css" rel="stylesheet">
    <script language="javascript" src="./lib/va.js"></script>
    <script>
        window.onload = function () {
            class App extends Va.View {
                constructor() { super(arguments); }
                config() {
                    return {
                        tagName: 'div',
                        tags: [{
                            tagName: 'div',
                            innerHTML: '<h2>Hello Vanilla Front!</h2>',
                            style: { padding: '20px' }
                        }]
                    };
                }
            }
            window.app = new App({ startApp: true });
            document.getElementById('area').appendChild(window.app.element);
        }
    </script>
</head>
<body>
    <div id="area" style="width:100%;height:100%;"></div>
</body>
</html>

이게 전부입니다.

<script src="./lib/va.js"> — 라이브러리 스크립트 하나 로드
Va.View를 상속받아 config()에 UI 트리를 JSON으로 선언
new App({ startApp: true })로 인스턴스 생성 → #area에 붙임

npm도, 빌드도, node_modules도 없습니다.

조금 더 실전 — 그리드까지

Hello World에서 한 단계 더 가서, VanillaFront의 그리드를 HTML 페이지 일부로 넣어봅시다.

<script language="javascript" src="./grid.js" type="module"></script>

grid.js:

import light from './lib/css/va-light.css' with { type: 'css' };
import sheet from './lib/css/va.css'       with { type: 'css' };
import Va    from './lib/va.js';

window.onload = function() {
    Va.init();
    Va.addStyleSheet(light);
    Va.addStyleSheet(sheet);

    class Grid extends Va.View {
        onRowClick(grid, key, value, data) {
            console.log('선택된 행:', data);
        }
        setData(data) {
            this.getRef('refGrid').setData(data);
        }
        config() {
            return {
                tagName: 'div',
                style: 'width:100%;height:100%',
                tags: [{
                    ref: 'refGrid',
                    tagName: 'grid',
                    style: { height: '100%', width: '100%' },
                    columns: [
                        { key: 'itemId',   title: '품목코드', width: 100 },
                        { key: 'itemName', title: '품명',     fillRatio: 1 },
                        { key: 'color',    title: '색상',     width: 100 }
                    ],
                    onRowClick: 'onRowClick'
                }]
            };
        }
    }
    window.grid = new Grid({ startApp: true });
    document.getElementById('area').appendChild(window.grid.element);
}

바깥 HTML은 일반 웹페이지 그대로, 그리드 영역만 VanillaFront가 담당합니다. window.grid.setData(...) / window.grid.getRef(...) 로 외부 HTML에서 그리드를 자유롭게 제어할 수 있어요.

여기서 중요한 점 — 그리드의 CSS는 Shadow DOM 안에 격리되므로 바깥 HTML 스타일에 영향을 주지 않습니다.

시작하는 4가지 경로

프로젝트 규모와 상황에 맞춰 시작 방법을 고르세요.

경로언제

HTML 파일 안에 <script> 태그	JSP·기존 HTML에 부분적으로 넣을 때, 데모·POC
홈페이지에서 zip 다운로드	라이브러리 파일 세트를 그대로 웹서버에 배포
VSCode Extension	위지윅으로 화면을 조립하며 코드로도 편집하고 싶을 때 (권장 개발 환경)

각 경로는 다음 편 이후에서 하나씩 상세히 다룰 예정입니다.

Va.View와 config()의 정체

이 튜토리얼 시리즈에서 계속 마주칠 두 개념을 짧게 소개하고 마칩니다.

Va.View — 화면 단위. 하나의 페이지, 또는 페이지 안의 재사용 영역.

config() — 그 화면의 UI 구조를 JSON 트리로 선언하는 메서드.

class MyPage extends Va.View {
    config() {
        return {
            tagName: 'page',              // 최상위는 page
            tags: [{
                tagName: 'panel',         // 섹션은 panel
                tags: [
                    { tagName: 'h1', innerHTML: '주문 목록' },
                    { tagName: 'button', label: '조회', onClick: 'onSearch' }
                ]
            }]
        };
    }
    onSearch(btn, evt) {
        // 조회 로직
    }
}

tagName은 HTML 태그 또는 VanillaFront 컴포넌트명 (button, grid, combobox 등)
tags는 자식 배열
onXxx 문자열은 뷰 안의 메서드명

Page > Panel 구조 — 화면 표준입니다. 최상위는 page, 섹션 분할은 panel. 이 두 컴포넌트가 자체 gap을 갖기 때문에 별도 margin 없이도 여백이 자연스럽게 잡힙니다.