팀 회의록 페이지에서 구글 캘린더를 찾으려고 링크를 클릭했다가 탭 5개가 동시에 열린 적 있으세요? 저는 매일 그랬어요.
프로젝트 대시보드 확인하려고 노션에서 나갔다가, 다시 돌아와서 어디까지 봤는지 찾느라 시간을 쓰는 게 반복됐죠. '이거 노션 안에서 바로 못 보나?' 하는 생각이 들었어요.
그래서 시작한 게 iframe이에요. 처음엔 "This site does not allow embedding"이라는 빨간 오류만 5번 봤지만, 결국 회의록 페이지에 캘린더, 애널리틱스 대시보드, 피드백 폼을 전부 넣는 데 성공했어요.
오늘은 그 삽질 과정에서 배운 걸 정리해볼게요. 단계별 방법부터, 만날 수밖에 없는 오류 4가지, 그리고 진짜 안 될 때 쓰는 우회법까지요.
노션 iframe, 왜 필요할까요?
iframe은 노션 페이지 안에 다른 웹사이트 콘텐츠를 보여주는 작은 창이에요. 링크를 클릭해서 새 탭으로 가는 대신, 지금 보고 있는 페이지에서 바로 확인할 수 있죠.
예를 들어볼게요. 주간 회의 노트에 팀 캘린더를 iframe으로 넣어두면, 회의하면서 다음 주 일정을 바로 확인할 수 있어요. 탭을 왔다 갔다 하지 않아도 돼요.
제가 실제로 쓰는 방식은 이래요:
프로젝트 대시보드: 노션 페이지에 구글 애널리틱스나 메타베이스 차트를 넣어서 실시간 지표를 확인해요
고객 피드백 폼: 구글 폼이나 타입폼을 임베드해서 팀원들이 바로 응답을 볼 수 있게 했어요
유튜브 튜토리얼: 온보딩 문서에 설명 영상을 넣어두니까 신입 분들이 훨씬 빨리 이해하더라고요
다만 노션은 모든 웹사이트를 iframe으로 받지 않아요. 보안 정책 때문에 임베드를 막아둔 사이트들이 있거든요. 그래도 유튜브, 구글 맵, 구글 캘린더, 피그마, 에어테이블 같은 협업 도구들은 대부분 잘 돼요.
핵심은 이거예요. 링크는 당신을 다른 곳으로 보내지만, iframe은 당신이 있는 곳에서 모든 걸 보여줘요.
노션에 iframe 넣는 4단계
처음 해보면 어디서부터 시작해야 할지 막막할 수 있어요. 한 번만 해보면 다음부턴 1분 안에 끝나요. 순서대로 따라와 보세요.
1단계: 임베드용 URL 복사하기
먼저 노션에 넣고 싶은 콘텐츠가 있는 사이트로 가세요. 대부분의 서비스는 '공유' 또는 '임베드' 옵션을 제공해요.
여기서 중요한 게 있어요. 두 가지 종류의 링크를 볼 수 있는데:
<iframe> HTML 코드: 길게 늘어진 코드 덩어리
깔끔한 URL: https로 시작하는 주소
노션에서는 거의 항상 깔끔한 URL을 써야 해요. HTML 코드 전체를 붙여넣으면 안 돼요.
실전 예시를 볼게요:
유튜브: 영상 아래 '공유' 버튼 → 링크 복사 (또는 임베드 전용 링크)
구글 맵: 장소 검색 → '공유' → '지도 퍼가기'에서 링크 복사
구글 폼/캘린더: 상단의 '공유' 또는 '게시' 옵션에서 공개 보기 링크 복사
URL을 복사했으면 다음 단계로 가요.
2단계: 노션에서 임베드 블록 추가
노션 페이지를 열고 콘텐츠를 넣고 싶은 곳으로 커서를 옮기세요. 빈 줄에서 /embed를 입력하면 돼요.
또는 왼쪽에 보이는 작은 + 버튼을 눌러서 블록 목록에서 'Embed'를 선택할 수도 있어요.
그럼 링크를 입력하라는 빈 박스가 나타나요. 여기가 바로 URL을 붙여넣을 곳이에요.
3단계: URL 붙여넣고 임베드 만들기
복사한 URL을 붙여넣으세요. 잠시 후 노션이 "Create embed" 버튼을 보여줄 거예요. 클릭하면 빈 박스가 실제 콘텐츠로 바뀌어요.
가끔 노션이 북마크 카드를 만들 때가 있어요. 이럴 땐 당황하지 마시고, 북마크를 지우고 다시 /embed 명령어로 시작하거나, 북마크 블록 메뉴(점 세 개)를 눌러서 '임베드로 전환' 옵션을 찾아보세요.
핵심은 링크가 일반 텍스트가 아니라 Embed 블록 안에 있어야 한다는 거예요.
4단계: 크기 조정과 배치
임베드가 로드되면 블록 위로 마우스를 가져가보세요. 양옆에 조절 핸들이 보일 거예요. 드래그해서 너비를 조정할 수 있어요.
넓게 보고 싶다면 페이지를 전체 너비 모드로 바꾼 다음 조정하면 더 편해요.
레이아웃을 깔끔하게 유지하려면 이렇게 해보세요:
임베드를 노트 옆에 컬럼으로 배치
토글 블록 안에 넣어서 필요할 때만 펼치기
그러면 iframe이 페이지를 장악하는 게 아니라, 워크스페이스의 자연스러운 일부처럼 보여요.
여기까지 따라오셨나요? 기본은 이게 전부예요. 하지만 현실에선 오류를 만날 때가 많죠. 이제 그 이야기를 해볼게요.
자주 만나는 오류 4가지와 해결법
첫 시도에 성공하면 좋겠지만, 실제로는 오류 메시지를 보게 될 확률이 높아요. 저도 처음 회사 대시보드를 넣으려다가 "refused to connect"를 3번 연속 봤거든요.
다행히 대부분의 문제는 비슷한 패턴이에요. 한번 알아두면 빠르게 해결할 수 있어요.
1. "This site does not allow embedding" 오류
가장 자주 보는 벽이에요. 많은 웹사이트가 보안 헤더를 사용해서 다른 도메인의 iframe을 차단해요. 클릭재킹 같은 공격을 막으려는 거죠.
솔직히 이건 노션에서 해결할 수 있는 게 아니에요. 사이트 자체가 막아둔 거거든요.
대신 이렇게 해볼 수 있어요:
공개 보기 URL 찾기: 같은 서비스에서 "임베드 가능"이라고 명시한 다른 뷰가 있는지 확인하세요
대체 도구 사용: 같은 기능을 제공하는 다른 서비스 중 임베드를 지원하는 걸 찾아보세요
읽기 전용 대시보드: 일부 도구는 일반 페이지는 막지만 공개 대시보드는 허용해요
정 안 되면 일반 링크로 남겨두는 게 가장 안전해요. 억지로 우회하려다 더 복잡해질 수 있거든요.
2. 임베드 대신 북마크만 보일 때
링크를 붙여넣었는데 iframe이 아니라 북마크 카드만 나타나는 경우예요. iframe을 못 쓰는 게 아니라, 그냥 잘못된 블록 타입에 들어간 거예요.
노션이 친절하게 URL을 자동으로 북마크로 바꿔주거든요. 고마운데 지금은 필요 없죠.
해결법은 간단해요:
북마크를 지워요
/embed명령어로 시작하거나 + 메뉴에서 Embed 블록 선택같은 URL을 다시 붙여넣고 기다려요
도구에 따라선 일반 페이지 주소 대신 전용 '임베드 링크'가 필요할 수도 있어요. 서비스의 공유 옵션에서 "embed link"나 "public view"를 찾아보세요.
3. 빈 화면, 잘린 화면, 이상한 크기
iframe은 로드되는데 뭔가 이상해 보일 때가 있어요. 빈 박스만 보이거나, 콘텐츠가 잘렸거나, 너무 좁아서 쓸 수 없거나요.
대부분 크기 문제예요. 완전히 안 되는 건 아니에요.
먼저 해볼 것들:
드래그로 크기 조정: 블록 위에 마우스를 올려서 핸들을 좌우로 드래그해보세요
전체 너비 모드: 페이지가 좁은 뷰라면 전체 너비로 바꾸고 다시 조정해보세요
넓은 컬럼 배치: 일부 도구는 특정 비율을 기대해요. 더 넓은 컬럼 안에 넣으면 나아질 수 있어요
여러 크기를 시도했는데도 이상하다면, 원본 사이트에 문제가 있을 수 있어요. 반응형이 아니거나 고정 높이로 되어 있어서 프레임과 안 맞는 거죠. 그럴 땐 스크롤바를 받아들이거나, 링크로 대체하는 게 나아요.
4. 데스크톱에선 되는데 모바일 앱에선 안 될 때
노트북에선 완벽하게 보이는데, 핸드폰으로 같은 페이지를 열면 일부만 보이거나 아예 안 보이는 경우예요.
노션 모바일 앱은 인터랙티브 콘텐츠에 더 엄격한 제한이 있어요. 일부 iframe은 작은 화면에서 제대로 렌더링되지 않아요.
완벽한 해결책은 없지만:
중요한 콘텐츠는 iframe 아래에 텍스트 요약도 같이 남겨두세요
모바일에선 원본 링크를 클릭해서 보라는 안내를 추가하세요
반응형을 지원하는 도구인지 미리 확인하세요
저는 보통 iframe 바로 아래에 "모바일에서는 [이 링크]를 눌러주세요"라고 써둬요. 완벽하진 않지만 팀원들이 헤매지 않게 돼요.
iframe이 정말 안 될 때 우회 방법
모든 방법을 써봤는데도 안 되는 경우가 있어요. 사이트가 완전히 막아뒀거나, 기술적으로 불가능하거나요.
그럴 땐 포기하지 말고 다른 접근을 시도해보세요.
노션 기본 통합 기능 먼저 확인
iframe을 쓰기 전에 노션이 제공하는 내장 통합을 확인해보세요. 구글 드라이브, 피그마, 깃허브, 타입폼 같은 인기 도구들은 전용 임베드 옵션이 있어요.
링크를 붙여넣으면 노션이 자동으로 "Create [서비스명] embed" 버튼을 보여줄 거예요. 이게 있으면 그냥 클릭하세요. 일반 iframe보다 훨씬 안정적이에요.
직접 링크나 파일 업로드 사용
라이브 임베드가 꼭 필요한 게 아니라면, 간단한 방법도 있어요:
북마크 링크: 깔끔한 카드 형태로 보여줘요. 클릭하면 새 탭으로 가지만 보기는 좋아요
파일 업로드: PDF나 이미지라면 노션에 직접 올리는 게 나아요
스크린샷 캡처: 실시간 업데이트가 필요 없다면 스크린샷을 찍어서 붙여넣으세요
라이브 데이터가 필요 없다면 억지로 iframe을 고집할 이유가 없어요.
서드파티 위젯이나 프록시 도구 활용
마지막 수단으로 중간 다리 역할을 하는 도구를 쓸 수 있어요.
예를 들어:
Apption: 막힌 사이트를 노션에서 볼 수 있게 래핑해주는 서비스
Indify: 노션용 커스텀 위젯 생성기
Wixie: 외부 콘텐츠를 노션 친화적으로 바꿔주는 프록시
다만 이런 도구들은 보안과 속도 면에서 트레이드오프가 있어요. 민감한 데이터는 이 방식으로 넣지 마세요.
상황별로 어떤 방법을 쓸지 정리해봤어요:
flowchart TD
A[콘텐츠를 노션에 넣고 싶다] --> B{실시간 업데이트 필요?}
B -->|아니오| C[스크린샷 또는 파일 업로드]
B -->|예| D{노션 기본 통합 있음?}
D -->|예| E[기본 임베드 사용]
D -->|아니오| F{iframe이 작동함?}
F -->|예| G[iframe 임베드]
F -->|아니오| H{보안상 중요한 데이터?}
H -->|예| I[링크만 사용]
H -->|아니오| J[서드파티 위젯 검토]
이 흐름을 따라가면 시간 낭비 없이 가장 적합한 방법을 찾을 수 있어요.
자주 묻는 질문
노션에 커스텀 HTML이나 자바스크립트를 넣을 수 있나요?
아니요, 노션은 보안상의 이유로 임의의 HTML이나 JavaScript 코드 실행을 막아요. 노션이 지원하는 임베드 형식이나 승인된 서비스만 사용할 수 있어요.
코딩이 필요한 위젯이 필요하다면 CodePen이나 JSFiddle에서 만든 뒤 그 URL을 임베드하는 방식으로 우회할 수 있어요.
브라우저에서는 되는데 노션 안에서는 안 되는 이유는?
웹사이트가 X-Frame-Options나 Content-Security-Policy 같은 보안 헤더를 설정해뒀기 때문이에요. 이 헤더들은 "다른 사이트의 iframe 안에서는 내 콘텐츠를 보여주지 마"라고 브라우저에게 말해요.
브라우저에서 직접 열 땐 문제없지만, 노션의 iframe 안에 들어가려고 하면 차단되는 거죠.
노션 페이지를 웹사이트로 퍼블리시하면 iframe도 작동하나요?
대부분 작동해요. 하지만 일부 서비스는 노션의 도메인에서만 임베드를 허용하고, 커스텀 도메인에서는 막을 수 있어요.
퍼블리시하기 전에 테스트용 공개 페이지를 만들어서 미리 확인해보는 게 좋아요. 문제가 있으면 게시 전에 대안을 준비할 수 있거든요.
한 노션 페이지를 다른 노션 페이지에 iframe으로 넣을 수 있나요?
기술적으로는 가능하지만 추천하지 않아요. 노션은 이미 "Synced Block" 기능이 있어서, 한 블록의 내용을 여러 페이지에서 동기화할 수 있거든요.
iframe으로 페이지를 중첩하면 로딩이 느려지고, 편집이 어려워지고, 모바일에서 문제가 생길 확률이 높아요. Synced Block이나 Database View를 대신 써보세요.
노션에서 iframe 쓰는 게 안전한가요?
신뢰할 수 있는 출처의 콘텐츠라면 안전해요. 유튜브, 구글 서비스, 공식 SaaS 도구들은 문제없어요.
하지만 출처를 모르는 사이트나 서드파티 프록시는 조심해야 해요. iframe은 기본적으로 외부 서버의 코드를 실행하는 거라서, 민감한 정보가 있는 페이지에선 검증된 서비스만 사용하세요.
마무리하며
처음 iframe을 시도할 때 5번 연속 실패했던 기억이 나네요. "왜 안 돼?"를 반복하다가, 결국 구글 캘린더가 노션 페이지에 뜨는 걸 보고 환호했죠.
지금 제 팀 워크스페이스엔 iframe이 20개 넘게 박혀있어요. 프로젝트 대시보드, 고객 피드백 폼, 실시간 서버 모니터링까지. 탭을 왔다 갔다 하던 시간이 줄어드니까 실제로 집중할 시간이 늘었어요.
오늘 정리한 4단계 방법, 4가지 오류 해결법, 그리고 우회 전략만 알아두면 대부분의 경우를 해결할 수 있을 거예요.
당장 노션을 열고 팀 캘린더부터 넣어보세요. 10분이면 첫 번째 iframe이 작동할 거예요. 오류 메시지가 떠도 당황하지 마시고, 이 글을 다시 펼쳐서 해당 섹션을 찾아보세요.
iframe 삽입하다가 막힌 부분이 있으면 댓글로 알려주세요. 같이 해결해볼게요.
