꽝손, 똥손의 생애 처음 랜딩페이지 도전!!

소개

시도하고자 했던 것과 그 이유를 알려주세요.

지난 주에 학습했던 내용으로 랜딩페이지 만들기 도전.

랜딩페이지가 필요한 사업분야에 대한 소개글로 구성

진행 방법

어떤 도구를 사용했고, 어떻게 활용하셨나요?

먼저, GPT를 이용해서 진행하고 있는 사업분야에 대한 소개 후 거기에 맞는 랜딩페이지 기획요청

GPT가 랜딩페이지를 위한 전체 기획
브랜드 메세지, 회사소개, 콘텐츠소개, 수강생후기, 콜투액션까지..

GPT가 더 추가할 내용에 대해서 물어보고 난 모두 요청.

코드도 작성...

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>NBI 비즈니스역량개발원</title>
  <style>
    :root {
      --primary-color: #2452A2;
      --accent-color: #ffcc00;
      --text-color: #333;
      --bg-color: #f5f8fa;
      --font-main: 'Noto Sans KR', sans-serif;
    }
    body {
      margin: 0;
      font-family: var(--font-main);
      line-height: 1.6;
      background-color: var(--bg-color);
      color: var(--text-color);
    }
    header {
      background: linear-gradient(to right, var(--primary-color), #1e3c72);
      color: white;
      padding: 60px 20px;
      text-align: center;
    }
    header h1 {
      font-size: 2.5rem;
      margin-bottom: 10px;
    }
    header p {
      font-size: 1.2rem;
      margin-bottom: 20px;
    }
    .cta-button {
      background-color: var(--accent-color);
      color: #222;
      padding: 14px 28px;
      font-size: 1rem;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      text-decoration: none;
      display: inline-block;
    }
    .section {
      padding: 60px 20px;
      max-width: 1000px;
      margin: auto;
      background-color: white;
      margin-bottom: 20px;
      border-radius: 10px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }
    .section h2 {
      color: var(--primary-color);
      font-size: 1.8rem;
      margin-bottom: 20px;
    }
    .section p, .section li {
      font-size: 1rem;
      margin-bottom: 10px;
    }
    .section img {
      width: 100%;
      height: auto;
      border-radius: 10px;
      margin: 20px 0;
    }
    footer {
      background-color: #2c2c2c;
      color: white;
      text-align: center;
      padding: 30px 20px;
    }
    footer p {
      margin: 5px 0;
      font-size: 0.9rem;
    }
    @media (max-width: 768px) {
      header h1 {
        font-size: 2rem;
      }
      header p, .cta-button, .section h2 {
        font-size: 1rem;
      }
      .section {
        padding: 30px 15px;
      }
    }
  </style>
</head>
<body>
  <header>
    <h1>NBI 비즈니스역량개발원</h1>
    <p>지금은 디지털의 시대,<br>배우면 누구나 할 수 있습니다.<br><strong>AI부터 전자책, 유튜브까지 – NBI가 당신의 새로운 시작을 함께합니다.</strong></p>
    <a href="#apply" class="cta-button">지금 무료 강의 받아보기</a>
  </header>

  <section class="section">
    <h2>우리는 누구인가?</h2>
    <img src="https://images.unsplash.com/photo-1581092918360-7e0cdfbb6791" alt="강의 중인 중년 여성들">
    <p>우리는 알고 있습니다.<br>‘나도 할 수 있을까?’ 하는 마음.<br><br><strong>NBI는 기술이 낯선 분들도 쉽게, 재미있게 시작할 수 있도록 도와드립니다.</strong><br>실전 중심의 AI 교육으로, 퇴직 후 두 번째 인생도 든든하게 시작하세요.</p>
  </section>

  <section class="section">
    <h2>무엇을 배울 수 있나요?</h2>
    <img src="https://images.unsplash.com/photo-1612837017391-fbb7ff7c3bde" alt="AI 마케팅 강의 화면">
    <p>NBI에서는 단순한 이론이 아닌 <strong>‘당장 써먹을 수 있는 실전 기술’</strong>만 배웁니다.</p>
    <ul>
      <li>✨ <strong>ChatGPT로 글쓰기와 블로그 운영까지</strong></li>
      <li>✨ <strong>스마트폰 하나로 시작하는 유튜브 크리에이터</strong></li>
      <li>✨ <strong>전자책 출간, 이제는 나도 저자!</strong></li>
      <li>✨ <strong>온라인 마케팅과 SNS 수익화 전략</strong></li>
      <li>✨ <strong>AI와 함께하는 1인 창업 실전 과정</strong></li>
    </ul>
  </section>

  <section class="section">
    <h2>수강생 후기</h2>
    <img src="https://images.unsplash.com/photo-1600880292089-90a7e086ee7e" alt="수강생 후기 인터뷰 이미지">
    <p>“AI는 젊은 사람들만 쓰는 줄 알았어요.<br>지금은 제 전자책이 출간됐고, 유튜브도 운영 중입니다.”<br>– 박OO 님, 55세</p>
    <p>“퇴직 후 막막했는데, 이제는 제가 배우고,<br>가르치는 사람이 됐습니다. 꿈을 다시 꿨어요.”<br>– 김OO 님, 62세</p>
  </section>

  <section class="section" id="apply">
    <h2>지금 시작하세요</h2>
    <img src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d" alt="수강신청을 안내하는 이미지">
    <p><strong>당신의 변화는, 딱 하나의 클릭에서 시작됩니다.</strong><br><br>무료 상담을 통해 당신만을 위한 AI 맞춤 커리큘럼을 만나보세요.</p>
    <a href="#" class="cta-button">1:1 무료 상담 받기</a>
  </section>

  <footer>
    <p>© 2025 NBI 비즈니스역량개발원</p>
    <p>대구광역시 동구 신암동 90-9 1층 | 대표: 카이</p>
    <p>문의:https://open.kakao.com/o/srnhp82g </p>
  </footer>
</body>
</html>