📄 Notion Page Viewer

Notion 페이지의 컨텐츠를 웹에서 볼 수 있는 Streamlit 앱입니다.

✨ 주요 기능

🔍 4가지 보기 모드

1. 전체 컨텐츠 - 토글, 이미지, 하위 페이지까지 모든 컨텐츠 표시

2. 제목 + 이미지 - 메인페이지의 제목과 이미지만 표시

3. 하위 페이지 - 연결된 하위 페이지들의 제목 리스트

4. 원본 데이터 - JSON 형태의 원본 데이터 (디버깅용)

Related MCP server: NotionMCP

🚀 빠른 시작

1. 설치

git clone https://github.com/ar-codelabs/MCP_NotionMCP_Webviewer.git
cd MCP_notion_webviewer

# 설치
pip install -r requirements.txt

2. Notion 설정

1. developers.notion.com/)에서 Integration 생성

2. Integration Token 복사

3. 보고 싶은 Notion 페이지에 Integration 연결

4. 페이지 ID 복사 (URL에서 추출)

3. 설정 파일 수정 (Notion)

application/mcp.json 파일에서:

{
  "mcpServers": {
    "notion": {
      "command": "python3",
      "args": ["./application/mcp_server_notion.py"],
      "env": {
        "NOTION_API_KEY": "your_notion_integration_token",
        "NOTION_PAGE_ID": "your_notion_page_id"
      }
    }
  }
}

4. 실행

streamlit run application/app_webview_mcp_simple.py

📖 사용 방법

1. 웹 앱 접속

• 브라우저에서 접속

2. 4가지 버튼 활용

• 🔍 전체 컨텐츠: 페이지의 모든 내용을 구조적으로 표시

• 🖼️ 제목 + 이미지: 제목과 이미지만 깔끔하게 정리해서 표시

• 📑 하위 페이지: 연결된 하위 페이지들의 제목 목록과 링크

• 🔧 원본 데이터: 개발자용 JSON 데이터 확인

3. 지원하는 Notion 블록

• 텍스트 (paragraph)

• 헤딩 (heading_1, heading_2, heading_3)

• 리스트 (bulleted_list_item, numbered_list_item)

• 토글 (toggle)

• 이미지 (image)

• 코드 (code)

• 인용문 (quote)

• 컬럼 (column_list, column)

• 하위 페이지 (child_page)

🔧 고급 설정

Notion 페이지 ID 찾기

1. Notion 페이지 URL: https://notion.so/페이지제목-abc123def456...

2. 마지막 하이픈 뒤의 32자리 문자열이 페이지 ID

3. 하이픈 제거: abc123def456...

포트 변경

# MCP 방식
streamlit run application/app_webview_mcp_simple.py --server.port 8502

🛠️ 기술 스택

공통

• Frontend: Streamlit

• API: Notion API (notion-client)

• Language: Python 3.8+

MCP 방식 추가

• MCP: Model Context Protocol

• Architecture: Server-Client 분리

• Modularity: 재사용 가능한 MCP 서버

📝 주의사항

• Notion Integration에 페이지 읽기 권한이 있어야 합니다

• 이미지는 Notion의 임시 URL을 사용하므로 일정 시간 후 만료될 수 있습니다

• 대용량 페이지의 경우 로딩 시간이 길어질 수 있습니다