> ## Documentation Index
> Fetch the complete documentation index at: https://cdbd.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 코드 카드

# 코드 카드

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

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

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

<img src="https://mintcdn.com/cdbd/VAw6hWINZ2MTDd6F/_assets/images/02-card_code.png?fit=max&auto=format&n=VAw6hWINZ2MTDd6F&q=85&s=e467b9b69b6f1ec30ac47cbc26325e62" alt="코드 카드 — 외부 웹페이지 iframe + 커스텀 신청 배너 동시 표시" width="1440" height="900" data-path="_assets/images/02-card_code.png" />

## 이 기능이 필요한 순간

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

## 1. HTML 코드 입력하기

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

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

***

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

### 📷 인스타그램 게시물 넣기

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

```html theme={null}
<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" 버튼이 그대로 페이지에 표시돼요. **하나의 게시물**을 강조하고 싶을 때 좋아요 (예: 신제품 출시 포스트, 행사 후기).

<img src="https://mintcdn.com/cdbd/dO1Hbt4015HLR-Nq/_assets/images/card-code_instagram.png?fit=max&auto=format&n=dO1Hbt4015HLR-Nq&q=85&s=d60117412b7975aadab49d8011e32408" alt="인스타그램 게시물 임베드 미리보기 — @cdbdmag 게시물이 그대로 표시됨" width="372" height="780" data-path="_assets/images/card-code_instagram.png" />

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

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

### 📱 유튜브 쇼츠 넣기

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

```html theme={null}
<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 비율**로 지정하면 쇼츠 특유의 세로 화면이 그대로 나와요. **여러 쇼츠를 나란히 배치**하거나, **카드 배경·여백·모서리를 직접 꾸미고** 싶을 때 코드 카드가 유용해요.

<img src="https://mintcdn.com/cdbd/9JzSBmxQjZ1TOBbx/_assets/images/card-code_youtube-shorts.png?fit=max&auto=format&n=9JzSBmxQjZ1TOBbx&q=85&s=bbe46f2c36a2cff1e63cc2e1d0402e92" alt="유튜브 쇼츠 임베드 미리보기 — 세로형 영상이 카드 안에 표시됨" width="372" height="700" data-path="_assets/images/card-code_youtube-shorts.png" />

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

### 📝 구글 폼 넣기

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

```html theme={null}
<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가 자동으로 들어가요.

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

<img src="https://mintcdn.com/cdbd/rkdigLWE6eOvHils/_assets/images/card-code_google-form.png?fit=max&auto=format&n=rkdigLWE6eOvHils&q=85&s=ab30a099d67e33818542aef85d7fdd73" alt="구글 폼 임베드 미리보기 — CdBd 문의 폼이 카드 안에 표시됨" width="372" height="780" data-path="_assets/images/card-code_google-form.png" />

> ⚠️ **공유 권한 확인 (자주 빠뜨리는 부분)** — 임베드는 잘했는데 방문자에게 **"Google 계정에 로그인하십시오"** 화면만 보인다면, 폼 권한 설정 두 가지를 확인해 보세요.
>
> 1. 구글 폼 **설정 → 응답** 섹션 → **"응답 횟수 1회로 제한"** 토글을 **끄기** (켜져 있으면 응답자에게 Google 로그인을 강제해요)
> 2. Workspace(`@회사도메인`) 계정으로 만든 폼이면 **"(조직)과 신뢰할 수 있는 조직만 응답"** 옵션도 끄기
>
> 변경 후 시크릿 브라우저로 폼 URL을 열어 비로그인 상태에서도 폼이 보이는지 확인해 보세요.

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

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

```html theme={null}
<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**처럼 미리보기에서도 바로 렌더링돼요.

<img src="https://mintcdn.com/cdbd/9JzSBmxQjZ1TOBbx/_assets/images/card-code_iframe.png?fit=max&auto=format&n=9JzSBmxQjZ1TOBbx&q=85&s=e0747f990d79ebfacd9ac8a19396d1f6" alt="외부 웹페이지 iframe 미리보기 — example.com 페이지가 카드에 표시됨" width="372" height="500" data-path="_assets/images/card-code_iframe.png" />

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

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

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

