midas-landing-harness

단일 페이지 Figma 디자인을, HubSpot Design Manager에 붙여넣어 게시하는 HTML/CSS/JS 페이지로 바꾸기 위한 작고 규칙 있는(opinionated) 하네스 + CLI입니다. CSS·JS는 HTML에 인라인하고, 이미지는 assets/ 파일 경로로 참조합니다(base64 인라인 안 함).

페이지 코드는 일회성 — 로컬에서 만들어 export한 뒤 HubSpot에 붙여넣으면, 그때부터 원본은 HubSpot입니다. 그래서 공유·버전 관리되는 것은 이 하네스뿐이고, npm으로 배포합니다.

순수 HTML + CSS + 바닐라 JS. 프레임워크 없음, 빌드 단계 없음. 에이전트 주도 방식: AI 코딩 에이전트(Claude Code)가 AGENTS.md + figma-hubspot-landing 스킬을 읽고 파이프라인을 실행.

사용법 (CLI)

임시 작업 폴더를 만들고 스캐폴드 → 제작 → export → HubSpot 붙여넣기 → 폴더 폐기.

mkdir my-page && cd my-page
npx midas-landing-harness init --page 0903_recruit
# src/0903_recruit/ 생성
node scripts/serve.mjs --page 0903_recruit
node scripts/export-hubspot.mjs --page 0903_recruit   # dist/0903_recruit/

CLI 명령: init · serve · shot · export · optimize · --version (landing-harness help 참고). init 이후에는 폴더가 자체완결형이라 npm run …으로도 동작합니다.

요구사항: Node ≥ 18, (shot용) Chrome/Chromium. optimize는 macOS sips 사용. npm 런타임 의존성 없음.

배포 & 설치 (GitHub 없이)

이 하네스는 npm 패키지로 공유합니다. 공개 레지스트리·GitHub 없이 타르볼로 배포 가능:

# (하네스 저장소에서) 배포용 타르볼 생성
npm pack                               # → midas-landing-harness-x.y.z.tgz

# (팀원) 사내 드라이브/슬랙으로 받은 tgz를 설치 또는 바로 실행
npm i -g ./midas-landing-harness-0.2.0.tgz   # 전역 설치 → landing-harness <cmd>
npx ./midas-landing-harness-0.2.0.tgz init   # 설치 없이 실행

팀이 커지면 사내 레지스트리(예: Verdaccio)에 npm publish 하는 방식으로 승격할 수 있습니다.

동작 방식

Figma 디자인  ──►  src/<slug>/     (0903_recruit, 1002_recruit, 1010_performance, …)
   index.html · styles.css · main.js · assets/
        │  node scripts/export-hubspot.mjs --page <slug>
        ▼
   dist/<slug>/<slug>.html + assets/
        │  붙여넣기 + 이미지 File Manager 업로드
        ▼
   HubSpot Design Manager  →  Publish

에이전트 워크플로우·규칙·구조는 AGENTS.md, 단계별 절차·참고 문서는 .claude/skills/figma-hubspot-landing/ 에 있습니다.

• SKILL.md — 파이프라인
• references/page-anatomy.md — 운영 HTML/CSS 골격 (클래스·섹션 순서)
• references/conventions.md — HTML/CSS 규칙 & 토큰(이미지 프레이밍·패딩 우선순위·모션 등)
• references/hubspot.md — HubSpot export + 폼 embed + 붙여넣기
• references/verification.md — 페이지 충실도 검증

HubSpot export 모드

이미지는 base64로 인라인하지 않습니다. png/jpg 파일을 assets/에 두고 경로로 참조합니다.

node scripts/export-hubspot.mjs --page 0903_recruit
node scripts/export-hubspot.mjs --page 0903_recruit --hosted https://<acct>.fs1.hubspotusercontent.com/hubfs/landing/seminar

이미지 추출 규칙: 투명 요소가 있으면 PNG, 없으면 JPG, @2x(2배 크기). 벡터 아이콘/로고는 SVG.

저장소 구조 (하네스 유지보수자용)

bin/cli.mjs            ← CLI (init / serve / shot / export / optimize)
AGENTS.md              ← 에이전트 워크플로우 + 규칙  ┐
.claude/skills/…       ← 스킬 + 참고 문서            │ npm 패키지에 포함(files)
scripts/…              ← serve · shot · export · optimize │
templates/…            ← base.html · tokens.css      ┘
examples/              ← 하네스로 만든 예시 (배포 제외)
  seminar/             ·  2026 하반기 채용 전략 세미나
  insight-day/         ·  2026 공공기관 채용 AX 세미나

예시를 로컬에서 돌려보려면: npm run example:serve (→ http://localhost:8790), npm run example:export.

버전 관리 / git

git은 배포 수단이 아니라 하네스 소스 유지보수용 옵션입니다(로컬 또는 사내 저장소로 충분, GitHub 불필요). 페이지 코드는 일회성이므로 페이지별 저장소는 두지 않습니다.