Claude Code 플러그인 추천 (Atlassian, Figma)

업무시에 추천드릴 2가지 플러그인 소개시켜드리겠습니다. 바로 Atlassian 플러그인과 Figma 플러그인입니다.

두 플러그인 모두 Anthropic 공식 마켓플레이스(claude-plugins-official)에 등록되어 있고, 내부적으로 MCP(Model Context Protocol) 서버를 통해 동작하며, 한 번의 OAuth 인증만 거치면 터미널에서 자연어로 지라와 피그마를 다룰 수 있게 됩니다.

이 글에서는 두 플러그인이 각각 무엇을 할 수 있고, 어떻게 설치하고, 같이 쓸 때 어떤 시너지가 나는지 정리해보려고 합니다.

먼저, 플러그인과 MCP가 무엇인지부터

Claude Code 플러그인은 단순한 명령어 모음이 아닙니다. 한 플러그인 안에는 MCP 서버 설정, 슬래시 커맨드, 에이전트, 스킬이 함께 묶여 있고, 명령어 하나로 이 모든 게 한 번에 셋업됩니다.

여기서 핵심은 MCP입니다. MCP는 AI 에이전트가 외부 서비스와 대화할 수 있게 해주는 표준 프로토콜로, "Claude가 지라의 언어를 알아듣게 해주는 통역기" 정도로 이해하면 충분합니다. 예전에는 MCP 서버를 직접 설치하고, 설정 파일을 손으로 수정하고, 인증 토큰을 관리하는 과정을 거쳐야 했는데, 플러그인 시스템이 등장하면서 이 과정이 명령어 한 줄 또는 메뉴 선택 한 번으로 줄었습니다.

즉, 플러그인을 깐다 = MCP 서버 + 미리 만들어진 슬래시 커맨드 + 인증 흐름을 한꺼번에 설치한다고 생각하시면 됩니다.

1. Atlassian 플러그인 — 지라 티켓에서 커밋까지 한 흐름으로

무엇을 할 수 있나

Atlassian 플러그인은 Atlassian Cloud 제품들, 즉 Jira, Confluence, Compass에 Claude Code가 직접 접근할 수 있게 해줍니다. OAuth 2.1 기반으로 인증하며, 사용자가 이미 가지고 있는 Jira/Confluence 권한을 그대로 따릅니다. 즉, 본인이 못 보는 프로젝트는 Claude도 못 봅니다.

플러그인에 기본 포함된 슬래시 커맨드는 이렇습니다.

• /capture-tasks-from-meeting-notes — 회의록에서 액션 아이템을 뽑아내고 담당자가 지정된 지라 티켓으로 등록
• /spec-to-backlog — Confluence 스펙 문서를 Epic-Story 구조의 백로그로 변환
• /generate-status-report — 프로젝트 상태 리포트를 생성해서 Confluence에 발행
• /search-company-knowledge — 사내 문서 검색
• /triage-issue — 이슈를 분류하고 우선순위 정리

이외에도 자연어로 가능한 일들이 많습니다. JQL이나 자연어로 이슈를 검색하고("내가 담당인 In Progress 티켓 보여줘"), 새 티켓 생성, 기존 티켓 업데이트, 상태 전이(To Do → In Progress → In Review → Done), 댓글 달기, Confluence 페이지 검색·생성까지 다 됩니다.

여기까지만 보면 그냥 "지라를 자연어로 조작하는 도구"처럼 보이지만, 진짜 가치는 이게 코딩 작업과 같은 세션 안에서 일어난다는 점입니다.

실제 워크플로우 예시

예를 들어 이런 흐름이 가능합니다.

나: PROJ-1234 티켓 내용 좀 확인해주고, 관련 코드를 봐서 어떻게 구현할지 계획 세워줘

Claude Code:
  → Atlassian MCP로 PROJ-1234 티켓 본문 + 댓글 조회
  → 코드베이스에서 관련 파일 검색
  → 구현 계획을 마크다운으로 출력
  → "이대로 진행할까요?" 확인

나: 좋아, 진행해줘. 다 되면 티켓 상태를 In Review로 바꾸고,
    git 커밋 스킬 깔려있으면 컨벤션 맞춰서 커밋까지 해줘

Claude Code:
  → 코드 작성 → 테스트
  → [git 커밋 스킬] 컨벤션에 맞춰 커밋 메시지 작성 후 커밋
  → Atlassian MCP로 티켓 상태 In Review 전이 + 작업 내용 댓글 추가

 

이런 식으로 여러 플러그인이나 스킬을 한 문장에 섞어서 시킬 수도 있습니다. 지라는 Atlassian 플러그인이, 커밋은 git 커밋 스킬이, 코드 변경은 Claude Code 본체가 처리하는 식으로 각자 역할을 나눠서 동작합니다. 지라를 한 번도 열지 않고 티켓을 닫는 게 가능해집니다.

설치

방법 1. /plugin 메뉴에서 골라서 설치 (가장 편함)

터미널에서 /plugin만 입력하면 마켓플레이스 화면이 열리고, 거기서 atlassian을 찾아 선택할 수 있습니다. 화살표 키로 이동하고 엔터를 누르면 설치가 진행됩니다. 패키지 이름을 외울 필요도 없고, 어떤 플러그인이 있는지 둘러보기에도 좋습니다.

 

방법 2. 명령어로 바로 설치

/plugin install atlassian@claude-plugins-official

 

2. Figma 플러그인 — 디자인 시안을 보고 코드로 옮기기

무엇을 할 수 있나

