Claude API 앱에 SVG 아이콘 접근 권한 부여하기 (MCP 사용)

AI 기반 애플리케이션을 구축할 때, 언어 모델을 실제 개발 자산과 연결하는 것은 놀라울 정도로 유용할 수 있습니다.

대시보드 빌더를 생각해 보세요. 개발자가 원하는 인터페이스를 설명하면, 애플리케이션이 구성 요소(components), 레이아웃(layouts), 아이콘 등을 제안합니다.

레이아웃 제안은 합리적일 수 있습니다. 하지만 모델이 실제 SVG 아이콘을 추천해야 할 때는 어떻게 될까요?

아이콘 카탈로그에 접근할 수 없다면, 일반적인 이름을 제안하거나, 식별자를 지어내거나, 호환되지 않는 아이콘 스타일을 혼합할 수 있습니다.

더 나은 방법은 모델이 실제 아이콘 카탈로그를 검색하도록 하는 것입니다.

본 튜토리얼에서는 Claude Messages API를 SVGicons MCP 서버에 연결하여, Claude가 아이콘을 발견하고 사용자 인터페이스에 일관된 아이콘 세트를 추천할 수 있도록 하는 방법을 알아봅니다.

문제점: AI는 아이콘을 제안할 수 있지만, 찾을 수 있을까요?

다섯 개의 탐색 항목이 있는 분석 대시보드를 구축한다고 상상해 보세요:

개요 (Overview)
보고서 (Reports)
활동 (Activity)
설정 (Settings)
알림 (Notifications)

인식 가능한 아이콘을 원하지만, 시각적으로 일관된 스타일을 공유하기를 바랍니다.

각 항목에 대해 수동으로 아이콘 라이브러리를 검색하거나, Claude에게 아이콘 이름을 제안하도록 요청할 수 있습니다.

두 번째 접근 방식은 편리하지만 한계가 있습니다. 언어 모델은 특정 카탈로그에서 현재 어떤 아이콘이 사용 가능한지 자동으로 알지 못하기 때문입니다.

존재하지 않는 식별자를 추천하거나, 관련 없는 계열의 아이콘을 조합할 수 있습니다.

대신, Model Context Protocol (MCP)을 사용하여 Claude를 검색 가능한 아이콘 카탈로그에 연결할 수 있습니다.

1. 통합 작동 방식

MCP는 AI 애플리케이션이 표준화된 인터페이스를 통해 외부 도구 및 데이터 소스와 상호 작용할 수 있도록 합니다.

Anthropic은 Claude Messages API를 위한 MCP 커넥터를 제공합니다. 이를 사용하면 별도의 MCP 클라이언트를 구현할 필요 없이 원격 MCP 서버와 통신할 수 있습니다.

우리는 SVGicons 서버를 사용할 것입니다:

https://svgicons.com/mcp

아키텍처는 간단합니다:

Your Application
       |
       v
...

사용자 애플리케이션이 Claude로 요청을 보냅니다.

Claude는 사용 가능한 SVGicons 도구를 사용하여 관련 아이콘을 검색하고, 후보들을 비교하며, 추천 결과를 반환할 수 있습니다.

중요한 차이점은 추천 결과가 생성된 아이콘 이름이 아니라 실제 카탈로그 기반의 결과일 수 있다는 것입니다.

2. 준비물

시작하기 전에 다음 사항을 갖추었는지 확인하세요:

Claude Messages API에 접근할 수 있는 Anthropic API 키.
활성화된 SVGicons Pro 구독.
인증된 MCP 워크플로우를 위한 유효한 SVGicons 액세스 토큰.
cURL 실행이 가능한 터미널.

SVGicons Pro에는 MCP 접근과 같은 개발자 통합 기능이 포함되어 있습니다.

구독 정보는 SVGicons 가격 페이지에서 확인할 수 있습니다.

Anthropic API와 SVGicons 구독은 별개의 서비스이므로, 각각의 접근 요구 사항 및 요금이 독립적입니다.

두 자격 증명 모두 브라우저 측 코드에 노출하기보다는 애플리케이션 백엔드에 보관하세요.

3. Claude를 SVGicons MCP 서버에 연결하기

Claude Messages API는 원격 MCP 통합을 위해 두 가지 주요 필드를 사용합니다:

mcp_servers: Claude가 연결할 수 있는 서버를 정의합니다.

