Getting Started

지원되는 블록

July 25, 2025

블록 유형	지원 여부	블록 타입 Enum	비고	상태
페이지	✅ 지원	`page`		✅
텍스트	✅ 지원	`text`	모든 텍스트 서식 옵션 지원	✅ 일부 타입은 아직 미지원이나 타이포그래피 페이지에서는 모두 지원
제목 1	✅ 지원	`header`		✅
제목 2	✅ 지원	`sub_header`		✅
제목 3	✅ 지원	`sub_sub_header`		✅
글머리 기호 목록	✅ 지원	`bulleted_list`		✅
번호 목록	✅ 지원	`numbered_list`		✅
인용	✅ 지원	`quote`		✅
구분선	✅ 지원	`divider`	가로선	✅
콜아웃	✅ 지원	`callout`		✅
칼럼	✅ 지원	`column`		✅
할 일 (체크박스)	✅ 지원	`to_do`		✅
토글	✅ 지원	`toggle`	`<details>`	✅
목차	✅ 지원	`table_of_contents`	`notion-utils`의 `getPageTableOfContents` 헬퍼 함수 참고	✅
수식 (블록)	✅ 지원	`equation`	katex via react-katex	✅
수식 (인라인)	✅ 지원	`text`	katex via react-katex	✅
링크	✅ 지원	`text`	외부 링크	✅
페이지 링크	✅ 지원	`page`	동일 워크스페이스 내 Notion 페이지로 링크	✅
외부 페이지 링크	✅ 지원	`text`	다른 워크스페이스의 Notion 페이지 또는 컨렉션 뷰로 링크	✅
북마크	✅ 지원	`bookmark`	외부 URL의 임베드 미리보기	✅
이미지	✅ 지원	`image`		✅
비디오	✅ 지원	`video`	`iframe`	✅
Figma	✅ 지원	`figma`	`iframe`
임베드	✅ 지원	`embed`	일반 `iframe` 임베드	✅
트윗	✅ 지원	`tweet`	Twitter 임베드 SDK 사용
Google 지도	✅ 지원	`maps`	`iframe`
Google 드라이브	✅ 지원	`drive`	Google 문서, 스프레드시트 등 커스텀 임베드
PDF	✅ 지원	`pdf`	S3 서명된 URL 및 [react-pdf] 사용(https://github.com/wojtekmaj/react-pdf)
파일	✅ 지원	`file`	S3 서명된 URL 사용 (일반 다운로드 파일)	✅
오디오	✅ 지원	`audio`	S3 서명된 URL 및 HTML5 `audio` 요소`audio` element	✅
코드 (블록)	✅ 지원	`code`	[prismjs]를 통한 코드 블록 구문 강조(https://prismjs.com/)	✅
코드 (인라인)	✅ 지원	`text`	인라인 코드 서식 (구문 강조 없음)	✅
컨렉션	✅ 지원		[데이터베이스]라고도 함()	✅
컨렉션 뷰	✅ 지원	`collection_view`	컨렉션은 컨렉션 뷰와 1:N 관계	✅
컨렉션 뷰 보드	✅ 지원	`collection_view`	`type = "board"` (칸반 뷰)	✅
컨렉션 뷰 리스트	✅ 지원	`collection_view`	`type = "list"` (세로 리스트 뷰)	✅
컨렉션 뷰 갤러리	✅ 지원	`collection_view`	`type = "gallery"` (그리드 뷰)	✅
컨렉션 뷰 테이블	✅ 지원	`collection_view`	`type = "table"` (기본 테이블 뷰)	✅
컨렉션 뷰 캘린더	❌ 미지원	`collection_view`	`type = "calendar"` (임베드 캘린더 뷰)	❌

타이포그래피

텍스트 색상

default

gray

brown

orange

yellow

green

blue

purple

pink

red

텍스트 배경

default some text

gray some text

brown some text

orange some text

yellow some text

green some text

blue some text

purple some text

pink some text

red some text

제목 1

제목 2

제목 3

글머리 기호 목록

항목 1

항목 2

항목 3

번호 목록

번호 1

번호 2

번호 3

중첩

번호 1

number one
number two
number three

number two
number three

인용

Vestibulum id ligula porta felis euismod semper.

구분선

콜아웃

Notion에서 칼럼을 만들려면 블록을 드래그하여 다른 블록의 끝에 놓아야 합니다

색상이 있는 콜아웃 블록

중첩된 콜아웃

number one

number one
number two
number three

number two
number three

칼럼

Notion 칼럼으로 콘텐츠를 배치할 수도 있습니다

Column 1

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Column 2

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Column 3

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

할 일

완료된 항목

미완료 항목

토글

토글 예시

토글 내용

수식

LaTeX 문법을 사용한 수학 수식입니다.

E = mc^2

\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}

\frac{d}{dx}\left( \int_{0}^{x} f(u)\,du\right)=f(x)

인라인 수식도 작동합니다: $x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}$

