골든래빗은 더 탁월한 가치를 제공하는 콘텐츠 프로덕션 & 프로바이더 입니다. 골든래빗은 취미, 경제, 수험서, 만화, IT 등 다양한 분야에서 책을 제작하고 있습니다.골든래빗은 더 탁월한 가치를 제공하는 콘텐츠 프로덕션 & 프로바이더 입니다. 골든래빗은 취미, 경제, 수험서, 만화, IT 등 다양한 분야에서 책을 제작하고 있습니다.

[MCP 01] 피그마 MCP로 화면 명세서 만들기

2026년 6월 3일조회 1

이 글은 《이게 되네? 클로드 MCP 커넥터 미친 활용법 31제》에서 발췌했습니다.

이게 되네? 클로드 MCP 커넥터 미친 활용법 31제

이게 되네? 클로드 MCP 커넥터 미친 활용법 31제

ISBN 9791124516270지은이 박현규, 김성경24,000
교보문고예스24알라딘

[MCP] 피그마 MCP로 화면 명세서 만들기

캔바가 빠른 홍보물 제작에 강하다면, 피그마Figma는 웹 사이트나 앱 화면처럼 구조가 중요한 디자인에 강합니다. 피그마 MCP는 피그마 파일의 프레임, 레이어, 컴포넌트, 색상, 레이아웃 정보를 AI가 읽을 수 있게 해줍니다.

피그마 MCP는 일반적인 클로드 채팅보다 Claude Code, Cursor, VS Code 같은 MCP 클라이언트와 함께 사용할 때 특히 강력합니다. 피그마 공식 문서에서는 원격 MCP 서버 사용을 권장하며, 지원 클라이언트와 기능은 계속 업데이트되고 있습니다.

01 먼저 피그마 데스크톱 애플리케이션을 다운로드합니다. 사용하는 운영체제에 맞는 파일을 내려받고 설치한 뒤 로그인하세요.

피그마 다운로드 : figma.com/ko-kr/downloads/

02 피그마 MCP도 커넥터로 제공됩니다. 클로드의 커넥터 메뉴에서 [+ ➝ 커넥터 둘러보기]를 누르고 검색창에 Figma를 입력합니다. Canva 커넥터가 보이면 [+]를 눌러 연결을 시작합니다.

02 그러면 다음과 같은 인증 과정을 거칩니다. [Agree & Allow Access]를 눌러 권한을 승인하고 업데이트 메일을 받을지 여부는 원하는 대로 선택하세요.

03 피그마 MCP를 사용해서 가상의 메신저 화면을 만들어달라고 요청하겠습니다. 클로드에서 다음과 같이 요청합니다.

[나] : 피그마에 가상의 메시지 앱을 디자인해줄래? 아이폰 16 화면비에 맞춰줘.

[AI] : 완성입니다! Figma에서 열기

Bubble 이라는 가상의 메시지 앱을 iPhone 16 기준(393 × 852pt)으로 3개 화면을 디자인했어요.

화면 구성

Chat List — 상단 내비 + 검색 바 + 대화 목록(읽지 않은 수 뱃지, 마지막 메시지 미리보기) + 하단 탭 바

Chat Detail — 뒤로 가기 + 연락처 정보 + 수신/발신 말풍선 + 메시지 입력창

Contact Profile — 대형 아바타 + 온라인 상태 표시 + 전화/메시지/영상통화 버튼 + 연락처 정보 + 공유된 사진

디자인 포인트

