티스토리 뷰
Claude Skills 완전 정복 – 3일차: 개발자·IT 직군 편 (mcp-builder·frontend-design 실전 활용)
RichFebru 2026. 3. 25. 07:37
2일차에서 기획자·마케터 편을 다뤘습니다.
오늘 3일차는 개발자와 IT 담당자에게 가장 임팩트가 큰 두 가지 스킬,
mcp-builder와 frontend-design을 집중적으로 소개합니다.
개발자·IT 담당자에게 추천하는 스킬 조합
| 스킬 | 주요 용도 | 출력 형식 |
|---|---|---|
| mcp-builder | Claude와 외부 서비스 연결 MCP 서버 개발 | TypeScript / Python 코드 |
| frontend-design | 프로덕션 수준 UI 컴포넌트·페이지 생성 | React / HTML / CSS |
| 기술 문서, 사양서, 로그 파일 처리 | ||
| xlsx | 데이터 분석, 서버 모니터링 리포트 | XLSX |
mcp-builder 스킬 실전 활용
MCP가 뭔지부터 이해하자
MCP(Model Context Protocol)는 Claude가 외부 서비스와 직접 소통할 수 있게 해주는 연결 규약입니다.
지금까지 Claude는 사용자가 붙여 넣어준 정보만 알 수 있었습니다.
MCP 서버를 만들면 Claude가 직접 외부 데이터를 읽어서 분석합니다.
예시:
- 사내 MySQL DB에 연결 → "이번 달 불량률 상위 5개 라인 알려줘" → Claude가 직접 쿼리해서 답변
- Gmail에 연결 → "오늘 받은 메일 중 긴급 건만 요약해줘" → Claude가 직접 메일함 조회
- Slack에 연결 → "지난주 개발팀 채널 이슈 정리해줘" → Claude가 직접 채널 내역 분석
이 파이프라인이 완성되면 Claude는 단순한 챗봇이 아니라
사내 업무 시스템과 연결된 AI 어시스턴트가 됩니다.
mcp-builder 스킬이 해주는 것
mcp-builder 스킬은 이 MCP 서버를 만드는 과정을 가이드합니다.
스킬 없이 처음부터 MCP 서버를 만들려면:
- MCP 프로토콜 스펙 문서를 처음부터 읽어야 함
- TypeScript 또는 Python SDK 세팅부터 시작
- 도구(Tool) 설계, 에러 처리, 배포까지 모두 직접
mcp-builder 스킬을 쓰면:
- 연결하려는 서비스를 말하면 최적 구조를 먼저 설계해줌
- TypeScript(권장) 또는 Python 중 선택 가능
- 도구 네이밍, API 설계, 에러 메시지 작성 방식까지 가이드
스킬 활성화 방법
채팅창 + 버튼 → 스킬 → mcp-builder 선택
실전 요청 예시
Gmail 연결 MCP 서버 만들기:
"우리 회사 Gmail 계정에서 오늘 받은 메일을 Claude가 직접 읽어서
긴급/일반/참고로 분류해주는 MCP 서버를 만들어줘.
TypeScript로 작성하고, 인증은 OAuth 방식으로."
사내 MySQL DB 연결:
"제조 현장 생산 DB (MySQL)에서
불량률, 생산량, 설비 가동률을 Claude가 직접 조회할 수 있는
MCP 서버를 만들어줘.
읽기 전용으로만 작동하게 하고, 환경변수로 DB 접속 정보 관리."
REST API 연결:
"우리 회사 사내 재고관리 REST API를
Claude가 조회할 수 있는 MCP 서버 만들어줘.
API 엔드포인트는 GET /inventory, GET /lowstock 두 개만 연결하면 돼.
응답 데이터를 Claude가 읽기 좋게 포맷팅하는 로직도 포함해줘."
mcp-builder 스킬 활용 단계
1단계: 스킬 활성화 후 "어떤 서비스를 연결할지" 설명
2단계: Claude가 MCP 서버 구조 설계안 제시
3단계: TypeScript / Python 코드 생성
4단계: 로컬 테스트 가이드 제공
5단계: Claude.ai에 MCP 서버 등록하면 연동 완료
MCP 서버로 연결 가능한 서비스 예시
업무 도구: Gmail, Slack, Notion, Jira, GitHub, Confluence
사내 시스템: 사내 ERP, 생산 관리 시스템, 재고 DB, 품질 데이터
데이터베이스: MySQL, PostgreSQL, MongoDB, Redis
API 서비스: 사내 REST API, 외부 SaaS API, 날씨·환율 등 공공 API
frontend-design 스킬 실전 활용
이 스킬이 특별한 이유
프로토타입이나 내부 대시보드를 만들 때 디자이너 없이, 퍼블리셔 없이
바로 쓸 수 있는 수준의 UI 코드가 나오는 것이 핵심입니다.
일반 Claude 채팅으로 UI 코드를 요청하면 기능은 되지만 디자인이 허술합니다.
frontend-design 스킬을 쓰면 Tailwind + shadcn/ui 기반으로
실제 서비스에 넣어도 될 수준의 코드가 나옵니다.
스킬 활성화 방법
채팅창 + 버튼 → 스킬 → frontend-design 선택
실전 요청 예시
생산 현황 대시보드 UI:
"제조 현장 생산 현황 대시보드 UI를 만들어줘.
포함 요소:
- 상단: 오늘 생산량 / 불량률 / 가동률 카드 3개
- 중간: 시간대별 생산량 꺾은선 차트
- 하단: 라인별 현황 테이블 (라인명, 목표, 실적, 달성률, 불량률)
- 불량률 2% 초과시 빨간색 하이라이트
React + Tailwind CSS로 작성해줘.
다크모드 지원 필요."
관리자 로그인 페이지:
"스마트팩토리 관리 시스템 로그인 페이지 UI 만들어줘.
로고 영역, 이메일 / 비밀번호 입력, 로그인 버튼, 비밀번호 찾기 링크 포함.
디자인은 산업용 SaaS 느낌으로, 네이비 계열 컬러."
API 문서 페이지:
"REST API 문서 페이지 UI를 만들어줘.
왼쪽 사이드바에 엔드포인트 목록, 오른쪽 메인 영역에 엔드포인트 상세.
각 엔드포인트: 메서드(GET/POST), URL, 파라미터 표, 응답 예시 포함.
코드 복사 버튼도 추가해줘."
출력: React (.jsx) 또는 HTML 파일로 다운로드
IT 담당자를 위한 추가 스킬 활용법
개발 외에도 IT 담당자들이 자주 처리하는 문서 작업에 스킬이 효과적입니다.
pdf 스킬로 기술 문서 처리
"이 서버 사양서 PDF 3개를 합쳐서 하나의 PDF로 만들어줘.
표지에 통합 문서명과 작성일 추가해줘."
"스캔한 장비 매뉴얼 사진을 텍스트로 추출해줘. (OCR)"
xlsx 스킬로 서버 모니터링 리포트
"서버별 CPU / 메모리 / 디스크 사용률 데이터를
주간 모니터링 리포트 엑셀로 만들어줘.
임계치(CPU 80%, 메모리 85%) 초과 셀은 빨간색으로 표시."
개발자가 Claude Skills를 더 잘 쓰는 팁
팁 1: 제약 조건을 명확히 주자
"외부 라이브러리 추가 없이", "Node.js 18 이상에서 동작", "읽기 전용 권한만"처럼
제약을 명시하면 실제 환경에서 쓸 수 없는 코드가 나오는 경우를 방지합니다.
팁 2: 기존 코드 구조를 먼저 보여주자
새 기능을 만들 때 기존 코드 구조를 먼저 붙여 넣으면
코드 스타일과 네이밍 컨벤션을 자동으로 맞춰줍니다.
팁 3: 단계별로 나눠서 요청하자
MCP 서버처럼 복잡한 작업은 "설계 → 코드 생성 → 테스트 코드 → 배포 가이드"처럼
단계를 나눠서 요청하면 각 단계 품질이 훨씬 높아집니다.
오늘의 핵심 정리
개발자·IT 담당자가 Claude Skills로 절약할 수 있는 것:
- MCP 서버 설계 및 초안 코드: 하루 → 1~2시간 (mcp-builder)
- 대시보드 UI 프로토타입: 반나절 → 20분 (frontend-design)
- 기술 문서 처리 (합본, OCR): 1시간 → 5분 (pdf)
- 서버 모니터링 리포트 엑셀: 30분 → 5분 (xlsx)
내일 예고: HR·총무·경영지원 편
내일 4일차에서는 HR·총무·경영지원 직군을 위한 스킬 활용법을 다룹니다.
특히 internal-comms 스킬로 사내 공지·뉴스레터를 회사 포맷에 맞게 자동 생성하는 방법,
docx 스킬로 사규·규정 문서를 현대화하는 실전 예시를 소개합니다.
관련 글