본문 바로가기

전체 글

 (39)
Cursor + Figma MCP 가이드 - Cursor로 Figma 디자인을 코드로 변환하기 🎯 이번 편에서 배울 내용Figma 디자인을 HTML/CSS로 변환하기AI 프롬프트 작성 기법생성된 코드 확인 및 테스트코드 수정 및 개선하기프로젝트 준비시작하기 전에 확인사항✅ Figma MCP가 Cursor에 연결되어 있음✅ "Login Screen" 디자인이 완성됨✅ Figma 링크가 준비됨✅ 프로젝트 폴더가 있음작업 폴더 준비탐색기로 C:\Users\사용자이름\Documents\CursorProjects 이동새 폴더 만들기: "login-screen-project"Cursor에서 이 폴더 열기:File > Open Folder"login-screen-project" 선택Step 1: Composer 모드로 코드 생성1-1. Composer 열기Cursor에서 Ctrl + I (대문자 아이)Com..
Cursor + Figma MCP 가이드 - Figma에서 디자인 만들고 링크 가져오기 프로젝트 목표이번 편에서는 모바일 앱 로그인 화면을 디자인합니다. 간단하지만 실용적인 예제로, 다음 요소들을 포함합니다:로고이메일 입력 필드비밀번호 입력 필드로그인 버튼"비밀번호를 잊으셨나요?" 링크"회원가입" 링크Step 1: 새 Figma 프로젝트 만들기1-1. Figma 실행 및 파일 생성Figma 데스크톱 앱을 실행합니다좌측 상단의 "+ New design file" 클릭또는 단축키: Ctrl + N빈 캔버스가 열립니다1-2. 파일 이름 지정좌측 상단의 "Untitled" 클릭파일 이름을 입력합니다: Mobile Login ScreenEnter를 눌러 저장합니다1-3. 자동 저장 확인파일 이름 옆에 "Saved" 표시가 있으면 자동 저장 중입니다Figma는 모든 변경사항을 실시간으로 클라우드..
Cursor + Figma MCP 가이드 - Cursor와 Figma MCP 연동하기 연동 확인 프로세스지금까지 우리는:✅ Cursor 설치✅ Figma 계정 생성✅ API 토큰 발급✅ Node.js 설치✅ MCP 서버 설정이제 모든 부품이 제대로 연결되었는지 확인할 차례입니다!Step 1: MCP 서버 상태 상세 확인1-1. Cursor 설정 열기Cursor를 실행합니다우측 상단의 설정 아이콘 ⚙️ 클릭또는 단축키: Ctrl + ,1-2. MCP 섹션 찾기좌측 메뉴에서 다음 중 하나를 찾습니다:"MCP""Tools""MCP Servers"클릭하여 MCP 설정 페이지를 엽니다1-3. 서버 상태 확인"Framelink Figma MCP" 항목을 찾습니다:정상 상태:✅ Framelink Figma MCP Status: Connected Tools: 5 available [🟢 ON..
Cursor + Figma MCP 가이드 - Figma MCP 서버 설치 및 설정 MCP 서버란?MCP(Model Context Protocol) 서버는 Cursor와 Figma 사이의 "통역사" 역할을 합니다. Cursor가 "저 Figma 디자인 읽어줘"라고 요청하면, MCP 서버가 Figma API에 접속해서 디자인 정보를 가져와 Cursor에게 전달합니다.간단한 비유Cursor (한국어) ←→ MCP 서버 (통역) ←→ Figma (영어)설치 방법 선택하기Figma MCP를 설치하는 방법은 크게 두 가지가 있습니다:Framelink Figma MCP (추천 ⭐) - 간단하고 안정적Cursor Talk to Figma MCP - 기능이 많지만 복잡함이 가이드에서는 Framelink Figma MCP를 사용하겠습니다. 설치가 훨씬 쉽고 대부분의 경우에 충분합니다.Step 1: Cu..
Cursor + Figma MCP 가이드 - Node.js와 필수 도구 설치 Node.js란?Node.js는 JavaScript를 웹 브라우저 밖에서도 실행할 수 있게 해주는 프로그램입니다. 우리가 설치할 Figma MCP 서버가 Node.js로 만들어져 있기 때문에 반드시 설치해야 합니다.쉬운 비유게임을 실행하려면 게임 엔진이 필요하듯이MCP 서버를 실행하려면 Node.js가 필요합니다Node.js = MCP 서버를 실행시키는 엔진npm이란?npm(Node Package Manager)은 Node.js와 함께 자동으로 설치되는 도구입니다. 다양한 프로그램 패키지를 다운로드하고 관리할 수 있게 해줍니다. 우리는 npm을 사용해서 Figma MCP 서버를 설치할 것입니다.Step 1: Node.js 다운로드1-1. 공식 웹사이트 접속웹 브라우저를 실행합니다주소창에 https://n..
Cursor + Figma MCP 가이드 - Figma API 토큰 발급하기 API 토큰이란?API 토큰은 일종의 "디지털 열쇠"입니다. Cursor가 여러분의 Figma 디자인을 읽을 수 있도록 허가하는 비밀번호 같은 것이죠. 마치 집 열쇠를 복사해서 친구에게 주면 친구가 우리 집에 들어올 수 있는 것처럼, API 토큰을 Cursor에게 제공하면 Cursor가 Figma 파일을 읽을 수 있게 됩니다.왜 필요한가요?Cursor와 Figma를 연결하기 위해 반드시 필요합니다토큰 없이는 Cursor가 Figma 파일에 접근할 수 없습니다보안을 유지하면서 특정 권한만 부여할 수 있습니다Step 1: Figma 설정 페이지 접속하기1-1. Figma 실행Figma 데스크톱 앱을 실행합니다또는 웹 브라우저에서 https://www.figma.com 접속로그인이 되어 있는지 확인합니다1-2..
Cursor + Figma MCP 가이드 - Figma 계정 생성 및 기본 사용법 Figma란?Figma(피그마)는 웹 브라우저에서 작동하는 디자인 도구입니다. 포토샵이나 일러스트레이터처럼 디자인을 만들 수 있지만, 별도의 프로그램 설치 없이 인터넷만 연결되면 어디서든 사용할 수 있습니다. 특히 UI/UX 디자인(앱, 웹사이트 화면 디자인)에 최적화되어 있습니다.왜 Figma를 사용하나요?✅ 무료로 시작 가능: 개인 사용자는 무료로 충분히 사용할 수 있습니다✅ 브라우저에서 작동: 설치 없이 즉시 사용 가능합니다✅ 실시간 협업: 여러 사람이 동시에 작업할 수 있습니다✅ AI 연동: Cursor와 연동하여 디자인을 코드로 변환할 수 있습니다Step 1: Figma 계정 만들기1-1. Figma 웹사이트 접속웹 브라우저를 실행합니다주소창에 https://www.figma.com 을 입력하고..
Cursor + Figma MCP 가이드 - Cursor AI 설치 및 기본 설정 Cursor AI란?Cursor는 AI가 탑재된 코드 에디터입니다. 마이크로소프트의 VS Code를 기반으로 만들어져서 사용법이 비슷하지만, AI가 코드를 자동으로 작성해주는 기능이 추가되어 있습니다. 쉽게 말하면 "AI 비서가 달린 코딩 프로그램"이라고 생각하시면 됩니다. 설치 전 준비사항Windows 11 운영체제최소 4GB RAM (8GB 이상 권장)1GB 이상의 여유 저장 공간인터넷 연결tep 1: Cursor 다운로드1-1. 공식 웹사이트 접속인터넷 브라우저(크롬, 엣지 등)를 실행합니다주소창에 https://cursor.com 을 입력하고 Enter를 누릅니다메인 페이지가 나타납니다1-2. 다운로드 버튼 클릭페이지 중앙에 있는 "Download for Windows" 버튼을 클릭합니다파일이 다..

티스토리툴바