플러스프로젝트 배경
AI 비전 검사 서비스 리드 수집·HubSpot CRM 연동·B2B SaaS 랜딩 구조 등 overview.ai 수준의 비전 검사 솔루션 랜딩 페이지 업무 흐름을 먼저 파악하고, Three.js 파티클 히어로부터 HubSpot Forms API 리드 수집까지 동작하는 12개 섹션 랜딩 페이지를 사전 구현했습니다. 무료 데모 신청 흐름·기술 소개 탐색·블로그 열람·문의 폼 제출·HubSpot 리드 연동 등 실제
프로젝트 성과
4개 페이지 전체 즉시 운영 가능
홈·기술·문의·블로그 4개 페이지 모두 오류 없이 동작 확인. 배포 즉시 화면 깨짐 없이 운영 가능, 반응형 3개 뷰포트 전체 정상
Three.js 4,000 파티클 AI 스캔 시각화
4,000개 파티클 그리드가 실시간 스캔 라인과 마우스 패럴랙스로 동작. 공장 AI 비전 검사 컨셉을 직관적으로 전달하는 인터랙티브 히어로
HubSpot CRM 연동 즉시 가동 구조
HubSpot Forms API POST 연동 Route Handler 완성. portalId·formGuid 환경변수 2개 교체만으로 실 계정 리드 수집 즉시 가동 가능
CMS 3종 교체 가능한 블로그 어댑터
Markdown·HubSpot Blog·Contentful을 동일 인터페이스로 교체 가능한 Provider 구조. 마케팅 운영 중 CMS 전환 시 코드 수정 없이 교체
핵심 기능
Three.js AI 스캐닝 포인트 클라우드
4,000개 파티클 그리드가 공장 비전 카메라 스캔을 3D로 재현. cyan 라인 통과 시 파티클 활성화, 마우스 패럴랙스 인터랙션
진행 단계
레퍼런스 분석 + 랜딩 IA 설계
2026.04.
overview.ai 비전 검사 솔루션 랜딩 페이지 직접 분석. 12개 섹션 IA·다크 B2B 디자인 시스템(brand.* 팔레트) 수립
프로젝트 상세
AI 비전 검사 B2B SaaS 서비스의 마케팅 랜딩 페이지와 HubSpot CRM 리드 수집 연동을 파일럿으로 사전 구현한 프로젝트입니다. [홈 랜딩 — 12개 섹션] Hero·신뢰 기업 로고 마키·기능 카드·차별화 섹션·작동 방식·기술 하이라이트·통계·사용 사례·산업군·플랫폼·파트너십·CTA 배너 순으로 구성. Framer Motion whileInView 스크롤 트리거와 Three.js 4,000