링크

Notion에서 텍스트를 선택하고 "링크"를 클릭하여 링크를 만들 수 있습니다.

다음은 예시 링크.

멘션

Notion에서 페이지와 마찬가지로 사람을 멘션할 수 있습니다: Hongbeom

현재 BlogPro에서 멘션은 아무 곳에도 링크되지 않습니다. 앞으로 커스텀 링크를 사용할 수 있게 될 예정입니다.

인라인 페이지

워크스페이스 내 다른 페이지에 대한 참조입니다.

다음을 포함한 다른 Notion 페이지로의 링크를 생성합니다:

페이지 제목

아이콘 (설정된 경우)

링크 기능

마우스 호버 시 미리보기

북마크

더 눈에 띄는 형식을 원한다면 북마크 블록을 만들 수 있습니다

BlogPro - Notion to Blog in seconds

Notion to Blog in seconds

https://blogpro.so/

피엔티 베르베린 500, 60정, 1개

쿠팡에서 피엔티 베르베린 500, 60정, 1개 구매하고 더 많은 혜택을 받으세요! 지금 할인중인 다른 기타건강식품 제품도 바로 쿠팡에서 확인할 수 있습니다.

https://link.coupang.com/a/cKZIYL

이미지

BlogPro supports image caption

비디오

YouTube에서

Notion에 YouTube URL을 붙여넣고 "비디오 임베드"를 클릭하면 YouTube 비디오를 임베드할 수 있습니다

비디오 파일

Notion에 로컬 파일을 드래그하여 비디오를 임베드할 수도 있습니다.

GIF 파일

BlogPro는 GIF도 지원합니다 (GIF는 비디오보다 용량이 크므로 비디오 사용을 권장합니다).

임베드

BlogPro는 Notion과 동일한 종횡비로 iframe으로 외부 사이트를 임베드합니다

트윗

Google 지도 임베드

Google Drive

Github gist

	const buffer = await fetch(url).then((r) => r.buffer())
	const content = buffer.toString('utf8')
	// then pass this where you like

view raw main.ts hosted with ❤ by GitHub

동기화 블록

BlogPro 사이트는 Notion의 테이블 데이터베이스여야 하며, 각 행은 블로그 글을 나타냅니다. BlogPro는 페이지 데이터베이스 속성을 사용하여 블로그 글에 정보를 추가합니다:

Description: 페이지 카드에서 각 글의 설명을 표시합니다

Hidden: 루트 / 페이지에서 블로그 글을 숨깁니다 (단, 고유 URL로는 여전히 접근 가능)

Authors: 블로그 글 작성자를 추가합니다. 속성은 반드시 person 타입이어야 합니다

Date: 글 작성일

선택 사항

Tags: 태그는 글 하단에 섹션과 키워드를 만드는 데 사용됩니다

템플릿의 속성을 삭제하지 마세요. 속성 이름은 대소문자를 구분하지 않으므로 Description과 description 모두 사용할 수 있습니다

동기화 블록의 토글 테스트

Tags: 태그는 글 하단에 섹션과 키워드를 만드는 데 사용됩니다

동기화 블록의 큰 토글

eqweqwrwe23q

파일

일반 파일

Notion에 파일을 드래그 앤 드롭하면 사용자가 다운로드할 수 있는 자산으로 표시됩니다

logo.zip 20.7 KB

오디오 파일

Notion에 오디오 파일을 드래그하면 이와 같은 재생 가능한 오디오 블록이 생성됩니다

코드

데이터베이스 뷰

보드 뷰

Not started

Card 2

In progress

Card 4

Completed

리스트 뷰

예시 페이지 3

갤러리 뷰

테이블 뷰

Name	Tags	Number	Checkbox	url	Column	Formula
Marco	tag 1tag 2tag 3	12		google.com	Oct 19, 2021
Andrea	tag 3tag 4	15		google.com	Sep 28, 2021
Tommy	tag 1tag 5	18		yahoo.com	Oct 5, 2021

색상 있는 테이블

Column 1	Column 2	Column 3
A	Value 1	Value A
B	Value 2	Value B
C	Value 3	Value C
D	Value 4	Value D
ㅤ	ㅤ	ㅤ

Made with BlogPro

Tags