풀어쓰는 사회학 AI

홈
가이드

CodePen 임베드로 블로그에 교구 직접 삽입 | iframe 한 줄이면 끝 — 교사용 가이드

📌 이 글 요약

  • CodePen의 Embed 코드를 복사해서 Blogger HTML에 붙여넣으면 → 블로그 글 안에서 교구가 바로 실행됩니다
  • 학생이 별도 링크를 클릭할 필요 없이, 글을 읽다가 바로 교구를 사용할 수 있습니다
  • iframe 한 줄이 핵심 — 코딩 지식 필요 없음
  • 반응형 설정까지 하면 모바일에서도 깔끔하게 보입니다

블로그 글 안에 교구를 바로 넣을 수 있다면?

블로그 글 안에 교구를 바로 넣을 수 있다면? CodePen 임베드 코드 복사해서 붙여넣기만 하면 됩니다.

이전 글에서 CodePen으로 교구를 30초 배포하는 법을 알려드렸죠. URL을 공유하면 학생이 링크를 클릭해서 교구를 쓸 수 있었습니다. 그런데 한 가지 아쉬운 점이 있었어요.

"블로그 글에 교구 설명을 쓰고, 아래에 '여기를 클릭하세요' 링크를 넣었는데... 학생들이 링크를 안 눌러요."

맞습니다. 링크를 따로 클릭하는 건 한 단계 더 거치는 것이고, 학생들은 그 한 단계를 건너뛰기 쉽습니다. 그래서 임베드(Embed)가 필요합니다. 블로그 글 안에 교구를 직접 삽입하면, 글을 스크롤하다가 바로 교구를 만나게 됩니다. 별도 클릭이 필요 없습니다.

임베드(Embed)가 뭔가요?

임베드란 외부 콘텐츠를 내 웹페이지 안에 삽입하는 것입니다. YouTube 영상을 블로그에 넣는 것과 정확히 같은 원리예요.

🎥 YouTube 임베드

블로그 글 안에서 영상이 바로 재생됨

💻 CodePen 임베드

블로그 글 안에서 교구가 바로 실행됨

기술적으로는 <iframe> 태그를 사용합니다. iframe은 "웹페이지 안에 또 다른 웹페이지를 넣는 액자"라고 생각하면 됩니다. 블로그 글이 벽이고, iframe이 액자, 그 안에 CodePen 교구가 그림처럼 들어가는 거예요.

어렵게 느껴질 수 있지만, 실제로 하는 일은 코드 한 줄 복사+붙여넣기입니다. 직접 iframe을 작성할 필요도 없어요. CodePen이 알아서 만들어줍니다.

Step 1 — CodePen에서 Embed 코드 얻기

먼저, 임베드할 Pen이 CodePen에 이미 저장되어 있어야 합니다. (아직 안 만드셨다면 이전 글을 먼저 참고하세요.)

  1. 임베드할 Pen의 편집 화면을 엽니다
  2. 하단 또는 우측의 "Embed" 버튼을 클릭합니다 (Share 메뉴 안에 있을 수도 있습니다)
  3. Embed 설정 팝업이 나타납니다. 여기서 여러 옵션을 설정할 수 있습니다:

Embed 설정 옵션 안내

  • Default Tabs: 처음에 어떤 탭을 보여줄지 선택합니다. 교구용이라면 "Result"만 체크하세요. 학생에게 코드를 보여줄 필요가 없으니까요.
  • Theme: 에디터 테마입니다. Result만 보여줄 거라면 상관없지만, 코드도 보여주고 싶다면 "Light"가 가독성이 좋습니다.
  • Editable: 체크하면 블로그 방문자가 코드를 직접 수정해볼 수 있습니다. 일반 교구에서는 체크 해제를 권장합니다.
  • Preview: 실시간 미리보기. 임베드가 어떻게 보일지 바로 확인할 수 있습니다.
  1. 설정을 마쳤으면, 하단의 코드 영역에서 "HTML (recommended)" 또는 "iframe" 탭을 선택합니다
  2. 표시된 코드를 전체 복사(Ctrl+C)합니다

두 가지 형식 중 하나를 선택할 수 있습니다:

✅ HTML (recommended) 형식

<p class="codepen" data-height="450"
   data-default-tab="result"
   data-slug-hash="AbCdEf"
   data-user="teacher">
</p>
<script async src="https://cpwebassets.codepen.io/
assets/embed/ei.js"></script>

CodePen 자체 스크립트가 로드되어 스타일이 예쁘게 적용됩니다. Blogger에서는 이 방식을 추천합니다.

