20개의 주제를 확인해보세요! AI 스터디 슈퍼 얼리버드 시작🕊️

에이전트 / 노코드 자동화
신
신인하
·에이전트 / 노코드 자동화에 게시됨

Antigravity로 학원 웹페이지 간단히 만들어 보았습니다.

소개

Antigravity로 웹페이지 만드는 실습을 해보고 싶어 학원 페이지 만드는 데 도전해 보았습니다.


결과물

https://incodingplus-ansan.netlify.app/

https://incodingplus-ansan.netlify.app/

수정한 결과물
https://incodingplus.vercel.app/

진행 방법

step1 : gemimi로 Antigravity에 넣을 프롬프트를 만들어 달라고 했습니다.

안티그래비티에 넣을 프롬프트 만들어줘.

1. 웹페이지 만들어 베포까지(링크생성)

2. 인코딩플러스 학원 기본 소개 페이지

디미고 입시 전문 학원

9년간 212명 합격

26학년도 37명 합격

특별전형 : 실적물, 설적설명서, 자기소개서, 면접

일반전형 : 소질적성검사, 면접

해킹방어과, 웹프로그래밍과, 디지털콘텐츠과, 이비즈니스가 모두 준비 가능

IT이미지 + 세련된 미래 이미지

초6~중2 : 코딩기초, 심화, 실습프로젝트

중3 : 디미고, 선린고, 단대소고 입시 준비

고1~일반 : 코딩기초, 인공지능활용법

또 정할 게 있을까? (학원 연락처 등을 넣어서 프롬프트 재생산함)

[프롬프트 복사 시작]

서비스 명: 인코딩플러스(Incodingplus) - 디미고 입시 전문 IT 아카데미

핵심 목표: 안산 지역 디미고 합격 신화를 강조하고, 방문 상담 및 네이버 예약을 유도하는 고성능 랜딩 페이지 제작 및 배포.

1. 디자인 컨셉:

  • 테마: Dark & Sophisticated IT (미래 지향적인 블랙/네이비 다크 모드)

  • 컬러: 일렉트릭 블루(Electric Blue)를 강조색으로 사용하여 IT 전문성 부각

  • 특징: 신뢰감 있는 폰트 사용, 가독성 높은 카드형 레이아웃, 직관적인 네비게이션

2. 주요 섹션 및 내용:

  • Hero Section:

    • 메인 카피: "9년간 212명 합격, 안산 디미고 입시의 압도적 기준"

    • 서브 카피: "2026학년도 37명 합격! 당신의 자녀가 다음 주인공입니다."

    • 버튼: [지금 바로 상담 예약하기] (네이버 예약 링크 연결)

  • Achievement (강조 섹션):

    • 누적 합격 212명 / 26학년도 37명 합격 수치를 세련된 인포그래픽으로 표현.

  • Department & Prep (전형 안내):

    • 전 학과 준비: 해킹방어과, 웹프로그래밍과, 디지털콘텐츠과, 이비즈니스과

    • 특별전형 집중 케어: 실적물, 실적설명서, 자기소개서, 면접

    • 일반전형 완벽 대비: 소질적성검사, 면접 전략

  • Curriculum (로드맵):

    • [초6~중2] 코딩 기초부터 실습 프로젝트까지 기초 역량 완성

    • [중3] 디미고, 선린고, 단대소고 입시 집중 트레이닝

    • [고1~일반] 코딩 심화 및 최신 인공지능(AI) 활용 실무 교육

  • Contact & Location:

3. 기능 요구사항:

  • 모든 디바이스에서 최적화된 모바일 반응형 웹사이트

  • 상단 GNB(메뉴바)에 '합격실적', '커리큘럼', '예약하기' 메뉴 배치

  • 클릭 시 즉시 전화 걸기 기능 및 지도 연결 기능 포함

[프롬프트 복사 끝]


step2. Antigravity에 그대로 프롬프트 넣어 성공, 베포하기


1. 성공적으로 만들어 주었습니다.

2. 베포하기 시도
- 처음엔 Antigravity에서 해달라고 했는데 여러 창을 마구 띄우며 해주더라고요.

그런데 제가 뭔가를 중간에 해야하는데 그 말을 못 알아들어서(영어라?) 결국 실패했습니다.

