컨버타 홈페이지 템플릿

🌐 프로젝트 개요 **컨버타(Converta)**는 SaaS 제품, 스타트업, 디지털 에이전시를 위해 설계된 프리미엄 반응형 랜딩 페이지 템플릿입니다. 복잡한 빌드 도구, 프레임워크, jQuery 없이 단일 HTML 파일로 바로 배포 및 수정이 가능하도록 최적화되었으며, 모던한 UI/UX와 풍부한 인터랙션을 제공합니다. 🚀 주요 특징 7개 풀 스크린 섹션: 히어로, 데모 소개, 핵심 기능, 요금제, 고객 후기, FAQ, CTA & 푸터로 구성된 일관된 레이아웃 다크/라이트 테마 토글: CSS 변수 기반의 원클릭 테마 전환, 부드러운 트랜지션 적용 풍부한 인터랙션: 월/연간 요금제 토글, FAQ 아코디언, 데모 상세 모달, 스크롤 애니메이션(AOS), 스와이퍼 캐러셀 모바일 최적화: 320px~4K 해상도까지 완벽 대응하는 반응형 레이아웃 및 모바일 햄버거 메뉴 데이터 기반 콘텐츠 관리: JS 배열에 텍스트/이미지 정보가 분리되어 있어 코드 수정 없이 콘텐츠 교체 가능 🛠️ 기술 스택 마크업/스타일: HTML5, CSS3 (CSS Variables, Flexbox/Grid) 프레임워크: Bootstrap 5.3 (CDN) 스크립트: Vanilla JavaScript (ES6+) 플러그인: AOS.js (스크롤 애니메이션), Swiper.js (슬라이더), Bootstrap Icons 빌드 환경: 불필요 (npm, webpack, jQuery 없이 브라우저에서 바로 실행) 📁 소스 코드 구조 및 커스터마이징 가이드 수정 방법 CSS Variables (:root, [data-theme="dark"]) 테마 색상, 배경, 그림자, 간격, border-radius 등 전역 디자인 토큰 변수값만 변경하면 전체 테마가 일괄 업데이트됨 JS Data Arrays (demoData, featureData, pricingData 등) 데모, 기능, 가격, 후기, FAQ 콘텐츠 데이터 배열 배열 내 객체의 title, desc, features만 교체하면 즉시 반영 Render Functions (renderDemos(), renderPricing() 등) 데이터를 HTML로 매핑하는 템플릿 함수 구조 변경 시 해당 함수 내 템플릿 리터럴 수정 Event Handlers 테마 토글, 메뉴 토글, FAQ 아코디언, 모달 열기/닫기, 스크롤 감지 로직 확장 시 기존 함수 하단에 추가 가능 💡 배포 및 실행 방법 제공된 코드를 index.html 파일로 저장합니다. 로컬에서 Live Server로 실행하거나, 정적 호스팅(Netlify, Vercel, GitHub Pages 등)에 업로드합니다. demoData 배열과 CSS :root 변수를 프로젝트 브랜드 컬러/텍스트로 교체하여 바로 상용화 가능합니다. ✅ 문의 및 기여: 코드의 일부 수정, 기능 추가, 또는 버그 리포트는 언제든지 환영합니다.