YAML 기반 웹 개발 도구 WebLite DSL 소개
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- 개발자, 디자이너, 교육자
- 난이도: 중간 (HTML/CSS 지식이 필요하지 않으나 YAML 이해 필요)
핵심 요약
WebLite DSL은 YAML 파일을 통해 HTML/CSS 웹사이트를 생성하는 도메인 특화 언어(DSL)Try-It Editor는 실시간 브라우저 미리보기와 MERN 스택 + Python Flask 기반의 온라인 편집기 제공- Zero dependencies로 프론트엔드 구조 간소화 및 모듈화된 코드 처리 지원
섹션별 세부 요약
1. WebLite DSL 개요
- YAML 기반 웹사이트 생성:
.wl파일에서 HTML/CSS로 자동 변환 (예:Home: Hero: - "Title >> big centered red": "Hello WebLite") - 핵심 기능:
- 재사용 가능한 컴포넌트(Component) 생성
- 인라인 스타일링(예: big, red, centered)
- 다중 페이지 지원(Home, About, Contact 등 하나의 파일에서 정의)
- 프론트엔드 의존성 제거 (순수 HTML/CSS로 렌더링)
2. Try-It Editor 기능
- 실시간 편집 및 미리보기:
- Monaco 기반 코드 편집기 (구문 강조 지원)
- iframe을 통한 브라우저 미리보기
- 다크/라이트 테마 전환
- 사용 편의성:
- 계정 없이 YAML 입력 후 즉시 실행
- GitHub 저장소 연동: https://github.com/scgssk/WebLite-DSL
3. 기술 스택 및 구현
- 프론트엔드: MERN 스택 (React, MongoDB, Express, Node.js)
- 백엔드: Python Flask (builder.py 엔진)
- 라이브러리: PyYAML, Flask, uuid, shutil, Monaco Editor
- 배포: Render 서비스를 통한 하나의 클릭 배포 지원
4. 개발 계획 및 특징
- 현재 구현 기능:
- ✅ 다크 모드
- ✅ 컴포넌트 지원
- ✅ 반응형 UI
- ✅ Render를 통한 클라우드 호스팅
- 향후 개발 목록:
- 🎨 커스텀 테마 및 애니메이션
- 📦 ZIP 파일 내보내기
- 🔗 .wl 사이트 공유 URL 생성
- 📦 빌드 최소화 (weblite site.wl --minify)
결론
- WebLite DSL + Try-It Editor는 YAML 기반 웹 개발의 생산성 향상에 초점을 맞춘 도구로, 교육, 문서 사이트, 개인 프로젝트 개발에 적합
- 즉시 실행 가능한 실시간 편집기를 통해 디자인-코드 연동 효율성 극대화
- GitHub 저장소(https://github.com/scgssk/WebLite-DSL)에서 소스 코드 및 피드백 제시 가능