AI 홈페이지 빌더 ㅣ MyPR
로그인
사용방법 보기
닫기
홈페이지 수정
공개된 홈페이지 정보를 읽기 전용으로 보고 있습니다.
사용방법 보기
챗GPT 바로가기
1. 홈페이지 제목:
2. 홈페이지 주소(URL):
https://mypr.kr/home/make/member_view.php?domain_id=
3. 본문(html 코드):
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> <title>AI 홈페이지 자동 빌더 | 10분 만에 홈페이지 만들기</title> <style> :root { --primary: #2563eb; --primary-dark: #1d4ed8; --accent: #7c3aed; --dark: #111827; --text: #374151; --gray: #6b7280; --light: #f8fafc; --line: #e5e7eb; --white: #ffffff; --green: #10b981; --orange: #f97316; --shadow: 0 20px 60px rgba(15, 23, 42, 0.12); --radius: 26px; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: -apple-system, BlinkMacSystemFont, "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", Arial, sans-serif; color: var(--dark); background: var(--white); line-height: 1.65; word-break: keep-all; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } .container { width: min(1120px, calc(100% - 36px)); margin: 0 auto; } .header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(229, 231, 235, 0.75); } .nav { height: 70px; display: flex; align-items: center; justify-content: space-between; } .logo { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 900; letter-spacing: -0.04em; } .logo-mark { width: 38px; height: 38px; border-radius: 14px; display: grid; place-items: center; color: white; background: linear-gradient(135deg, var(--primary), var(--accent)); box-shadow: 0 12px 26px rgba(37, 99, 235, 0.3); } .menu { display: flex; align-items: center; gap: 26px; font-size: 15px; font-weight: 800; color: #374151; } .menu a:hover { color: var(--primary); } .nav-btn { padding: 11px 17px; border-radius: 999px; color: white; background: var(--dark); font-size: 14px; font-weight: 900; } .hamburger { display: none; width: 42px; height: 42px; border: 1px solid var(--line); background: white; border-radius: 14px; font-size: 22px; cursor: pointer; } .mobile-menu { display: none; padding: 10px 0 18px; border-top: 1px solid var(--line); } .mobile-menu a { display: block; padding: 12px 0; font-weight: 800; color: #374151; } .hero { position: relative; padding: 138px 0 86px; overflow: hidden; background: radial-gradient(circle at 10% 10%, rgba(37, 99, 235, 0.18), transparent 28%), radial-gradient(circle at 90% 20%, rgba(124, 58, 237, 0.15), transparent 30%), linear-gradient(180deg, #f8fbff 0%, #ffffff 100%); } .hero-grid { display: grid; grid-template-columns: 1.04fr 0.96fr; gap: 54px; align-items: center; } .eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px; border-radius: 999px; background: rgba(37, 99, 235, 0.08); color: var(--primary); font-size: 14px; font-weight: 900; margin-bottom: 22px; } .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 7px rgba(16, 185, 129, 0.14); } .hero h1 { font-size: clamp(38px, 5.5vw, 68px); line-height: 1.08; letter-spacing: -0.07em; margin-bottom: 24px; } .hero h1 span { color: var(--primary); } .hero-desc { max-width: 610px; color: #4b5563; font-size: 20px; margin-bottom: 32px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; } .btn { min-height: 54px; padding: 0 24px; border-radius: 17px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; cursor: pointer; font-family: inherit; font-size: 16px; font-weight: 900; transition: 0.25s ease; } .btn-primary { color: white; background: var(--primary); box-shadow: 0 15px 32px rgba(37, 99, 235, 0.28); } .btn-primary:hover { background: var(--primary-dark); transform: translateY(-3px); } .btn-white { background: white; color: var(--dark); border: 1px solid var(--line); } .btn-white:hover { transform: translateY(-3px); box-shadow: var(--shadow); } .trust { display: flex; flex-wrap: wrap; gap: 14px; color: #475569; font-size: 15px; font-weight: 800; } .trust span { display: inline-flex; align-items: center; gap: 6px; } .phone-wrap { position: relative; display: flex; justify-content: center; } .phone { width: min(360px, 100%); border: 10px solid #0f172a; border-radius: 46px; overflow: hidden; background: white; box-shadow: 0 30px 80px rgba(15, 23, 42, 0.28); transform: rotate(2deg); } .phone-top { height: 28px; background: #0f172a; position: relative; } .phone-top::after { content: ""; position: absolute; left: 50%; top: 8px; transform: translateX(-50%); width: 76px; height: 7px; border-radius: 999px; background: #1f2937; } .phone-hero { padding: 26px 22px; color: white; background: linear-gradient(rgba(15, 23, 42, 0.1), rgba(15, 23, 42, 0.55)), url("https://images.unsplash.com/photo-1497366811353-6870744d04b2?auto=format&fit=crop&w=900&q=85") center/cover; } .mini-badge { display: inline-block; padding: 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.2); font-size: 12px; font-weight: 900; margin-bottom: 88px; } .phone-hero h3 { font-size: 28px; line-height: 1.18; letter-spacing: -0.05em; margin-bottom: 8px; } .phone-hero p { font-size: 14px; opacity: 0.92; } .phone-body { padding: 18px; } .phone-card { padding: 17px; border-radius: 22px; background: #f8fafc; margin-bottom: 12px; border: 1px solid #eef2f7; } .phone-card strong { display: block; font-size: 15px; margin-bottom: 4px; letter-spacing: -0.03em; } .phone-card p { font-size: 13px; color: var(--gray); } .floating { position: absolute; right: 0; bottom: 60px; width: 190px; padding: 18px; border-radius: 24px; background: white; box-shadow: var(--shadow); border: 1px solid var(--line); transform: rotate(-4deg); } .floating strong { display: block; font-size: 30px; color: var(--primary); letter-spacing: -0.05em; } .floating p { color: var(--gray); font-size: 13px; font-weight: 800; } section { padding: 88px 0; } .section-head { max-width: 760px; margin: 0 auto 46px; text-align: center; } .section-label { color: var(--primary); font-weight: 900; letter-spacing: -0.02em; margin-bottom: 10px; } .section-head h2 { font-size: clamp(30px, 4vw, 48px); line-height: 1.18; letter-spacing: -0.06em; margin-bottom: 16px; } .section-head p { color: var(--gray); font-size: 18px; } .pain { background: white; } .pain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .pain-card { padding: 30px; border-radius: var(--radius); border: 1px solid var(--line); background: white; box-shadow: 0 12px 36px rgba(15, 23, 42, 0.05); transition: 0.25s ease; } .pain-card:hover { transform: translateY(-7px); box-shadow: var(--shadow); } .icon { width: 54px; height: 54px; border-radius: 18px; display: grid; place-items: center; font-size: 26px; margin-bottom: 18px; background: #eff6ff; color: var(--primary); } .pain-card h3 { font-size: 21px; letter-spacing: -0.04em; margin-bottom: 9px; } .pain-card p { color: var(--gray); font-size: 16px; } .solution { background: #f8fafc; } .solution-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 42px; align-items: center; } .image-card { border-radius: 34px; overflow: hidden; box-shadow: var(--shadow); position: relative; } .image-card img { width: 100%; height: 470px; object-fit: cover; } .image-label { position: absolute; left: 22px; bottom: 22px; right: 22px; padding: 18px; border-radius: 22px; color: white; background: rgba(15, 23, 42, 0.72); backdrop-filter: blur(12px); } .image-label strong { display: block; font-size: 22px; letter-spacing: -0.04em; } .solution-list { display: grid; gap: 16px; } .solution-item { display: flex; gap: 16px; padding: 22px; background: white; border: 1px solid var(--line); border-radius: 24px; } .check { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: white; background: var(--green); font-weight: 900; } .solution-item h3 { font-size: 19px; letter-spacing: -0.04em; margin-bottom: 5px; } .solution-item p { color: var(--gray); font-size: 15px; } .steps { background: white; } .step-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; } .step-card { position: relative; min-height: 190px; padding: 24px; border-radius: 24px; background: #f8fafc; border: 1px solid var(--line); overflow: hidden; } .step-num { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: white; background: var(--dark); font-weight: 900; margin-bottom: 18px; } .step-card h3 { font-size: 18px; letter-spacing: -0.04em; margin-bottom: 8px; } .step-card p { color: var(--gray); font-size: 14px; } .compare { background: radial-gradient(circle at 10% 0%, rgba(37, 99, 235, 0.10), transparent 34%), #f8fafc; } .compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; } .compare-card { padding: 32px; border-radius: 30px; background: white; border: 1px solid var(--line); } .compare-card.highlight { border: 2px solid var(--primary); box-shadow: var(--shadow); } .compare-card h3 { font-size: 25px; letter-spacing: -0.05em; margin-bottom: 18px; } .compare-list { list-style: none; display: grid; gap: 13px; } .compare-list li { display: flex; gap: 9px; color: #4b5563; font-size: 16px; } .compare-list.bad li::before { content: "−"; color: #ef4444; font-weight: 900; } .compare-list.good li::before { content: "✓"; color: var(--green); font-weight: 900; } .portfolio { background: white; } .portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .portfolio-card { overflow: hidden; border-radius: 28px; border: 1px solid var(--line); background: white; box-shadow: 0 14px 36px rgba(15, 23, 42, 0.06); } .portfolio-img { height: 220px; background-size: cover; background-position: center; } .portfolio-body { padding: 24px; } .tag { display: inline-block; padding: 6px 10px; border-radius: 999px; background: #eff6ff; color: var(--primary); font-size: 13px; font-weight: 900; margin-bottom: 12px; } .portfolio-body h3 { font-size: 21px; line-height: 1.35; letter-spacing: -0.04em; margin-bottom: 8px; } .portfolio-body p { color: var(--gray); font-size: 15px; } .cta-section { padding: 90px 0; background: linear-gradient(rgba(15, 23, 42, 0.78), rgba(15, 23, 42, 0.82)), url("https://images.unsplash.com/photo-1556761175-4b46a572b786?auto=format&fit=crop&w=1600&q=85") center/cover; color: white; } .cta-box { max-width: 820px; margin: 0 auto; text-align: center; } .cta-box h2 { font-size: clamp(32px, 5vw, 54px); line-height: 1.18; letter-spacing: -0.06em; margin-bottom: 18px; } .cta-box p { color: #e5e7eb; font-size: 19px; margin-bottom: 30px; } .faq { background: #f8fafc; } .faq-list { max-width: 860px; margin: 0 auto; display: grid; gap: 14px; } .faq-item { background: white; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; } .faq-question { width: 100%; min-height: 64px; padding: 0 22px; border: 0; background: white; color: var(--dark); font-family: inherit; font-size: 17px; font-weight: 900; text-align: left; display: flex; align-items: center; justify-content: space-between; cursor: pointer; } .faq-answer { display: none; padding: 0 22px 22px; color: var(--gray); font-size: 15px; } .faq-item.open .faq-answer { display: block; } .contact { background: #111827; color: white; } .contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 44px; align-items: center; } .contact h2 { font-size: clamp(32px, 5vw, 52px); line-height: 1.18; letter-spacing: -0.06em; margin-bottom: 18px; } .contact p { color: #cbd5e1; font-size: 18px; margin-bottom: 24px; } .contact-points { display: grid; gap: 12px; color: #e5e7eb; font-weight: 800; } .form { padding: 30px; border-radius: 30px; background: white; color: var(--dark); box-shadow: var(--shadow); } .field { display: grid; gap: 8px; margin-bottom: 15px; } .field label { font-size: 14px; font-weight: 900; color: #374151; } input, select, textarea { width: 100%; border: 1px solid var(--line); border-radius: 16px; padding: 15px 16px; font-family: inherit; font-size: 16px; outline: none; transition: 0.2s ease; } input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12); } textarea { min-height: 116px; resize: vertical; } .notice { color: var(--gray); font-size: 13px; margin-top: 12px; } .footer { padding: 36px 0; color: #94a3b8; background: #0b1120; font-size: 14px; } .footer-inner { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; } .reveal { opacity: 0; transform: translateY(28px); transition: 0.7s ease; } .reveal.active { opacity: 1; transform: translateY(0); } .fixed-cta { display: none; } @media (max-width: 980px) { .menu, .nav-btn { display: none; } .hamburger { display: block; } .mobile-menu.open { display: block; } .hero-grid, .solution-grid, .contact-grid { grid-template-columns: 1fr; } .phone { transform: none; } .floating { right: 18px; } .pain-grid, .portfolio-grid { grid-template-columns: 1fr; } .step-grid { grid-template-columns: repeat(2, 1fr); } .compare-grid { grid-template-columns: 1fr; } } @media (max-width: 560px) { body { padding-bottom: 76px; } .container { width: min(100% - 28px, 1120px); } .hero { padding: 118px 0 64px; } .hero-desc { font-size: 17px; } .hero-actions .btn { width: 100%; } .trust { display: grid; gap: 9px; } section { padding: 70px 0; } .image-card img { height: 340px; } .step-grid { grid-template-columns: 1fr; } .floating { position: static; width: 100%; margin-top: 16px; transform: none; } .form { padding: 22px; border-radius: 24px; } .fixed-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2000; display: flex; gap: 8px; padding: 12px; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(16px); border-top: 1px solid var(--line); } .fixed-cta a { flex: 1; min-height: 50px; border-radius: 15px; display: grid; place-items: center; color: white; font-weight: 900; } .fixed-cta .make { background: var(--primary); } .fixed-cta .contact-btn { background: var(--dark); } } </style> <style id="class-responsive-base"> *, *::before, *::after { box-sizing: border-box; } html { width: 100%; min-width: 0; -webkit-text-size-adjust: 100%; } body { display: block !important; visibility: visible !important; opacity: 1 !important; width: 100%; min-width: 0; margin: 0; overflow-x: hidden; overflow-wrap: break-word; } body > * { visibility: visible !important; opacity: 1 !important; } img, video, iframe, embed, object { max-width: 100%; height: auto; } table { max-width: 100%; border-collapse: collapse; } main, section, article, header, footer, nav, div { max-width: 100%; } pre, code { white-space: pre-wrap; word-break: break-word; } .reveal, .reveal.visible, .reveal.active { opacity: 1 !important; visibility: visible !important; transform: none !important; filter: none !important; } .fade-in, .fade-in.visible, [data-aos], .aos-init, .aos-animate { opacity: 1 !important; visibility: visible !important; transform: none !important; filter: none !important; } </style> <noscript><style>.reveal{opacity:1!important;transform:none!important;filter:none!important;}</style></noscript> </head> <body> <header class="header"> <div class="container"> <nav class="nav"> <a href="#" class="logo"> <span class="logo-mark">AI</span> 홈페이지 자동 빌더 </a> <div class="menu"> <a href="#need">필요성</a> <a href="#solution">서비스 소개</a> <a href="#steps">이용방법</a> <a href="#compare">차이점</a> <a href="#contact">상담신청</a> </div> <a href="#contact" class="nav-btn">무료 상담</a> <button class="hamburger" id="hamburger" aria-label="메뉴 열기">☰</button> </nav> <div class="mobile-menu" id="mobileMenu"> <a href="#need">필요성</a> <a href="#solution">서비스 소개</a> <a href="#steps">이용방법</a> <a href="#compare">차이점</a> <a href="#contact">상담신청</a> </div> </div> </header> <main> <section class="hero"> <div class="container hero-grid"> <div class="hero-copy reveal"> <div class="eyebrow"> <span class="pulse"></span> AI로 10분 만에 홈페이지 만들기 </div> <h1> 홈페이지 제작,<br /> 이제 어렵게 맡기지 말고<br /> <span>AI로 빠르게 시작하세요</span> </h1> <p class="hero-desc"> 챗GPT로 HTML 코드를 만들고, 홈페이지 자동 빌더에 붙여넣기만 하면 내 사업을 소개하는 모바일 최적화 홈페이지를 빠르게 만들 수 있습니다. </p> <div class="hero-actions"> <a href="#contact" class="btn btn-primary">홈페이지 제작 상담하기 →</a> <a href="#steps" class="btn btn-white">이용방법 보기</a> </div> <div class="trust"> <span>✓ 모바일 최적화</span> <span>✓ HTML 코드 붙여넣기</span> <span>✓ 미리보기 확인</span> <span>✓ 수정도 쉽게 가능</span> </div> </div> <div class="phone-wrap reveal"> <div class="phone"> <div class="phone-top"></div> <div class="phone-hero"> <span class="mini-badge">MY BUSINESS WEBSITE</span> <h3>내 사업을 알리는<br />모바일 홈페이지</h3> <p>고객이 보고 바로 문의할 수 있는 온라인 홍보 페이지</p> </div> <div class="phone-body"> <div class="phone-card"> <strong>AI 코드 생성</strong> <p>챗GPT에 원하는 홈페이지 내용을 요청합니다.</p> </div> <div class="phone-card"> <strong>코드 복사 & 붙여넣기</strong> <p>완성된 HTML 코드를 빌더에 입력합니다.</p> </div> <div class="phone-card"> <strong>미리보기 & 공개</strong> <p>결과를 확인하고 고객에게 공유합니다.</p> </div> </div> </div> <div class="floating"> <strong>10분</strong> <p>복잡한 제작 과정 없이 빠르게 시작하는 홈페이지</p> </div> </div> </div> </section> <section class="pain" id="need"> <div class="container"> <div class="section-head reveal"> <div class="section-label">WHY NEED</div> <h2>고객은 연락하기 전에<br />먼저 검색하고 비교합니다</h2> <p> 홈페이지가 없으면 고객은 신뢰할 정보를 찾기 어렵습니다. 반대로 잘 정리된 홈페이지는 첫인상, 신뢰, 문의 전환을 동시에 만들어줍니다. </p> </div> <div class="pain-grid"> <div class="pain-card reveal"> <div class="icon">🔎</div> <h3>검색했을 때 보여야 합니다</h3> <p> 고객이 업체명, 서비스명, 지역명을 검색했을 때 보여줄 공식 소개 페이지가 필요합니다. </p> </div> <div class="pain-card reveal"> <div class="icon">🤝</div> <h3>신뢰가 먼저 생겨야 합니다</h3> <p> 서비스 소개, 장점, 위치, 연락처가 정리되어 있으면 고객은 더 안심하고 문의합니다. </p> </div> <div class="pain-card reveal"> <div class="icon">📲</div> <h3>모바일에서 바로 문의해야 합니다</h3> <p> 요즘 고객은 스마트폰으로 확인합니다. 전화, 문자, 상담 버튼이 바로 보여야 합니다. </p> </div> </div> </div> </section> <section class="solution" id="solution"> <div class="container solution-grid"> <div class="image-card reveal"> <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?auto=format&fit=crop&w=1200&q=85" alt="홈페이지 제작 회의 이미지" /> <div class="image-label"> <strong>AI + 자동 빌더</strong> <p>전문 개발 지식이 없어도 홈페이지 제작 흐름을 쉽게 시작할 수 있습니다.</p> </div> </div> <div class="solution-content reveal"> <div class="section-label">SERVICE POINT</div> <h2 style="font-size:clamp(30px,4vw,46px); line-height:1.18; letter-spacing:-0.06em; margin-bottom:22px;"> 기존 홈페이지 제작의 복잡함을 줄이고<br /> 필요한 화면부터 빠르게 만듭니다 </h2> <div class="solution-list"> <div class="solution-item"> <div class="check">✓</div> <div> <h3>챗GPT로 홈페이지 HTML 코드 생성</h3> <p>업종, 목적, 문구, 섹션 구성을 요청하면 전체 HTML 코드를 만들 수 있습니다.</p> </div> </div> <div class="solution-item"> <div class="check">✓</div> <div> <h3>홈페이지 자동 빌더에 붙여넣기</h3> <p>제목, 주소, 본문 HTML 코드를 입력하고 저장하면 결과를 확인할 수 있습니다.</p> </div> </div> <div class="solution-item"> <div class="check">✓</div> <div> <h3>수정도 다시 요청해서 빠르게 반영</h3> <p>완성된 화면을 보며 수정사항을 메모하고, 다시 전체 코드로 받아 교체할 수 있습니다.</p> </div> </div> <div class="solution-item"> <div class="check">✓</div> <div> <h3>공개 / 비공개 관리 가능</h3> <p>관리 화면에서 방문자에게 보여줄 홈페이지 항목을 관리할 수 있습니다.</p> </div> </div> </div> </div> </div> </section> <section class="steps" id="steps"> <div class="container"> <div class="section-head reveal"> <div class="section-label">HOW TO USE</div> <h2>홈페이지 제작 과정은<br />이렇게 간단합니다</h2> <p> 원본 사용방법의 핵심 흐름을 고객이 이해하기 쉽게 5단계로 정리했습니다. </p> </div> <div class="step-grid"> <div class="step-card reveal"> <div class="step-num">1</div> <h3>빌더 접속</h3> <p>홈페이지 자동 빌더에 접속하고 로그인합니다.</p> </div> <div class="step-card reveal"> <div class="step-num">2</div> <h3>AI에 요청</h3> <p>챗GPT에 원하는 홈페이지의 전체 HTML 코드를 요청합니다.</p> </div> <div class="step-card reveal"> <div class="step-num">3</div> <h3>코드 복사</h3> <p>완성된 HTML 코드를 복사합니다.</p> </div> <div class="step-card reveal"> <div class="step-num">4</div> <h3>붙여넣기</h3> <p>제목, URL, 본문 HTML 코드를 입력합니다.</p> </div> <div class="step-card reveal"> <div class="step-num">5</div> <h3>미리보기</h3> <p>저장 후 결과를 확인하고 필요한 부분을 수정합니다.</p> </div> </div> </div> </section> <section class="compare" id="compare"> <div class="container"> <div class="section-head reveal"> <div class="section-label">COMPARE</div> <h2>기존 제작 방식보다<br />빠르게 시작할 수 있습니다</h2> <p> 일반적인 홈페이지 제작은 상담, 기획, 견적, 디자인, 개발, 검수, 배포까지 여러 단계를 거칩니다. 자동 빌더는 필요한 내용을 먼저 만들고 빠르게 확인하는 방식입니다. </p> </div> <div class="compare-grid"> <div class="compare-card reveal"> <h3>기존 홈페이지 제작</h3> <ul class="compare-list bad"> <li>상담, 견적, 계약까지 시간이 오래 걸릴 수 있음</li> <li>자료 전달과 수정 커뮤니케이션이 반복됨</li> <li>디자인 시안과 개발 과정이 분리되어 복잡함</li> <li>작은 수정도 별도 요청이 필요할 수 있음</li> <li>처음 시작하는 고객에게 비용 부담이 생길 수 있음</li> </ul> </div> <div class="compare-card highlight reveal"> <h3>AI 홈페이지 자동 빌더</h3> <ul class="compare-list good"> <li>AI로 전체 HTML 코드를 빠르게 생성</li> <li>복사 후 붙여넣기 방식으로 간단하게 제작</li> <li>미리보기로 결과를 바로 확인</li> <li>수정사항을 다시 AI에 요청해 빠르게 교체</li> <li>신규 고객도 부담 없이 홈페이지 제작 시작 가능</li> </ul> </div> </div> </div> </section> <section class="portfolio"> <div class="container"> <div class="section-head reveal"> <div class="section-label">USE CASE</div> <h2>이런 분들에게 특히 좋습니다</h2> <p> 홈페이지가 꼭 필요하지만 어디서부터 시작해야 할지 몰랐던 개인, 소상공인, 자영업자에게 적합합니다. </p> </div> <div class="portfolio-grid"> <div class="portfolio-card reveal"> <div class="portfolio-img" style="background-image:url('https://images.unsplash.com/photo-1521737711867-e3b97375f902?auto=format&fit=crop&w=1000&q=85');"> </div> <div class="portfolio-body"> <span class="tag">소상공인</span> <h3>우리 가게를 소개하고 싶은 사장님</h3> <p>매장 소개, 메뉴, 위치, 전화 문의 버튼을 한 화면에 정리할 수 있습니다.</p> </div> </div> <div class="portfolio-card reveal"> <div class="portfolio-img" style="background-image:url('https://images.unsplash.com/photo-1522202176988-66273c2fd55f?auto=format&fit=crop&w=1000&q=85');"> </div> <div class="portfolio-body"> <span class="tag">학원 / 교육</span> <h3>수강 상담을 받고 싶은 교육기관</h3> <p>커리큘럼, 강사진, 수업 장점, 상담 신청 동선을 보기 좋게 구성합니다.</p> </div> </div> <div class="portfolio-card reveal"> <div class="portfolio-img" style="background-image:url('https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=1000&q=85');"> </div> <div class="portfolio-body"> <span class="tag">기업 / 전문가</span> <h3>전문성과 신뢰를 보여주고 싶은 사업자</h3> <p>회사 소개, 서비스, 포트폴리오, 문의 정보를 체계적으로 보여줄 수 있습니다.</p> </div> </div> </div> </div> </section> <section class="cta-section"> <div class="container"> <div class="cta-box reveal"> <h2>홈페이지가 필요하다면<br />오늘 바로 시작하세요</h2> <p> 더 이상 복잡한 제작 과정 때문에 미루지 마세요. AI와 자동 빌더를 활용하면 내 사업을 소개하는 홈페이지를 빠르게 만들 수 있습니다. </p> <a href="#contact" class="btn btn-primary">무료 상담 신청하기 →</a> </div> </div> </section> <section class="faq"> <div class="container"> <div class="section-head reveal"> <div class="section-label">FAQ</div> <h2>자주 묻는 질문</h2> <p>처음 이용하는 분들이 궁금해할 내용을 간단히 정리했습니다.</p> </div> <div class="faq-list reveal"> <div class="faq-item open"> <button class="faq-question"> 코딩을 몰라도 만들 수 있나요? <span>+</span> </button> <div class="faq-answer"> 네. 챗GPT에 홈페이지 내용을 요청하고, 완성된 HTML 코드를 복사해서 자동 빌더에 붙여넣는 방식으로 시작할 수 있습니다. </div> </div> <div class="faq-item"> <button class="faq-question"> 만든 뒤 수정도 가능한가요? <span>+</span> </button> <div class="faq-answer"> 가능합니다. 완성된 홈페이지를 보면서 수정할 내용을 메모한 뒤, 챗GPT에 다시 요청해 새 HTML 코드로 교체하면 됩니다. </div> </div> <div class="faq-item"> <button class="faq-question"> 어떤 업종에 사용할 수 있나요? <span>+</span> </button> <div class="faq-answer"> 학원, 병원, 매장, 회사, 부동산, 프리랜서, 전문가 소개 페이지 등 다양한 업종의 홍보용 홈페이지로 활용할 수 있습니다. </div> </div> <div class="faq-item"> <button class="faq-question"> 상담 문의가 들어오도록 만들 수 있나요? <span>+</span> </button> <div class="faq-answer"> 네. 전화, 문자, 카카오톡, 신청폼 등 고객이 쉽게 문의할 수 있는 버튼과 섹션을 홈페이지 안에 배치할 수 있습니다. </div> </div> </div> </div> </section> <section class="contact" id="contact"> <div class="container contact-grid"> <div class="contact-copy reveal"> <h2>내 사업에 맞는 홈페이지,<br />어떻게 만들지 상담해보세요</h2> <p> 업종과 목적을 알려주시면 고객이 보고 바로 이해할 수 있는 홈페이지 구성 방향을 안내해드립니다. </p> <div class="contact-points"> <div>✓ 신규 홈페이지 제작 상담</div> <div>✓ 기존 홈페이지 리뉴얼 상담</div> <div>✓ 모바일 랜딩페이지 제작 상담</div> <div>✓ AI 홈페이지 제작 활용 안내</div> </div> </div> <form class="form reveal" id="contactForm"> <div class="field"> <label for="name">이름 / 업체명</label> <input id="name" type="text" placeholder="예: 홍길동 / 스마트학원" required /> </div> <div class="field"> <label for="phone">연락처</label> <input id="phone" type="tel" placeholder="예: 010-1234-5678" required /> </div> <div class="field"> <label for="business">업종</label> <select id="business"> <option value="">업종을 선택해주세요</option> <option>학원 / 교육</option> <option>병원 / 전문직</option> <option>음식점 / 카페 / 매장</option> <option>회사 / 기업</option> <option>부동산 / 생활서비스</option> <option>기타</option> </select> </div> <div class="field"> <label for="message">문의 내용</label> <textarea id="message" placeholder="원하시는 홈페이지 내용, 참고 사이트, 필요한 기능 등을 적어주세요."></textarea> </div> <button type="submit" class="btn btn-primary" style="width:100%;"> 상담 신청 내용 확인하기 </button> <p class="notice"> ※ 현재 폼은 예시 동작입니다. 실제 접수는 이메일, 문자, 카카오톡, 서버 프로그램과 연결해서 사용할 수 있습니다. </p> </form> </div> </section> </main> <footer class="footer"> <div class="container footer-inner"> <div>© 2026 AI 홈페이지 자동 빌더. All rights reserved.</div> <div>AI 홈페이지 제작 · 모바일 랜딩페이지 · HTML 자동 제작</div> </div> </footer> <div class="fixed-cta"> <a href="#steps" class="make">이용방법</a> <a href="#contact" class="contact-btn">상담신청</a> </div> <script> const hamburger = document.getElementById("hamburger"); const mobileMenu = document.getElementById("mobileMenu"); hamburger.addEventListener("click", () => { mobileMenu.classList.toggle("open"); }); document.querySelectorAll(".mobile-menu a").forEach((link) => { link.addEventListener("click", () => { mobileMenu.classList.remove("open"); }); }); const revealElements = document.querySelectorAll(".reveal"); const observer = new IntersectionObserver( (entries) => { entries.forEach((entry, index) => { if (entry.isIntersecting) { setTimeout(() => { entry.target.classList.add("active"); }, index * 60); } }); }, { threshold: 0.15 } ); revealElements.forEach((el) => observer.observe(el)); const faqItems = document.querySelectorAll(".faq-item"); faqItems.forEach((item) => { const button = item.querySelector(".faq-question"); button.addEventListener("click", () => { faqItems.forEach((other) => { if (other !== item) { other.classList.remove("open"); } }); item.classList.toggle("open"); }); }); const contactForm = document.getElementById("contactForm"); contactForm.addEventListener("submit", (e) => { e.preventDefault(); const name = document.getElementById("name").value.trim(); const phone = document.getElementById("phone").value.trim(); const business = document.getElementById("business").value; const message = document.getElementById("message").value.trim(); if (!name || !phone) { alert("이름과 연락처를 입력해주세요."); return; } const result = "[AI 홈페이지 제작 상담 신청]\\n\\n" + "이름/업체명: " + name + "\\n" + "연락처: " + phone + "\\n" + "업종: " + (business || "미선택") + "\\n" + "문의내용: " + (message || "없음"); alert(result + "\\n\\n이 내용을 실제 상담 접수 프로그램과 연결하면 됩니다."); }); </script> <script id="class-render-fallback"> (function(){ function showHiddenReveal(){ var nodes=document.querySelectorAll(".reveal,[data-aos],.fade-in,.aos-init,.aos-animate"); for(var i=0;i<nodes.length;i++){nodes[i].classList.add("active");nodes[i].classList.add("visible");nodes[i].classList.add("aos-animate");} } showHiddenReveal(); document.addEventListener("DOMContentLoaded",showHiddenReveal); window.addEventListener("load",showHiddenReveal); })(); </script> </body> </html>