📄 Notion Page Viewer
Notion 페이지의 컨텐츠를 웹에서 볼 수 있는 Streamlit 앱입니다.
✨ 주요 기능
🔍 4가지 보기 모드
- 전체 컨텐츠 - 토글, 이미지, 하위 페이지까지 모든 컨텐츠 표시
- 제목 + 이미지 - 메인페이지의 제목과 이미지만 표시
- 하위 페이지 - 연결된 하위 페이지들의 제목 리스트
- 원본 데이터 - JSON 형태의 원본 데이터 (디버깅용)
🚀 빠른 시작
1. 설치
git clone https://github.com/ar-codelabs/MCP_NotionMCP_Webviewer.git
cd MCP_notion_webviewer
# 설치
pip install -r requirements.txt
2. Notion 설정
- developers.notion.com/)에서 Integration 생성
- Integration Token 복사
- 보고 싶은 Notion 페이지에 Integration 연결
- 페이지 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 찾기
- Notion 페이지 URL:
https://notion.so/페이지제목-abc123def456... - 마지막 하이픈 뒤의 32자리 문자열이 페이지 ID
- 하이픈 제거:
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을 사용하므로 일정 시간 후 만료될 수 있습니다
- 대용량 페이지의 경우 로딩 시간이 길어질 수 있습니다