코드 카드

코드 카드

한 줄 요약 — 코드 카드는 인스타·유튜브·구글 폼 같은 외부 서비스의 코드를 붙여 넣어, 그 결과 화면을 CdBd 페이지 안에 그대로 보여 주는 카드예요.

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

💡 잠깐, 처음 보는 단어가 있어요?

• HTML — 웹페이지의 모양과 내용을 정해 주는 코드예요. 외부 서비스가 알아서 만들어 주니 직접 작성하지 않아도 돼요.
• iframe — 외부 페이지를 내 페이지 안에 작은 창으로 끼워 보여 주는 코드예요. 인스타 게시물·유튜브 영상·구글 폼이 모두 이 방식으로 들어가요.
• 임베드(embed) — “끼워 넣다”는 뜻이에요. 외부 콘텐츠를 페이지 안에 넣는 행위를 통틀어 이렇게 불러요.

이 기능이 필요한 순간

• 외부 폼이나 예약 위젯을 페이지 안에서 바로 작성·예약받고 싶을 때 (구글 폼·캘린들리 등)
• 인스타·틱톡·유튜브 쇼츠 같은 SNS 게시물을 페이지 안에서 바로 보여 주고 싶을 때
• CdBd 기본 카드로는 만들기 어려운 그라데이션 배경·맞춤 신청 배너·진행 바를 직접 디자인하고 싶을 때

1. HTML 코드 입력하기

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

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

---

2. 자주 쓰는 코드 붙여 넣기

📷 인스타그램 게시물 넣기

준비: 인스타그램에서 보여줄 게시물 페이지의 URL만 알면 돼요. (예: https://www.instagram.com/p/CxYz123abc/)

<iframe src="https://www.instagram.com/p/게시물ID/embed/"
  width="100%" height="700"
  frameborder="0" scrolling="no"
  allowtransparency="true"
  style="border-radius:8px;">
</iframe>

🔧 이렇게 수정하세요 — 딱 한 곳만 바꾸면 끝이에요.

• 게시물ID → 인스타 게시물 URL의 /p/와 / 사이 문자열. 예) URL이 https://www.instagram.com/p/CxYz123abc/라면 CxYz123abc 부분.
• height="700" → 세로 크기(px). 캡션이 긴 게시물은 800~900까지 늘리세요.

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

💡 인스타그램이 공식 안내하는 “퍼가기” 버튼의 코드는 <blockquote> + <script> 방식이지만, CdBd 코드 카드에서는 위 iframe 방식이 더 확실하게 작동해요. 게시물 URL만 알면 되니 훨씬 간단하기도 해요.

⚠️ 비공개 계정의 게시물은 임베드해도 방문자에게 보이지 않아요. 공개 계정 게시물만 사용해 보세요.

📱 유튜브 쇼츠 넣기

준비: 쇼츠 URL https://www.youtube.com/shorts/영상ID 에서 shorts/를 embed/로 바꾸면 임베드 주소가 돼요. (또는 쇼츠 화면 → 공유 → 퍼가기로 iframe 코드를 복사해도 같아요.)

<iframe
  width="315" height="560"
  src="https://www.youtube.com/embed/영상ID"
  title="YouTube Shorts"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
  style="border-radius: 12px; max-width: 100%;">
</iframe>

🔧 이렇게 수정하세요 — 두 곳만 확인하면 끝이에요.

• 영상ID → 쇼츠 URL https://www.youtube.com/shorts/{이 부분}의 영상 ID. 예) 쇼츠 URL이 https://www.youtube.com/shorts/dQw4w9WgXcQ라면 dQw4w9WgXcQ.
• width="315" height="560" → 쇼츠 특유의 세로 9:16 비율이에요. 카드 안에서 더 크게 보이게 하고 싶다면 같은 비율로 width="360" height="640"처럼 늘리세요. (가로형 일반 영상이라면 16:9, 예: width="560" height="315")

width·height를 세로 9:16 비율로 지정하면 쇼츠 특유의 세로 화면이 그대로 나와요. 여러 쇼츠를 나란히 배치하거나, 카드 배경·여백·모서리를 직접 꾸미고 싶을 때 코드 카드가 유용해요.

