AI에게 랜딩 페이지를 만들어 달라고 했더니 어디선가 본 듯한 커다란 제목, 그라데이션 배경, 둥근 카드만 반복된 적 있나요? 그런 상황이라면 ‘세련되게 만들어 줘’라는 주문을 한 번 더 하는 대신 실제 사이트를 먼저 보여주는 편이 낫습니다. Inspo MCP는 코딩 에이전트가 웹사이트 디자인 레퍼런스를 직접 검색해 화면을 설계하도록 돕는 무료 연결 도구입니다. 무엇을 설치하고 어떻게 요청해야 하는지, 또 결과물을 어디까지 참고해야 하는지 짚어보겠습니다.
Inspo MCP는 예쁜 화면 모음과 무엇이 다를까
평범한 디자인 갤러리는 사람이 직접 사이트를 둘러보고 마음에 드는 이미지를 저장하는 방식입니다. 반면 이 도구는 MCP라는 연결 방식을 통해 AI 코딩 에이전트가 자료를 읽도록 만든 서비스입니다. 사용자가 만들려는 서비스와 페이지 목적을 설명하면 에이전트는 관련 사례를 찾고 디자인 구성에 반영할 근거를 받아올 수 있죠. 저는 단순히 화면을 구경하는 기능보다 ‘코드를 쓰기 전에 참고 대상을 정한다’는 작업 순서가 눈에 들어왔습니다.
Inspo 공식 갤러리에는 2026년 10월 확인 시점 기준 실제 운영 사이트 832개와 화면 2,320개가 소개돼 있습니다. 각 화면은 데스크톱·모바일 캡처를 갖추고 있으며 글꼴, 색상, 레이아웃 구조 같은 자료를 제공합니다. 자료 수가 많다고 무조건 좋은 결과가 나오는 건 아니지만, 빈 화면에서 모호한 분위기만 지시하는 것보다는 선택할 수 있는 근거가 훨씬 구체적이에요.
예를 들어 음악 행사 페이지와 기업용 데이터 대시보드는 정보를 보여주는 우선순위부터 다릅니다. 그런데 참고 자료 없이 AI에게 둘 다 ‘모던하게’라고만 말하면 비슷한 카드형 화면으로 흘러갈 수 있습니다. Inspo에서는 업종, 화면 유형, 구성 형태를 힌트로 삼아 서로 다른 실제 사례를 찾아볼 수 있어서 이런 어긋남을 줄이는 데 도움이 됩니다.
무료로 제공되는 범위와 디자인 자료의 종류
운영사의 공식 소개에는 호스팅된 MCP 서버가 무료이며 별도 요금제나 유료 장벽이 없다고 명시돼 있습니다. 계정 인증 없이 연결하는 방식도 제공합니다. 다만 연결된 Claude Code나 다른 코딩 도구의 사용료, API 사용 비용까지 무료라는 말은 아닙니다. 이 차이를 모르고 설치하면 나중에 비용을 오해하기 쉬워요.
화면 캡처만 모아둔 서비스라고 생각했다면 아래 구성은 의외일 수 있습니다. 실제 운영 사이트를 분석해 추출한 디자인 수치와 재사용 가능한 참고 컴포넌트까지 함께 제공하기 때문입니다. 저는 특히 기존 프로젝트의 색상과 글꼴을 맞춰야 할 때 사이트별 디자인 시스템 파일이 유용할 것 같습니다.
| 제공 자료 | 공식 안내 규모 | 화면 제작에서 쓸 자리 |
|---|---|---|
| 실제 운영 웹사이트 | 832개 | 업종과 분위기가 맞는 사례 선정 |
| 수집된 화면 | 2,320개 | 데스크톱과 모바일 구성 비교 |
| 참고 컴포넌트 | 68개 | 히어로 영역·가격표·내비게이션 구조 참고 |
| 사이트별 DESIGN.md | 사이트마다 제공 | 색상 역할·글자 크기·여백 규칙 점검 |
| 호스팅 MCP | 무료·인증 불필요 | 코딩 에이전트에 자료 연결 |
여기서 DESIGN.md는 사이트의 색상 역할, 서체 크기 체계, 간격과 CSS 변수 등을 읽기 쉽게 정리한 파일을 말합니다. 보기 좋은 사이트 한 장을 그대로 따라 그리는 대신 어떤 규칙으로 균형을 잡았는지를 살펴볼 수 있다는 점이 좋습니다. 숫자와 구성은 서비스가 갱신되면 달라질 수 있으니 현재 제공 범위를 볼 때는 공식 MCP 안내 페이지가 기준입니다.
터미널 한 줄 설치와 설정 변경 전 점검
설치는 Node.js와 npm의 npx 명령을 쓸 수 있는 개발 환경에서 진행합니다. 터미널을 열어 아래 명령을 입력하면 설치 도구가 컴퓨터에 있는 MCP 클라이언트를 찾아 연결 설정을 제안합니다. 공식 문서에서 안내하는 명령은 npx -y inspo-mcp install입니다. -y는 npx가 패키지를 실행할 때 물어보는 확인을 생략하는 옵션이므로, 이미 다른 설명에서 이 부분이 빠진 명령을 봤더라도 당황할 필요는 없습니다.
- 터미널에서
node -v와npm -v로 실행 환경을 확인합니다. - 기존 설정이 걱정되면
npx -y inspo-mcp install --dry-run을 먼저 실행해 변경 계획만 살펴봅니다. - 문제가 없으면
npx -y inspo-mcp install을 실행하고 제안되는 클라이언트와 설정을 읽은 뒤 진행합니다. - 사용 중인 코딩 에이전트를 다시 시작하고 MCP 도구 목록에서 Inspo가 연결됐는지 살펴봅니다.
여기서 주의할 점 하나. 설치 명령은 화면 디자인을 곧장 만들어주는 명령이 아니라 코딩 도구의 MCP 연결 설정을 추가하는 절차입니다. 공식 문서에 따르면 변경 대상 설정 파일은 백업되며, Zed는 기존 주석을 보존하도록 수정 내용을 직접 붙여 넣는 방식으로 안내합니다. 여러 편집기를 쓰는 사람이라면 자동 탐지 결과에 원하지 않는 클라이언트가 섞여 있는지 보는 편이 마음 편하겠습니다.
Claude Code와 Cursor에서 직접 연결하는 경우
자동 설치가 부담스럽거나 특정 프로그램 하나만 연결하고 싶을 수도 있겠죠. 이때는 Inspo의 무료 호스팅 주소인 https://inspomcp.dev/api/mcp를 사용하면 됩니다. 설치 도구가 지원하는 클라이언트는 Claude Code, Cursor, Codex, VS Code, Windsurf, Zed, Claude Desktop 등입니다. 클라이언트마다 설정 화면과 파일 위치가 다르기 때문에 한 프로그램의 설정을 다른 곳에 그대로 붙여 넣는 것은 피하세요.
Claude Code는 터미널에서 claude mcp add --transport http inspo https://inspomcp.dev/api/mcp로 등록할 수 있다고 공식 문서에 적혀 있습니다. Cursor라면 사용자 설정 파일 ~/.cursor/mcp.json 안의 mcpServers 항목에 서버 이름 inspo와 위 URL을 등록하는 방식입니다. 설치 후 목록에 서버가 없으면 에이전트를 재시작하고 MCP 설정 화면에서 활성화 여부를 살피는 순서가 좋습니다.
자동 설치 명령과 수동 연결 중 무엇이 더 좋을까요? 처음 시도하는 사람은 설치 전 변경 계획을 보고 자동 설치를 선택하는 편이 편하겠습니다. 이미 MCP 서버를 여럿 관리하거나 팀별 설정을 따로 쓰는 개발자라면 수동 등록이 관리하기 쉬울 것 같아요. 서버 자체는 같은 자료를 제공하므로 차이는 연결 방식에 있습니다.
AI에게 실제 디자인 레퍼런스를 찾게 하는 요청 문장
연결했다면 프롬프트부터 달라져야 합니다. ‘감각적인 쇼핑몰을 만들어 줘’보다는 누구에게 어떤 정보를 가장 먼저 보여줄지 명시하는 편이 효과적입니다. 예를 들어 ‘소규모 사진 스튜디오 예약 페이지를 만들 거야. 모바일 방문자가 가격과 예약 버튼을 빨리 찾도록 실제 사이트 3곳을 참고해 구조를 비교하고, 우리 브랜드의 따뜻한 색상을 유지한 뒤 구현해 줘’처럼 요청할 수 있겠죠.
공식 MCP에는 요청문을 바탕으로 사례와 구성 제안을 모아주는 recommend, 화면을 검색하는 search_screens, 개별 사이트의 디자인 규칙을 가져오는 get_design_system, 참고 컴포넌트 코드를 확인하는 get_reference_jsx 같은 도구가 마련돼 있습니다. 도구 이름을 외울 필요까지는 없지만, AI가 무엇을 근거로 화면을 구성하는지 물어볼 때는 도움이 됩니다. 마음에 드는 첫 결과 하나만 따르기보다 서로 다른 사례의 장단점을 비교하게 해 보세요.
제가 추천하고 싶은 작업 순서는 간단합니다. 먼저 참고 사례를 찾고, 선택 이유와 모바일 화면 구조를 설명받은 다음, 사이트의 색상과 글꼴 규칙을 정한 후 코드 제작을 시작하는 겁니다. 이렇게 하면 구현이 끝난 뒤에야 ‘왜 이런 모양이지?’ 하고 되돌리는 일을 줄일 수 있을 것 같아요.
| 막연한 지시 | 디자인 근거가 생기는 지시 |
|---|---|
| 깔끔하고 세련되게 만들어 줘 | 실제 예약 서비스 사례를 비교하고 모바일 예약 버튼을 우선 배치해 줘 |
| 멋진 가격표를 만들어 줘 | 가격제 비교 컴포넌트 사례를 찾고 차이가 드러나는 열 구조를 제안해 줘 |
| 폰트랑 색을 예쁘게 바꿔 줘 | 참고 사이트의 글자 크기·색상 역할을 분석해 우리 브랜드에 맞게 조정해 줘 |
실제 사이트를 참고할 때 피해야 할 실수
이 도구가 가장 잘 맞는 작업은 랜딩 페이지, 포트폴리오, 서비스 소개 페이지처럼 화면 분위기와 정보 구조의 비중이 큰 작업입니다. 반대로 복잡한 결제 규칙이나 개인정보 처리, 접근성 검증까지 자동으로 해결해 주지는 않습니다. 디자인이 근사해졌더라도 버튼이 실제로 동작하는지, 작은 화면에서 글이 잘리지 않는지, 키보드로 이동할 수 있는지까지 따로 확인해야 합니다.
실제 운영 사이트를 참고한다는 말 때문에 캡처나 컴포넌트를 그대로 복제해도 된다고 오해하기 쉽습니다. 하지만 사이트의 로고, 사진, 문구, 독창적인 그래픽은 각 제작자의 권리가 걸린 영역입니다. 오픈소스 저장소의 서버 코드가 MIT 라이선스라고 해서 수집된 사이트의 디자인 자산까지 자유롭게 재배포할 수 있는 건 아닙니다. 저는 레이아웃의 원리와 정보 배치 방식을 배우되 결과물의 브랜드 요소는 직접 만드는 쪽을 권합니다.
또 한 가지 아쉬운 점은 좋은 사례를 많이 가져와도 에이전트가 사용자와 서비스에 맞는 판단까지 대신해 주지는 못한다는 사실입니다. 코딩 전에 ‘선택한 사례 세 곳과 다른 점, 모바일에서 줄어드는 요소, 원본을 그대로 따라 하지 않을 부분’을 설명하게 해 보세요. 참고 자료가 화려할수록 오히려 무엇을 버릴지가 중요해지거든요. 공식 제작 사례를 보면 레퍼런스와 실제 결과물을 연결해 살펴보는 감각을 잡는 데 도움이 됩니다.
자주 묻는 질문
Q. Inspo MCP를 사용하려면 결제가 필요한가요?
호스팅된 Inspo 서버는 공식 안내상 무료이며 별도 인증이 필요하지 않습니다. 다만 연결해서 사용하는 AI 코딩 도구의 요금은 별개입니다.
Q. Claude Code가 없어도 설치할 수 있나요?
가능합니다. Cursor, Codex, VS Code 등 다양한 MCP 클라이언트가 지원됩니다. 자동 설치 시 탐지되는 프로그램 목록을 먼저 살펴보세요.
Q. 화면 이미지를 그대로 복사해서 상업 사이트에 써도 되나요?
원본 사이트의 저작권과 상표권을 고려해야 합니다. 구조와 사용 흐름은 참고하되 이미지·로고·문구·시각 자산은 별도로 제작하는 방식이 안전합니다.
Q. 설치 후 아무런 화면도 나오지 않는데 실패한 건가요?
MCP는 코딩 에이전트 내부에서 자료를 제공하는 연결 도구입니다. 터미널에서 서버를 실행했다고 웹페이지가 자동으로 뜨는 방식이 아니므로, 코딩 도구를 열어 MCP 연결 상태와 사용 가능한 도구를 살펴보세요.
출처와 참고한 곳
- Inspo 공식 사이트 — 운영 사이트와 화면 자료 규모, 갤러리 구성
- Inspo MCP 공식 안내 — 설치 명령어, 무료 제공과 MCP 도구 목록
- Nutlope의 GitHub 저장소 — 클라이언트 연결 방식과 소스 라이선스
- AI Sparkup 소개 글 — 실제 디자인 사례를 구현에 활용할 때의 관점
