EP03 - 당근 마켓 앱 만들기 Figma MCP 연동 (바이브 코딩)
- 피그마와 커서 AI를 연동하는 MCP 설정 방법을 설명 🧑🏫
- MCP는 서로 다른 프로그램 간의 연동을 가능하게 함 🤝
- 피그마 설치 후, 번(Bun) 소켓 서버를 설치하여 피그마와 커서 AI 간 통신 설정 🌐
- PM2 모듈을 사용하여 번 서버를 백그라운드에서 실행, 매번 서버를 켤 필요 없이 자동 연동 ⚙️
- 커서에서 폴더 및 JSON 파일을 생성하여 피그마 프로젝트와 연결 📂
- 피그마 플러그인 'Cursor to Figma'를 통해 커서와 피그마를 연결하고 디자인을 가져옴 ✨
- 피그마 디자인을 커서(Cursor)로 가져와서 실제 코드에 적용하는 과정을 시연 💻
- 맥북 재부팅 시에도 자동 시작되도록 설정하여 편의성을 높임 🚀
- 피그마 방 주소가 변경되지 않도록 주의하며 작업 진행 ⚠️
데브허브 | DEVHUB | EP03 - 당근 마켓 앱 만들기 Figma MCP 연동 (바이브 코딩)