💡 유튜브 카드는 쇼츠 주소(youtube.com/shorts/...)를 그대로는 인식하지 못해 화면이 비어요. 그래서 쇼츠를 세로 비율로 넣으려면 이 코드 카드가 가장 확실해요. (유튜브 카드에 넣고 싶다면 주소의 shorts/를 watch?v=로 바꿔야 하는데, 이때는 가로형으로 보여요.)

📝 구글 폼 넣기

준비: 구글 폼 → 우측 상단 보내기 → (< >) 탭 → 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>

🔧 이렇게 수정하세요 — 두 곳만 확인하면 돼요.

• [폼ID] → 구글 폼 공유 URL의 /d/e/ 와 /viewform 사이의 긴 문자열. 대괄호 [ ]는 빼고 ID만 넣어 주세요. 예) 공유 URL이 https://docs.google.com/forms/d/e/1FAIpQLSe.../viewform이면 1FAIpQLSe... 부분.
• height="800" → 폼 세로 크기(px). 질문이 많아 스크롤이 생기면 1000~1200까지 늘리세요.

💡 가장 쉬운 방법 — 구글 폼 → 보내기 → (< >) 탭 → HTML 삽입 코드를 그대로 복사해 붙여 넣으면 폼ID가 자동으로 들어가요.

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

⚠️ 공유 권한 확인 (자주 빠뜨리는 부분) — 임베드는 잘했는데 방문자에게 “Google 계정에 로그인하십시오” 화면만 보인다면, 폼 권한 설정 두 가지를 확인해 보세요.

1. 구글 폼 설정 → 응답 섹션 → “응답 횟수 1회로 제한” 토글을 끄기 (켜져 있으면 응답자에게 Google 로그인을 강제해요)
2. Workspace(@회사도메인) 계정으로 만든 폼이면 “(조직)과 신뢰할 수 있는 조직만 응답” 옵션도 끄기

변경 후 시크릿 브라우저로 폼 URL을 열어 비로그인 상태에서도 폼이 보이는지 확인해 보세요.

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

🌐 외부 웹페이지 통째로 가져오기

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

🔧 이렇게 수정하세요 — 두 곳만 확인하면 돼요.

• https://example.com → 보여줄 웹페이지 주소. 반드시 https://로 시작해야 해요. CdBd 페이지가 HTTPS이기 때문에 http://로 시작하는 주소는 차단돼요.
• height="500" → 세로 크기(px). 페이지가 길면 800~1000까지 늘리세요. width="100%"는 카드 폭에 자동으로 맞춰지니 그대로 두세요.

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

⚠️ 자주 막히는 경우 — 네이버 본문·카카오 본문·뉴스 사이트 등 일부 사이트는 보안 정책상 iframe 임베드를 막아둬요. 미리보기에서 빈 화면이 뜨면 그 사이트가 임베드를 막아둔 거예요. 이때는 버튼 카드로 “사이트 이동” 링크를 만들어 대체해 보세요.

📅 캘린들리·예약 위젯 연결하기

준비: Calendly 대시보드 → 본인 이벤트 → “공유” 버튼 → “임베드” → 인라인 위젯 코드 복사. (또는 아래 코드를 그대로 쓰고 한 곳만 본인 주소로 바꿔도 돼요.)

<!-- 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>

🔧 이렇게 수정하세요 — 한 곳만 본인 예약 페이지 주소로 바꾸면 끝이에요.

• https://calendly.com/내계정/30min → 본인 캘린들리 예약 페이지 URL. 캘린들리 대시보드의 이벤트에서 “공유” 버튼을 눌러 나오는 URL을 그대로 붙여 넣어 주세요. (예: https://calendly.com/cdbd-team/intro-30)
• height:700px → 위젯 세로 크기. 예약 단계가 많아 잘려 보이면 800px~900px까지 늘리세요.

