HTML/CSS to Image
공식HTML 및 CSS에서 이미지를 생성하거나 htmlcsstoimage.com을 사용하여 URL의 스크린샷을 생성하는 MCP 서버입니다.
HTML CSS To Image MCP(으)로 무엇을 할 수 있나요?
- HTML/CSS를 이미지로 렌더링 —
create_image를 통해 HTML/CSS를 PNG, JPG, WebP 또는 PDF로 변환하도록 요청하세요. - 웹사이트 스크린샷 캡처 —
create_url_image를 사용하여 뷰포트 및 쿠키 배너 옵션과 함께 공개 URL의 스크린샷을 요청하세요. - 템플릿 이미지 생성 —
create_templated_image를 호출하여 저장된 템플릿을 사용자 정의 변수로 렌더링하세요. - 이미지 변형 만들기 —
create_batch_images및get_max_batch_size를 사용하여 한 번의 배치로 여러 이미지 버전을 생성하세요. - 재사용 가능한 템플릿 관리 —
create_template,update_template,list_templates및list_template_versions를 통해 템플릿 버전을 생성, 업데이트, 나열 및 검사하세요. - 계정 사용량 확인 — 렌더링 없이
check_usage를 통해 이미지 크레딧 및 한도를 확인하도록 요청하세요.
문서
HTML/CSS to Image MCP 서버 통합하기
AI 어시스턴트에서 직접 웹사이트 스크린샷을 찍고, 이미지나 PDF를 렌더링하며, 조직의 리소스를 관리하세요.
소개
어떤 AI 도구나 에이전트를 사용하든 MCP를 통해 HTML/CSS to Image에 연결할 수 있습니다. 호환되는 어시스턴트에 공개 URL이나 HTML/CSS를 제공하고 스크린샷 촬영, PDF 렌더링, 저장된 템플릿에서 이미지 생성을 요청하세요.
- 무료로 시작하세요. 무료 HCTI 계정은 모든 통합에서 작동합니다. 이미지 생성은 API와 마찬가지로 조직의 사용 가능한 이미지 크레딧을 사용합니다.
- 안전하게 로그인하세요. API 키를 어시스턴트에 복사하지 않고 브라우저에서 OAuth를 통해 계정을 인증하세요.
- 관리할 브라우저 인프라가 없습니다. HCTI가 렌더링을 처리하고 열기, 다운로드 또는 공유할 수 있는 호스팅 URL을 반환합니다.
또한 Management API 기능을 통해 프록시, 스토리지 대상, 자동 Open Graph 이미지를 구성하도록 어시스턴트에 요청할 수 있습니다. 이러한 작업에는 추가 OAuth 권한이 필요합니다. API 키 관리는 REST 전용입니다.
클라이언트 선택
설정 지침과 복사 가능한 예제를 보려면 어시스턴트를 선택하세요.
| 클라이언트 | 연결 방법 |
|---|---|
| ChatGPT 및 Codex | 공식 플러그인을 설치하고 대화 또는 코딩 작업에서 사용하세요. |
| Claude 및 Claude Code | Claude 커넥터 디렉토리에서 설치하거나 Claude Code를 연결하세요. |
| Cline | Cline 확장 프로그램에서 Streamable HTTP 서버를 연결하세요. |
| Cursor | 설치 버튼 또는 MCP 구성을 사용하여 Cursor Agent에 HCTI를 추가하세요. |
| Gemini CLI | 원격 HTTP 서버와 브라우저 로그인으로 Gemini CLI를 연결하세요. |
| GitHub Copilot | 터미널에서 Copilot CLI를 연결하세요. |
| Grok | Grok Build에서 HCTI 플러그인 또는 직접 MCP 연결을 사용하세요. |
| JetBrains IDE | OAuth 지원 MCP 브리지를 통해 AI Assistant를 연결하세요. |
| OpenCode | 원격 MCP 서버를 구성하고 CLI에서 인증하세요. |
| VS Code | 원격 HTTP 서버를 추가하고 Copilot Agent 모드에서 해당 도구를 사용하세요. |
| Windsurf | Cascade에 HCTI를 연결하여 스크린샷 및 렌더링을 수행하세요. |
| Zed | Agent 패널에 원격 MCP 서버를 추가하세요. |
MCP란 무엇인가요?
Model Context Protocol을 사용하면 어시스턴트가 외부 도구를 호출할 수 있습니다. HCTI의 호스팅 MCP 서버는 어시스턴트가 제공한 HTML/CSS 또는 공개 URL을 렌더링하고 결과를 반환합니다. 렌더링 브라우저를 직접 실행할 필요가 없습니다.
MCP 서버 URL: https://mcp.hcti.io
전송: Streamable HTTP
인증: OAuth
또한 에이전트 플러그인은 HCTI 사용을 위한 워크플로 지침을 패키지로 제공합니다. 해당 플러그인을 지원하는 클라이언트에서는 플러그인을 설치하면 연결과 어시스턴트 지침이 모두 제공됩니다. 직접 MCP 연결은 아래 도구에 대한 액세스를 제공합니다.
사용 가능한 도구
이러한 핵심 도구는 모든 MCP 클라이언트에서 작동합니다. 액세스는 연결에 승인된 권한에 따라 달라집니다. 어시스턴트에게 이름으로 HCTI를 사용하도록 요청하세요.
계정 사용량
| 도구 | 기능 |
|---|---|
check_usage | 이미지를 렌더링하지 않고 사용된 이미지, 이미지 허용량, 다음 초기화, 초과 사용 설정을 확인합니다. |
스크린샷 및 렌더링
| 도구 | 기능 |
|---|---|
create_image | HTML/CSS를 PNG, JPG, WebP 또는 PDF로 렌더링합니다. device_scale, viewport_width, viewport_height, ms_delay를 지원합니다. |
create_url_image | 뷰포트 설정과 쿠키 배너 차단 기능으로 공개 페이지 또는 CSS 선택자를 캡처합니다. |
create_templated_image | template_id 및 template_values로 저장된 템플릿을 렌더링합니다. |
create_batch_images | 공유 default_options와 이미지별 변형으로 변형을 렌더링합니다. |
get_max_batch_size | 배치를 준비하기 전에 계정의 배치 한도를 확인합니다. |
피드백
| 도구 | 기능 |
|---|---|
submit_feedback | HCTI 팀에 버그를 신고하고, 기능을 요청하며, 개선 사항을 제안합니다. 피드백 도구 참조를 확인하세요. |
템플릿 관리
| 도구 | 기능 |
|---|---|
create_template | HTML/CSS를 변수가 있는 재사용 가능한 템플릿으로 저장합니다. |
update_template | ID로 기존 템플릿을 업데이트합니다. |
list_templates | 연결된 계정에서 템플릿을 찾습니다. |
list_template_versions | 템플릿의 버전 기록을 검사합니다. |
이미지 옵션과 재사용 가능한 디자인은 렌더링 매개변수 및 템플릿 편집기를 참조하세요. 전체 도구 참조는 프록시, 스토리지 대상, Open Graph 구성 및 필요한 권한도 다룹니다.
인증
HCTI를 추가한 후 클라이언트의 연결 또는 로그인 작업을 사용하고 브라우저에서 인증을 완료하세요. 사용하려는 템플릿과 크레딧이 있는 HCTI 계정에 로그인하고 선택한 조직과 권한을 검토한 다음 어시스턴트로 돌아가세요. 필요한 경우 추가 관리 액세스를 선택하려면 추가 권한을 여세요. 일부 클라이언트는 첫 사용 시 자동으로 프롬프트를 표시합니다. 개별 가이드에서 명시적으로 연결하는 방법을 보여줍니다.
이미지를 렌더링하지 않고 연결을 확인하려면 **"HCTI를 사용하여 내 이미지 사용량과 계정 한도를 확인해 줘"**라고 요청하세요. check_usage 도구는 usage:read이 필요하며 이미지를 렌더링하지 않고 사용량과 한도를 반환합니다. get_max_batch_size도 usage:read가 필요합니다. 렌더링 요청은 HCTI 계정의 이미지 허용량을 사용합니다. 어시스턴트 구독은 별개입니다.
예제 프롬프트
웹사이트 스크린샷 찍는 방법
Use HTML/CSS to Image to screenshot https://example.com as a PNG.
Set viewport_width to 1440 and device_scale to 1. Return the image URL.
반환된 URL을 열어 캡처를 확인하세요. 자신의 사이트 일부만 캡처하려면 해당 페이지에 실제로 존재하는 .pricing-grid과 같은 CSS 선택자를 제공하세요. HCTI는 호스팅 서비스에서 URL에 도달할 수 있어야 합니다. localhost는 도달할 수 없습니다.
HTML과 CSS를 PNG로 렌더링하는 방법
Use HCTI to render this HTML and CSS as a PNG with device_scale set to 1.
HTML: <div class="card">Hello from HCTI</div>
CSS: .card { width: 1200px; height: 630px; display: flex;
align-items: center; justify-content: center; background: #172554;
color: white; font: 64px sans-serif; }
Return the hosted image URL.
결과는 진한 파란색 카드 중앙에 흰색 텍스트가 표시되어야 합니다. 어시스턴트는 렌더링을 위해 HTML/CSS를 HCTI로 보냅니다. 저장소에서 작업할 때는 관련 파일을 읽고 자체 포함된 마크업과 스타일을 제공하도록 요청하세요. 로컬 에셋 경로는 접근 가능한 에셋으로 교체해야 합니다.
PDF 내보내는 방법
Format the following report as HTML and CSS, then render it with HCTI
using format="pdf". Use clear headings and a readable table.
Report: January revenue $12,000; February revenue $14,500; March revenue $16,200.
Return the PDF URL.
템플릿 재사용 및 변형 생성 방법
Use HCTI to list my saved templates. Find the social-card template and
inspect its variables before rendering it with the headline "New release".
Use HCTI to check my maximum batch size. Create five variations of the
HTML/CSS card we just rendered, with a different accent color in each.
Return a labeled list of image URLs.
템플릿 편집기를 사용하여 템플릿을 디자인하고 어시스턴트가 template_values로 전달해야 하는 값을 정의하세요.
조직 리소스 검사 방법
Use HCTI to list my OG configurations and inspect the blog configuration.
Explain its template mappings and refresh interval.
이 예제에는 og_configs:read을 승인하세요. 구성을 생성하거나 업데이트하려면 og_configs:create_update도 승인하세요. 프록시, 스토리지 대상 및 OG 관리 작업은 도구 참조를 참조하세요.
이미지 매개변수
이미지를 생성할 때 주요 매개변수는 다음과 같습니다:
| 매개변수 | 유형 | 설명 |
|---|---|---|
html | String | 렌더링할 HTML 콘텐츠입니다. create_image에 필요합니다. |
css | String | HTML용 CSS 스타일입니다. |
url | String | 스크린샷을 찍을 URL입니다. create_url_image에 필요합니다. |
추가 매개변수
| 이름 | 유형 | 설명 |
|---|---|---|
additional_header_origins | Array | 특정 추가 HTTP 또는 HTTPS 출처에 대한 요청에 사용자 정의 headers을 허용합니다. |
block_consent_banners | Boolean | true로 설정하면 웹사이트의 쿠키 동의 배너와 팝업을 자동으로 차단합니다. URL 스크린샷에 가장 유용합니다. |
color_scheme | String | Chrome을 light 또는 dark 모드로 렌더링하도록 설정합니다. prefers-color-scheme을 사용하는 웹사이트에 영향을 줍니다. |
dedupe_duration_s | Integer | 이미지 크레딧을 소비하지 않고 동일한 최근 이미지를 재사용합니다. 조회 기간을 초 단위로 설정하며, 기본값과 허용 값은 이미지 유형과 요금제에 따라 다릅니다. |
device_scale | Double | 픽셀 비율을 0.1에서 3로 조정하여 해상도를 제어합니다. 값이 높을수록 이미지 품질과 파일 크기가 증가합니다. |
disable_twemoji | Boolean | HTML/CSS 및 템플릿 이미지는 기본적으로 Twemoji를 사용합니다. 비활성화하려면 true로 설정하세요. URL 이미지는 false으로 명시적으로 설정된 경우에만 Twemoji를 주입합니다. |
format | String | 처음 반환되는 이미지 URL에서 파일 확장자를 선택합니다: png, jpg, webp 또는 pdf. |
full_screen | Boolean | URL 페이지의 전체 높이에 대한 이미지를 생성합니다. |
google_fonts | String | Roboto|Open Sans과 같은 하나 이상의 Google 글꼴을 로드합니다. |
headers | Object | URL을 스크린샷할 때 사용자 정의 HTTP 헤더를 추가합니다. 헤더는 요청된 URL의 출처와 모든 additional_header_origins으로 제한됩니다. |
identify_as_hcti | Boolean | URL을 스크린샷할 때 최상위 요청에 X-HCTI-SCREENSHOT: 1을 추가합니다. |
include_headers_on_subrequests | Boolean | 동일 출처 하위 요청 및 additional_header_origins과 일치하는 하위 요청에도 사용자 정의 headers을 추가합니다. |
jumbo_max_height | Integer | 점보 모드에서 최대 출력 높이(최대 80,000 픽셀)입니다. jumbo_max_width과 함께 설정해야 하며 추가 이미지 크레딧을 소비합니다. |
jumbo_max_width | Integer | 점보 모드에서 최대 출력 너비(최대 80,000 픽셀)입니다. jumbo_max_height과 함께 설정해야 하며 추가 이미지 크레딧을 소비합니다. |
max_wait_ms | Integer | 스크린샷을 찍기 전에 대기하는 최대 시간 제한을 500에서 10000 밀리초로 설정합니다. |
media_type | String | Chrome이 screen 또는 print CSS 미디어 스타일을 사용하여 렌더링하도록 설정합니다. |
ms_delay | Integer | 이미지를 생성하기 전에 지연합니다. JavaScript를 기다릴 때 유용하며, 500 밀리초로 시작하세요. |
pdf_options | Object | 페이지 크기, 여백, 배율 및 배경 인쇄로 PDF 출력을 사용자 정의합니다. |
proxy_id | String | 조직의 구성된 HTTP 프록시 중 하나를 통해 아웃바운드 트래픽을 라우팅합니다. 월 10,000개 이미지 요금제 이상에서 사용할 수 있습니다. |
render_when_ready | Boolean | JavaScript가 ScreenshotReady()을 호출할 때까지 이미지 생성을 기다립니다. |
request_overrides | Array | URL 와일드카드 패턴 및/또는 리소스 유형과 일치하는 브라우저 네트워크 요청을 차단합니다. 유료 요금제가 필요합니다. |
selector | String | section#complete-toolkit.container-lg과 같은 CSS 선택자와 일치하는 요소로 이미지를 자릅니다. |
storage_destination_id | String | 렌더링된 파일을 조직의 구성된 스토리지 대상 중 하나에 저장합니다. 월 10,000개 이미지 요금제 이상에서 사용할 수 있습니다. |
timezone | String | America/New_York과 같은 IANA 식별자로 Chrome의 시간대를 설정합니다. |
transparent_background | Boolean | 투명 배경으로 렌더링하려면 true으로 설정합니다. |
viewport_height | Integer | Chrome 뷰포트의 높이를 설정합니다. 둘 중 하나를 사용할 때는 두 차원을 모두 설정해야 합니다. |
viewport_landscape | Boolean | Chrome 뷰포트를 가로 모드로 설정합니다. |
viewport_mobile | Boolean | Chrome 뷰포트를 모바일 장치를 에뮬레이션하도록 설정합니다. |
viewport_touch | Boolean | Chrome 뷰포트가 터치 이벤트를 지원하도록 설정합니다. |
viewport_width | Integer | Chrome 뷰포트의 너비를 설정합니다. 둘 중 하나를 사용할 때는 두 차원을 모두 설정해야 합니다. |
문제 해결
인증 오류
인증 오류가 발생하는 경우:
- MCP 서버를 연결 해제하고 다시 연결하여 새 OAuth 흐름을 트리거하세요
- 브라우저에서 올바른 HTML/CSS to Image 계정에 로그인했는지 확인하세요
- OAuth 창이 열릴 때 팝업이 차단되지 않았는지 확인하세요
권한 오류
나열된 도구는 연결에 없는 권한이 필요할 수 있습니다. HCTI를 연결 해제하고 다시 연결한 다음 의도한 조직에 필요한 액세스를 승인하세요. 기존 토큰을 새로 고쳐도 권한이 추가되지 않습니다. 액세스가 변경될 때까지 거부된 작업을 재시도하지 마세요. MCP 권한 부여를 참조하세요.
속도 제한 오류
관리 도구 제한은 조직의 REST 요청과 공유됩니다. 속도 제한 도구를 재시도하기 전에 60초를 기다리세요. 속도 제한을 참조하세요.
연결 문제
MCP 서버가 연결되지 않는 경우:
- 네트워크가 아웃바운드 HTTPS 연결을 허용하는지 확인하세요
- URL이 정확히
https://mcp.hcti.io인지 확인하세요 - 구성을 업데이트한 후 AI 어시스턴트를 다시 시작하세요
이미지 생성 오류
이미지 생성에 실패하는 경우:
- 대시보드에서 계정에 사용 가능한 이미지 크레딧이 있는지 확인하세요
- HTML 콘텐츠가 유효한지 확인하세요
- URL 스크린샷의 경우 URL이 공개적으로 액세스 가능한지 확인하세요
자동화 플랫폼
자동화 플랫폼에서도 MCP 서버를 사용할 수 있습니다:
Zapier
Zapier에는 MCP 서버에 연결되는 전용 MCP 클라이언트가 있습니다. 이를 통해 코드를 작성하지 않고도 Zapier 워크플로 내에서 HTML/CSS to Image MCP 서버를 사용할 수 있습니다.
Pipedream
Pipedream은 서버리스 워크플로 구축을 위한 MCP 서버를 지원합니다. HTML/CSS to Image MCP 서버를 연결하여 Pipedream 워크플로에서 이미지 생성을 자동화하세요.
MCP 서버는 Smithery에도 등록되어 있습니다.
도움이 필요하신가요?
사람과 상담하세요. support@htmlcsstoimage.com으로 이메일을 보내시면 시작하는 데 도움을 드리겠습니다.