🥚
삶은AIAI 실전 가이드 120편
목록으로
🤖 창작과 취미 - 챗봇

ChatGPT로 예약 챗봇 만들기 - AI 자동 스케줄링 시스템

병원·미용실 예약 자동화! AI가 날짜와 시간을 파악해 자동으로 일정을 잡아주는 예약 챗봇을 만들어보세요.

만든 챗봇, 이제 세상에 공개하기

열심히 만든 챗봇이 있어요. 친구들도 좋다고 했고, 테스트도 완료했어요.

이제 뭐하죠? 블로그나 웹사이트에 달아야죠!

"근데... 어떻게?"

걱정 마세요. 오늘은 코딩 몰라도 챗봇을 웹사이트에 추가하는 방법을 알려드릴게요.

챗봇 임베드 방법 종류

1. 위젯 형태 (가장 쉬움)

오른쪽 아래 떠있는 채팅 버튼

2. 인라인 형태

페이지 안에 박스로 들어감

3. 전체 페이지

챗봇만 있는 별도 페이지

4. 링크 공유

그냥 URL만 공유

방법 1: 링크 공유 (가장 간단)

코딩 필요 없어요. 링크만 있으면 끝!

ChatGPT Custom GPT 링크

단계:

  1. Custom GPT 페이지 열기
  2. 우측 상단 공유 버튼
  3. "Anyone with the link" 선택
  4. 링크 복사

블로그 글에 추가:

## 쇼핑 도우미 챗봇

궁금한 점을 물어보세요!

👉 [챗봇과 대화하기](https://chat.openai.com/g/g-xxxxx)

장점:

  • 가장 쉬움
  • 관리 편함

단점:

  • 사용자가 OpenAI 계정 필요
  • 내 사이트를 벗어남

Poe.com 봇 링크

단계:

  1. Poe에서 봇 페이지 열기
  2. 공유 아이콘 클릭
  3. 링크 복사

블로그에 버튼으로 추가:

<a href="https://poe.com/YourBotName"
   style="background: #FF6B6B;
          color: white;
          padding: 12px 24px;
          border-radius: 8px;
          text-decoration: none;
          display: inline-block;">
   💬 챗봇과 대화하기
</a>

장점:

  • 무료
  • 간단함

단점:

  • Poe 계정 필요
  • 브랜딩 제한적

방법 2: iframe 임베드

웹페이지 안에 직접 넣기

기본 iframe 코드

<iframe
  src="챗봇URL"
  width="100%"
  height="600px"
  style="border: 1px solid #ddd; border-radius: 8px;">
</iframe>

예쁘게 꾸미기

<div style="max-width: 800px; margin: 40px auto;">
  <h2 style="text-align: center; margin-bottom: 20px;">
    💬 AI 어시스턴트
  </h2>
  <iframe
    src="https://poe.com/YourBot"
    width="100%"
    height="600px"
    style="border: 2px solid #4A90E2;
           border-radius: 12px;
           box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
  </iframe>
  <p style="text-align: center; color: #666; margin-top: 10px;">
    무엇이든 물어보세요!
  </p>
</div>

반응형으로 만들기

모바일에서도 잘 보이게:

<style>
.chatbot-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.chatbot-iframe {
  width: 100%;
  height: 600px;
  border: 2px solid #4A90E2;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

@media (max-width: 768px) {
  .chatbot-iframe {
    height: 500px;
  }
}
</style>

<div class="chatbot-container">
  <iframe
    class="chatbot-iframe"
    src="https://your-chatbot-url">
  </iframe>
</div>

방법 3: 위젯 형태 (오른쪽 하단 버튼)

가장 프로페셔널한 방법

간단한 위젯 만들기

<!-- 플로팅 버튼 -->
<button id="chatbot-button" onclick="toggleChatbot()">
  💬
</button>

<!-- 챗봇 창 -->
<div id="chatbot-widget" style="display: none;">
  <div id="chatbot-header">
    <span>AI 어시스턴트</span>
    <button onclick="toggleChatbot()">✕</button>
  </div>
  <iframe src="https://your-chatbot-url"></iframe>
</div>

<style>
#chatbot-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #4A90E2;
  color: white;
  border: none;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  z-index: 1000;
  transition: transform 0.2s;
}

#chatbot-button:hover {
  transform: scale(1.1);
}

#chatbot-widget {
  position: fixed;
  bottom: 90px;
  right: 20px;
  width: 380px;
  height: 600px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
  z-index: 999;
  display: flex;
  flex-direction: column;
}

#chatbot-header {
  background: #4A90E2;
  color: white;
  padding: 15px;
  border-radius: 12px 12px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#chatbot-header button {
  background: none;
  border: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
}

#chatbot-widget iframe {
  flex: 1;
  border: none;
  border-radius: 0 0 12px 12px;
}

@media (max-width: 768px) {
  #chatbot-widget {
    width: calc(100% - 40px);
    height: calc(100% - 140px);
  }
}
</style>