tools: Claude가 사용할 수 있도록 허용된 MCP 도구를 정의합니다.

예시의 경우, 우리는 세 가지 SVGicons 기능에 관심이 있습니다:

search_icons: 검색어와 일치하는 아이콘을 찾습니다.
search_icon_sets: 사용 가능한 아이콘 패밀리를 발견합니다.
recommend_icons_for_ui: UI 요소의 후보를 찾습니다.

모든 사용 가능한 서버 작업을 활성화하기보다는, Claude가 이러한 검색 도구에만 제한되도록 할 것입니다.

다음은 cURL을 사용한 예시입니다.

curl https://api.anthropic.com/v1/messages \
  -H "x-api-key: $ANTHROPIC_API_KEY" \
  -H "anthropic-version: 2023-06-01" \
...

플레이스홀더를 사용자의 Claude 모델 ID와 적절한 자격 증명으로 교체하세요.

authorization_token 필드는 원격 MCP 서버에 인증하는 데 사용되는 액세스 토큰을 전달합니다. 이 통합에 대해 토큰이 유효한지 확인하십시오.

운영 환경(production application)에서는 자격 증명(credentials)을 소스 제어(source control)에 저장된 요청 페이로드(request payload)에 하드코딩하는 대신 백엔드에서 안전하게 주입해야 합니다.

기본적으로 도구(tools)를 명시적으로 비활성화하고 세 가지 디스커버리 작업(discovery operations)만 활성화한다는 점에 유의하세요.

이를 통해 관련 없는 작업을 노출하지 않으면서도 Claude가 우리의 작업에 필요한 기능에 접근할 수 있게 됩니다.

4. 일관된 아이콘 추천 요청하기

서버를 연결하는 것은 첫 단계일 뿐입니다.

추천의 품질은 인터페이스 요구 사항을 얼마나 명확하게 설명하느냐에도 달려 있습니다.

이 두 가지 프롬프트를 비교해 보세요.

일반적인 요청:

대시보드에 사용할 아이콘을 찾아주세요.

더 유용한 요청:

개요(Overview), 보고서(Reports), 활동(Activity), 설정(Settings), 알림(Notifications)에 사용할 아이콘을 찾아주세요. 단일 아이콘 패밀리, 일관된 스트로크 너비, 아웃라인 스타일을 선호합니다. SVGicons 카탈로그에서 찾은 식별자만 반환해 주세요.

두 번째 프롬프트는 실제 인터페이스 디자인에서 중요한 제약 조건들을 제공합니다.

이는 Claude가 모든 아이콘을 개별적으로 선택하기보다는 전체 탐색 시스템(navigation system)의 일관성을 고려하도록 요청합니다.

애플리케이션은 다음과 같은 요구 사항도 제공할 수 있습니다:

UI 컨텍스트:
- 데스크톱 분석 대시보드
- 왼쪽 탐색 사이드바
...

하지만 이것이 모든 추천이 완벽하다는 것을 보장하지는 않습니다.

하지만 Claude에게 더 나은 출발점을 제공하고 아이콘 카탈로그가 실제 후보군을 제공하도록 할 수 있습니다.

5. 사용하기 전에 결과 검증하기

AI를 개발 워크플로우에 통합할 때 중요한 원칙 중 하나는 추천과 구현을 분리하는 것입니다.

Claude가 외부 도구를 사용하더라도, 최종 응답이 자동으로 검증된 애플리케이션 데이터로 간주되어서는 안 됩니다.

예를 들어, 애플리케이션은 다음과 같은 내용에 해당하는 제안을 받을 수 있습니다:

탐색 항목	아이콘 컨셉
개요(Overview)	그리드 또는 대시보드
...

이러한 컨셉들은 예시일 뿐, 검증된 SVGicons 카탈로그 식별자는 아닙니다.

애플리케이션은 실제 도구 검색을 통해 반환되는 식별자를 사용해야 합니다.

추천을 수락하기 전에 다음 사항들을 확인해야 합니다:

해당 아이콘이 선택된 카탈로그에 존재하는지.
의도한 아이콘 패밀리에 속하는지.
시각적 스타일이 다른 선택 항목들과 호환되는지.
라이선스 조건이 프로젝트에 적합한지.
SVG 마크업을 안전하게 통합할 수 있는지.

마지막 점이 중요합니다.