🔄 iframe 형식

<iframe height="450" style="width: 100%;"
  scrolling="no" title="교구 이름"
  src="https://codepen.io/teacher/
  embed/AbCdEf?default-tab=result"
  frameborder="no" loading="lazy"
  allowfullscreen="true">
</iframe>

순수 iframe만 사용. 외부 스크립트 없이 동작합니다. 일부 플랫폼에서 스크립트가 차단될 때 유용합니다.

💡 팁: Blogger에서는 HTML (recommended) 형식이 가장 잘 동작합니다. 하지만 혹시 스크립트가 안 불러와지면 iframe 형식으로 대체하세요. 둘 다 결과는 동일합니다.

Step 2 — Blogger HTML 편집에 붙여넣기

이제 복사한 임베드 코드를 Blogger 글에 넣겠습니다. 반드시 HTML 편집 모드에서 붙여넣어야 합니다. 일반(작성) 모드에서 붙여넣으면 코드가 텍스트로 표시될 뿐, 교구가 실행되지 않습니다.

  1. Blogger에 로그인합니다
  2. 글 작성 화면(새 글 또는 기존 글 편집)을 엽니다
  3. 에디터 좌측 상단에서 "HTML 보기" 버튼(아이콘: <>)을 클릭합니다
  4. 교구를 삽입할 위치에 커서를 놓고, 붙여넣기(Ctrl+V)합니다
  5. "작성 보기"로 돌아가면 회색 박스가 보입니다 — 이게 정상입니다. 실제 블로그에서는 교구가 실행됩니다.
  6. 글을 미리보기해서 교구가 제대로 나오는지 확인합니다
  7. 문제 없으면 게시합니다

⚠️ 반드시 HTML 편집 모드에서!

일반(작성) 모드에서 코드를 붙여넣으면, Blogger가 HTML 태그를 텍스트로 인식합니다.

작성 모드에서 붙여넣기

코드가 텍스트로 표시됨 ❌

HTML 모드에서 붙여넣기

교구가 실행됨 ✅

Step 3 — 크기 조절

기본 임베드 크기가 블로그 레이아웃에 맞지 않을 수 있습니다. 높이와 너비를 조절하는 방법입니다.

높이(height) 조절

임베드 코드에서 height 값을 수정합니다:

<!-- 기본값: 높이 300px -->
<iframe height="300" ...></iframe>

<!-- 교구가 크면 높이를 늘리세요 -->
<iframe height="600" ...></iframe>

<!-- 간단한 퀴즈라면 작게 -->
<iframe height="400" ...></iframe>

💡 높이 추천값: 간단한 OX퀴즈 = 400px, 4지선다 교구 = 500~600px, 시뮬레이션·타임라인 = 700px 이상. 교구를 직접 띄워보고 스크롤 없이 전부 보이는 높이를 찾으세요.

너비(width) 조절

너비는 style="width: 100%;"로 설정하면 블로그 본문 너비에 자동으로 맞춰집니다. 이게 가장 안전한 방법입니다.

<!-- 블로그 본문 너비에 맞추기 (추천) -->
<iframe height="500" style="width: 100%;" ...></iframe>

<!-- 고정 너비 (비추천 - 모바일에서 잘림) -->
<iframe height="500" width="800" ...></iframe>

Step 4 — 반응형 설정 (모바일 대응)

학생들은 대부분 스마트폰으로 블로그를 봅니다. 모바일에서도 교구가 제대로 보이려면 반응형 설정이 필요합니다.

가장 간단한 방법은 임베드 코드를 반응형 wrapper로 감싸는 것입니다:

<div style="position: relative; width: 100%;
     padding-bottom: 75%; height: 0; overflow: hidden;">
  <iframe src="https://codepen.io/teacher/embed/AbCdEf?default-tab=result"
    style="position: absolute; top: 0; left: 0;
           width: 100%; height: 100%; border: none;"
    scrolling="no" loading="lazy"
    allowfullscreen="true">
  </iframe>
</div>

🔎 코드 설명

  • padding-bottom: 75% — 4:3 비율의 반응형 박스를 만듭니다. 16:9 비율을 원하면 56.25%로 바꾸세요.
  • width: 100% — 화면 크기에 맞춰 자동 조절됩니다.
  • position: absolute — iframe이 wrapper 안에 꽉 차게 배치됩니다.

이 wrapper를 쓰면 PC에서든 태블릿에서든 스마트폰에서든, 화면 크기에 맞춰 교구가 자동으로 줄어들거나 늘어납니다.

