Runiq Web Builder (runiq_web)

구역(Section)을 쌓아 홈페이지를 만들고 HTML 파일 한 장으로 내보내는 제작 도구입니다. 텐에이아이가 중소기업·공공기관 고객에게 제공하는 서비스로 쓰기 위해, 프론티어 M&A 사이트 안에 있던 빌더를 떼어내 독립 앱으로 세운 것입니다.

• 서비스 입구: / — 무엇을 할 수 있는지 보여 주는 화면
• 도구: /builder — 실제 편집 화면 (검색에는 노출되지 않습니다)

---

1. 무엇이 다른가 (원본 빌더와 비교)

	원본 (프론티어 사이트 안)	이 앱
자리	M&A 사이트의 한 화면	독립 앱 — 따로 배포·운영
브랜드	프론티어 M&A	텐에이아이 (lib/builder/brand.ts 한곳)
시작 템플릿	1개 (M&A 회사)	6개 — 텐에이아이 소개 · AI 교육 과정 · AX 컨설팅 · 중소기업 회사 소개 · 공공기관 사업 안내 · 빈 문서
레이아웃(뼈대)	없음	6종 — 기본형 · 박스형 · 사이드 메뉴형 · 센터형 · 분할형 · 포털형. 내용은 그대로 두고 바꾼다
구역	11종	15종 — 게시판(말머리·검색·쪽·카드형) · FAQ · 문의 폼 · 오시는 길 · 동영상 추가
링크	없음	메뉴·단추·푸터가 구역 닻(#s-id)·바깥 주소·메일·전화로 이어진다. 상단 메뉴 고정, 모바일 ☰ 메뉴
그림 재료	없음	아이콘 50여 종 · 히어로 삽화 8종 · 배경 무늬 · 샘플 사진 (전부 파일 안에 실림)
퍼블리싱	HTML 내려받기만	배포 꾸러미(ZIP: index.html·site.json·manifest.json·PUBLISH.md) · AI 에이전트 지시문 · 웹훅 전송
되읽기	JSON 만	내보낸 HTML 안에 작업 문서를 심어 HTML 로도 다시 연다
테마 견본	엠버·감청·세피아·포레스트·모노	텐에이아이 · 중앙부처 · 지자체 · 교육 · 모노
도구 화면 색	따뜻한 갈색 계열	텐에이아이 감청 계열
입구	없음 (주소를 알아야 감)	서비스 소개 화면
결과물 표시	없음	<meta name="generator"> 에 도구 이름
외부 의존	사이트의 lib/company 를 참조	없음 — 혼자 선다

2. 만드는 원리

• 문서 하나가 전부입니다. SiteDoc 은 제목 + 테마 + 레이아웃 + 구역 배열입니다. 이 값만 있으면 화면도, 내보낸 파일도 똑같이 그려집니다.
• 레이아웃은 구역 바깥의 틀입니다. 구역 마크업은 같고, 감싸는 틀(.bf-page[data-layout])과 그 틀에 딸린 CSS 만 다릅니다. 그래서 여섯 레이아웃이 같은 구역 데이터를 나눠 씁니다.
• 미리보기와 결과물이 같은 함수를 씁니다. 미리보기에서 본 것과 내려받은 파일이 한 글자도 다르지 않습니다 (lib/builder/render.ts).
• 서버가 없습니다. 작업물은 보는 사람의 브라우저(localStorage)에만 남고, JSON 파일로 내려받아 옮깁니다. 데이터베이스도, 로그인도, 키도 없습니다.

app/
  page.tsx            서비스 입구
  globals.css         입구 스타일
  builder/            편집 화면 (브라우저에서만 도는 도구)
lib/builder/
  brand.ts            ← 브랜드는 전부 여기서 나온다
  types.ts            문서 모델 · 구역 15종 · 레이아웃 6종 · 테마 견본
  template.ts         시작 템플릿 6종 (레이아웃·링크·아이콘까지 이어 둔다)
  render.ts           문서 → HTML (레이아웃 틀 · 구역 마크업 · 스타일)
  export.ts           혼자 서는 HTML 한 장으로 내보내기 (작업 문서를 안에 심는다)
  publish.ts          배포 꾸러미(ZIP) · manifest · AI 에이전트 안내문 · 웹훅 꾸러미
  art.ts              아이콘 · 삽화 · 무늬 · 샘플 사진
  help.ts             화면 안 사용법 · 따라 하기
tests/                node --test 로 도는 검사

3. 돌려 보기

npm install
npm run dev      # http://localhost:3000

검사는 셋을 차례로 돌립니다.

npx tsc --noEmit    # 타입
npm run lint        # 문법·규칙
npm test            # 동작 (node --test)
npm run build       # 실제 빌드

4. 배포 (Vercel)

저장소 루트가 곧 Next.js 앱입니다. GitHub 저장소를 Vercel 에 연결하면 그대로 올라갑니다. vercel.json 이 프레임워크를 Next.js 로 못 박아 두므로, 처음 연결할 때 「Other」로 잘못 인식되어도 상관없습니다.

항목	값
Framework	Next.js (vercel.json 이 고정)
Root Directory	비움 (저장소 루트)
Build Command	기본값 (next build)
환경변수	없음 — 서버도 데이터베이스도 쓰지 않습니다

지금 올라가 있는 곳: https://runiq-builder.vercel.app

도메인을 붙이실 때는 Vercel → Settings → Domains 에서 더하시면 됩니다. 주소는 코드에 박혀 있지 않고 요청에서 읽으므로(app/layout.tsx), 어느 도메인에 올려도 그대로 동작합니다.

고객 사이트를 올리는 쪽 (빌더 결과물)

빌더의 「퍼블리시」가 만드는 배포 꾸러미(ZIP)는 정적 사이트입니다. 안의 PUBLISH.md 가 사람과 AI 에이전트 모두를 위한 지시문이고, manifest.json 이 구조 요약입니다. Claude Code 같은 에이전트에게 폴더째 건네고 「Vercel 에 배포해줘」라고 하면 됩니다. 「설정 → 연동 주소」에 웹훅을 적어 두면 「연동 주소로 보내기」가 같은 내용을 JSON 으로 POST 합니다(type: "tenai-site-publish", files.index.html 등) — 자체 서버·n8n·Make 와 잇는 자리입니다.

5. 브랜드 바꾸기

lib/builder/brand.ts 한 파일입니다. 이름·슬로건·연락처·주소·색 다섯 가지를 고치면 도구 화면과 기본 테마, 내보낸 파일의 표시가 함께 따라옵니다.

6. 서비스로 운영할 때

지금 구조는 설치도 가입도 없는 도구입니다. 그래서 바로 열어 쓸 수 있고, 지켜야 할 개인정보도 사고가 날 키도 없습니다. 아래는 그 대가로 지금 없는 것과, 필요해지면 어디에 붙이는지입니다.

필요해질 때	지금	붙이는 자리
고객별 작업물 보관	브라우저에만 남음	로그인 + 문서 저장소 (SiteDoc 을 그대로 담으면 됩니다)
만든 사이트를 주소로 게시	HTML 파일로 내려받아 직접 올림	내보낸 HTML 을 저장하고 주소를 발급하는 게시 기능
여러 명이 함께 편집	혼자 편집	문서 잠금 또는 실시간 동기화
고객사별 브랜드	한 벌	brand.ts 를 값으로 받도록 바꾸면 됩니다

무엇을 먼저 붙일지는 실제로 팔아 보고 정하는 편이 낫습니다. 지금 것만으로도 「고객 앞에서 30분 만에 사이트 한 벌을 만들어 파일로 건넨다」는 됩니다.

---

문의: [email protected] · https://tenai.kr