- 결국 gemimi에게 직업 하는 방법 알려달라고 했더니. 스터디장님이 알려주신 Netlify 사용법을 알려주어 따라가며 시도했고 성공했습니다.

step3. 사이트 내용 수정하기

1. 수정방법을 gemimi에 물어서 Netlify에 들어가 수정했습니다.

  1. Antigravity에서 내용을 수정해 저장했고, 그 파일을 Netlify에 다시 넣었더니 수정까지 완성되었습니다.

   <!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>인코딩플러스 | 디미고 입시 전문 IT 아카데미</title>
    <meta name="description" content="안산 디미고 입시의 압도적 기준! 9년간 212명 합격 신화. 인코딩플러스에서 당신의 디미고 합격을 완성하세요.">
    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=Noto+Sans+KR:wght@300;500;700;900&family=Outfit:wght@400;700&display=swap"
        rel="stylesheet">
    <!-- Lucide Icons -->
    <script src="https://unpkg.com/lucide@latest"></script>
    <style>
        :root {
            --bg-dark: #07070A;
            --bg-card: rgba(20, 20, 24, 0.7);
            --accent-blue: #00A3FF;
            --accent-glow: rgba(0, 163, 255, 0.2);
            --holo-cyan: #00F0FF;
            --holo-pink: #FF00E5;
            --holo-violet: #8F00FF;
            --holo-gradient: linear-gradient(135deg, rgba(0, 240, 255, 0.4), rgba(255, 0, 229, 0.4), rgba(143, 0, 255, 0.4));
            --text-primary: #FFFFFF;
            --text-secondary: #B0B0B8;
            --gradient-blue: linear-gradient(135deg, #00A3FF 0%, #0066FF 100%);
            --font-main: 'Inter', 'Noto Sans KR', sans-serif;
            --font-heading: 'Outfit', 'Noto Sans KR', sans-serif;
            --nav-height: 80px;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
        }

        body {
            background-color: var(--bg-dark);
            color: var(--text-primary);
            font-family: var(--font-main);
            line-height: 1.6;
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        body::before {
            content: "";
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background:
                radial-gradient(circle at 80% 20%, rgba(143, 0, 255, 0.08) 0%, transparent 40%),
                radial-gradient(circle at 20% 80%, rgba(0, 240, 255, 0.08) 0%, transparent 40%);
            z-index: -2;
            pointer-events: none;
        }

        /* Utility */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 24px;
        }

        .highlight {
            background: linear-gradient(135deg, #00A3FF, #00F0FF, #FF00ED, #8F00FF);
            background-size: 300% 300%;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 900;
            animation: holo-flow 6s ease infinite;
            filter: drop-shadow(0 0 5px rgba(0, 163, 255, 0.2));
        }

        @keyframes holo-flow {
            0% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 16px 32px;
            border-radius: 12px;
            text-decoration: none;
            font-weight: 700;
            font-size: 1.1rem;
            transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
            cursor: pointer;
            border: none;
        }

        .btn-primary {
            background: var(--gradient-blue);
            color: white;
            box-shadow: 0 4px 20px var(--accent-glow);
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 30px var(--accent-glow);
            filter: brightness(1.1);
        }

        .btn-outline {
            background: transparent;
            border: 2px solid rgba(255, 255, 255, 0.1);
            color: white;
        }

        .btn-outline:hover {
            background: rgba(255, 255, 255, 0.05);
            border-color: rgba(255, 255, 255, 0.3);
        }

        section {
            padding: 120px 0;
        }

        h1,
        h2,
        h3 {
            font-family: var(--font-heading);
            letter-spacing: -0.02em;
        }

        /* Header */
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: var(--nav-height);
            z-index: 1000;
            transition: background 0.3s, border 0.3s;
            display: flex;
            align-items: center;
            border-bottom: 1px solid transparent;
        }

        header.scrolled {
            background: rgba(5, 5, 5, 0.85);
            backdrop-filter: blur(12px);
            border-color: rgba(255, 255, 255, 0.05);
        }

        .nav-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
        }

        .logo {
            font-size: 1.5rem;
            font-weight: 900;
            letter-spacing: -1px;
            color: white;
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .logo-dot {
            width: 10px;
            height: 10px;
            background: var(--accent-blue);
            border-radius: 50%;
            box-shadow: 0 0 10px var(--accent-blue);
        }

        nav ul {
            display: flex;
            list-style: none;
            gap: 32px;
        }

        nav ul li a {
            text-decoration: none;
            color: var(--text-secondary);
            font-weight: 500;
            transition: color 0.3s;
        }

        nav ul li a:hover {
            color: white;
        }

        /* Hero */
        #hero {
            height: 100vh;
            display: flex;
            align-items: center;
            position: relative;
            padding-top: var(--nav-height);
            background:
                radial-gradient(circle at 10% 20%, rgba(0, 118, 255, 0.1) 0%, transparent 40%),
                radial-gradient(circle at 90% 80%, rgba(0, 118, 255, 0.05) 0%, transparent 40%);
        }

        #hero-bg-container {
            position: absolute;
            top: 0;
            right: 0;
            width: 50%;
            height: 100%;
            z-index: -1;
            opacity: 0.6;
            mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%);
            -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%);
        }

        .hero-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .hero-content {
            z-index: 10;
            max-width: 680px;
        }

        .label {
            display: inline-block;
            padding: 8px 18px;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 100px;
            font-size: 0.85rem;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 24px;
            text-transform: uppercase;
            letter-spacing: 2px;
            position: relative;
            overflow: hidden;
        }

        .label::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
            transform: translateX(-100%);
            animation: holo-shimmer 4s infinite;
        }

        @keyframes holo-shimmer {
            100% {
                transform: translateX(100%);
            }
        }

        .hero-title {
            font-size: clamp(2.5rem, 5vw, 4.5rem);
            line-height: 1.1;
            margin-bottom: 24px;
            font-weight: 800;
        }

        .hero-subtitle {
            font-size: clamp(1.1rem, 2vw, 1.4rem);
            color: var(--text-secondary);
            margin-bottom: 40px;
            max-width: 90%;
        }

        /* Achievement */
        .achievement-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 24px;
        }

        .stat-card {
            background: var(--bg-card);
            backdrop-filter: blur(20px);
            padding: 40px;
            border-radius: 24px;
            text-align: center;
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            position: relative;
            z-index: 1;
        }

        .stat-card::before {
            content: "";
            position: absolute;
            inset: -2px;
            padding: 2px;
            border-radius: 26px;
            background: linear-gradient(90deg, #00F0FF, #FF00E5, #8F00FF, #00C2FF);
            background-size: 300% 300%;
            animation: holo-border-flow 6s linear infinite;
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            opacity: 0.6;
            transition: opacity 0.3s;
        }

        @keyframes holo-border-flow {
            0% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
        }

        .stat-card:hover {
            transform: translateY(-10px) scale(1.05);
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
        }

        .stat-card:hover::before {
            opacity: 1;
        }

        .stat-number {
            font-size: 4rem;
            font-weight: 800;
            display: block;
            margin-bottom: 8px;
            background: var(--gradient-blue);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .stat-label {
            color: var(--text-secondary);
            font-size: 1.1rem;
            font-weight: 500;
        }

        /* Section Heads */
        .section-header {
            margin-bottom: 64px;
            text-align: center;
        }

        .section-header h2 {
            font-size: 2.5rem;
            margin-bottom: 16px;
            font-weight: 800;
        }

        .section-header p {
            color: var(--text-secondary);
            font-size: 1.1rem;
            max-width: 600px;
            margin: 0 auto;
        }

        /* Departments */
        .card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 24px;
        }

        .dept-card {
            padding: 32px;
            background: var(--bg-card);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            transition: all 0.3s;
            position: relative;
            z-index: 1;
        }

        .dept-card::before {
            content: "";
            position: absolute;
            inset: -1px;
            padding: 1px;
            border-radius: 21px;
            background: linear-gradient(135deg, rgba(0, 240, 255, 0.3), transparent, rgba(255, 0, 229, 0.3));
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            transition: opacity 0.3s;
        }

        .dept-card:hover {
            background: rgba(255, 255, 255, 0.03);
            transform: translateY(-5px);
        }

        .dept-card:hover::before {
            background: linear-gradient(135deg, #00F0FF, #FF00E5, #8F00FF);
            background-size: 200% 200%;
            animation: holo-border-flow 4s ease infinite;
        }

        .dept-icon {
            width: 48px;
            height: 48px;
            background: rgba(0, 118, 255, 0.1);
            color: var(--accent-blue);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 24px;
        }

        .dept-title {
            font-size: 1.5rem;
            margin-bottom: 16px;
        }

        .dept-list {
            list-style: none;
            color: var(--text-secondary);
            font-size: 0.95rem;
        }

        .dept-list li {
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .dept-list li::before {
            content: "";
            width: 4px;
            height: 4px;
            background: var(--accent-blue);
            border-radius: 50%;
        }

        /* Curriculum */
        .roadmap {
            position: relative;
            max-width: 900px;
            margin: 0 auto;
        }

        .roadmap-item {
            display: flex;
            gap: 40px;
            margin-bottom: 40px;
            position: relative;
        }

        .roadmap-marker {
            flex-shrink: 0;
            width: 32px;
            height: 32px;
            background: var(--bg-dark);
            border: 4px solid var(--accent-blue);
            border-radius: 50%;
            z-index: 2;
            margin-top: 4px;
        }

        .roadmap-item::after {
            content: "";
            position: absolute;
            left: 14px;
            top: 36px;
            width: 4px;
            height: calc(100% + 8px);
            background: linear-gradient(to bottom, #00F0FF, #FF00E5, #8F00FF, transparent);
            z-index: 1;
            box-shadow: 0 0 10px rgba(0, 163, 255, 0.3);
        }

        .roadmap-item:last-child::after {
            display: none;
        }

        .roadmap-content {
            background: var(--bg-card);
            padding: 32px;
            border-radius: 20px;
            flex-grow: 1;
            position: relative;
            z-index: 1;
        }

        .roadmap-content::before {
            content: "";
            position: absolute;
            inset: -1px;
            padding: 1px;
            border-radius: 21px;
            background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.1), transparent);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
        }

        .roadmap-content:hover::before {
            background: linear-gradient(90deg, #00F0FF, #FF00E5, #8F00FF);
            background-size: 200% 200%;
            animation: holo-border-flow 4s ease infinite;
        }

        .roadmap-age {
            font-weight: 800;
            color: var(--accent-blue);
            margin-bottom: 8px;
            display: block;
        }

        .roadmap-title {
            font-size: 1.25rem;
            margin-bottom: 12px;
        }

        .roadmap-desc {
            color: var(--text-secondary);
        }

        /* Contact */
        #contact {
            background: linear-gradient(to bottom, var(--bg-dark), #101012);
        }

        .contact-wrapper {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 64px;
            align-items: center;
        }

        .contact-info h2 {
            font-size: 3rem;
            margin-bottom: 24px;
        }

        .contact-details {
            margin-bottom: 40px;
        }

        .contact-item {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 20px;
            font-size: 1.1rem;
        }

        .contact-item i {
            color: var(--accent-blue);
        }

        .map-preview {
            width: 100%;
            height: 400px;
            background: var(--bg-card);
            border-radius: 24px;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.1);
            position: relative;
        }

        .map-overlay {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.4);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 16px;
        }

        /* Footer */
        footer {
            padding: 40px 0;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
            text-align: center;
            color: #666;
            font-size: 0.9rem;
        }

        /* Mobile Responsive */
        @media (max-width: 968px) {
            nav {
                display: none;
            }

            section {
                padding: 80px 0;
            }

            .achievement-grid {
                grid-template-columns: 1fr;
            }

            .roadmap-item {
                flex-direction: column;
                gap: 16px;
            }

            .roadmap-item::after {
                left: 14px;
                top: 32px;
                height: calc(100% + 20px);
            }

            .contact-wrapper {
                grid-template-columns: 1fr;
                gap: 40px;
            }

            .hero-title {
                font-size: 3rem;
            }

            #hero-bg-container {
                width: 100%;
                top: 50%;
                height: 50%;
                mask-image: linear-gradient(to top, rgba(0, 0, 0, 1), transparent);
            }
        }

        /* Animation */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease-out;
        }

        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }
    </style>