예를 들어, 하드코딩된 색상을 포함하는 아이콘은 다크 모드에 올바르게 적용되지 않을 수 있습니다.

currentColor와 함께 사용하도록 의도된 SVG는 명시적인 채우기(fill)를 사용하는 경우와 다른 처리가 필요할 수 있습니다.

접근성 역시 애플리케이션의 책임으로 남습니다. 아이콘만 있는 버튼이라도 접근 가능한 이름이 필요합니다.

MCP가 에셋을 발견하는 데 도움을 줄 수는 있지만, 해당 에셋들이 어떻게 사용되는지 검토해야 할 필요성을 없애지는 못합니다.

6. 인증 및 검색 실패 처리

프로덕션 통합은 성공적인 검색 이상의 것을 처리할 수 있어야 합니다.

만료된 액세스 토큰, 불충분한 권한, 사용 불가능한 서버 또는 적절한 아이콘을 반환하지 않는 검색 등의 상황에 직면할 수 있습니다.

애플리케이션은 모든 실패를

어시스턴트가 개발자가 에디터와 브라우저를 전환하지 않고도 아이콘을 찾도록 돕습니다.

디자인 시스템 어시스턴트(Design system assistants)

이 도구는 확립된 스타일이나 아이콘 패밀리를 따르면서 아이콘을 추천합니다.

애플리케이션 프로토타이핑(Application prototyping)

개발자는 초기 인터페이스를 생성하는 동시에 가능한 아이콘 선택지를 빠르게 탐색할 수 있습니다.

하지만 MCP가 항상 올바른 해결책은 아닙니다.

만약 애플리케이션이 필요한 아이콘 식별자(icon identifiers)를 정확히 알고 있다면, 직접적인 API 호출이나 정적 아이콘 패키지가 더 간단하고 예측 가능할 수 있습니다.

MCP의 이점은 요청에 의도 해석(interpreting intent), 외부 데이터 검색(searching external data), 그리고 대안 비교가 포함될 때 더욱 명확해집니다.

8. 개발자가 통제권을 유지하도록 하라

가장 유용한 AI 개발 도구는 반드시 모든 결정을 자동화하는 것은 아닙니다.

그것들은 중요한 선택을 보이게 하면서 반복적인 작업을 줄여줍니다.

아이콘 선택의 경우, 실용적인 워크플로우는 다음과 같을 수 있습니다:

1. 개발자가 인터페이스를 설명합니다

2. Claude가 요구사항을 해석합니다
...

이 접근 방식은 자연어 상호작용과 실제 디자인 에셋 소스를 결합합니다.

Claude는 해석 및 추천을 처리합니다.
SVGicons는 검색 가능한 아이콘 리소스를 제공합니다.
애플리케이션이 검증(validation) 및 통합을 제어합니다.

이러한 분리는 워크플로우를 이해하고, 유지보수하며, 확장하기 더 쉽게 만듭니다.

결론

AI 애플리케이션에 실제 디자인 에셋에 대한 접근 권한을 부여하는 것이 모델에게 메모리에서 리소스를 상상하도록 요청하는 것보다 훨씬 유용합니다.

Claude Messages API와 SVGicons와 같은 MCP 서버를 사용하면, 개발자는 자연어 요청을 실제 SVG 아이콘 카탈로그에 연결할 수 있습니다.

통합은 비교적 작지만, 중요한 아키텍처 원칙을 도입합니다. 즉, 요구사항 해석에는 언어 모델(language model)을 사용하고, 검증 가능한 데이터 검색에는 외부 도구(external tools)를 사용하는 것입니다.

UI 개발의 경우, 이는 아이콘을 찾는 시간을 줄이고 인터페이스 전반에 걸쳐 더 일관된 결과를 얻는 것을 의미할 수 있습니다.

개발자가 최종 디자인 결정을 내리지만, 발견(discovery) 과정은 훨씬 쉬워집니다.

추가 자료

추가적인 설정 세부 정보 및 통합 예제는 공식 SVGicons 가이드를 참조하세요:

Claude API MCP Connector — SVGicons

또한 다음을 탐색할 수 있습니다:

AI 지원 개발 도구를 구축한다면, 모델이 아이콘을 자동으로 선택하도록 할 것인가요, 아니면 개발자가 검토할 수 있도록 후보군을 제안하도록 하는 것을 선호하시나요?