1부 AI와 함께 랜딩페이지 업그레이드 하기

<aside> 💡

이번 세션에서는 웹사이트 제작 과정에서 ChatGPT를 활용해 랜딩페이지를 한 단계 업그레이드하는 방법을 다룹니다.

웹사이트를 제작할 때 AI의 도움을 받는 것은 여러가지 방식이 있을 수 있겠으나, 이번 강의에서는 ‘AI를 활용해 직접 코드를 생성하고 이를 사이트에 적용하는 방법’ 중심으로 실습과 함께 안내드립니다.

</aside>

코드 위젯 활용법

코드 위젯은 고급 사용자를 위한 기능입니다. 외부 모듈 및 사용자 정의 스타일시트 및 스크립트 등을 내 사이트에 삽입하고 싶은 경우 사용할 수 있습니다. 코드 위젯에는 클라이언트 사이드에서 동작하는 모든 요소(HTML, CSS, JavaScript 등)를 삽입할수 있습니다.
코드 위젯 도움말 : https://help.campaignus.me/ko/articles/코드-위젯-활용하기-f888d54e
주요 코드 위젯 활용법

메뉴 설정 상단 숨김

카운드업 에니메이션

카운트업 애니메이션 활용 예시
- 푸른나무재단 위헬프 : https://wehelpforu.campaignus.me/home
- 위스타트 위아자 나눔상점 : https://westart.campaignus.me/
프롬프트
- html, css, js로 'count up animation' 코드를 만들어줘.
- 815 런 이벤트로 '2,380,000,000원'이 모금되었다는 내용
- 2,380,000,000원 숫자가 카운팅 되는 코드
- 전체 사이트가 아니라, 웹빌더에 '코드 위젯'으로 특정 섹션에 붙여넣을 코드를 짜줘. html 등은 호출 안해도 돼.

예시 코드

<div id="fundraising-counter">
  <p class="event-title">815 런 이벤트로</p>
  <div class="counter-wrapper">
    <span id="count" data-target="2380000000">0</span><span class="currency">원</span>
  </div>
  <p class="event-subtitle">이 모금되었습니다 🎉</p>
</div>

<style>
  #fundraising-counter {
    text-align: center;
    padding: 40px 20px;
    font-family: 'Noto Sans KR', sans-serif;
  }

  .event-title {
    font-size: 20px;
    margin-bottom: 10px;
    color: #333;
  }

  .counter-wrapper {
    font-size: 36px;
    font-weight: bold;
    color: #2c3e50;
  }

  #count {
    display: inline-block;
    min-width: 200px;
  }

  .currency {
    margin-left: 4px;
  }

  .event-subtitle {
    font-size: 18px;
    margin-top: 10px;
    color: #555;
  }
</style>

<script>
  function animateCountUp(element, target, duration) {
    let start = 0;
    let startTime = null;

    function update(timestamp) {
      if (!startTime) startTime = timestamp;
      const progress = Math.min((timestamp - startTime) / duration, 1);
      const current = Math.floor(progress * (target - start) + start);

      element.textContent = current.toLocaleString();

      if (progress < 1) {
        requestAnimationFrame(update);
      }
    }

    requestAnimationFrame(update);
  }

  document.addEventListener("DOMContentLoaded", function () {
    const counter = document.getElementById("count");
    const target = parseInt(counter.getAttribute("data-target"));
    animateCountUp(counter, target, 3000); // 3초 동안 카운트업
  });
</script>

추가 프롬프트

텍스트 가독성을 높여줘. 글꼴을 pretendard를 이용해줘. CSS로 눈에 더 잘 들어오게 꾸며줘.
결과물 예시

<div id="fundraising-counter">
  <p class="event-title">815 런 이벤트로</p>
  <div class="counter-wrapper">
    <span id="count" data-target="2380000000">0</span><span class="currency">원</span>
  </div>
  <p class="event-subtitle">이 모금되었습니다 🎉</p>
</div>

<style>
  #fundraising-counter {
    text-align: center;
    padding: 60px 20px;
    font-family: 'SF Pro Display', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  }

  .event-title {
    font-size: 22px;
    margin-bottom: 16px;
    font-weight: 600;
    color: #555;
    letter-spacing: -0.3px;
  }

  .counter-wrapper {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
    display: inline-block;
    background: linear-gradient(90deg, #0076FF, #00C6FF, #FF2D55);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientMove 4s ease infinite;
  }

  #count {
    display: inline-block;
    min-width: 240px;
  }

  .currency {
    margin-left: 6px;
  }

  .event-subtitle {
    font-size: 20px;
    margin-top: 16px;
    font-weight: 500;
    color: #666;
  }

  /* 그라데이션 움직임 */
  @keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  .counter-wrapper {
    background-size: 200% 200%;
  }
</style>

<script>
  function animateCountUp(element, target, duration) {
    let start = 0;
    let startTime = null;

    function update(timestamp) {
      if (!startTime) startTime = timestamp;
      const progress = Math.min((timestamp - startTime) / duration, 1);
      const current = Math.floor(progress * (target - start) + start);

      element.textContent = current.toLocaleString();

      if (progress < 1) {
        requestAnimationFrame(update);
      }
    }

    requestAnimationFrame(update);
  }

  document.addEventListener("DOMContentLoaded", function () {
    const counter = document.getElementById("count");
    const target = parseInt(counter.getAttribute("data-target"));
    animateCountUp(counter, target, 3000); // 3초 동안 카운트업
  });
</script>

추가 프롬프트
- 이 코드 내용을 설명해줘. 나는 코딩을 잘 모르는 비전문가야. 텍스트, 색깔, 옵션 등등을 수정할 수 있게 코드를 자세히 설명해줘.