<script>
function toggleChatbot() {
  const widget = document.getElementById('chatbot-widget');
  if (widget.style.display === 'none') {
    widget.style.display = 'flex';
  } else {
    widget.style.display = 'none';
  }
}
</script>

결과

오른쪽 하단에 💬 버튼이 뜨고, 클릭하면 챗봇 창이 열려요!

방법 4: WordPress 블로그에 추가

WordPress 사용자라면:

플러그인 사용

추천 플러그인:

  1. WP Chatbot - 무료, 간단
  2. Tidio - 이쁨, 유료
  3. Custom HTML Widget - iframe 용

설치 방법:

  1. WordPress 관리자 페이지
  2. 플러그인 > 새로 추가
  3. "chatbot" 검색
  4. 설치 & 활성화

커스텀 HTML 사용

  1. 외모 > 위젯
  2. "커스텀 HTML" 위젯 추가
  3. 원하는 위치에 배치
  4. 위의 HTML 코드 붙여넣기

전체 페이지로 만들기

  1. 페이지 > 새로 추가
  2. 제목: "AI 챗봇"
  3. 블록 추가 > 커스텀 HTML
  4. iframe 코드 입력
  5. 게시
<div style="width: 100%; height: 800px;">
  <iframe
    src="https://your-chatbot-url"
    width="100%"
    height="100%"
    style="border: none;">
  </iframe>
</div>

방법 5: Notion 페이지에 추가

Notion 블로그 쓰시나요?

단계:

  1. Notion 페이지 열기
  2. /embed 입력
  3. 챗봇 URL 붙여넣기
  4. 크기 조정

예시:

/embed https://poe.com/YourBot

팁:

  • 전체 너비로 설정
  • 높이는 600px 정도

방법 6: Tistory 블로그

HTML 편집

  1. 글쓰기
  2. 우측 상단 "HTML" 전환
  3. 코드 입력
<div style="text-align: center; margin: 40px 0;">
  <h3>💬 AI 챗봇과 대화하기</h3>
  <iframe
    src="https://your-chatbot-url"
    width="100%"
    height="600px"
    style="max-width: 800px;
           border: 2px solid #ddd;
           border-radius: 8px;">
  </iframe>
</div>

사이드바에 고정

  1. 관리 > 꾸미기 > 스킨 편집
  2. HTML 편집
  3. 사이드바 부분에 코드 추가
<div class="sidebar-chatbot">
  <h4>💬 질문하기</h4>
  <a href="https://your-chatbot-url" target="_blank">
    챗봇 열기
  </a>
</div>

방법 7: 커스텀 도메인

진짜 프로처럼 하려면:

서브도메인 만들기

chat.yourdomain.com → 챗봇 페이지

간단한 HTML 페이지

