customization-guide > Notionpresso 구조 이해와 커스터마이징
Notionpresso 구조 이해와 커스터마이징
Notionpresso을 효과적으로 커스터마이징하기 위해서는 먼저 기본 구조와 데이터 흐름을 이해해야 합니다. 이 섹션에서는 Notion 데이터의 구조를 살펴보고, 이를 바탕으로 커스텀 컴포넌트를 만드는 방법을 설명합니다.
데이터 구조 이해하기
Notionpresso이 사용하는 Notion 데이터는 JSON 형식으로 구성되며, 페이지 정보와 각 블록의 세부 내용을 포함합니다. 이 구조를 이해하는 것이 효과적인 커스터마이징의 첫 걸음입니다.
기본 데이터 구조
{
"object": "page",
"id": "page-id",
"created_time": "2024-09-20T13:54:00.000Z",
"last_edited_time": "2024-09-21T04:28:00.000Z",
"cover": null,
"icon": null,
"parent": {
"type": "page_id",
"page_id": "parent-page-id"
},
"properties": {
"title": {
"id": "title",
"type": "title",
"title": [
{
"type": "text",
"text": {
"content": "페이지 제목",
"link": null
},
"annotations": {
"bold": false,
"italic": false,
"color": "default"
},
"plain_text": "페이지 제목"
}
]
}
},
"blocks": [
{
"object": "block",
"id": "block-id-1",
"type": "toggle",
"toggle": {
"rich_text": [
{
"type": "text",
"text": {
"content": "토글 내용",
"link": null
},
"annotations": {
"bold": false,
"italic": false,
"color": "default"
},
"plain_text": "토글 내용"
}
],
"color": "default"
},
"blocks": [
{
"object": "block",
"id": "block-id-2",
"type": "paragraph",
"paragraph": {
"rich_text": [
{
"type": "text",
"text": {
"content": "토글 내부 단락",
"link": null
},
"annotations": {
"bold": false,
"italic": false,
"color": "default"
},
"plain_text": "토글 내부 단락"
}
],
"color": "default"
}
}
]
}
]
}
주요 구조 요소
-
페이지 메타데이터:
id,created_time,last_edited_time,parent등 페이지의 기본 정보를 포함합니다. -
cover와 icon: 페이지의 커버 이미지와 아이콘 정보입니다. 커스텀 디자인을 적용할 때 이 정보를 활용할 수 있습니다.
-
properties: 페이지의 속성 정보로, 주로 페이지 제목(
title)이 포함됩니다. 커스텀 헤더를 만들 때 이 정보를 사용할 수 있습니다. -
blocks: 페이지 내용을 구성하는 블록들의 배열입니다. 각 블록은 다음 구조를 가집니다:
object: 항상 "block"id: 블록의 고유 식별자type: 블록의 타입 (예: "toggle", "paragraph", "heading_1" 등)[type]: 블록 타입에 해당하는 키로, 해당 블록의 구체적인 내용을 포함합니다.blocks: 하위 블록들의 배열. 이를 통해 재귀적인 구조를 형성합니다.
-
재귀적 구조:
blocks배열 내의 각 블록은 다시blocks배열을 가질 수 있어, 중첩된 구조를 표현할 수 있습니다. 이는 토글, 목록 등의 중첩된 콘텐츠를 커스터마이징할 때 중요합니다. -
rich_text: 대부분의 텍스트 콘텐츠는
rich_text배열로 표현되며, 텍스트의 스타일 정보(annotations)를 포함합니다. 이를 통해 텍스트 스타일을 세밀하게 커스터마이징할 수 있습니다.
커스터마이징을 위한 컴포넌트 구조
Notionpresso의 기본적인 컴포넌트 구조는 다음과 같습니다:
┌────────────────────────────────────────────────────────────────┐ │ <Notion> │ │ ┌────────────────────────────────────────────────────────┐ │ │ │ <Cover /> │ │ │ │ // Page cover image │ │ │ └────────────────────────────────────────────────────────┘ │ │ │ │ ┌────────────────────────────┐ │ │ │ <Body> │ │ │ │ ┌──────────────────────┐ │ │ │ │ │ <Title /> │ │ │ │ │ │ // Page title │ │ │ │ │ └──────────────────────┘ │ │ │ │ ┌──────────────────────┐ │ │ │ │ │ <Blocks> │ │ │ │ │ │ ┌──────────────────┐ │ │ │ │ │ │ │<Block type="...">│ │ │ │ │ │ │ │ // e.g. Heading │ │ │ │ │ │ │ └──────────────────┘ │ │ │ │ │ │ ┌──────────────────┐ │ │ │ │ │ │ │<Block type="...">│ │ │ │ │ │ │ │ // e.g. Para │ │ │ │ │ │ │ └──────────────────┘ │ │ │ │ │ │ ... │ │ │ │ │ │ // More blocks │ │ │ │ │ └──────────────────────┘ │ │ │ └────────────────────────────┘ │ │ │ └────────────────────────────────────────────────────────────────┘
이 구조에서 <Body> 컴포넌트는 전체 너비의 약 60%를 차지하며 중앙에 정렬됩니다. 이 레이아웃을 기반으로 각 컴포넌트를 커스터마이징할 수 있습니다.
커스터마이징 전략
-
블록별 커스텀 컴포넌트: 각 블록 타입(
paragraph,heading_1,toggle등)에 대해 커스텀 컴포넌트를 만들어 기본 스타일과 동작을 오버라이드할 수 있습니다. -
스타일 커스터마이징: CSS 변수와 클래스를 활용하여 전체적인 디자인을 조정할 수 있습니다.
-
레이아웃 수정:
<Body>컴포넌트의 너비나 정렬을 조정하여 전체 레이아웃을 변경할 수 있습니다. -
재귀적 렌더링 활용: 중첩된 블록 구조를 활용하여 복잡한 레이아웃이나 인터랙션을 구현할 수 있습니다.
-
메타데이터 활용: 페이지의 메타데이터, 커버 이미지, 아이콘 등을 활용하여 풍부한 UI를 구성할 수 있습니다.
이러한 구조와 전략을 이해하면, Notionpresso을 기반으로 고도로 커스터마이즈된 Notion 기반 웹사이트를 만들 수 있습니다. 다음 섹션에서는 각 요소별 구체적인 커스터마이징 방법을 살펴보겠습니다.