Скачать или смотреть [개발공부] Cursor AI로 이미지를 React 소스코드로 변환하는 3가지 방식 비교 (사진첨부 vs 피그마 플러그인 vs 피그마 MCP 연결)

cursor AI를 사용해서 이미지를 소스코드로 변환하는 3가지 방식을 진행해봤습니다.

1. cursor AI한테 이미지를 주고 소스코드로 만들어달라고 하는 방법 (디자이너랑 협업하기에는 어려움)
2. 디자이너가 figma로 준 UI를 figma의 플러그인을 사용해서 소스코드로 변환 (정확도가 떨어짐)
3. cursor AI랑 figma를 mcp로 연결시켜서 소스코드로 변환 (cursor Ai에서 직접 figma에 접근하는 방식)

--------------------------------------------------

3번 세팅의 경우 구글에 "cursor AI figma mcp 연결"이라고 검색하시면 더 자세한 내용이 나와서 자세히 언급하지는 않았습니다.
(이미지와 UI를 소스코드로 변경하는 여러 방법들을 모두 보여주기 위해 추가로 언급하긴 했습니다.)

1) 피그마 메인 사이트에서 토큰 생성: 홈 - 프로필 - 세팅 - 시큐리티 - 맨아래 새 토큰 생성 (제목 설정 후 권한 추가)
2) 피그마 작업 페이지에서 cursor talk to figma plugin 실행 - mcp 연결 코드 복사
3) 커서 AI 설정: 기본 설정 - 커서 세팅 - mcp - add new global mcp - 피그마에서 가져온 mcp 관련 코드 붙여넣기
4) 이후 커서 AI 채팅창 입력
npx figma-developer-mcp --figma-api-key=꺽쇠괄호 내 토큰 꺽쇠괄호 (* 유튜브 설명에 꺽쇠괄호 안 넣어짐;;)
"이 프로젝트와 피그마를 mcp 연결해줘"
"abcde 채널에 연결해줘" (피그마에서 준 짧은 mcp 코드)