💡 더 간단한 방법: 반응형 wrapper가 번거로우면, 그냥 style="width: 100%;"만 넣고 높이는 고정하세요. 완벽한 반응형은 아니지만, 대부분의 경우 충분히 동작합니다.

주의사항 — JS 실행과 보안

CodePen 임베드는 JavaScript가 실행되는 외부 콘텐츠를 블로그에 삽입하는 것입니다. 몇 가지 주의할 점이 있습니다.

⚠️ 꼭 알아둘 주의사항

  • JavaScript 실행: 임베드된 Pen의 JavaScript는 iframe 안에서 실행됩니다. iframe의 sandbox 속성 덕분에 블로그 본문과는 격리되어 있지만, 교구의 JS 코드가 의도대로 동작하는지 반드시 미리보기로 확인하세요.
  • 로딩 속도: 임베드가 많으면 블로그 로딩이 느려질 수 있습니다. 한 글에 3개 이하를 권장합니다. loading="lazy" 속성을 넣으면 스크롤해서 보일 때만 로드됩니다.
  • 원본 수정 반영: CodePen에서 원본 Pen을 수정하면, 임베드된 모든 곳에 자동 반영됩니다. 이게 장점이기도 하지만, 실수로 코드를 망치면 블로그의 교구도 깨집니다. 배포용 Pen은 수정에 주의하세요.
  • Pen 삭제 주의: CodePen에서 Pen을 삭제하면, 임베드된 교구도 당연히 사라집니다. 블로그에 임베드한 Pen은 절대 삭제하지 마세요.
  • 무료 플랜 제한: 무료 계정의 Pen은 모두 공개(Public)입니다. 교구 코드가 공개되어도 괜찮은지 확인하세요.

📚 localStorage 관련: 교구에서 학생의 진행 상태를 저장하는 기능(localStorage)을 사용했다면, iframe 안에서는 third-party cookie 차단 정책 때문에 일부 브라우저(Safari 등)에서 저장이 안 될 수 있습니다. 중요한 데이터 저장이 필요한 교구라면 임베드보다 직접 링크(/full) 방식이 더 안전합니다.

전체 흐름 정리

CodePen에서 Embed 클릭 Result 탭 선택 코드 복사 Blogger HTML에 붙여넣기 미리보기 확인 게시!

💡 더 잘 쓰기 위한 팁

1. loading="lazy" 속성을 꼭 넣으세요

임베드 교구가 페이지 아래쪽에 있으면, 학생이 스크롤해서 해당 위치에 올 때까지 로드를 지연시킵니다. 블로그 초기 로딩 속도가 빨라집니다.

2. 교구 위에 한 줄 안내문을 넣으세요

"아래 교구에서 직접 문제를 풀어보세요!" 같은 안내를 교구 바로 위에 넣으면 학생 참여율이 올라갑니다. 임베드된 교구가 무엇인지 모르면 그냥 지나칠 수 있거든요.

3. 교구 아래에 직접 링크도 함께 제공하세요

일부 학생은 임베드 프레임이 작아서 불편할 수 있습니다. "전체 화면으로 열기" 링크(/full URL)를 아래에 같이 넣어두면 편합니다.

<p><a href="https://codepen.io/teacher/full/AbCdEf"
   target="_blank">→ 전체 화면으로 열기</a></p>

4. 배포용 Pen은 Fork해서 별도로 관리하세요

작업용 Pen을 수정하다가 블로그 교구가 깨지는 걸 방지하려면, 완성된 Pen을 Fork해서 배포 전용 사본을 만드세요. 블로그에는 Fork한 Pen의 임베드 코드를 사용하고, 원본은 마음껏 수정하면 됩니다.

5. 교구 제목(Pen Title)을 명확하게 작성하세요

CodePen의 Pen 제목은 임베드 시 title 속성에 들어갑니다. "Untitled" 대신 "통합사회 2단원 OX퀴즈"처럼 구체적으로 적어두면, 접근성(스크린 리더)과 SEO 모두에 좋습니다.

관련 글

📌 정리

CodePen Embed = 블로그에 교구를 직접 심는 가장 쉬운 방법.
Embed 코드 복사 → Blogger HTML에 붙여넣기 → 끝.
학생이 링크를 클릭할 필요 없이, 글을 읽다가 바로 교구를 만납니다.

현직 고교 교사가 전하는 통합사회·경제의 정석. 고퀄리티 수업 PPT와 HTML 시뮬레이션 교구, 생생한 여행 기록을 통해 사회를 풀어냅니다.