AI 연동
더씨커 레퍼런스 MCP 서버
Claude, Cursor, Codex 같은 AI 도구가 더씨커 레퍼런스에 모인 UI 디자인 레퍼런스를 직접 검색하고, 분석과 맥락, 이미지를 필요한 만큼 읽어 갑니다.
https://ref.theseeker.io/mcpMCP(Model Context Protocol)는 AI 도구가 외부 데이터에 접근하도록 이어 주는 표준입니다. 서버를 한 번 등록해 두면 에이전트가 대화 중에 태그를 살피고, 조건에 맞는 레퍼런스를 찾고, 이미지까지 확인한 뒤 원본 링크와 함께 답합니다.
같은 데이터를 사람과 AI 에이전트에게 각자 맞는 방식으로 보여 줍니다.
| 항목 | 웹 갤러리 | MCP |
|---|---|---|
| 대상 | 레퍼런스를 둘러보는 사람 | MCP 클라이언트에 연결된 AI 에이전트 |
| 접근 | 브라우저에서 탐색하고 검색 | 대화 중 에이전트의 도구 호출 |
| 주소 | https://ref.theseeker.io | https://ref.theseeker.io/mcp |
| 출력 | 카드 그리드와 상세 페이지 | JSON 결과와 이미지 콘텐츠 블록 |
- MCP를 지원하는 AI 클라이언트. 아래에서 클라이언트별 연결 방법을 안내합니다.
ref.theseeker.io에 접속할 수 있는 네트워크- 계정이나 API 키는 필요 없습니다. 가입이나 토큰 발급 없이 바로 연결합니다.
사용하는 클라이언트를 고른 뒤 안내대로 서버를 등록하세요. 어느 클라이언트든 서버 이름은 ref로 맞춥니다.
터미널에서 명령을 실행합니다.
Claude Code에서 도구 목록을 확인합니다.
claude mcp add --transport http ref https://ref.theseeker.io/mcpSettings → Connectors로 이동합니다.
Add custom connector를 선택합니다.
Name에 ref, URL에 아래 주소를 입력하고 Add를 누릅니다.
https://ref.theseeker.io/mcp설정 파일의 mcpServers에 항목을 추가하고 Cursor를 다시 불러옵니다.
~/.cursor/mcp.json{
"mcpServers": {
"ref": {
"url": "https://ref.theseeker.io/mcp"
}
}
}작업 공간의 MCP 설정 파일에서 servers에 항목을 추가합니다.
.vscode/mcp.json{
"servers": {
"ref": {
"type": "http",
"url": "https://ref.theseeker.io/mcp"
}
}
}Codex 설정 파일에 MCP 서버 블록을 추가합니다.
~/.codex/config.toml[mcp_servers.ref]
url = "https://ref.theseeker.io/mcp"설정 파일의 mcp에 원격 서버를 등록합니다. 인증 설정은 필요하지 않습니다.
opencode.json{
"mcp": {
"ref": {
"type": "remote",
"url": "https://ref.theseeker.io/mcp",
"enabled": true,
"oauth": false
}
}
}MCP 설정 파일의 mcpServers에 연결을 추가합니다.
~/.codeium/windsurf/mcp_config.json{
"mcpServers": {
"ref": {
"serverUrl": "https://ref.theseeker.io/mcp"
}
}
}Gemini CLI 설정 파일의 mcpServers에 연결을 추가합니다.
~/.gemini/settings.json{
"mcpServers": {
"ref": {
"httpUrl": "https://ref.theseeker.io/mcp"
}
}
}터미널에서 초기화 요청을 보냅니다.
다른 예제에서 도구 목록과 도구 호출 요청을 확인합니다.
curl -sS https://ref.theseeker.io/mcp -H 'content-type: application/json' -H 'accept: application/json, text/event-stream' -d '{"jsonrpc":"2.0","id":1,"method":"initialize","params":{"protocolVersion":"2025-06-18","capabilities":{},"clientInfo":{"name":"curl","version":"1.0.0"}}}'요청 형식과 curl 예제 전체는 도구 레퍼런스의 엔드포인트 사양에 정리했습니다.
에이전트는 보통 네 단계로 레퍼런스를 찾습니다. 앞 단계의 결과로 다음 호출의 인자를 좁힐수록 응답이 빠르고 정확해집니다.
태그와 카테고리 확인
list_tags공개 레퍼런스의 카테고리별 개수와 태그를 살펴봅니다. 원하는 분류나 검색어로 태그를 좁힐 수 있습니다.
조건에 맞는 레퍼런스 검색
search_references키워드와 태그, 카테고리, 작가로 공개 레퍼런스를 찾습니다. 목록에는 미리보기 이미지와 원문 페이지 주소가 함께 담깁니다.
필요한 섹션만 읽기
get_reference레퍼런스의 분석과 미디어, 원본 게시물, 작가, 유사한 작업을 필요한 항목만 골라 읽습니다.
고른 레퍼런스의 이미지 보기
get_reference_images선택한 레퍼런스의 이미지와 영상 포스터를 직접 확인합니다. 이미지별 오류는 다른 이미지 조회를 막지 않습니다.
모든 도구는 읽기 전용입니다. 인자와 응답 예시는 도구 이름을 눌러 확인하세요.
| 도구 | 하는 일 |
|---|---|
search_references | 키워드와 태그, 카테고리, 작가로 공개 레퍼런스를 찾습니다. 목록에는 미리보기 이미지와 원문 페이지 주소가 함께 담깁니다. |
get_reference | 레퍼런스의 분석과 미디어, 원본 게시물, 작가, 유사한 작업을 필요한 항목만 골라 읽습니다. |
get_reference_images | 선택한 레퍼런스의 이미지와 영상 포스터를 직접 확인합니다. 이미지별 오류는 다른 이미지 조회를 막지 않습니다. |
list_tags | 공개 레퍼런스의 카테고리별 개수와 태그를 살펴봅니다. 원하는 분류나 검색어로 태그를 좁힐 수 있습니다. |
list_authors | 공개 레퍼런스가 있는 작가의 소개와 작업 수를 확인합니다. |
연결한 뒤 에이전트에게 이렇게 요청해 보세요.
- 더씨커 레퍼런스에서 다크 모드 핀테크 대시보드를 찾아서 공통된 레이아웃 패턴을 정리해 줘.
- 벤토 그리드 랜딩 페이지 레퍼런스 2개를 골라 이미지를 직접 보고, 우리 서비스에 어울리는 히어로 섹션을 제안해 줘.
- 레퍼런스가 가장 많은 작가 3명을 찾아서 각자의 스타일을 비교해 줘.
태그 먼저 확인
list_tags로 실제로 쓰이는 태그 슬러그를 확인한 뒤 search_references의 tags에 넣으세요. 없는 태그를 넣으면 결과가 비어 있습니다.
필요한 섹션만 include
get_reference의 include에는 필요한 섹션만 넣으세요. 고를 수 있는 값은 analysis, media, tweet, author, similar이며, 적게 요청할수록 응답이 가볍습니다.
이미지는 small·medium으로 2~4장
get_reference_images는 이미지 데이터를 그대로 전달해 대화 맥락을 많이 차지합니다. 후보를 먼저 좁힌 뒤 레퍼런스 2~4개만, small 또는 medium 크기로 요청하세요.
pageUrl 인용
결과마다 담긴 pageUrl을 답변에 함께 적어 두면 읽는 사람이 원본 레퍼런스를 바로 열어 볼 수 있습니다.
한국어와 영어 검색어 모두 가능
제목과 요약은 한국어로, titleEn·summaryEn 같은 영어 필드도 함께 색인되어 있습니다. “대시보드”와 “dashboard” 모두로 찾을 수 있습니다.
Retry-After 헤더를 돌려주니, 안내된 시간만큼 기다린 뒤 다시 요청하세요.이미지 한도
| 호출당 이미지 수 | 기본 4장, 최대 6장 |
|---|---|
| 이미지 한 장 | 최대 5 MiB |
| 호출 한 번 전체 | 최대 15 MiB |
| 이미지 조회 제한 시간 | 10초 |
오류 코드
| 코드 | 위치 | 의미 |
|---|---|---|
NOT_FOUND | 도구 결과 | 요청한 레퍼런스를 찾을 수 없거나 공개되지 않았습니다. |
VALIDATION | 도구 결과 | 도구에 전달한 값이 허용 범위나 형식에 맞지 않습니다. |
INTERNAL | 도구 결과 | 조회 중 문제가 발생했습니다. 잠시 후 다시 시도해 주세요. |
405 | HTTP 응답 | 허용되지 않은 HTTP 메서드입니다. 도구 호출에는 POST를 사용하세요. |
406 | HTTP 응답 | Accept 헤더에 application/json과 text/event-stream을 모두 포함해 주세요. |
429/-32029 | HTTP 응답 | 분당 요청 한도를 넘었습니다. Retry-After에 안내된 뒤 다시 요청하세요. |
클라이언트 설정에서 ref 항목을 지우면 됩니다. 서버에는 해지할 세션이나 토큰이 없습니다.
- Claude Code:
claude mcp remove ref - Claude Desktop: Settings → Connectors에서 ref 연결을 삭제합니다.
- Cursor: ref 항목을 삭제한 뒤 다시 불러옵니다.
- VS Code: servers에서 ref 항목을 삭제합니다.
- Codex: [mcp_servers.ref] 블록을 삭제합니다.
- opencode: mcp.ref를 삭제하거나 enabled를 false로 바꿉니다.
- Windsurf: mcpServers에서 ref 항목을 삭제합니다.
- Gemini CLI: mcpServers.ref 항목을 삭제합니다.
- curl: 상태가 없으므로 해제할 연결이 없습니다.