Pensieve MCP Server
by EmjayAhn
- pensieve-mcp
- api_server
- static
features.html•33 kB
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>기능 안내 - Pensieve</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
html {
scroll-behavior: smooth;
}
</style>
</head>
<body class="bg-gray-50">
<!-- Navigation -->
<nav class="bg-white shadow-sm border-b">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center py-4">
<div class="flex items-center">
<a href="/" class="text-2xl font-bold text-gray-900">🔮 Pensieve</a>
</div>
<div class="flex items-center space-x-6">
<a href="/features.html" class="text-indigo-600 font-medium">기능 안내</a>
<a href="/setup.html" class="text-gray-700 hover:text-gray-900 font-medium">MCP 설정</a>
<button id="login-btn" class="text-gray-700 hover:text-gray-900 font-medium">
로그인
</button>
<button id="register-btn" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition-colors duration-200">
시작하기
</button>
</div>
</div>
</div>
</nav>
<!-- Header -->
<section class="bg-gradient-to-br from-indigo-50 to-blue-50 py-16">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
Pensieve <span class="text-indigo-600">기능 안내</span>
</h1>
<p class="text-xl text-gray-600 leading-relaxed">
AI 대화 관리의 모든 기능을 자세히 알아보세요
</p>
</div>
</section>
<!-- Feature Categories -->
<section class="py-8 bg-white">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-lg p-6 border border-blue-200">
<div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-comments text-blue-600 text-2xl"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-2">Claude 대화에서</h3>
<p class="text-gray-600">Claude와 대화하면서 바로 사용할 수 있는 기능들</p>
</div>
<div class="bg-gradient-to-br from-green-50 to-emerald-50 rounded-lg p-6 border border-green-200">
<div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-globe text-green-600 text-2xl"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-2">웹페이지에서</h3>
<p class="text-gray-600">브라우저에서 편리하게 관리할 수 있는 기능들</p>
</div>
</div>
</div>
</section>
<!-- Claude Chat Features -->
<section class="py-16 bg-gradient-to-br from-blue-50 to-indigo-50">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
<i class="fas fa-comments text-blue-600 mr-3"></i>
Claude 대화에서 가능한 기능
</h2>
<p class="text-xl text-gray-600">Claude와 대화하면서 자연스럽게 사용할 수 있습니다</p>
</div>
<div class="space-y-12">
<!-- 자동 저장 -->
<div class="bg-white rounded-xl shadow-lg p-8 border">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
<div>
<div class="flex items-center mb-4">
<div class="bg-blue-100 rounded-lg p-3 mr-4">
<i class="fas fa-save text-blue-600 text-xl"></i>
</div>
<h3 class="text-2xl font-bold text-gray-900">자동 대화 저장</h3>
</div>
<p class="text-gray-600 mb-4">모든 대화가 자동으로 저장되며, 별도 조작이 필요 없습니다.</p>
<ul class="space-y-2 text-gray-600">
<li class="flex items-start">
<i class="fas fa-check text-green-500 mr-3 mt-1"></i>
<span>실시간 자동 저장</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mr-3 mt-1"></i>
<span>제목과 태그 자동 생성</span>
</li>
</ul>
</div>
<div class="bg-gray-50 rounded-lg p-4">
<div class="bg-green-100 border border-green-300 rounded-lg p-3 text-center">
<i class="fas fa-check-circle text-green-600 mr-2"></i>
<span class="text-green-700 font-medium">대화가 자동으로 저장되었습니다</span>
</div>
</div>
</div>
</div>
<!-- 대화 불러오기 -->
<div class="bg-white rounded-xl shadow-lg p-8 border">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
<div class="order-2 lg:order-1">
<div class="bg-gray-50 rounded-lg p-4 space-y-3">
<div class="bg-blue-100 rounded-lg p-3">
<div class="font-medium text-blue-900">👤 사용자</div>
<div class="text-blue-800 text-sm mt-1">"펜시브에서 React 관련 대화 불러와줘"</div>
</div>
<div class="bg-gray-100 rounded-lg p-3">
<div class="font-medium text-gray-900">🤖 Claude</div>
<div class="text-gray-700 text-sm mt-1">"React 관련 대화 3개를 찾았습니다..."</div>
</div>
</div>
</div>
<div class="order-1 lg:order-2">
<div class="flex items-center mb-4">
<div class="bg-purple-100 rounded-lg p-3 mr-4">
<i class="fas fa-history text-purple-600 text-xl"></i>
</div>
<h3 class="text-2xl font-bold text-gray-900">대화 불러오기</h3>
</div>
<p class="text-gray-600 mb-4">이전 대화를 자연스럽게 요청해서 불러올 수 있습니다.</p>
<ul class="space-y-2 text-gray-600">
<li class="flex items-start">
<i class="fas fa-check text-green-500 mr-3 mt-1"></i>
<span>"펜시브에서 Python 대화 불러와줘"</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mr-3 mt-1"></i>
<span>"어제 React 관련해서 얘기한 거 찾아줘"</span>
</li>
</ul>
</div>
</div>
</div>
<!-- 수동 저장 -->
<div class="bg-white rounded-xl shadow-lg p-8 border">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
<div>
<div class="flex items-center mb-4">
<div class="bg-green-100 rounded-lg p-3 mr-4">
<i class="fas fa-bookmark text-green-600 text-xl"></i>
</div>
<h3 class="text-2xl font-bold text-gray-900">수동 저장 & 태그</h3>
</div>
<p class="text-gray-600 mb-4">중요한 대화는 특별히 저장하고 태그를 붙일 수 있습니다.</p>
<ul class="space-y-2 text-gray-600">
<li class="flex items-start">
<i class="fas fa-check text-green-500 mr-3 mt-1"></i>
<span>"펜시브에 저장해줘"</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mr-3 mt-1"></i>
<span>"중요한 대화로 북마크해줘"</span>
</li>
</ul>
</div>
<div class="bg-gray-50 rounded-lg p-4 space-y-3">
<div class="bg-blue-100 rounded-lg p-3">
<div class="font-medium text-blue-900">👤 사용자</div>
<div class="text-blue-800 text-sm mt-1">"이 대화를 'API 설계' 태그로 펜시브에 저장해줘"</div>
</div>
<div class="bg-green-50 border border-green-200 rounded-lg p-3">
<div class="font-medium text-green-700">✅ 저장 완료</div>
<div class="text-green-600 text-sm mt-1">태그: #API설계 #중요</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Web Features -->
<section class="py-16 bg-gradient-to-br from-green-50 to-emerald-50">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
<i class="fas fa-globe text-green-600 mr-3"></i>
웹페이지에서 가능한 기능
</h2>
<p class="text-xl text-gray-600">브라우저에서 편리하게 대화를 관리하고 분석할 수 있습니다</p>
</div>
<div class="space-y-12">
<!-- 검색 및 필터링 -->
<div class="bg-white rounded-xl shadow-lg p-8 border">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
<div>
<div class="flex items-center mb-4">
<div class="bg-green-100 rounded-lg p-3 mr-4">
<i class="fas fa-search text-green-600 text-xl"></i>
</div>
<h3 class="text-2xl font-bold text-gray-900">강력한 검색 & 필터링</h3>
</div>
<p class="text-gray-600 mb-4">저장된 대화를 빠르고 정확하게 찾을 수 있습니다.</p>
<ul class="space-y-2 text-gray-600">
<li class="flex items-start">
<i class="fas fa-check text-green-500 mr-3 mt-1"></i>
<span>제목, 내용, 태그 통합 검색</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mr-3 mt-1"></i>
<span>날짜 범위와 태그 필터</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mr-3 mt-1"></i>
<span>키워드 하이라이팅</span>
</li>
</ul>
</div>
<div class="bg-gray-50 rounded-lg p-6">
<div class="mb-4">
<input
type="text"
placeholder="React 컴포넌트 검색..."
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent"
value="React 컴포넌트"
>
</div>
<div class="space-y-3">
<div class="bg-white rounded-lg p-3 border-l-4 border-green-500">
<div class="font-medium text-gray-900">React 컴포넌트 구조 설계</div>
<div class="text-sm text-gray-500">3일 전 • #react #frontend</div>
<div class="text-sm text-gray-600 mt-1">...<mark class="bg-yellow-200">컴포넌트</mark> 설계 패턴에 대해...</div>
</div>
<div class="bg-white rounded-lg p-3 border-l-4 border-blue-500">
<div class="font-medium text-gray-900">React Hook 사용법</div>
<div class="text-sm text-gray-500">1주 전 • #react #hooks</div>
<div class="text-sm text-gray-600 mt-1">...함수형 <mark class="bg-yellow-200">컴포넌트</mark>에서...</div>
</div>
</div>
</div>
</div>
</div>
<!-- 대화 상세 보기 -->
<div class="bg-white rounded-xl shadow-lg p-8 border">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
<div class="order-2 lg:order-1">
<div class="bg-gray-50 rounded-lg p-6">
<div class="flex items-center justify-between mb-4">
<h4 class="font-semibold text-gray-900">React 컴포넌트 구조 설계</h4>
<span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">#react</span>
</div>
<div class="space-y-3 text-sm">
<div class="bg-blue-50 rounded p-3">
<strong>사용자:</strong> React에서 컴포넌트를 어떻게 구조화해야 할까요?
</div>
<div class="bg-gray-100 rounded p-3">
<strong>Claude:</strong> React 컴포넌트 구조화에는 몇 가지 좋은 패턴이 있습니다...
</div>
<div class="text-center text-gray-400">
<i class="fas fa-ellipsis-h"></i>
</div>
</div>
</div>
</div>
<div class="order-1 lg:order-2">
<div class="flex items-center mb-4">
<div class="bg-blue-100 rounded-lg p-3 mr-4">
<i class="fas fa-eye text-blue-600 text-xl"></i>
</div>
<h3 class="text-2xl font-bold text-gray-900">대화 상세 보기</h3>
</div>
<p class="text-gray-600 mb-4">전체 대화를 읽기 편한 형태로 확인할 수 있습니다.</p>
<ul class="space-y-2 text-gray-600">
<li class="flex items-start">
<i class="fas fa-check text-green-500 mr-3 mt-1"></i>
<span>전체 대화 히스토리</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mr-3 mt-1"></i>
<span>사용자-AI 구분 표시</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mr-3 mt-1"></i>
<span>타임스탬프 및 메타데이터</span>
</li>
</ul>
</div>
</div>
</div>
<!-- 대화 관리 -->
<div class="bg-white rounded-xl shadow-lg p-8 border">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
<div>
<div class="flex items-center mb-4">
<div class="bg-purple-100 rounded-lg p-3 mr-4">
<i class="fas fa-cogs text-purple-600 text-xl"></i>
</div>
<h3 class="text-2xl font-bold text-gray-900">대화 편집 & 관리</h3>
</div>
<p class="text-gray-600 mb-4">저장된 대화를 효율적으로 정리하고 관리할 수 있습니다.</p>
<ul class="space-y-2 text-gray-600">
<li class="flex items-start">
<i class="fas fa-check text-green-500 mr-3 mt-1"></i>
<span>제목 및 태그 편집</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mr-3 mt-1"></i>
<span>즐겨찾기 등록/해제</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mr-3 mt-1"></i>
<span>대화 삭제 및 아카이브</span>
</li>
</ul>
</div>
<div class="bg-gray-50 rounded-lg p-6">
<div class="space-y-4">
<div class="flex items-center justify-between border-b pb-3">
<div>
<div class="font-medium text-gray-900">React 컴포넌트 설계</div>
<div class="text-sm text-gray-500">#react #frontend #architecture</div>
</div>
<div class="flex space-x-2">
<button class="text-yellow-500 hover:text-yellow-600" title="즐겨찾기">
<i class="fas fa-star"></i>
</button>
<button class="text-gray-400 hover:text-gray-600" title="편집">
<i class="fas fa-edit"></i>
</button>
<button class="text-red-400 hover:text-red-600" title="삭제">
<i class="fas fa-trash"></i>
</button>
</div>
</div>
<div class="text-sm text-gray-600 bg-gray-100 rounded p-3">
💡 제목을 클릭하여 편집하거나, 태그를 추가/삭제할 수 있습니다.
</div>
</div>
</div>
</div>
</div>
<!-- 데이터 내보내기 -->
<div class="bg-white rounded-xl shadow-lg p-8 border">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
<div class="order-2 lg:order-1">
<div class="bg-gray-50 rounded-lg p-6">
<h4 class="font-semibold text-gray-900 mb-4">내보내기 옵션</h4>
<div class="space-y-3">
<button class="w-full bg-blue-100 hover:bg-blue-200 text-blue-800 p-3 rounded-lg text-left transition-colors">
<i class="fas fa-file-csv mr-2"></i>
CSV 파일로 내보내기
<div class="text-sm text-blue-600 mt-1">Excel에서 열 수 있는 형식</div>
</button>
<button class="w-full bg-green-100 hover:bg-green-200 text-green-800 p-3 rounded-lg text-left transition-colors">
<i class="fas fa-code mr-2"></i>
JSON 파일로 내보내기
<div class="text-sm text-green-600 mt-1">프로그래밍 활용 가능</div>
</button>
<button class="w-full bg-purple-100 hover:bg-purple-200 text-purple-800 p-3 rounded-lg text-left transition-colors">
<i class="fas fa-file-pdf mr-2"></i>
PDF 문서로 내보내기
<div class="text-sm text-purple-600 mt-1">인쇄 및 공유용</div>
</button>
</div>
</div>
</div>
<div class="order-1 lg:order-2">
<div class="flex items-center mb-4">
<div class="bg-orange-100 rounded-lg p-3 mr-4">
<i class="fas fa-download text-orange-600 text-xl"></i>
</div>
<h3 class="text-2xl font-bold text-gray-900">데이터 내보내기</h3>
</div>
<p class="text-gray-600 mb-4">대화 데이터를 다양한 형식으로 내보낼 수 있습니다.</p>
<ul class="space-y-2 text-gray-600">
<li class="flex items-start">
<i class="fas fa-check text-green-500 mr-3 mt-1"></i>
<span>선택한 대화만 내보내기</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mr-3 mt-1"></i>
<span>전체 대화 백업</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mr-3 mt-1"></i>
<span>다양한 파일 형식 지원</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 보안 및 개인정보 -->
<section class="py-16 bg-white">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
<div class="order-2 lg:order-1">
<div class="bg-gray-50 rounded-xl shadow-lg p-8 border">
<div class="text-center">
<div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-shield-alt text-green-600 text-2xl"></i>
</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2">End-to-End 보안</h3>
<p class="text-gray-600 text-sm mb-4">모든 대화는 개인 계정에서만 접근 가능하며, 안전하게 암호화되어 저장됩니다.</p>
<div class="flex items-center justify-center space-x-2 text-sm text-green-600">
<i class="fas fa-lock"></i>
<span>256-bit AES 암호화</span>
</div>
</div>
</div>
</div>
<div class="order-1 lg:order-2">
<div class="flex items-center mb-6">
<div class="bg-red-100 rounded-lg p-3 mr-4">
<i class="fas fa-shield-alt text-red-600 text-2xl"></i>
</div>
<h2 class="text-3xl font-bold text-gray-900">보안 및 개인정보 보호</h2>
</div>
<div class="space-y-4 text-gray-600">
<p class="text-lg">여러분의 대화는 오직 본인만 접근할 수 있도록 안전하게 보호됩니다.</p>
<ul class="space-y-2">
<li class="flex items-start">
<i class="fas fa-check text-green-500 mr-3 mt-1"></i>
<span>개인 계정별 완전 분리 저장</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mr-3 mt-1"></i>
<span>JWT 토큰 기반 인증</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mr-3 mt-1"></i>
<span>데이터베이스 암호화</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mr-3 mt-1"></i>
<span>언제든지 완전 삭제 가능</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="bg-indigo-600 py-16">
<div class="max-w-4xl mx-auto text-center px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl md:text-4xl font-bold text-white mb-6">
지금 바로 시작해보세요
</h2>
<p class="text-xl text-indigo-100 mb-8">
MCP 설정부터 사용법까지, 단계별 가이드를 확인하세요
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="/setup.html" class="bg-white text-indigo-600 px-8 py-3 rounded-lg font-medium hover:bg-gray-100 transition-colors duration-200">
MCP 설정 가이드
</a>
<button id="register-btn" class="border-2 border-white text-white px-8 py-3 rounded-lg font-medium hover:bg-white hover:text-indigo-600 transition-colors duration-200">
무료 회원가입
</button>
</div>
</div>
</section>
<!-- Login Modal -->
<div id="login-modal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center z-[9999]">
<div class="bg-white rounded-lg p-8 max-w-md w-full mx-4">
<h2 class="text-2xl font-bold mb-6 text-center">로그인</h2>
<form id="login-form">
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-2">이메일</label>
<input
type="email"
id="email"
required
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
>
</div>
<div class="mb-6">
<label class="block text-sm font-medium text-gray-700 mb-2">비밀번호</label>
<input
type="password"
id="password"
required
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
>
</div>
<button
type="submit"
class="w-full bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500"
>
로그인
</button>
<p class="mt-4 text-center text-sm text-gray-600">
계정이 없으신가요?
<button type="button" id="show-register" class="text-indigo-600 hover:text-indigo-500">회원가입</button>
</p>
</form>
</div>
</div>
<!-- Register Modal -->
<div id="register-modal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center z-[9999]">
<div class="bg-white rounded-lg p-8 max-w-md w-full mx-4">
<h2 class="text-2xl font-bold mb-6 text-center">회원가입</h2>
<form id="register-form">
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-2">이메일</label>
<input
type="email"
id="register-email"
required
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
>
</div>
<div class="mb-6">
<label class="block text-sm font-medium text-gray-700 mb-2">비밀번호</label>
<input
type="password"
id="register-password"
required
minlength="6"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
>
<p class="mt-1 text-sm text-gray-500">최소 6자 이상</p>
</div>
<button
type="submit"
class="w-full bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500"
>
회원가입
</button>
<p class="mt-4 text-center text-sm text-gray-600">
이미 계정이 있으신가요?
<button type="button" id="show-login" class="text-indigo-600 hover:text-indigo-500">로그인</button>
</p>
</form>
</div>
</div>
<script src="/static/js/features.js"></script>
</body>
</html>
Latest Blog Posts
- MCP Moves to the Linux Foundation: Neutral Stewardship for Agentic InfrastructureBy Om-Shree-0709 on .mcpanthropicLinux Foundation
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/EmjayAhn/pensieve-mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server