7월 1일 Notion 3.6 업데이트로 HTML 블록이 정식 출시됐습니다. 노션 페이지 안에서 ROI 계산기를 돌리고, 주간 보고 대시보드를 펼치고, 심지어 테트리스를 칠 수 있다면 어떨까요? HTML 블록은 임베드가 아니라, 노션 안에서 바로 동작하는 미니 앱입니다.
이번 글에서는 직접 써 보며 정리한 만드는 방법, 실전 활용, 한계와 우회법을 영상과 함께 정리했습니다.
HTML 블록이란?
웹사이트와 앱의 대부분은 HTML, CSS, JavaScript로 만들어집니다. HTML 블록은 이 세 가지를 노션 페이지 한 칸 안에 넣을 수 있게 해 주는 새 블록 유형이에요.
HTML, CSS, JavaScript — 코딩 몰라도 괜찮아요
HTML 블록 설명을 보면 HTML, CSS, JavaScript(줄여서 JS)라는 단어가 자주 나옵니다. 개발자가 아니어도 역할만 이해하면 충분합니다. 집을 짓는다고 생각해 보세요.
HTML은 뼈대입니다. “여기에 제목이 있고, 여기에 입력 칸이 있고, 여기에 버튼이 있다”처럼 무엇이 어디에 있는지를 정합니다. 노션으로 치면 블록의 종류와 순서를 정하는 것과 비슷합니다.
CSS는 꾸미기입니다. 글자 크기, 색상, 여백, 둥근 모서리, 카드 배경색처럼 어떻게 보일지를 담당합니다. 노션에서 텍스트 색을 바꾸거나 콜아웃 스타일을 고르는 것과 같은 역할이에요.
JavaScript (JS)는 움직임입니다. 버튼을 누르면 숫자가 계산되고, 필터를 클릭하면 목록이 바뀌고, 게임 캐릭터가 움직이는 것처럼 사용자 행동에 반응하는 부분입니다. HTML이 “계산기 틀”이라면, JS는 “실제로 계산해 주는 엔진”입니다.
세 가지가 합쳐져야 계산기, 대시보드, 퀴즈 같은 인터랙티브 UI가 완성됩니다. 직접 코드를 작성할 필요는 없습니다. Notion AI, Claude, Cursor에게 “부가세 계산기 만들어줘”라고 말하면 AI가 HTML·CSS·JS를 알아서 작성해 줍니다. 우리는 결과물이 잘 동작하는지 확인하고, 필요하면 “색을 더 진하게”, “입력 칸 하나 더 추가해줘”처럼 수정을 요청하면 됩니다.
슬래시 메뉴에서 /HTML을 입력하면 블록을 만들 수 있습니다. 계산기, 퀴즈, 조직도, 화이트보드, 미니 게임, 프로세스 다이어그램처럼 클릭·입력·드래그가 필요한 것을 페이지 안에 바로 넣을 수 있습니다. 블록 너비를 조절할 수 있고, 팝업 모드로 전환하면 전체 화면에 가깝게 볼 수도 있습니다.
요금제 안내도 미리 알아두시면 좋습니다.
| 기능 | 이용 가능 범위 |
|---|---|
| HTML 블록 보기·사용 | 모든 요금제 (무료 포함) |
| HTML 블록 AI로 생성 (Notion AI) | Business, Enterprise |
| 다른 사람이 만든 HTML 공유·배포 | 모든 요금제 |
HTML 블록 자체는 무료 플랜에서도 됩니다. Notion AI로 “만들어줘” 하는 건 Business 이상이에요. Notion AI가 없으면 Claude + Notion MCP로 노션에 직접 생성하거나, Claude·Cursor로 코드를 만든 뒤 업로드하면 됩니다.
만드는 방법 3가지
1. Notion AI로 만들기
노션 페이지에서 /HTML을 입력한 뒤, AI에게 원하는 기능을 한국어로 구체적으로 설명하면 됩니다. Notion AI로 만들면 노션 기본 디자인 시스템이 자동 적용돼서, 주변 블록과 자연스럽게 어울립니다.
핵심 프롬프트 한 줄 — 이 문구가 없으면 코드만 출력되고 HTML 블록이 생성되지 않습니다.
HTML 임베드 블록을 생성한 후 실행해줘
수정은 노션 안에서 코드를 직접 편집하는 방식이 아닙니다. “숫자 포맷을 원화로 바꿔줘”, “입력 항목 하나 더 추가해줘”처럼 AI에게 다시 요청하거나, HTML 파일을 다운로드해서 편집한 뒤 재업로드하는 방식으로 진행합니다.
2. Claude · ChatGPT · Cursor로 만들기
Notion AI가 없거나, 이미 Claude·Cursor 워크플로우에 익숙하다면 외부 AI로 HTML을 만든 뒤 노션에 올리면 됩니다.
- AI에게 HTML/CSS/JS 단일 파일로 생성 요청
- 브라우저에서 미리보기 확인
.html파일로 저장- 노션 HTML 블록에 업로드
복잡한 HTML, 브랜드 디자인 시스템, 여러 버전을 관리하는 작업은 Cursor가 특히 편합니다. 프로젝트 폴더에 design.md를 두고 참조시키면 납품 품질을 반복 생산하기 좋습니다.
3. 노션 MCP + Claude로 만들기
Claude 등 외부 AI에 Notion MCP를 연결하면, HTML 블록을 노션 페이지에 직접 생성할 수 있습니다. 파일을 다운로드했다가 다시 업로드하는 단계 없이, AI가 MCP를 통해 노션 안에 HTML 블록을 만들어 줍니다.
- Claude(또는 MCP를 지원하는 AI)에 Notion MCP 연결
- 만들고 싶은 위젯을 설명하고, “@페이지명”으로 삽입할 노션 페이지 참조
- “HTML 임베드 블록을 생성한 후 실행해줘” 문구 포함
- AI가 MCP로 HTML 블록을 생성 → 노션 페이지에서 바로 확인
Notion AI 없이 Business 플랜 이상이 필요한 “노션 안에서 AI 생성” 흐름을 쓰기 어려울 때, MCP + Claude 조합이 특히 유용합니다. @design.md, @프로젝트 DB처럼 노션 페이지를 참조시키면 Notion AI와 비슷하게 맥락 있는 HTML 블록을 받을 수 있어요.
다만 MCP로 HTML 블록을 생성할 수 있다는 것과, HTML 블록이 DB와 실시간으로 연동된다는 것은 별개입니다. MCP 생성도 결과물은 생성 시점 스냅샷이며, DB가 바뀌어도 HTML은 자동 갱신되지 않습니다.
실전 사례 — 컨설팅 주간 HTML 보고
이번 영상의 메인 시연은 실제 컨설팅 프로젝트 DB와 할 일 DB를 참조해 주간 업무 보고를 HTML로 받는 워크플로입니다.
준비물
@design.md— 디자인 가이드 페이지@컨설팅 프로젝트 DB— 프로젝트 현황@할 일 DB— 이번 주 할 일
프롬프트 예시 (영상 자료 prompts_gift.md 1-B와 동일)
[디자인 가이드 문서]와 [프로젝트 DB], [할 일 DB] 데이터를 기반으로 주간 업무 보고서를 구현하는 단일 HTML 코드를 작성해 줘. 대괄호 부분은 실제 문서와 데이터베이스로 연결해서 사용할게.
출력 형식: 외부 파일 참조 없이 하나의 HTML 안에 CSS와 JS를 모두 포함할 것
Notion 최적화: Notion HTML 블록(Embed)에 삽입 시 정상적으로 렌더링 및 작동할 것
데이터 처리: 참조한 DB 데이터를 스냅샷 형태로 HTML 내부에 직접 포함시켜 화면에 렌더링할 것
UI/UX 설계: 데이터 특성을 분석하여 KPI, 필터, 카드 배치 등 세부 레이아웃을 가장 효과적인 대시보드 형태로 구성할 것
디자인 시스템: 참조한 디자인 가이드 문서의 스타일 규칙을 엄격하게 적용할 것
안내 문구: 보고서 내에 "이 보고서는 DB 스냅샷 기준이며, 실시간 연동되지 않습니다."라는 문구를 명확히 표시할 것
출력 제한: 부가적인 설명 없이 완성된 HTML 코드만 출력할 것
결과물에는 KPI 4카드, 프로젝트별 현황, 할 일 필터(완료/진행/마감임박)가 포함됩니다. Status 필터를 클릭하면 상태별로 목록이 바뀌지만, 이 상태는 내 브라우저에만 저장됩니다.
PDF 추가 팁 — 노션 기본 차트·대시보드는 PDF로 내보내면 레이아웃이 깨지는 경우가 많습니다. HTML 블록으로 대시보드를 만든 뒤 Agent에게 “PDF 만들어서 이 페이지에 넣어줘”라고 요청하면, 같은 페이지에 HTML(인터랙티브) + PDF(공유·인쇄용)를 함께 둘 수 있습니다.
HTML 템플릿 재활용 — 레이아웃 고정의 정석
노션 HTML 블록은 디자인을 블록 안에서 직접 수정할 수 없습니다. AI에게 “템플릿 유지, 데이터만” 요청해도 레이아웃이 조금씩 달라질 수 있어요.
디자인이 마음에 들면 아래 흐름으로 레이아웃을 100% 고정할 수 있습니다.
- 노션에서 HTML 파일 다운로드
weekly_report_template.html처럼 코드로 보관 (Git 등)- 매주 Cursor에서
REPORT_DATA만 DB 스냅샷으로 교체 — CSS·HTML 구조는 유지 - 브라우저 미리보기 → 노션 재업로드
Agent로 매주 재생성하는 방식(1-E)은 빠르지만 레이아웃이 변할 수 있고, 템플릿 DATA 갱신(14) 방식은 픽셀 단위로 레이아웃을 고정할 때 씁니다.
design.md — 디자인 일관성 유지
워크스페이스에 design.md 페이지를 만들어 두고 “@design.md 참고해서 만들어줘”라고 요청하면, 색·폰트·카드 스타일이 매번 일관되게 나옵니다. Notion AI 기본 디자인 위에 고객 브랜드 규칙을 덮어쓰는 패턴이에요.
| 토큰 | 값 | 용도 |
|---|---|---|
--color-primary | #2C26AE | 메인 강조, 버튼, 헤더 |
--color-bg-sub | #F7F6F3 | 카드·패널 배경 |
--color-text | #37352F | 본문 텍스트 |
영상 자료의 design.md 파일을 복사해 노션 페이지로 붙여 넣고, 본인 브랜드 색상으로 수정해 사용하시면 됩니다.
업무·팀·학습 활용 사례
HTML 블록은 “노션을 대체하는 앱”이 아니라, 제안·교육·온보딩을 설득력 있게 보여 주는 레이어로 쓰는 게 맞습니다.
업무 도구
- 부가세·사업소득·기타소득 계산기
- ROI / TCO 계산기 (고객 미팅 중 팝업으로 전체 화면 시연)
- 프로젝트 D-Day 카운트다운
- 주간 리포트·체크리스트 UI
팀·학습
- 온보딩 체크리스트 (단계별 가이드·복사 문구)
- 플래시카드 학습 위젯
- 미션 → 퀴즈 → Congratulations 흐름
- 사다리 타기, 테트리스 등 미니게임
컨설턴트·영업
- As-Is / To-Be 비교표 (탭 전환)
- 프로젝트 구축 타임라인
- MECE 시스템 분류 인터랙티브 표
- 회의록 시각화 (타임라인·카드형)
고객 페이지에는 HTML 위에 “데모용·수치는 예시” Callout을 두시면 신뢰가 올라갑니다.
무료 요금제에서도 대시보드 만들기
노션 네이티브 대시보드 보기는 비즈니스 플랜 전용입니다. HTML 블록은 무료 요금제에서도 DB를 참조한 대시보드를 만들 수 있어요. DB 데이터를 스냅샷으로 HTML에 포함시키면, 담당자·상태·프로젝트별 필터·그래프를 한 화면에 구성할 수 있습니다.
다만 이 방식은 실시간 연동이 아닙니다. DB가 업데이트되어도 HTML은 자동으로 바뀌지 않으므로, 매주 Agent로 재생성하거나 템플릿 DATA 갱신 방식을 사용해 주세요.
알아둘 한계와 우회법
HTML 블록은 강력하지만, 노션 샌드박스 안에서 동작합니다. 직접 써 보면서 확인한 한계를 정리해 둡니다.
정적 HTML — DB 연동·갱신
| 기대 | 현실 |
|---|---|
| DB 속성을 읽어와 대시보드 자동 갱신 | DB 기반 HTML도 스냅샷일 뿐 |
| DB 업데이트 시 HTML도 따라 변경 | 보안·샌드박스로 워크스페이스와 격리 |
| HTML에서 만든 데이터 → 노션 DB 적재 | 현재 불가 (향후 업데이트 기대) |
동적 데이터 위젯 vs 정적·로컬 위젯
| 어려운 것 | 가능한 것 |
|---|---|
| 캘린더 (외부 일정 연동) | 명언 위젯 |
| 환율·주가 (실시간 fetch) | 인스턴트 할 일 목록 |
| 날씨 API | ROI 계산기 (입력→로컬 계산) |
외부 API로 데이터를 주고받는 위젯은 불가합니다. HTML 안에서만 도는 상호작용은 가능합니다. 외부 프레임워크, 폰트, SVG 불러오기는 가능합니다.
팀 협업·로컬 저장
필터·화이트보드·입력값은 본인 브라우저에만 저장됩니다. 다른 팀원 PC에서 내 필터 상태가 보이지 않으므로, 개인 탐색·데모·교육에는 적합하고 팀 공유 상태에는 적합하지 않습니다.
우회법 요약
| 필요 | 대안 |
|---|---|
| DB 연동 실시간 대시보드 | Notion API + Make, 외부 호스팅 |
| 주기적 시각화 보고서 | 커스텀 에이전트 자동화 |
| 팀 공유 화이트보드 | Miro, FigJam |
| 레이아웃 100% 고정 | HTML 다운로드 → DATA만 갱신 → 재업로드 |
자주 묻는 질문
Q. HTML 블록은 무료 요금제에서도 쓸 수 있나요?
네. HTML 블록 보기·사용·공유는 모든 요금제에서 가능합니다. Notion AI로 HTML을 생성하는 기능만 Business, Enterprise 플랜에서 사용할 수 있습니다. Notion AI가 없으면 Claude나 Cursor로 HTML을 만든 뒤 업로드하면 됩니다.
Q. “HTML 만들어줘”라고만 하면 왜 블록이 안 생기나요?
Notion AI에게 “HTML 임베드 블록을 생성한 후 실행해줘”라는 문구를 반드시 포함해야 합니다. 이 문구 없이는 코드만 출력되고 HTML 블록이 생성되지 않습니다.
Q. DB를 연결하면 실시간으로 대시보드가 갱신되나요?
아닙니다. HTML 블록은 생성 시점의 DB 스냅샷을 HTML 내부에 포함하는 방식입니다. DB가 바뀌어도 HTML은 자동 갱신되지 않습니다. 매주 Agent로 재생성하거나, 템플릿 DATA 갱신 방식을 사용해 주세요.
Q. 노션 안에서 HTML 코드를 직접 수정할 수 있나요?
현재는 불가합니다. HTML 파일을 다운로드 → 로컬/Cursor에서 편집 → 재업로드하는 방식으로 수정합니다. 레이아웃을 고정하려면 템플릿 파일로 보관하고 DATA만 갱신하는 방식을 권장합니다.
Q. Notion MCP로 HTML 블록을 만들 수 있나요?
네. Claude 등 외부 AI에 Notion MCP를 연결하면 HTML 블록을 노션 페이지에 직접 생성할 수 있습니다. “HTML 임베드 블록을 생성한 후 실행해줘” 문구와 함께 @페이지명으로 삽입 위치를 지정해 요청하세요. 다만 생성된 HTML은 DB 실시간 연동이 아닌 스냅샷입니다.
영상에서 사용한 자료 다운로드
마무리
노션 HTML 블록은 정적 인터랙티브 위젯입니다. DB 실시간 연동 대시보드가 아니라, 정기 스냅샷 리포트·제안용 계산기·교육용 퀴즈로 포지셔닝하면 기대치에 맞게 잘 쓸 수 있습니다.
- 만드는 법 =
@페이지·DB 참조 + Notion AI / Claude·Cursor / Notion MCP → 생성 - 디자인 고정 =
design.md참조 + HTML 템플릿 DATA 갱신 - PDF = HTML 완성 후 Agent PDF 생성 → 같은 페이지에 삽입
- 한계 = DB 실시간 연동 ❌, 필터 상태 = 내 PC만 (MCP 생성은 ⭕)
영상 설명란에서 프롬프트와 HTML 샘플 파일을 받아 바로 써 보시면 됩니다. 궁금한 점은 댓글이나 네이버 카페에 남겨 주세요.작성: 전시진 | 시리얼(Sireal)