Figma 플러그인의 핵심은 Claude Code가 피그마 디자인 파일을 직접 읽어서 코드로 옮길 수 있게 해주는 것입니다. 디자이너가 만든 시안을 개발자가 눈으로 보고 픽셀 단위로 옮겨 적는 작업을 Claude가 대신해주는 셈입니다.

플러그인에 포함된 대표 커맨드는 /implement-design입니다. 피그마 URL을 주고 이 커맨드를 호출하면, 프로젝트의 디자인 시스템에 맞춰 프레임을 코드로 변환해줍니다.

이외에 가능한 작업들은 이렇습니다.

• 피그마 프레임에서 레이아웃, 타이포그래피, 색상 등 구조화된 디자인 데이터 추출
• 디자인 변수와 토큰 가져오기
• Code Connect를 통해 피그마 컴포넌트와 실제 코드베이스의 컴포넌트 매핑 — "기존 Button 컴포넌트를 재사용해서 짜줘"가 가능
• 검증용 비주얼 레퍼런스 캡처

특히 Code Connect 부분이 실무에서 가장 큰 차이를 만듭니다. 단순 변환이면 "또 새로운 Button 컴포넌트 하나 추가"로 끝나서 코드베이스가 지저분해지는데, 디자인 시스템과 매칭되어 있으면 기존 컴포넌트를 정확히 재사용하기 때문에 일관성이 유지됩니다. Figma 공식 문서에서도 "production-ready code with pixel-perfect fidelity"를 목표로 한다고 명시하고 있습니다.

플러그인은 Figma의 클라우드(remote) 서버와 데스크톱 앱 양쪽 모두에서 동작합니다. 대부분의 경우 remote 버전으로 충분하고, 데스크톱 버전은 특정 엔터프라이즈 요건이 있을 때만 쓰시면 됩니다.

실제 워크플로우 예시

나: 이 피그마 프레임 좀 봐줘 → [프레임 링크]
    우리 코드베이스의 design-system을 써서 컴포넌트로 만들어줘

Claude Code:
  → Figma MCP로 프레임 메타데이터, 토큰, 레이아웃 정보 조회
  → Code Connect로 우리 코드베이스의 Button, Input 매칭 확인
  → src/components/에 새 컴포넌트 파일 생성
  → 기존 Button을 재사용한 코드 작성
  → Storybook 스토리까지 생성

나: 좋아. 그런데 hover 상태가 시안에 없네. 일반적인 hover 스타일로
    적당히 추가해줘

Claude Code:
  → 기존 디자인 토큰의 hover 색상 변수 활용해서 스타일 추가

여기서 핵심은 "디자이너가 만든 시안의 의도를 코드로 옮기는 작업"이 자연어 몇 줄로 끝난다는 점입니다. 시안을 한 줄 한 줄 보면서 padding 값 측정하고, 색상 코드 복사하고, 컴포넌트 어디에 둘지 고민하는 시간이 사라집니다.

설치

방법 1. /plugin 메뉴에서 골라서 설치 (가장 편함)

터미널에서 /plugin을 입력하면 열리는 마켓플레이스 화면에서 figma를 찾아 선택하면 됩니다.

 

방법 2. 명령어로 바로 설치

/plugin install figma@claude-plugins-official

 

조합해서 사용하기

따로도 충분히 강력하지만, 플러그인은 조합해서 사용할 때 강력합니다. 예를 들어, 아틀라시안 + 피그마를 같이 써본다고 가정해봅시다.

나: PROJ-1234 티켓 내용 보고, 첨부된 피그마 링크에서 디자인 가져와서
    구현해줘. 끝나면 PR 만들고 티켓 상태도 In Review로 바꿔줘

Claude Code:
  1. [Atlassian MCP]  PROJ-1234 티켓 + 댓글 + 첨부 링크 조회
  2. [Figma MCP]      해당 피그마 프레임의 컴포넌트, 토큰, 레이아웃 가져오기
  3. [코드베이스]      관련 디렉토리 탐색, 컨벤션 파악
  4. [Code Connect]   재사용 가능한 디자인 시스템 컴포넌트 확인
  5. [구현]            컴포넌트 작성, 스토리북, 테스트
  6. [Git]             브랜치 생성, 커밋, push, PR 작성
  7. [Atlassian MCP]  티켓 상태 In Review로 전이 + PR 링크 댓글 추가

 

브라우저 탭을 한 번도 안 열고 끝낼 수 있는 흐름입니다. 물론 실제로는 중간중간 사용자가 확인하고 개입해야 하지만, "단순 반복 작업"의 양이 극적으로 줄어듭니다.

마치며

일단 Claude Code 기반만 정말 잘 써도 많은 부분이 효율적으로 변경되고 있습니다. 거기에 여러 플러그인을 하나씩 얹어보시면, 어느 순간 브라우저 탭이 한 번도 안 열린 채로 작업이 끝나 있는 경험을 하게 됩니다. 그 시점부터가 진짜 효율이 시작되는 지점입니다.

플러그인 시스템은 아직 빠르게 진화하고 있어서, 공식 마켓플레이스(anthropics/claude-plugins-official)와 Figma, Atlassian 각각의 공식 문서를 주기적으로 확인하시는 걸 추천드립니다. 새 기능이 매주 단위로 추가되고 있고, 특히 Code Connect처럼 한 번 익혀두면 워크플로우가 크게 바뀌는 기능들이 계속 나오고 있습니다.

프론트엔드 업무에서 가장 아까운 시간은 "맥락을 다시 끌어모으는 시간"입니다. Claude Code와 두 플러그인은 그 시간을 줄이기 위한 가장 빠른 투자라고 생각합니다.