AI(Claude, ChatGPT 등)를 활용하여 WebForm 폼을 자연어로 설계하고, JSON으로 변환한 뒤 서버에 자동 임포트하는 도구입니다.
자연어 요구사항 → AI가 JSON 생성 → form-gen.sh로 서버 임포트 → Designer/Runtime에서 확인
- Node.js — JSON 검증 및 JWT 토큰 생성에 사용
- WebForm 서버 —
localhost:4000에서 API 서버가 실행 중이어야 합니다 .env파일 — 프로젝트 루트에 최소한JWT_SECRET설정이 필요합니다
프로젝트 루트에 .env 파일을 생성합니다:
JWT_SECRET=your-secret-key-here
WebForm 서버의
.env에 설정된JWT_SECRET과 동일한 값을 사용해야 합니다.
-
AI에게 폼 JSON 생성 요청
AI에게
FORM-GUIDE.md의 내용과 함께 원하는 폼을 설명합니다:FORM-GUIDE.md를 참조하여 고객 관리 화면을 만들어줘. DataGridView로 고객 목록을 보여주고, 검색과 추가/수정/삭제 기능이 있어야 해. 샘플 데이터를 포함해줘. -
JSON 파일 저장
AI가 생성한 JSON을
forms/디렉토리에 저장합니다:# 예: forms/customer-management.json -
서버에 임포트
./form-gen.sh forms/customer-management.json
-
결과 확인
- Designer: http://localhost:3000 — 폼 편집
- Runtime: http://localhost:3001 — 폼 실행
Claude CLI가 설치되어 있다면 한 번의 명령으로 폼 생성부터 임포트까지 완료할 수 있습니다:
claude -p "FORM-GUIDE.md를 참조하여 로그인 폼 JSON을 만들어줘" | ./form-gen.sh -
프롬프트 파일을 활용하는 경우:
claude -p "$(cat prompt.md)" | ./form-gen.sh -
echo '{ "project": { "name": "테스트" }, "forms": [...] }' | ./form-gen.sh -
AI에게 폼 생성을 요청할 때 효과적인 프롬프트 예시:
FORM-GUIDE.md를 참조하여 회원가입 폼을 만들어줘.
이름, 이메일, 비밀번호, 전화번호 필드가 필요하고,
유효성 검사 이벤트 핸들러도 포함해줘.
FORM-GUIDE.md를 참조하여 재고 관리 화면을 만들어줘.
- 상단: 검색 필터 (상품명, 카테고리 ComboBox)
- 중앙: DataGridView로 재고 목록 (상품코드, 상품명, 수량, 단가, 입고일)
- 하단: StatusStrip에 총 건수 표시
- 샘플 데이터 10건 포함
FORM-GUIDE.md를 참조하여 매출 대시보드를 만들어줘.
- GraphView로 월별 매출 Bar 차트
- DataGridView로 상세 데이터
- 샘플 데이터 포함
FORM-GUIDE.md를 참조하여 직원 관리 시스템을 만들어줘.
forms 배열에 다음 2개 폼을 포함:
1. "직원 목록" - DataGridView, 검색, 추가/삭제 버튼
2. "직원 상세" - 이름, 부서, 직급 등 상세 정보 입력 폼
MenuStrip으로 폼 간 네비게이션 가능하게 해줘.
./form-gen.sh <json-file> # JSON 파일로 임포트 ./form-gen.sh - # stdin으로 JSON 입력 ./form-gen.sh --help # 도움말
- JSON 유효성 검사 —
project.name존재 여부,forms배열 확인 .env에서JWT_SECRET을 읽어 JWT 토큰 자동 생성- 동일 이름 프로젝트가 존재하면 → 기존 프로젝트에 폼 추가
- 존재하지 않으면 → 새 프로젝트 생성 (
POST /api/projects/import) - 결과 요약 출력 (프로젝트 ID, 폼/컨트롤/이벤트 수)
| 변수 | 기본값 | 설명 |
|---|---|---|
WEBFORM_API_URL |
http://localhost:4000 |
API 서버 URL |
로그 메시지는 stderr로, 결과 JSON은 stdout으로 출력되어 파이프라인 연동이 가능합니다:
# 결과 JSON만 파일로 저장 ./form-gen.sh forms/my-form.json > result.json # jq로 프로젝트 ID 추출 ./form-gen.sh forms/my-form.json 2>/dev/null | jq -r '.data._id'
- 폼 중복: 같은 프로젝트명으로 반복 실행하면 폼이 중복 추가됩니다. 기존 폼을 교체하려면 Designer에서 삭제 후 재실행하거나 API로 프로젝트를 삭제(
DELETE /api/projects/:id) 후 재실행하세요. - JSON 형식:
FORM-GUIDE.md의 체크리스트를 참고하여 필수 필드 누락이 없는지 확인하세요. - 서버 실행: 임포트 전 반드시 WebForm 서버(
pnpm dev또는./run.sh)가 실행 중이어야 합니다.
.
├── .env # 서버 접속 설정 (JWT_SECRET 등)
├── form-gen.sh # 폼 임포트 스크립트
├── FORM-GUIDE.md # 폼 JSON 스키마 전체 레퍼런스
├── prompt.md # AI 프롬프트 템플릿
└── forms/ # 폼 JSON 파일들
├── user-registration.json
├── print-factory.json
└── chart-demo.json
FORM-GUIDE.md— 폼 JSON 스키마, 컨트롤 타입(30종), 이벤트 시스템, ctx API 전체 레퍼런스