AI에게 「이 스타일로」라고 전달하고 싶어서 MCP 툴을 만든 이야기

AI 이미지 생성을 사용하면서 이런 경험을 해본 적이 없으신가요?

「느낌 있는 UI를 만들어줘」... 「뭔가 달라」

「좀 더 심플하게」... 「그게 아니야」

「미니멀하고, 여백을 소중히 하며, 일본풍(和) 느낌으로...」... 「음, 아깝지만 뭔가 달라」

프롬프트(Prompt)를 아무리 정성스럽게 써도, 머릿속에 있는 비주얼 이미지는 좀처럼 전달되지 않습니다.

비주얼의 언어화는 어려운데, AI는 텍스트(Text)밖에 받을 수 없습니다.

이 문제를 해결하려고 만든 것이 Fivia입니다.

Fivia는 AI에게 전달할 비주얼 컨텍스트(Visual Context)를 관리하는 툴입니다.

이름은 Figment

(상상·이미지의 파편)와 via

(경유하여 전달함)을 조합한 조어입니다. 모은 비주얼의 파편을 정리하여 AI에게 전달한다는 컨셉입니다.

웹 브라우징 중에 「이 톤, 마음에 드네」라고 생각한 이미지를 우클릭 한 번으로 아트보드(Artboard)에 저장할 수 있습니다.

「wabi-sabi」, 「techno-minimal」, 「dark UI」 등 테마별로 아트보드를 나누어 둠으로써, 자신만의 비주얼 레퍼런스 라이브러리(Visual Reference Library)가 성장해 나갑니다. Pinterest와 비슷한 감각이지만, AI에게 전달하는 것을 전제로 설계되었습니다.

Fivia의 본체는 여기입니다.

@fivia/mcp라는 MCP 서버를 제공하며, Claude Code 등에 연결함으로써 AI가 아트보드를 참조할 수 있게 됩니다.

// ~/.claude/mcp.json
{
"mcpServers": {
...

MCP 툴은 딱 2개로 심플하게 구성했습니다:

• 자신의 아트보드 목록을 가져오는 list_artboards
• 지정한 아트보드의 이미지(base64 포함)와 메타 정보(Meta information)를 가져오는 get_artboard

「이미지 URL을 그대로 프롬프트에 붙여넣으면 되지 않을까?」라고 생각하실지도 모릅니다.

하지만 실제로는 다음과 같은 문제가 있습니다:

• AI 서비스에 따라 URL을 통한 이미지 취득을 지원하지 않음 (base64 입력만 가능한 API가 있음)
• 이미지가 삭제되거나 이동되면 취득할 수 없게 됨
• 「왜 그 이미지를 참고하고 싶은지」라는 의도가 전달되지 않음

Fivia의 get_artboard는 이에 대응하여 이미지 URL과 base64를 모두 반환합니다. 이와 함께 아트보드 이름, 설명문, 출처 정보를 메타데이터(Metadata)로 부여합니다.

{
"name": "Wabi-sabi",
"description": "불완전함, 여백, 자연 소재의 질감. 과도한 장식을 피함",
...

아트보드의 description(설명문)이 중요하며, 「무엇을 참고해주길 바라는지」를 여기에 적어둠으로써 이미지만으로는 전달되지 않는 컨텍스트를 보완합니다.

Fivia가 해결하려고 한 것을 정리하면 다음과 같습니다.

문제	Fivia의 접근 방식
프롬프트만으로는 스타일이 전달되지 않음	이미지(base64) + 메타데이터를 MCP로 전달
...	...

텍스트 프롬프트의 한계를 비주얼로 보완한다는 심플한 아이디어를 Chrome 확장 프로그램, WebApp, MCP 서버의 3종 세트로 구현했습니다.

아직 MVP 단계이지만, Chrome Web Store 출시와 MCP 서버의 npm 공개(@fivia/mcp)를 진행하고 있습니다. 관심이 있다면 꼭 한번 시도해 보세요.