코드 카드

코드 카드

코드 카드는 HTML·iframe·임베드 코드를 직접 페이지에 삽입할 수 있는 카드예요. CdBd가 기본으로 지원하지 않는 외부 위젯(인스타그램 게시물·구글 폼·외부 웹페이지·맞춤 CTA 등)을 자유롭게 추가할 때 사용해요. 마케팅·영업 페이지에서 외부 도구와 연동할 때 가장 강력한 카드예요.

1. HTML 코드 입력하기

우측 패널의 HTML 코드 입력칸에 코드를 붙여 넣거나 직접 작성하면 폰 미리보기에 즉시 반영돼요. 입력칸 우측 하단의 확장 아이콘(⛶)을 눌러 큰 화면에서 작업할 수 있어요.

⚠️ 외부 사이트 임베드는 해당 사이트가 iframe 임베드를 허용해야 작동해요. 일부 사이트(네이버, 카카오 등)는 보안 정책상 iframe 차단 — 이 경우 임베드 코드 대신 링크 카드(버튼/위치안내)로 대체하세요.

---

2. 자주 쓰는 임베드 케이스 5선

📷 인스타그램 게시물 임베드

준비: 인스타그램 게시물 페이지 → 우측 상단 (⋯) → 퍼가기 → 코드 복사

<blockquote class="instagram-media"
  data-instgrm-permalink="https://www.instagram.com/p/게시물ID/"
  data-instgrm-version="14">
</blockquote>
<script async src="//www.instagram.com/embed.js"></script>

게시물의 사진·캡션·좋아요 수가 그대로 페이지에 표시돼요. 하나의 게시물을 강조하고 싶을 때 좋아요 (예: 신제품 출시 포스트, 행사 후기).

📝 구글 폼 임베드

준비: 구글 폼 → 우측 상단 보내기 → (< >) 탭 → HTML 삽입 코드 복사

<iframe src="https://docs.google.com/forms/d/e/[폼ID]/viewform?embedded=true"
  width="100%" height="800"
  frameborder="0" marginheight="0" marginwidth="0">
  로딩 중...
</iframe>

방문자가 페이지를 떠나지 않고 폼을 작성·제출할 수 있어요. 행사 신청·자료 요청·뉴스레터 구독 등 응답 수집형 페이지에 가장 많이 쓰여요.

💡 응답 수집을 CdBd 안에서 관리하고 통계까지 보고 싶다면 질문과 답변 카드가 더 편해요. 단, 구글 시트로 직접 데이터를 받고 싶거나 기존 구글 폼을 재활용하려면 임베드가 좋아요.

🌐 외부 웹페이지 iframe

<iframe src="https://example.com"
  width="100%" height="500"
  frameborder="0"
  style="border-radius: 8px;">
</iframe>

블로그 글, 노션 페이지(공개 모드), 외부 카탈로그 등 임베드를 허용하는 외부 페이지를 통째로 가져올 수 있어요. 위 스크린샷 상단의 Example Domain처럼 미리보기에서도 바로 렌더링돼요.

📅 캘린들리·예약 위젯 임베드

<!-- Calendly 인라인 위젯 -->
<div class="calendly-inline-widget"
  data-url="https://calendly.com/내계정/30min"
  style="min-width:320px;height:700px;">
</div>
<script type="text/javascript"
  src="https://assets.calendly.com/assets/external/widget.js" async>
</script>

상담·시연 예약을 받을 때 활용해요. Calendly 외에 Google Calendar Appointment Schedule, Zoho Bookings 등 대부분의 예약 도구가 비슷한 임베드 코드를 제공해요.

🎁 커스텀 HTML CTA 배너

CdBd 기본 카드(버튼·이미지)로는 표현이 어려운 그라디언트 배경·아이콘·강조 박스를 자유롭게 만들 수 있어요. 위 스크린샷 하단의 보라색 배너처럼요.

<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 32px 24px; border-radius: 12px;
  text-align: center; color: white;">
  <h2 style="margin: 0 0 8px 0; font-size: 22px;">🎁 얼리버드 특별 혜택</h2>
  <p style="margin: 0 0 20px 0; opacity: 0.95;">
    5월 31일까지 신청 시 50% 할인
  </p>
  <a href="https://example.com/signup"
    style="display: inline-block; background: white; color: #764ba2;
    padding: 12px 28px; border-radius: 999px;
    text-decoration: none; font-weight: bold;">
    지금 신청하기 →
  </a>
</div>

---

3. 그 외 마케팅·영업에 쓸 수 있는 임베드

도구	활용
Tally / Typeform	더 멋진 폼 디자인이 필요할 때
Spotify / SoundCloud	팟캐스트·BGM 재생
Google Maps Embed (iframe)	위치 안내 카드보다 더 큰 지도가 필요할 때
Vimeo / Loom	유튜브 외 영상 플랫폼
Notion 페이지 (공개)	가격표·FAQ 페이지 그대로 가져오기
카카오톡 Sharer 버튼	공유 버튼 커스터마이징
AdSense / Naver Ads	광고 배너
Mailchimp / Stibee 폼	뉴스레터 구독 폼
Tawk.to / Channel.io	라이브 채팅 위젯 (페이지 전체에 떠 있는 채팅 버튼)

4. 🎨 카드 디자인

카드 디자인 섹션에서 코드 카드의 배경·테두리·모서리·내부여백·외부여백을 조절할 수 있어요. 임베드된 외부 콘텐츠가 페이지 톤과 자연스럽게 어울리도록 카드 자체에 부드러운 배경색·둥근 모서리를 줘 보세요.

5. 안전하게 쓰기 위한 체크리스트

• ✅ 신뢰할 수 있는 출처의 코드만 — 검증되지 않은 스크립트는 보안 위험
• ✅ 모바일에서 잘 보이는지 미리보기로 꼭 확인 — width: 100%, height 명시 권장
• ✅ iframe 차단 사이트 회피 — 네이버·카카오 본문 페이지는 임베드 차단됨
• ✅ 외부 스크립트 무거우면 페이지 속도 저하 — 한 페이지에 너무 많은 임베드는 피하기
• ✅ HTTPS 페이지에는 HTTPS 임베드만 — http:// 임베드는 차단되거나 보안 경고

💡 활용 팁: 외부 도구 공급사가 제공하는 임베드 코드는 보통 그대로 붙여 넣으면 작동해요. 안 보일 때는 ① 코드 안에 width/height가 있는지, ② 출처 사이트가 iframe을 허용하는지, ③ HTTPS인지 순서로 확인해 보세요.