상담·시연 예약을 받을 때 활용해요. Calendly 외에 Google Calendar Appointment Schedule·Zoho Bookings 등 다른 예약 도구도 같은 구조의 임베드 코드를 제공하니, 위 URL 한 곳만 본인 예약 페이지 주소로 바꾸면 돼요.

⚠️ 위 <script> 방식이 안 보일 수 있어요 — CdBd 코드 카드에서는 일부 외부 스크립트가 실행되지 않아 위젯이 안 뜰 수 있어요. 이때는 아래 iframe 방식으로 대체해 보세요.

<iframe src="https://calendly.com/내계정/30min?embed_domain=cdbd.in&embed_type=Inline"
  width="100%" height="700" frameborder="0"></iframe>

🔧 위 URL의 내계정/30min 한 곳만 본인 캘린들리 예약 페이지 주소로 바꿔 주세요. embed_domain·embed_type 옵션은 그대로 두면 돼요.

💡 미리보기 이미지는 준비 중이에요. 곧 추가될 예정입니다.

🐦 트위터(X)·스레드 게시물 보여주기

⚠️ 트위터(X)는 현재 CdBd 코드 카드에서 안정적으로 작동하지 않아요. 트위터의 공식 임베드는 외부 스크립트(widgets.js)가 페이지에서 실행돼야 트윗을 처리하는데, CdBd 코드 카드는 외부 스크립트 실행이 제한돼요. 인스타·틱톡과 달리 트위터는 iframe-only 대안도 공식 지원하지 않아요. 트윗 한 편을 보여 주고 싶다면 다음 두 가지 방법을 권장해요.

1. 스크린샷 + 이미지 카드 — 트윗 화면을 캡처해 이미지 카드로 넣고, 캡션에 “원본 트윗 보기 →” 같은 안내 추가
2. 버튼 카드 링크 — 버튼 카드에 트윗 URL을 그대로 연결하고, 버튼 문구를 “트위터에서 이어 보기” 같은 형태로 작성

💡 미리보기 이미지는 의도적으로 넣지 않았어요. 위 두 가지 권장 방식을 따라 주세요.

준비: 트윗 페이지 → 우측 상단 (•••) → “트윗 임베드” → 표시되는 코드를 통째로 복사. 또는 publish.twitter.com에 트윗 URL을 붙여 넣고 코드 받기.

<blockquote class="twitter-tweet" data-lang="ko">
  <p lang="ko">트윗 내용 미리보기...</p>
  &mdash; 사용자명 (@user_id)
  <a href="https://twitter.com/user_id/status/1234567890123456789">2026년 6월 1일</a>
</blockquote>
<script async src="https://platform.twitter.com/widgets.js"></script>

🔧 이렇게 수정하세요 — 직접 작성하지 말고 X에서 받은 임베드 코드를 그대로 붙여 넣어 주세요. 트윗 텍스트·작성자·날짜는 자동으로 채워져요.

💡 스레드(Threads) 게시물도 같은 방식이에요. 게시물 → (•••) → “임베드” → 코드 복사 후 붙여 넣기. 스크립트 주소가 https://www.threads.net/embed.js로 다른 점만 차이.

🎵 틱톡 영상 넣기

준비: 틱톡 영상의 URL에서 영상 ID(긴 숫자)만 알면 돼요. 영상 URL이 https://www.tiktok.com/@계정/video/{영상ID} 형태이고, 끝의 숫자가 영상 ID예요.

<iframe src="https://www.tiktok.com/embed/v2/영상ID"
  width="100%" height="700"
  frameborder="0" scrolling="no"
  allow="encrypted-media"
  style="border-radius:8px;">
</iframe>

🔧 이렇게 수정하세요 — 딱 한 곳만 바꾸면 끝이에요.

• 영상ID → 틱톡 영상 URL 끝의 긴 숫자 (예: 6718335390845095173)
• height="700" → 세로 크기(px). 영상 비율이 길거나 캡션이 풍부하면 800까지 늘리세요.

💡 틱톡이 공식 안내하는 임베드 코드는 <blockquote> + <script> 방식이지만, CdBd 코드 카드에서는 위 iframe 방식이 더 확실하게 작동해요.