index.html:

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AI 챗봇</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
      height: 100vh;
      display: flex;
      flex-direction: column;
    }

    header {
      text-align: center;
      color: white;
      padding: 20px 0;
    }

    header h1 {
      font-size: 2.5em;
      margin-bottom: 10px;
    }

    header p {
      font-size: 1.2em;
      opacity: 0.9;
    }

    .chatbot-frame {
      flex: 1;
      background: white;
      border-radius: 16px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.2);
      overflow: hidden;
      margin-top: 20px;
    }

    iframe {
      width: 100%;
      height: 100%;
      border: none;
    }

    @media (max-width: 768px) {
      header h1 {
        font-size: 1.8em;
      }

      header p {
        font-size: 1em;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <header>
      <h1>💬 AI 어시스턴트</h1>
      <p>무엇이든 물어보세요. 24시간 답변해드립니다.</p>
    </header>

    <div class="chatbot-frame">
      <iframe src="https://your-chatbot-url"></iframe>
    </div>
  </div>
</body>
</html>

GitHub Pages로 무료 호스팅

  1. GitHub 저장소 만들기
  2. index.html 업로드
  3. Settings > Pages
  4. 배포 완료!

URL: https://username.github.io/repo-name

실전 예시들

예시 1: 간단한 버튼

<div style="text-align: center; margin: 40px 0;">
  <a href="https://chat.openai.com/g/g-xxxxx"
     target="_blank"
     style="display: inline-block;
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            padding: 16px 32px;
            border-radius: 8px;
            text-decoration: none;
            font-size: 18px;
            font-weight: bold;
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
            transition: transform 0.2s;">
    💬 AI 챗봇과 대화하기
  </a>
</div>

예시 2: 카드 형태

<div style="max-width: 600px;
            margin: 40px auto;
            padding: 30px;
            background: white;
            border-radius: 16px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);">
  <div style="text-align: center;">
    <div style="font-size: 48px; margin-bottom: 16px;">
      💬
    </div>
    <h3 style="margin-bottom: 12px;">AI 쇼핑 도우미</h3>
    <p style="color: #666; margin-bottom: 24px;">
      상품 추천부터 주문까지 도와드립니다
    </p>
    <a href="https://your-chatbot-url"
       target="_blank"
       style="display: inline-block;
              background: #4A90E2;
              color: white;
              padding: 12px 24px;
              border-radius: 6px;
              text-decoration: none;">
      대화 시작하기 →
    </a>
  </div>
</div>

예시 3: 미니멀 디자인

<style>
.chat-card {
  border-left: 4px solid #4A90E2;
  padding: 20px;
  background: #f8f9fa;
  margin: 30px 0;
}

.chat-card h4 {
  color: #333;
  margin-bottom: 8px;
}

.chat-card p {
  color: #666;
  margin-bottom: 16px;
}

.chat-link {
  color: #4A90E2;
  text-decoration: none;
  font-weight: 500;
}

.chat-link:hover {
  text-decoration: underline;
}
</style>

<div class="chat-card">
  <h4>💬 질문이 있으신가요?</h4>
  <p>AI 챗봇에게 물어보세요. 즉시 답변해드립니다.</p>
  <a href="https://your-chatbot-url" class="chat-link">
    챗봇 열기 →
  </a>
</div>

주의사항

1. 로딩 속도

iframe은 페이지를 느리게 만들 수 있어요.

해결책:

<!-- lazy loading 사용 -->
<iframe
  src="https://your-chatbot-url"
  loading="lazy">
</iframe>

2. 모바일 최적화

작은 화면에서도 잘 보이게:

@media (max-width: 768px) {
  .chatbot-widget {
    width: 100% !important;
    height: 100% !important;
    bottom: 0 !important;
    right: 0 !important;
  }
}

3. 개인정보 보호

챗봇이 개인정보를 수집한다면 안내 필요:

<p style="font-size: 12px; color: #999;">
  * 이 챗봇은 대화 내용을 개선을 위해 수집할 수 있습니다.
  자세한 내용은 <a href="/privacy">개인정보처리방침</a>을 확인해주세요.
</p>

4. 접근성

키보드 사용자도 접근 가능하게:

<button
  id="chatbot-button"
  aria-label="챗봇 열기"
  onclick="toggleChatbot()">
  💬
</button>

분석 추가하기

얼마나 많이 사용하는지 알고 싶다면?

<script>
// 챗봇 클릭 추적
document.getElementById('chatbot-button').addEventListener('click', function() {
  // Google Analytics
  if (typeof gtag !== 'undefined') {
    gtag('event', 'chatbot_open', {
      'event_category': 'engagement',
      'event_label': 'chatbot'
    });
  }

  // 또는 간단하게
  console.log('Chatbot opened');
});
</script>

트러블슈팅

iframe이 안 보여요

원인: 일부 사이트는 iframe 임베드를 막아요.

해결책:

  • 링크로 대신 공유
  • 또는 자체 호스팅

모바일에서 이상해요

원인: 반응형 CSS 부족

해결책:

@media (max-width: 768px) {
  /* 모바일용 스타일 추가 */
}

느려요

원인: iframe은 무거워요

해결책:

  • lazy loading 사용
  • 필요할 때만 로드 (버튼 클릭 시)
function loadChatbot() {
  const iframe = document.createElement('iframe');
  iframe.src = 'https://your-chatbot-url';
  document.getElementById('chatbot-container').appendChild(iframe);
}

다음 단계

다음 글에서는 학습 자료 주입해 "맞춤형 챗봇" 만들기를 다룰 거예요.

내 블로그 글, PDF, 데이터를 학습시켜서 진짜 전문가 챗봇을 만드는 방법이에요!

마무리하며

챗봇을 블로그에 추가하는 건 생각보다 어렵지 않아요.

가장 쉬운 방법:

  1. 링크 공유

조금 더 멋지게: 2. iframe 임베드

프로처럼: 3. 위젯 형태

여러분의 상황에 맞는 방법을 선택하세요. 간단한 것부터 시작해서 점점 업그레이드하면 됩니다!

오늘 바로 여러분의 챗봇을 블로그에 달아보세요!

함께 읽으면 좋은 글:

  • [이전 편] 친구와 테스트해보기
  • [다음 편] 학습 자료 주입해 "맞춤형 챗봇" 만들기

어떤 방법으로 임베드하셨나요? 댓글로 공유해주세요!

다음 글

AI 챗봇 성능 테스트하기 - GPT 봇 품질 향상 방법

내 챗봇 제대로 동작할까? 다양한 시나리오로 테스트하고 응답 품질을 개선하는 실전 노하우를 배워봅니다.

📑같은 시리즈

ChatGPT로 나만의 챗봇 만들기 - AI 대화형 봇 개발 시작

코딩 몰라도 괜찮아요! ChatGPT로 고객 상담부터 개인 비서까지, 나만의 챗봇을 만드는 첫걸음을 시작하세요.

GPT로 고객 상담 챗봇 구축하기 - AI 자동 응답 시스템 만들기

24시간 쉬지 않는 상담원! AI가 고객 문의에 자동으로 답하는 챗봇 시스템을 구축하는 법을 알려드립니다.

ChatGPT API로 맞춤형 챗봇 개발하기 - AI 통합 가이드

API로 한 단계 업그레이드! ChatGPT API를 활용해 웹사이트나 앱에 통합하는 맞춤형 챗봇을 만들어보세요.