테마 컬러: 보라색(#7B5EA7) 계열

발신 말풍선은 보라 배경 + 흰 글씨, 수신은 연보라 배경 + 검정 글씨

iOS 스타일 상태바, 탭 바, 구분선 적용

잠시 기다리니 피그마가 가상의 앱 이름과 컨셉까지 만들어서 앱 디자인을 완료했다고 합니다. 링크를 눌러 파일을 열면 다음과 같이 웹 페이지 시안이 뚝딱 만들어져 있습니다.

04 피그마를 사용하는 사람들이라면 디자인을 만드는 것만큼 이 디자인을 개발자하게 정확하게 전달하는 것도 중요할 것입니다. 이제 앞서 만든 화면을 분석하여 개발팀에 보낼 화면 명세서를 만들어보겠습니다.

이때 피그마 파일 링크를 같이 첨부해도 좋습니다.

[나] : 이 Figma 프레임 링크를 분석해서 개발자에게 전달할 화면 명세서를 만들어줘.

- 화면의 목적

- 주요 컴포넌트

- 색상과 폰트 사용

- 버튼과 입력창의 상태

- 반응형에서 주의할 점

- 구현 전에 디자이너에게 확인해야 할 질문

[AI] : Bubble_화면명세서_v1.0.docx 에 담긴 내용을 요약하면:

1. 문서 개요 — iPhone 16 기준 캔버스 사이즈(393×852pt), 3개 화면 구성표, Safe Area 수치

2. 디자인 토큰 — 색상 스워치 표(Primary·Neutral·System), 타이포그래피 규격표(용도별 사이즈·굵기·색상)

3. S-01 Chat List — 레이아웃 Y좌표/높이 표, Nav Bar·검색창·Chat Row·뱃지·Tab Bar 상세 스펙, 아바타 색상 팔레트(6색·인덱스 규칙), 버튼·입력창 상태표(Default/Pressed/Focused/Swipe)

4. S-02 Chat Detail — 말풍선 스펙(발신/수신 색상·반경·최대 너비·패딩), 날짜 구분자, Input Bar 상태(Empty→비활성 전송 / Typing→활성 / Focused→키보드 대응)

5. S-03 Contact Profile — 대형 아바타·온라인 dot 스펙, 액션 버튼 3개, 연락처 정보 행 구조, 공유 사진 썸네일 규칙

6. 반응형 & 접근성 — Safe Area 대응, 동적 텍스트·말풍선 max-width 소형 기기 처리, VoiceOver·터치 타겟(44pt) 가이드

7. 디자이너 확인 질문 15개 — Large Title 스크롤 전환, Empty State, 스와이프 액션, 입력창 최대 줄 수, 다크 모드, Inter 폰트 번들 여부 등

05 결과를 보면 피그마 화면을 눈으로만 확인했을 때 놓치기 쉬운 컴포넌트 구조, 여백, 반복 요소, 버튼 상태 등을 문서로 정리했습니다. 그러면 개발자에게 ‘대충 비슷하게 만들어주세요’”라고 전달하는 대신, 화면 단위의 체크리스트를 만들어 넘길 수 있어 협업이 훨씬 쉬워집니다.

피그마 MCP의 장점은 디자인 파일을 사람이 눈으로만 보는 것이 아니라, AI가 구조화된 정보로 읽을 수 있다는 점입니다. 따라서 기획자, 디자이너, 개발자가 같은 화면을 두고 이야기할 때 ‘무엇을 확인해야 하는지’를 빠르게 문서화할 수 있습니다.

📚 더 읽기

저자 소개

박현규

<p>최신 AI 도구를 리서치해 소개하는 ai100.co.kr을 운영한다. 25년 5월에는 세계 최대 MCP 마켓 ‘스미더리’에서 전 세계 TOP 100 유저로 선정되었고 커서 공식 앰배서더로도 활동 중이다. IT 지식을 더 쉽게 나누기 위해 책을 쓰고, 유튜브와 쇼츠를 제작한다.</p><p>_<strong>저서 </strong></p><p>__《이게 되네? 챗GPT 미친 크롤링 24제》</p><p>__《이게 되네? 클로드 MCP 미친 활용법 27제》</p><p>__《요즘 바이브 코딩 커서 AI 30가지 프로그램 만들기》</p><p>__《요즘 바이브 코딩 깃허브 코파일럿 31가지 프로그램 만들기》</p><p>__《바로바로 바이브 코딩 with 커서 AI》</p><p><strong>_강의 </strong></p><p>__대구 NIA 본원 MCP 강의</p><p>__대구 한국로봇산업진흥원 MCP 강의</p><p>__멀티캠퍼스 MCP 강의</p><p><strong>_SNS </strong></p><p>__Ai100 _ ai100.co.kr </p><p>__Facebook _ facebook.com/limedaddy8924 </p><p>__YouTube _ youtube.com/@editorp89 </p><p>__GitHub _ github.com/canine89</p>

김성경

<p>AI를 진짜 쓸모 있게 쓰는 방법을 고민한다. IT가 낯선 사람도 할 수 있겠다는 생각이 들도록 최대한 쉬운 언어로 풀어내는 콘텐츠를 만든다.</p>

📚이게 되네? 클로드 MCP 커넥터 미친 활용법 31제》 자주 묻는 질문

Q.MCP 커넥터가 정확히 무엇이고, 어떤 장점이 있나요?

MCP(Multi-Cloud Platform) 커넥터는 클로드와 같은 AI 챗봇이 다양한 외부 애플리케이션과 서비스를 직접 연결하고 상호작용할 수 있도록 돕는 기술입니다. 기존에는 AI가 단순히 텍스트 기반의 답변을 제공하는 데 그쳤다면, MCP 커넥터를 활용하면 AI가 실제 업무 환경으로 확장되어 노션에 자료를 정리하거나, 엑셀 대시보드를 생성하고, 구글 드라이브 문서를 분석하는 등 구체적인 작업을 수행할 수 있게 됩니다. 이 기술의 가장 큰 장점은 AI의 활용 범위를 '대답을 잘 얻는 것'에서 '실제로 일을 끝내는 것'으로 확장시킨다는 점입니다. 예를 들어, 클로드에게 특정 데이터를 분석하여 노션에 보고서 초안을 작성하도록 지시하면, 클로드가 MCP 커넥터를 통해 직접 노션과 연동하여 작업을 처리할 수 있습니다. 이는 반복적이고 시간이 많이 소요되는 업무를 자동화하여 생산성을 비약적으로 향상시키고, 사용자는 더 창의적이고 전략적인 업무에 집중할 수 있도록 돕습니다. 《이게 되네? 클로드 MCP 커넥터 미친 활용법 31제》는 이러한 MCP 커넥터의 개념부터 실제 업무에 적용하는 31가지의 구체적인 활용 예제를 통해 AI를 진정한 업무 파트너로 만드는 방법을 상세히 알려줍니다.

Q.클로드를 처음 사용하는데, 이 책을 통해 MCP 커넥터를 쉽게 배울 수 있을까요?

네, 충분히 가능합니다. 《이게 되네? 클로드 MCP 커넥터 미친 활용법 31제》는 클로드를 처음 접하는 독자분들도 MCP와 커넥터를 업무에 성공적으로 적용할 수 있도록 구성된 실전 예제집입니다. 책의 초반부에서는 클로드 설치부터 기본 기능, 스킬, 웹 검색, 리서치 모드, 스타일 설정, 요금제 선택 등 클로드 사용에 필요한 기초적인 내용들을 매우 친절하게 설명합니다. 특히, 기술적인 장벽 때문에 망설였던 MCP 설정을 '클로드 커넥터'를 활용하여 더욱 쉽고 간편하게 연결하는 방법을 자세히 안내합니다. 이후에는 노션, 옵시디언, 엑셀, 구글 드라이브, 캔바, 피그마 등 실제 업무에서 자주 사용하는 다양한 도구들과 클로드를 연결하여 자동화하는 31가지 예제를 제공합니다. 각 예제는 단계별로 명확하게 설명되어 있어, 책을 따라 실습하는 것만으로도 충분히 익숙해질 수 있습니다. 이 책은 '이게 되네?'라는 감탄사가 '이제 이렇게 일하면 되겠네!'라는 확신으로 바뀌도록 안내하는 최고의 가이드가 될 것입니다.

Q.클로드 MCP 커넥터를 활용해서 어떤 종류의 업무 자동화를 할 수 있나요?

클로드 MCP 커넥터를 활용하면 매우 광범위한 업무 자동화가 가능합니다. 이 책에서는 단순히 텍스트를 생성하는 것을 넘어, AI가 앱과 파일을 직접 다루며 실질적인 업무를 처리하는 방법을 다룹니다. 예를 들어, 노션에 회의록을 자동으로 정리하거나, 옵시디언에 특정 주제의 글을 저장하고 관리할 수 있습니다. 엑셀 데이터를 분석하여 대시보드를 만들거나, 구글 드라이브에 저장된 문서를 요약하고 필요한 정보를 추출하는 것도 가능합니다. 더 나아가, 캔바나 피그마 같은 디자인 도구와 연동하여 이미지 생성 및 편집을 지시하거나, 어도비 제품군과 연계하여 특정 작업을 자동화할 수도 있습니다. 공공데이터포털에서 필요한 데이터를 추출하여 분석하고 보고서를 작성하는 것은 물론, 깃허브에 코드를 업로드하거나 버셀(Vercel)을 통해 웹 애플리케이션을 배포하는 개발 관련 업무까지 자동화할 수 있습니다. 《이게 되네? 클로드 MCP 커넥터 미친 활용법 31제》에서는 이처럼 노션, 옵시디언, 지메일, 구글 드라이브, 엑셀, 캔바, 피그마, 어도비, 공공데이터, 깃허브, 버셀 등 실제 업무에 밀접한 31가지 예제를 통해 AI 대통합 업무 자동화의 가능성을 보여줍니다.

Q.개정판에서는 어떤 점들이 새롭게 추가되거나 변경되었나요?

《이게 되네? 클로드 MCP 커넥터 미친 활용법 31제》 개정판에서는 독자분들이 최신 AI 기술을 업무에 효과적으로 적용할 수 있도록 4가지 핵심적인 개선 사항이 반영되었습니다. 첫째, 클로드의 최신 기능인 스킬, 웹 검색, 리서치 모드, 스타일 설정, 모델 설정, 그리고 클로드 커넥터까지 업데이트된 내용을 충실히 반영하여 현재 가장 효율적인 클로드 활용법을 제시합니다. 둘째, 기존에 기술적 장벽으로 느껴질 수 있었던 MCP 설정을 '클로드 커넥터'를 활용하여 훨씬 더 쉽고 직관적으로 연결하는 방법을 소개하여 접근성을 높였습니다. 셋째, 캔바, 피그마, 어도비 등 실무에서 필수적인 디자인 도구들과 클로드를 함께 사용하여 디자인 작업을 효율화하는 방법을 새롭게 추가했습니다. 넷째, 공공기관 실무자들을 위해 hwpx 파일 처리, 공공데이터포털 활용 등 공공 업무와 관련된 실제적인 예제를 전격 추가하여 책의 활용도를 더욱 높였습니다. 이처럼 개정판은 최신 트렌드를 반영하고 독자들의 실질적인 요구를 충족시키기 위해 심혈을 기울여 업데이트되었습니다.

Q.이 책이 공공기관 실무자들에게도 도움이 될까요?

네, 공공기관 실무자분들께도 《이게 되네? 클로드 MCP 커넥터 미친 활용법 31제》는 매우 유용한 도서입니다. 특히 개정판에서는 공공기관 업무 환경의 특성을 고려한 예제들이 대폭 추가되었습니다. 예를 들어, 공공기관에서 자주 사용되는 hwpx 문서 처리 방법을 다루고 있으며, 공공데이터포털을 활용하여 필요한 데이터를 추출하고 분석하는 실질적인 예제를 제공합니다. 이를 통해 클로드를 이용해 방대한 공공 데이터를 효율적으로 다루고, 보고서 작성이나 자료 분석 업무를 자동화하는 방법을 배울 수 있습니다. AI가 직접 문서를 읽고 요약하거나, 특정 정보를 추출하여 정리하는 등의 작업을 대신 처리함으로써 공공기관 실무자분들의 업무 효율성을 크게 향상시킬 수 있을 것입니다. 이 책은 공공 부문 특유의 업무 환경에 AI를 접목하여 '일잘러'로 거듭날 수 있는 구체적이고 실용적인 가이드를 제공할 것입니다.

Q.AI 활용 능력 향상을 통해 커리어 성장을 이루고 싶은데, 이 책이 어떤 도움을 줄 수 있을까요?

《이게 되네? 클로드 MCP 커넥터 미친 활용법 31제》는 AI 활용 능력을 단순한 '트렌드 따라가기'가 아닌, 실질적인 '커리어 성장 동력'으로 만들고자 하는 분들에게 매우 강력한 도움을 제공합니다. 이 책은 AI를 단순한 챗봇으로 인식하는 것을 넘어, 노션, 엑셀, 구글 드라이브, 디자인 툴 등 실제 업무에 쓰이는 다양한 애플리케이션과 연동하여 AI가 직접 일을 처리하도록 만듭니다. 이러한 'AI 대통합 업무 자동화' 능력은 현재 많은 기업에서 요구하는 핵심 역량으로 자리 잡고 있습니다. 책에서 제시하는 31가지 예제를 통해 여러분은 문서 작성, 데이터 분석, 정보 검색 및 요약, 디자인 작업 지원, 웹 배포 등 다양한 분야에서 AI를 활용하여 업무 효율성을 극대화하는 방법을 습득할 수 있습니다. 이는 곧 여러분의 업무 생산성을 비약적으로 높여 더 많은 성과를 창출하고, 반복적인 업무에서 벗어나 전략적이고 창의적인 업무에 집중할 수 있는 기회를 제공합니다. 결과적으로, AI를 활용하여 '일을 실제로 끝내는' 능력을 갖춘 진정한 'AI 일잘러'로 성장하여 커리어에서 독보적인 경쟁력을 확보할 수 있을 것입니다.

Q.MCP 커넥터를 사용하려면 코딩 지식이 필수적인가요?

아닙니다. MCP 커넥터를 활용하여 클로드와 다양한 업무 도구를 연결하는 데 반드시 깊은 코딩 지식이 필요한 것은 아닙니다. 《이게 되네? 클로드 MCP 커넥터 미친 활용법 31제》는 기술적인 장벽 때문에 AI 활용을 망설였던 분들도 쉽게 따라 할 수 있도록 구성되어 있습니다. 특히 개정판에서는 '클로드 커넥터'를 통해 MCP 설정을 더욱 쉽고 간편하게 연결하는 방법을 중점적으로 소개하고 있습니다. 이는 마치 다양한 앱과 서비스를 서로 연결하는 노코드/로우코드 플랫폼처럼, 복잡한 코딩 없이도 AI와 외부 도구 간의 연동을 가능하게 합니다. 책에서 제공하는 31가지 실전 예제들은 대부분 GUI(그래픽 사용자 인터페이스) 기반의 설정과 간단한 명령어 입력만으로 구현 가능하도록 상세히 안내되어 있습니다. 따라서 코딩 경험이 전혀 없거나 부족한 분들도 책의 지시를 따라 차근차근 실습하다 보면, 클로드와 노션, 엑셀, 구글 드라이브 등 다양한 업무 도구를 연동하여 자신만의 업무 자동화 시스템을 구축할 수 있을 것입니다. 이 책은 코딩 지식 없이도 AI를 활용한 업무 자동화의 가능성을 열어줍니다.