개발자와 디자이너 능률 200%올려주는 전설의 mcp 조합 | 커서와 피그마, 깃허브 연결법

피그마 MCP 플러그인 설치하고 커서에 붙이는 법

피그마에서 공식 MCP를 제공한다는 점이 제일 놀라웠어요. 기존에는 스미더리 AI 같은 서드파티를 거쳐야 했는데, 지금은 피그마 안에서 바로 “Cursor Talk to Figma” 플러그인을 설치할 수 있습니다.

실제로 해보면 오른쪽 클릭 → Plugins → “curs talk to fig my mcp” 검색 후 설치하면 끝인데, 설치 후 뜨는 MCP URL을 복사해 두는 게 핵심입니다.

커서 쪽에서는 설정 → MCP → Add MCP Server로 들어가서 아까 복사한 URL을 붙여넣기만 하면 됩니다. 저장하고 나면 “Talk to Figma”가 활성화되면서 연결이 완료되더라고요.

한 번 연결해 놓으면 이후부터는 피그마 파일을 선택할 때마다 커서가 해당 디자인 정보를 바로 읽어올 수 있게 됩니다. 현업에서는 이 연결을 프로젝트별로 한 번씩만 해두면, 디자이너가 파일을 업데이트할 때마다 매번 새로 설정할 필요가 없어서 편합니다.

디자인 파일을 HTML/CSS로 바로 뽑아내는 실전 활용

연결이 끝났으면 이제 진짜 재미있는 부분입니다. 피그마에서 원하는 프레임을 선택한 뒤 커서 채팅창에 “선택한 디자인을 간단한 HTML CSS 웹페이지로 만들어 줘”라고만 입력하면 됩니다.

제가 테스트한 회원가입 페이지 기준으로, 10초 정도 만에 기본 구조와 스타일이 거의 비슷하게 나왔어요. 물론 완벽한 반응형이나 인터랙션은 아니지만, 초안 잡는 데 걸리는 시간을 80% 이상 줄일 수 있었습니다.

추가로 다크모드 전환도 명령어 한 줄로 가능합니다. “현재 선택한 디자인을 다크 모드로 바꿔 줘”라고 요청하니 색상뿐 아니라 텍스트 대비까지 알아서 조정해 주더라고요.

여기서 중요한 팁은, 처음 생성된 코드를 그대로 쓰기보다는 “이 부분 패딩 20px 더 주고, 폰트는 Inter로 변경해”처럼 구체적으로 수정 요청을 하는 게 훨씬 결과가 좋습니다. 개발자 입장에서는 이런 식으로 1차 시안을 빠르게 받고, 세부 조정만 하면 되니까 어깨가 한결 가벼워지죠.

깃허브 MCP로 커밋·푸시까지 자동화하는 방법

마지막으로 깃허브 연동입니다. 커서에서 GitHub MCP를 설치할 때는 Personal Access Token이 필요한데, GitHub 설정 → Developer settings → Personal access tokens → Fine-grained tokens에서 생성하면 됩니다.

토큰 만들 때 repo 전체에 read/write 권한을 주고, 만료 기간도 적당히 설정해 두는 걸 추천해요. 토큰을 발급받은 후 커서에 붙여넣고 연결하면 “GitHub” MCP가 추가됩니다.

이제부터는 “지금 작업한 파일들을 MCP 테스트 리포지토리에 올려줘”라고 말만 하면 커서가 git add, commit message 작성, push까지 다 처리합니다.

실제로 파일 하나 수정하고 “버전 업데이트 해줘”라고 했더니, 알아서 커밋 메시지까지 제안하면서 푸시까지 끝내더라고요. 매번 터미널에서 명령어 치는 습관이 사라지니, 코드 작성에만 집중할 수 있게 됐습니다.

주의할 점은 토큰을 한 번 보고 나면 다시 볼 수 없으니, 바로 복사해 두는 게 중요하고, 만약 까먹었다면 regenerate 해서 새로 발급받아야 합니다.