💬 카카오톡 채널 버튼 만들기

한국 사용자에게 가장 친숙한 CTA(신청·상담·구독 같은 행동을 유도하는 버튼·배너)예요. “1:1 상담하기”·“친구 추가하기” 두 가지를 만들 수 있어요.

준비 (최초 1회)

1. Kakao Developers → 내 애플리케이션 → 추가 → JavaScript 키 발급
2. 카카오톡 채널 관리자센터 → 대시보드 → 채널 공개 ID 확인 (예: _xyzabc — 밑줄 포함)
3. Kakao Developers → 내 애플리케이션 → 플랫폼 → Web → 사이트 도메인에 https://cdbd.in 추가 (안 하면 버튼이 안 보여요)

<div id="kakao-talk-channel-chat-button"
  data-channel-public-id="_xyzabc"
  data-size="large"
  data-title="consult"
  data-color="yellow"
  data-shape="pc"
  data-support-multiple-densities="true">
</div>
<script src="https://t1.kakaocdn.net/kakao_js_sdk/2.7.2/kakao.min.js"></script>
<script>
  Kakao.init('여기에_JavaScript_키_붙여넣기');
</script>

🔧 이렇게 수정하세요 — 두 군데만 본인 값으로 바꾸면 끝이에요.

• _xyzabc → 본인 카카오톡 채널 공개 ID (밑줄 포함)
• 여기에_JavaScript_키_붙여넣기 → Kakao Developers에서 발급받은 JavaScript 키

🎨 버튼 모양 바꾸기 (선택)

• data-title="consult" → "add"로 바꾸면 “채널 추가하기” 버튼이 돼요
• data-color="yellow" → "mono"로 바꾸면 흑백 톤
• data-shape="pc" → "rounded"로 바꾸면 모서리가 둥근 버튼
• data-size="large" → "small"로 바꾸면 작은 버튼

