--- title: "내 사이트에 MolDraw 삽입하기 | 무료 분자 편집기 Iframe" url: https://www.moldraw.com/ko/blog/embed-moldraw.html description: "내 사이트에 MolDraw 편집기를 임베드하세요. iframe 하나를 복사해 블로그, 강좌, 문서 페이지, 앱에 붙여 넣고 프레임 높이를 정하면 됩니다. 실시간 미리 보기 포함." lang: ko publisher: Scidart Academy generated: 2026-10-26 --- ## 이 페이지의 내용 누구를 위한 기능인가 복사해서 붙여 넣기 미리 보기 프레임 크기 정하기 MolDraw에서 열기 자주 묻는 질문 # 내 사이트에 MolDraw 편집기 삽입하기 게시: 2026년 9월 18일 · 작성자: Scidart Academy 화학 블로그, 수업, 실험 페이지, 문서, 앱에 실시간 분자 편집기를 추가하세요. iframe 하나를 복사해 그림이 나올 자리에 붙여 넣고, 캔버스가 레이아웃에 맞도록 높이를 정하면 됩니다. ![카페인 구조식이 표시된 MolDraw 편집기가 iframe으로 임베드된 웹 페이지 일러스트](https://www.moldraw.com/blog/thumbs/embed-moldraw-editor.webp) iframe 하나면 어떤 블로그 글, 수업, 문서 페이지에도 MolDraw 편집기를 넣을 수 있습니다. **요약:** 임베드 코드 복사를 클릭하고 코드 조각을 HTML에 붙여 넣은 뒤 높이 640픽셀로 시작하세요. 독자는 그 자리에서 그릴 수 있습니다. Open in MolDraw는 새 탭에서 전체 편집기를 엽니다. ## 누구를 위한 기능인가 독자가 그림만 보는 것이 아니라 설명 옆에서 직접 구조식을 그려 봐야 할 때 임베드를 사용하세요. - **화학 블로거** — 반응이나 구조식 글 아래에 실제로 쓸 수 있는 캔버스. - **교육자와 LMS 저자** — 수업, 실험 매뉴얼, 문제 세트 안의 그리기 상자. - **문서 작성자** — 파일 형식, SMILES, 작업 흐름 설명 옆의 편집기. - **앱 개발자** — 자체 인터페이스가 있는 페이지 안에 바로 쓸 수 있는 편집기 프레임. 편집기를 직접 호스팅할 필요가 없습니다. 프레임이 [https://www.moldraw.com/embed](https://www.moldraw.com/embed)에서 편집기를 불러옵니다. 페이지는 온전히 여러분의 것입니다. ## 복사해서 붙여 넣기 임베드 코드 복사를 누르면 이 코드 조각이 클립보드에 복사됩니다. 페이지 HTML, LMS HTML 블록, 앱의 마크업에 붙여 넣으세요. ``` ``` 프레임이 비어 있다면 사이트나 강의 도구가 임베드를 차단하고 있을 수 있습니다. iframe을 허용하는 HTML 블록이나 임베드 블록을 사용하세요. 그래도 플랫폼이 프레임을 지운다면 대신 [www.moldraw.com](https://www.moldraw.com/ko/)으로 링크하세요. ## 미리 보기 코드 조각이 불러오는 것과 같은 플레이어입니다. 결합을 그리거나 템플릿을 골라 보세요. 위쪽 바도 임베드의 일부입니다. ## 프레임 크기 정하기 너비가 100%라서 편집기가 넣은 단을 가득 채웁니다. 높이는 640픽셀로, 툴바와 작은 구조식에 충분합니다. 캔버스를 크게 하려면 `height` 값을 늘리세요. 짧은 페이지에서는 480 정도로 줄이고, 독자에게 공간이 더 필요하면 800 정도를 사용하세요. 휴대폰에서는 프레임이 높을수록 스크롤이 늘어납니다. 높이를 용도에 맞추세요. 간단한 스케치는 낮게 두어도 되고, [반응식](https://www.moldraw.com/ko/tools/free-chem-tools/chemical-reaction-drawer.html)은 공간이 더 필요합니다. ## MolDraw에서 열기 플레이어 안의 **Open in MolDraw**를 누르면 새 탭에서 [www.moldraw.com](https://www.moldraw.com/ko/)의 전체 편집기가 열립니다. 여러분의 페이지는 그대로 열려 있습니다. 독자에게 한 번만 알려 주세요: 여기서 스케치하고, 전체 화면이 필요하면 Open in MolDraw를 쓰라고요. ## 자주 묻는 질문 ### 누구를 위한 기능인가요? 자신의 글 옆에 분자 편집기를 두고 싶은 화학 블로거, 교육자, LMS 저자, 문서 작성자, 앱 개발자를 위한 기능입니다. 로고나 스크린숏만 필요하다면 적합하지 않습니다. 그럴 때는 MolDraw로 링크하거나 이미지를 사용하세요. ### 독자에게 계정이 필요한가요? 아니요. 독자는 가입하지 않고도 내 사이트의 프레임 안에서 그릴 수 있습니다. 전체 편집기가 필요하면 Open in MolDraw를 누르면 됩니다. ### 붙여 넣은 뒤에 크기를 바꿀 수 있나요? 네. 코드 조각의 `height`를 수정하세요. 레이아웃에 고정 너비가 필요한 경우가 아니면 `width="100%"`는 그대로 두세요. 이 페이지의 미리 보기는 넓은 화면에서 640픽셀 높이이고 휴대폰에서는 더 낮습니다. ### 프레임이 비어 있어요. 어떻게 하나요? 프레임이 비어 있다면 대개 호스트가 iframe을 차단한 것입니다. 플랫폼의 HTML 블록이나 임베드 블록으로 바꾸세요. 그래도 안 되면 일반 링크로 독자를 [www.moldraw.com](https://www.moldraw.com/ko/)으로 안내하세요. 최종 업데이트: 2026년 10월 14일 ## 관련 도구 & 가이드 [NMR 스펙트럼 뷰어](https://www.moldraw.com/ko/tools/nmr-viewer/), [IR 스펙트럼 뷰어](https://www.moldraw.com/ko/tools/ir-viewer/), [질량 스펙트럼 뷰어](https://www.moldraw.com/ko/tools/mass-spec-viewer/)도 사용해 보세요. 모두 무료이며 브라우저에서 실행됩니다. [**NMR 스펙트럼 뷰어**1H 및 13C NMR 파일 열기](https://www.moldraw.com/ko/tools/nmr-viewer/)[**IR 스펙트럼 뷰어**피크와 작용기 찾기](https://www.moldraw.com/ko/tools/ir-viewer/)[**질량 스펙트럼 뷰어**동위원소, 부가물, 손실](https://www.moldraw.com/ko/tools/mass-spec-viewer/)[**UV-Vis 스펙트럼 뷰어**최대 흡수 파장, 비어–람베르트, 띠 간격](https://www.moldraw.com/ko/tools/uv-vis-viewer/)[**분광학 가이드**모든 판독 가이드](https://www.moldraw.com/guides/)[**전체 화학 도구**변환기, 계산기, 뷰어](https://www.moldraw.com/ko/tools/)[**MolDraw 편집기**브라우저에서 구조식 그리기](https://www.moldraw.com/ko/)[**MolDraw 배우기**짧은 실습 강의](https://www.moldraw.com/learn/)