```html theme={null}
<!-- 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 방식**으로 대체해 보세요.
>
> ```html theme={null}
> <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. **스크린샷 + 이미지 카드** — 트윗 화면을 캡처해 [이미지 카드](/editor/card-image)로 넣고, 캡션에 "원본 트윗 보기 →" 같은 안내 추가
> 2. **버튼 카드 링크** — [버튼 카드](/editor/card-button)에 트윗 URL을 그대로 연결하고, 버튼 문구를 "트위터에서 이어 보기" 같은 형태로 작성

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

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

```html theme={null}
<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예요.

```html theme={null}
<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`까지 늘리세요.

<img src="https://mintcdn.com/cdbd/dO1Hbt4015HLR-Nq/_assets/images/card-code_tiktok.png?fit=max&auto=format&n=dO1Hbt4015HLR-Nq&q=85&s=8aef5f6467a4accea3e439b38d8d1aa9" alt="틱톡 영상 임베드 미리보기 — 영상 카드가 그대로 표시됨" width="372" height="750" data-path="_assets/images/card-code_tiktok.png" />

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

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

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

**준비** (최초 1회)

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

```html theme={null}
<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 코드 카드는 외부 스크립트 실행이 제한되어 버튼이 빈 화면으로 보일 수 있어요. 이때는 [버튼 카드](/editor/card-button)에 카카오톡 오픈채팅 URL(`https://open.kakao.com/o/...`)을 직접 연결하는 방법을 권장해요.

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

### 📍 매장 위치 안내하기

매장·행사장 위치를 큰 지도로 보여줄 때. [위치안내 카드](/editor/card-map)보다 자유롭게 꾸미고 싶을 때 코드 카드를 써요.

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

준비: [카카오맵](https://map.kakao.com) → 매장/주소 검색 → 우측 메뉴 **지도 퍼가기 → "내장 지도 만들기"** → 코드 복사

```html theme={null}
<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 임베드를 막아둬서, **길찾기 링크 버튼**이 가장 확실해요.

```html theme={null}
<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;`으로 바꿔 보세요.

<img src="https://mintcdn.com/cdbd/r4mllcTqIGNeNTG8/_assets/images/card-code_kakao-map.png?fit=max&auto=format&n=r4mllcTqIGNeNTG8&q=85&s=36d8a77e43fc7fb5f76b6f51b08c62d0" alt="네이버 지도 길찾기 버튼 미리보기 — 초록색 CTA 버튼이 표시됨" width="372" height="200" data-path="_assets/images/card-code_kakao-map.png" />

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

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

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

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

**구글 드라이브 PDF**

```html theme={null}
<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 코드 복사

```html theme={null}
<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 → 곡/앨범/팟캐스트/에피소드 → **(•••) → 공유 → 임베드 코드 복사**

```html theme={null}
<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 트랙 → **공유 → 임베드 → 코드 복사**

```html theme={null}
<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에선 보통 동작하지만 모바일은 차단될 수 있으니, 컨트롤러를 노출해 방문자가 직접 누르도록 안내하면 안전해요.

<img src="https://mintcdn.com/cdbd/r4mllcTqIGNeNTG8/_assets/images/card-code_spotify.png?fit=max&auto=format&n=r4mllcTqIGNeNTG8&q=85&s=156c0a5a3198cc318b9c6c3d5a031707" alt="스포티파이 임베드 미리보기 — 트랙 플레이어가 카드에 표시됨" width="372" height="320" data-path="_assets/images/card-code_spotify.png" />

### 🎁 신청 배너 직접 만들기

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

```html theme={null}
<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](https://coolors.co/gradient) 추천)
* `🎁 얼리버드 특별 혜택` → **큰 제목** (이모지 + 한 줄 카피)
* `5월 31일까지 신청 시 50% 할인` → **부제** (조건·기한·혜택)
* `https://example.com/signup` → 버튼이 연결될 **신청·구매 페이지 URL**
* `지금 신청하기 →` → **버튼 안 문구**

🎨 **느낌 바꾸기** (선택)

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

<img src="https://mintcdn.com/cdbd/r4mllcTqIGNeNTG8/_assets/images/card-code_cta-banner.png?fit=max&auto=format&n=r4mllcTqIGNeNTG8&q=85&s=f4e126d06804ebccd8a041fbe80db4bc" alt="커스텀 HTML CTA 배너 미리보기 — 보라 그라디언트 배경의 &#x22;지금 신청하기&#x22; 배너" width="372" height="320" data-path="_assets/images/card-code_cta-banner.png" />

***

## 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인지 순서로 확인해 보세요.