개발환경 구축 (7) 썸네일형 리스트형 Cursor + Figma MCP 가이드 - 생성된 코드를 실제 프로젝트에 적용하기 🎯 이번 편에서 배울 내용순수 HTML 프로젝트에 통합하기React 프로젝트에 적용하기기존 프로젝트와 연동하기실전 배포 준비하기시작하기 전에8편에서 생성한 로그인 화면 코드를 실제 프로젝트에 통합하는 다양한 방법을 배웁니다. 여러분의 프로젝트 유형에 맞는 섹션을 선택해서 따라하세요.Option 1: 순수 HTML 프로젝트에 통합Step 1-1: 프로젝트 구조 만들기1) 새 프로젝트 폴더 생성my-website/├── index.html├── login.html ← 새로 추가├── css/│ ├── main.css│ └── login.css ← 새로 추가├── js/│ ├── main.js│ └── login.js ← 새로 추가└── images/2).. 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 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" 버튼을 클릭합니다파일이 다.. 이전 1 다음