</head>

<body>

    <header id="header">
        <div class="container nav-container">
            <a href="#" class="logo">
                INCODING PLUS<span class="logo-dot"></span>
            </a>
            <nav>
                <ul>
                    <li><a href="#stats">합격실적</a></li>
                    <li><a href="#departments">전형안내</a></li>
                    <li><a href="#curriculum">커리큘럼</a></li>
                    <li><a href="#contact">오시는길</a></li>
                </ul>
            </nav>
            <a href="https://map.naver.com/p/entry/place/1353598676?placePath=/ticket" target="_blank"
                class="btn btn-outline" style="padding: 10px 20px; font-size: 0.9rem;">
                상담 예약하기
            </a>
        </div>
    </header>

    <section id="hero">
        <div id="hero-bg-container">
            <img src="./incodingplus_hero_bg.png" alt="Technology Background" class="hero-img">
        </div>
        <div class="container">
            <div class="hero-content">
                <span class="label">Only for Dimigo Prep</span>
                <h1 class="hero-title">9년간 <span class="highlight">212명</span> 합격,<br>안산 디미고 입시의<br>압도적 기준</h1>
                <p class="hero-subtitle">2026학년도 신입생 37명 최종 합격! 인코딩플러스의 정밀한 전략이 당신의 자녀를 다음 주인공으로 만듭니다.</p>
                <div style="display: flex; gap: 16px; flex-wrap: wrap;">
                    <a href="https://map.naver.com/p/entry/place/1353598676?placePath=/ticket" target="_blank"
                        class="btn btn-primary">
                        지금 바로 상담 예약하기 <i data-lucide="chevron-right" style="margin-left: 8px; width: 20px;"></i>
                    </a>
                    <a href="tel:031-8042-2391" class="btn btn-outline">
                        031-8042-2391
                    </a>
                </div>
            </div>
        </div>
    </section>

    <section id="stats">
        <div class="container">
            <div class="achievement-grid">
                <div class="stat-card reveal">
                    <span class="stat-number">212<small style="font-size: 1.5rem">명</small></span>
                    <span class="stat-label">누적 합격자 수 (2018~2026)</span>
                </div>
                <div class="stat-card reveal" style="border-color: var(--accent-blue)">
                    <span class="stat-number">37<small style="font-size: 1.5rem">명</small></span>
                    <span class="stat-label">2026학년도 최종 합격</span>
                </div>
            </div>
        </div>
    </section>

    <section id="departments" style="background: rgba(255,255,255,0.01);">
        <div class="container">
            <div class="section-header reveal">
                <h2>전공 학과 및 입시 전형 완벽 대비</h2>
                <p>디미고의 모든 학과와 복잡한 입시 전형을 국내 최고의 전문성으로 케어합니다.</p>
            </div>

            <div class="card-grid">
                <!-- Dept Card 1 -->
                <div class="dept-card reveal">
                    <div class="dept-icon"><i data-lucide="shield-check"></i></div>
                    <h3 class="dept-title">전 학과 라인업</h3>
                    <ul class="dept-list">
                        <li>해킹방어과</li>
                        <li>웹프로그래밍과</li>
                        <li>디지털콘텐츠과</li>
                        <li>이비즈니스과</li>
                    </ul>
                </div>
                <!-- Dept Card 2 -->
                <div class="dept-card reveal">
                    <div class="dept-icon"><i data-lucide="award"></i></div>
                    <h3 class="dept-title">특별전형 집중 케어</h3>
                    <ul class="dept-list">
                        <li>개인별 포트폴리오(실적물)</li>
                        <li>심층 실적설명서 작성</li>
                        <li>논리적 자기소개서 완성을</li>
                        <li>심화 압박 면접 트레이닝</li>
                    </ul>
                </div>
                <!-- Dept Card 3 -->
                <div class="dept-card reveal">
                    <div class="dept-icon"><i data-lucide="file-text"></i></div>
                    <h3 class="dept-title">일반전형 완벽 대비</h3>
                    <ul class="dept-list">
                        <li>소질적성검사 정밀 컨설팅</li>
                        <li>학과별 맞춤 면접 전략</li>
                        <li>내신 및 가산점 관리 지원</li>
                        <li>실전 모의고사 시뮬레이션</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <section id="curriculum">
        <div class="container">
            <div class="section-header reveal">
                <h2>성장을 위한 맞춤형 로드맵</h2>
                <p>기초부터 심화 실무까지, 학년별로 최적화된 학습 과정을 제공합니다.</p>
            </div>

            <div class="roadmap">
                <div class="roadmap-item reveal">
                    <div class="roadmap-marker"></div>
                    <div class="roadmap-content">
                        <span class="roadmap-age">초6 ~ 중2</span>
                        <h3 class="roadmap-title">IT 기초 역량 완성</h3>
                        <p class="roadmap-desc">코딩의 기본 원리부터 개인 프로젝트 실습까지 논리적 사고력과 문제 해결 능력을 배양합니다.</p>
                    </div>
                </div>
                <div class="roadmap-item reveal">
                    <div class="roadmap-marker"></div>
                    <div class="roadmap-content">
                        <span class="roadmap-age">중3 집중반</span>
                        <h3 class="roadmap-title">특성화고 입시 전략 트레이닝</h3>
                        <p class="roadmap-desc">디미고, 선린고, 단대소고 등 명문 특성화고 합격을 위한 실적물 제작 및 면접 밀착 트레이닝이 진행됩니다.</p>
                    </div>
                </div>
                <div class="roadmap-item reveal">
                    <div class="roadmap-marker"></div>
                    <div class="roadmap-content">
                        <span class="roadmap-age">고1 ~ 일반</span>
                        <h3 class="roadmap-title">심화 및 AI 실무 교육</h3>
                        <p class="roadmap-desc">최신 인공지능(AI) 기술 활용 및 자료구조, 알고리즘 심화 과정을 통해 대학 입시 및 개발 실무 역량을 강화합니다.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="contact">
        <div class="container">
            <div class="contact-wrapper">
                <div class="contact-info reveal">
                    <h2>지금 바로<br><span class="highlight">최고의 전문가</span>와<br>상담하세요</h2>
                    <div class="contact-details">
                        <div class="contact-item">
                            <i data-lucide="map-pin"></i>
                            <span>경기도 안산시 단원구 광덕동로 41, 3층</span>
                        </div>
                        <div class="contact-item">
                            <i data-lucide="phone"></i>
                            <a href="tel:031-8042-2391" style="color: white; text-decoration: none;">031-8042-2391</a>
                        </div>
                        <div class="contact-item">
                            <i data-lucide="smartphone"></i>
                            <a href="tel:010-2838-2391" style="color: white; text-decoration: none;">010-2838-2391</a>
                        </div>
                    </div>
                    <div style="display: flex; gap: 12px;">
                        <a href="https://map.naver.com/p/entry/place/1353598676" target="_blank"
                            class="btn btn-primary">
                            네이버 예약 바로가기
                        </a>
                    </div>
                </div>
                <div class="map-preview reveal">
                    <div class="map-overlay">
                        <i data-lucide="map" style="width: 48px; height: 48px; color: var(--accent-blue);"></i>
                        <p style="font-weight: 700;">네이버 지도로 위치 확인</p>
                        <a href="https://map.naver.com/p/entry/place/1353598676" target="_blank" class="btn btn-outline"
                            style="padding: 8px 16px; font-size: 0.8rem;">지도로 이동</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <footer>
        <div class="container">
            <p>&copy; 2026 Incodingplus IT Academy. All Rights Reserved.</p>
            <p style="margin-top: 8px; font-size: 0.8rem; opacity: 0.5;">본 서비스는 안산 디미고 입시 전문 교육을 제공합니다.</p>
        </div>
    </footer>

    <script>
        // Start Lucide
        lucide.createIcons();

        // Header Scroll Effect
        const header = document.getElementById('header');
        window.addEventListener('scroll', () => {
            if (window.scrollY > 50) {
                header.classList.add('scrolled');
            } else {
                header.classList.remove('scrolled');
            }
        });

        // Intersection Observer for Reveal Animation
        const observerOptions = {
            threshold: 0.1
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('active');
                }
            });
        }, observerOptions);

        document.querySelectorAll('.reveal').forEach(el => observer.observe(el));

        // Smooth Scroll for Navigation
        document.querySelectorAll('nav a').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const targetId = this.getAttribute('href');
                const targetSection = document.querySelector(targetId);

                if (targetSection) {
                    window.scrollTo({
                        top: targetSection.offsetTop - 80,
                        behavior: 'smooth'
                    });
                }
            });
        });
    </script>
</body>

</html>

결과와 배운 점

  1. 하나씩 성공해내는 기쁨이 너무 큽니다.

  2. 앞으로 학원 홍보용 웹페이지를 만들어 여러 학원 행사를 알리고 싶네요~

  3. 수업에서 여러 사례 발표 내용을 보고 팁을 얻었는데 그걸 적용해서(디자인적인 것) 만들어 보고 싶습니다.

1

뉴스레터 무료 구독

신청하기

👉 이 게시글도 읽어보세요