⚠️ CdBd 코드 카드에서 작동하지 않을 수도 있어요 — 카카오톡 채널 버튼은 카카오 SDK(kakao.min.js)가 페이지에서 실행돼야 작동해요. CdBd 코드 카드는 외부 스크립트 실행이 제한되어 버튼이 빈 화면으로 보일 수 있어요. 이때는 버튼 카드에 카카오톡 오픈채팅 URL(https://open.kakao.com/o/...)을 직접 연결하는 방법을 권장해요.

💡 미리보기 이미지는 준비 중이에요. JS키·도메인 등록 셋업이 완료되면 캡처해 추가할 예정입니다.

📍 매장 위치 안내하기

매장·행사장 위치를 큰 지도로 보여줄 때. 위치안내 카드보다 자유롭게 꾸미고 싶을 때 코드 카드를 써요.

방법 1. 카카오맵 — 지도 퍼가기 (가장 깔끔)

준비: 카카오맵 → 매장/주소 검색 → 우측 메뉴 지도 퍼가기 → “내장 지도 만들기” → 코드 복사

<div id="daumRoughmapContainer1234567890" class="root_daum_roughmap root_daum_roughmap_landing"></div>
<script charset="UTF-8" src="https://ssl.daumcdn.net/dmaps/map_js_init/roughmapLoader.js"></script>
<script charset="UTF-8">
  new daum.roughmap.Lander({
    "timestamp" : "1234567890",
    "key" : "abcdefg",
    "mapWidth" : "100%",
    "mapHeight" : "360"
  }).render();
</script>

🔧 이렇게 수정하세요 — 카카오맵에서 받은 코드를 통째로 붙여 넣고, 딱 한 곳만 조정하세요.

• "mapHeight" : "360" → 지도 세로 크기(px). 모바일에선 "280"~"360"이 보기 좋아요.

mapWidth는 "100%" 그대로 두면 카드 폭에 자동으로 맞춰져요. timestamp·key는 카카오맵이 자동 발급하니 수정하지 않는 편이 좋아요.

⚠️ 방법 1이 안 보일 수 있어요 — 카카오맵 퍼가기 코드도 외부 스크립트(roughmapLoader.js)가 실행돼야 지도를 그려요. CdBd 코드 카드에서는 지도가 안 뜰 수 있으니, 그럴 때는 아래 방법 2 (길찾기 버튼) 으로 대체해 보세요. 길찾기 버튼은 단순 링크라 항상 잘 작동해요.

방법 2. 네이버 지도 / 카카오맵 — 길찾기 버튼

네이버 지도는 iframe 임베드를 막아둬서, 길찾기 링크 버튼이 가장 확실해요.

<a href="https://map.naver.com/p/search/우리매장이름"
  target="_blank"
  style="display:inline-block; width:100%; padding:16px;
    background:#03C75A; color:white; text-align:center;
    border-radius:8px; text-decoration:none; font-weight:bold; font-size:16px;">
  📍 네이버 지도로 길찾기
</a>

🔧 이렇게 수정하세요

• 우리매장이름 → 매장명 또는 주소(한글 그대로 넣어도 대부분 작동). 예: 홍대카페CdBd
• 카카오맵용으로 바꾸려면 URL을 https://map.kakao.com/link/search/매장이름으로, 배경색 background:#FEE500(노랑) + 글자색 color:#000;으로 바꿔 보세요.

💡 같은 페이지에 카카오맵 임베드(방법 1) + 네이버 길찾기 버튼(방법 2) 을 함께 두면 카카오·네이버 사용자 모두 편하게 길을 찾을 수 있어요.

📄 구글 드라이브 PDF·슬라이드 보여주기

메뉴판·소개서·세일즈덱·포트폴리오 PDF를 페이지 안에서 미리보기로 띄울 때 좋아요.

준비 (PDF) — 구글 드라이브에서 파일 우클릭 → 공유 → “링크가 있는 모든 사용자”로 설정 → 링크 복사. 보통 이렇게 생겼어요. https://drive.google.com/file/d/1AbCdEfGhIjKlMnOpQrStUvWxYz/view?usp=sharing

구글 드라이브 PDF

<iframe src="https://drive.google.com/file/d/FILE_ID/preview"
  width="100%" height="600"
  allow="autoplay"
  style="border:none; border-radius:8px;">
</iframe>

🔧 이렇게 수정하세요 — 두 가지만 확인하면 돼요.

• FILE_ID → 공유 링크의 /d/와 /view 사이의 긴 문자열 (위 예시에서 1AbCdEfGhIjKlMnOpQrStUvWxYz 부분)
• 링크 끝의 /view를 /preview로 반드시 바꾸기 — /view로 두면 임베드가 동작하지 않아요. 이게 가장 자주 빠뜨리는 부분이에요.
• height="600" → 세로 크기(px). PDF가 길면 800~1000까지 늘리세요.

구글 슬라이드

준비: 구글 슬라이드 → 파일 → 웹에 게시 → 임베드 탭 → 자동 재생/슬라이드 시간 설정 → “게시” → iframe 코드 복사

<iframe src="https://docs.google.com/presentation/d/e/PRESENTATION_ID/embed?start=false&loop=false&delayms=3000"
  width="100%" height="450"
  frameborder="0" allowfullscreen>
</iframe>

🔧 이렇게 수정하세요 — 구글 슬라이드 “웹에 게시”에서 받은 코드를 통째로 붙여 넣어 주세요. width="960"처럼 고정 폭으로 나오면 width="100%"로만 바꾸면 모바일에서도 깔끔해요.

⚠️ 회사 내부용·권한 제한 파일은 임베드해도 방문자가 못 봐요. 공유 권한이 “링크가 있는 모든 사용자 — 뷰어” 인지 꼭 확인해 보세요.

💡 미리보기 이미지는 준비 중이에요. 곧 추가될 예정입니다.

🎧 음악·팟캐스트 들려주기

팟캐스트 에피소드·매장 BGM 플레이리스트·자체 제작 음원을 페이지에 띄울 때 써요.

스포티파이

준비: Spotify → 곡/앨범/팟캐스트/에피소드 → (•••) → 공유 → 임베드 코드 복사

<iframe src="https://open.spotify.com/embed/episode/EPISODE_ID?utm_source=generator"
  width="100%" height="232"
  frameborder="0"
  allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
  loading="lazy">
</iframe>

🔧 이렇게 수정하세요 — Spotify 공식 임베드 코드를 그대로 붙여 넣으면 끝이에요. URL의 embed/episode/... 부분은 자료 종류에 따라 자동으로 달라져요.

• 곡 한 곡 → embed/track/...
• 앨범 → embed/album/...
• 팟캐스트 채널 전체 → embed/show/...
• height="232" → 352로 늘리면 큰 카드 형태가 돼요.

사운드클라우드

준비: SoundCloud 트랙 → 공유 → 임베드 → 코드 복사

<iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay"
  src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/TRACK_ID&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true">
</iframe>

🔧 이렇게 수정하세요 — SoundCloud 공식 임베드를 그대로 붙여넣되, URL 끝의 옵션 몇 개만 조정하면 분위기가 달라져요. (각 옵션은 & 기호로 구분돼요)

• color=%23ff5500 → 플레이어 강조 색. %23000000 = 검정, %2300C896 = 민트. (%23이 # 기호예요)
• auto_play=false → true로 바꾸면 자동 재생 (모바일 브라우저는 정책상 막아둘 수 있어요)
• show_comments=true → false로 두면 댓글 숨김 (깔끔)
• height="166" → 300으로 키우면 큰 시각형 플레이어

💡 매장 BGM처럼 자동으로 흐르게 하고 싶다면 auto_play=true로 시도해 보세요. PC에선 보통 동작하지만 모바일은 차단될 수 있으니, 컨트롤러를 노출해 방문자가 직접 누르도록 안내하면 안전해요.

🎁 신청 배너 직접 만들기

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>

🔧 이렇게 수정하세요 — 위 코드를 그대로 붙여 넣고, 본인 캠페인에 맞춰 5곳만 바꾸면 돼요.

• #667eea / #764ba2 → 배너 배경 그라디언트의 시작색·끝색. 브랜드 색 두 가지를 넣으면 자연스러워요. (어울리는 두 색을 찾고 싶다면 coolors.co/gradient 추천)
• 🎁 얼리버드 특별 혜택 → 큰 제목 (이모지 + 한 줄 카피)
• 5월 31일까지 신청 시 50% 할인 → 부제 (조건·기한·혜택)
• https://example.com/signup → 버튼이 연결될 신청·구매 페이지 URL
• 지금 신청하기 → → 버튼 안 문구

🎨 느낌 바꾸기 (선택)

• border-radius: 12px → 0이면 각진 박스, 24px이면 더 부드럽게 둥근 박스
• padding: 32px 24px → 첫 숫자는 위·아래 여백, 둘째 숫자는 좌·우 여백. 더 풍성하게 보이려면 48px 32px
• 버튼 안 color: #764ba2 값을 위쪽 그라디언트 끝색과 같게 두면 통일감이 좋아요

---

3. 그 외 외부 도구 살펴보기

도구	활용
Tally / Typeform	더 멋진 폼 디자인이 필요할 때 (구글 폼 대체)
Google Maps Embed (iframe)	해외 매장·국내 외 위치 안내가 필요할 때
Vimeo / Loom	유튜브 외 영상 플랫폼
Notion 페이지 (공개)	가격표·FAQ 페이지 그대로 가져오기
카카오톡 Sharer / 인스타 DM 링크 버튼	공유·메시지 버튼 커스터마이징 (https://ig.me/m/계정명)
AdSense / Naver Ads	광고 배너
Mailchimp / Stibee 폼	뉴스레터 구독 폼
Tawk.to / Channel.io	라이브 채팅 위젯 (페이지 전체에 떠 있는 채팅 버튼)
Figma / Canva 공유 임베드	디자인·포스터 미리보기
Lottie 애니메이션	가벼운 인터랙티브 일러스트

4. 카드 디자인 다듬기

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

5. 안전하게 쓰기

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

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