poster-design-mcp

비즈니스 포스터를 디자인하는 MCP 서버입니다. AI 클라이언트에게 평범한 언어로 포스터를 요청하면 인쇄 해상도의 실제 PNG 또는 JPG 파일을 디스크에 씁니다. 감으로 레이아웃을 정하는 것이 아니라 디자인 시스템이 배치합니다.

이 페이지의 모든 포스터는 단 한 번의 도구 호출로 만들어졌습니다. 더 보기: 갤러리

목차

• 하는 일

• 작동 방식

• 설치

• AI 클라이언트에 연결하기

• 사용하기

• 도구

• 템플릿

• 크기, 팔레트, 이미지

• 포스터 저장 위치

• 토큰 비용

• 개발

• 문제 해결

• 만든 사람

• 라이선스

Related MCP server: Canvora MCP

하는 일

대부분의 AI 이미지 도구는 포스터를 그려 내므로 글자가 녹아내리고 전화번호는 지어낸 숫자가 됩니다. 이 서버는 포스터를 **조판(typeset)**합니다. 헤드라인은 실제 글꼴의 실제 텍스트이고, 가격은 당신이 지정한 그 가격이며, 출력물은 정확한 픽셀 크기(300dpi A4 기준 2480×3508)로 떨어져 바로 인쇄할 수 있습니다.

제공되는 것:

• 네 가지 레이아웃 — 이벤트, 브랜드 메시지, 제품 광고, 이정표 숫자라는 네 장의 참고 포스터에서 파생했습니다.

• 하나의 헥스 코드에서 나오는 팔레트. 브랜드 색상을 입력하면 여기에서 필드, 잉크, 액센트, 패턴 램프가 파생됩니다. 잉크 색은 대비 비율로 선택되어 텍스트 가독성이 유지됩니다.

• 자동 맞춤 표시 활자. 헤드라인은 가장 긴 줄이 여백에 닿을 때까지 커졌다가 멈춥니다. 줄바꿈은 사용자가 정하고, 크기는 서버가 정합니다.

• 실제 사진 처리 — 가장자리까지 꽉 차는 크롭, 초점 포인트, 그라데이션 스크림을 지원해 이미지 위에 글이 맨몸으로 놓이는 일이 없습니다.

• 인쇄·소셜 크기, PNG 또는 JPG를 원하는 대로.

작동 방식

  your prompt
      │
      ▼
  AI client  ──MCP/stdio──▶  poster-design-mcp
                                  │
                                  │ 1. pick a template  (src/templates/*.js)
                                  │ 2. derive the palette from brandColor
                                  │ 3. build an HTML + CSS document
                                  ▼
                            headless Chrome  ── screenshot ──▶  poster.png
                                                                     │
                                                                     ▼
                                                        ~/Documents/Poster Designs/

1. 디자인 시스템은 분위기가 아니라 숫자입니다. 네 장의 참고 포스터에서 열두 가지 규칙을 읽어 내어 src/design-system.js에 템플릿이 실제로 사용하는 값으로 기록했습니다. 너비의 6.8% 여백, 너비의 0.055~0.155 사이의 히어로 활자, 행간 0.90, 자간 −0.03em. DESIGN-PRINCIPLES.md의 설명과 렌더링된 픽셀은 같은 상수에서 읽으므로 문서가 결과물에서 어긋날 수 없습니다.

2. 템플릿이 당신의 카피를 문서로 바꿉니다. 네 개의 템플릿(src/templates/)은 각각 하나의 함수입니다. 콘텐츠를 넣으면 HTML과 CSS가 나옵니다. 밴드를 배치하고, 활자 역할을 정하고, 시드에서 장식 패턴을 생성하며, 로컬 이미지를 모두 data URI로 인라인합니다.

3. Headless Chrome이 레이아웃을 담당합니다. 브라우저에서 렌더링하면 실제 텍스트 레이아웃(폰트 폴백, 하이픈 연결, object-fit 크롭, mix-blend-mode: multiply 글자 형태)이 구현됩니다. 자동 맞춤 루프는 실제 레이아웃된 헤드라인을 측정하고 측정 폭을 채울 때까지 크기를 다시 조정합니다. 그런 다음 deviceScaleFactor의 힘으로 정확한 출력 크기로 페이지를 스크린샷하므로 300dpi A4는 업스케일이 아니라 진짜 2480×3508 픽셀입니다.

4. 파일은 Documents로 갑니다. MCP 서버는 클라이언트가 실행하며 실질적인 작업 디렉터리가 없습니다. 따라서 결과물은 찾을 수 있는 곳에 쓰고, 도구가 경로를 반환합니다.

업로드되는 것은 없습니다. API 키도, 네트워크 호출도 없습니다. 전체 파이프라인이 당신의 머신에서 실행됩니다.

설치

Node 20+ 및 Chrome/Chromium 바이너리가 필요합니다.

git clone https://github.com/suprisedr/poster-design-mcp.git
cd poster-design-mcp
npm install

npm install은 Puppeteer를 가져오며, 보통은 자체 Chrome도 내려받습니다. 내려받지 않았거나 다운로드를 건너뛰었다면:

npx puppeteer browsers install chrome

Chrome은 다음 순서로 찾습니다: $POSTER_CHROME_PATH → Puppeteer가 관리하는 Chrome → 일반적인 시스템 위치의 Google Chrome 또는 Chromium. 특정 바이너리를 지정하려면:

export POSTER_CHROME_PATH="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"

동작하는지 확인합니다:

npm test

이 스크립트는 stdio로 서버를 실행하고 모든 도구를 작동시켜 토큰 예산을 검증합니다. 그다음 눈으로 확인할 결과물을 만들려면:

npm run demo

템플릿당 포스터 하나씩 ./examples에 만듭니다.

AI 클라이언트에 연결하기

Claude Code

claude mcp add poster-design -- node /absolute/path/to/poster-design-mcp/src/server.js

Claude Desktop, 또는 모든 MCP 설정 파일

mcpServers에 추가합니다 (macOS에서 Claude Desktop의 설정 파일은 ~/Library/Application Support/Claude/claude_desktop_config.json에 있습니다):

{
  "mcpServers": {
    "poster-design": {
      "command": "node",
      "args": ["/absolute/path/to/poster-design-mcp/src/server.js"],
      "env": {
        "POSTER_BASE_DIR": "/absolute/path/to/poster-design-mcp"
      }
    }
  }
}

절대 경로를 사용하세요. 클라이언트는 예측할 수 없는 디렉터리에서 서버를 실행합니다.

클라이언트를 다시 시작하면 네 가지 도구가 나타납니다.

사용하기

연결이 끝나면 그냥 요청하면 됩니다:

Golden Crust Bakery용 A4 포스터를 만들어 줘. 수제 빵과 페이스트리, 123 Maple Street, 화요일일요일 오전 6시오후 6시 영업. 따뜻한 오렌지 톤으로, 이 빵 사진을 사용해.

클라이언트는 템플릿을 고르고 create_poster를 호출합니다. 내부적으로는 하나의 JSON 페이로드입니다:

{
  "template": "photo-overlay",
  "brandColor": "#0F918F",
  "size": "instagram-portrait",
  "format": "jpg",
  "content": {
    "brandName": "Guski",
    "logoBadge": true,
    "headline": "You love it,\nwe cover it",
    "subhead": "Cover that changes everything",
    "cta": { "label": "Get a quote", "phone": "061 306 081" },
    "legal": "Guski Short Term Insurance Ltd. Reg. No. 89/524.",
    "image": "examples/sample-photo.jpg",
    "imageFocus": "50% 45%"
  }
}

그러면 path | 2480x3508 png | 191KB | ... 같은 한 줄의 간결한 응답을 돌려주고 파일이 디스크에 저장됩니다.

카피를 작성할 때 알아두면 좋은 두 가지:

• 헤드라인에 \n을 사용해 줄바꿈 위치를 정하세요. 생성기는 당신이 쓴 들쭉날쭉한 줄(rag)을 채우도록 활자 크기를 정합니다. 따라서 줄바꿈은 디자인 결정이며, 그 결정권은 당신에게 있습니다.

• 짧게 유지하세요. 헤드라인은 2~5단어, 부제목은 45자 이내, 본문은 두 줄. 타입 스케일은 극단적인 대비를 기반으로 합니다. 긴 카피는 포스터를 전단지처럼 보이게 만듭니다.

갤러리

실제 출력물이며, 각각 도구 호출 한 번으로 만들었습니다.

샘플 사진은 데모용으로 포함된 플레이스홀더 이미지입니다. 자신의 이미지로 교체하세요.

도구

템플릿

그 뒤에 있는 규칙은 **DESIGN-PRINCIPLES.md**에 있습니다. 포스터당 메시지 하나, 박스가 아닌 밴드, 6~12배 스케일 대비, 하나의 여백 값, 마지막은 알약 모양 CTA로 끝맺기.

크기, 팔레트, 이미지

크기. a4-print (2480×3508 @300dpi), a3-print, a5-flyer, poster-hd, instagram-post, instagram-portrait, story, web-banner — 또는 width와 height를 픽셀 단위로 전달하세요. 출력물은 정확히 그 크기로 생성됩니다.

색상. brandColor에 헥스 코드를 전달하면 전체 팔레트가 그것에서 파생됩니다. 또는 palette에 명명된 세트 중 하나(festival-block, prism-glass, night-drive, signal-teal, mono-ink)를 전달할 수 있으며, 이 값은 brandColor보다 우선합니다.

이미지. image, logo, badge.logo, partners[].logo는 로컬 경로(절대 경로, ~, 또는 POSTER_BASE_DIR 기준 상대 경로) 또는 http(s) URL을 받습니다. 로컬 파일은 렌더링 전에 data URI로 인라인됩니다. stat-hero에서는 투명 PNG에 오려낸 피사체를 넣으면 피사체가 숫자를 가로지르는 효과를 얻을 수 있습니다.

포스터 저장 위치

완성된 포스터는 **~/Documents/Poster Designs**에 저장됩니다.

기본 위치를 다른 곳으로 옮기려면 POSTER_OUTPUT_DIR을 설정하고, 정확한 파일 하나를 지정하려면 outputPath를 사용하세요.

토큰 비용

MCP 서버의 도구 목록은 모든 세션의 모든 요청마다 다시 전송됩니다. 그래서 이 서버는 컨텍스트에 유지하기에 부담이 적도록 작성되었습니다:

• 도구 목록은 ~2,600토큰에서 ~990토큰으로 줄었습니다. 여기에는 이름, 옵션, 필드 이름이 포함됩니다. 필드 의미는 list_poster_templates 뒤로 옮겨졌으며, 이 도구는 필요한 호출자가 한 번 호출합니다.

• list_poster_templates는 ~1,700 대신 ~390토큰을 반환합니다. 네 개의 레이아웃 전체 대신 하나의 레이아웃에 대한 template id를 전달하세요.

• get_design_principles는 ~1,700 대신 ~280토큰을 반환합니다. 전체 추론을 보려면 detail: true를 사용하세요.

• 결과는 보기 좋은 JSON이 아니라 간결한 한 줄입니다.

• 인라인 미리보기 이미지(포스터당 200–500토큰)는 preview: true를 통해 선택 사항입니다. 파일은 Documents에 있으며, 이를 확인하기에 더 좋은 위치입니다.

npm test는 도구 목록 예산을 검증하므로, 가장 비용이 많이 드는 부분에서의 회귀는 빌드를 실패시킵니다.

개발

npm run demo    # one poster per template into ./examples
npm test        # boots the server over stdio, exercises every tool, checks the token budgets

src/
  server.js          MCP wiring: tool list, dispatch, terse results
  poster.js          orchestration — template → HTML → render → write
  design-system.js   the twelve rules as numbers: palettes, type scale, layout ratios
  templates/         one file per layout, each content → { body, css }
  lib/
    html.js          document assembly and escaping
    pattern.js       seeded decorative pattern generation
    media.js         image resolution and data-URI inlining
    render.js        headless Chrome lifecycle and screenshotting
    paths.js         output directory resolution

saveHtml: true는 이미지 옆에 HTML 소스를 작성합니다. 이는 어떤 것이 왜 그런 식으로 배치되었는지 확인하는 가장 빠른 방법입니다. seed는 패턴과 지터를 재현 가능하게 만듭니다.

문제 해결

제작자

Suprise Nkosi가 제작했습니다.

• Facebook — facebook.com/suprise.nkosi.524

• GitHub — @suprisedr

이슈와 풀 리퀘스트를 환영합니다.

라이선스

MIT — LICENSE를 참조하세요.