Figma에서 Cursor & Claude 코드로 빠르게 변신하는 비법 공개!

sidebling.com 프로젝트: Figma 디자인을 코드로! (중학생 눈높이 설명)

이번 영상에서는 우리가 만들고 있는 sidebling.com이라는 웹사이트를 실제로 코드로 옮기는 작업을 할 거야. 지난 영상에서는 Figma라는 디자인 툴로 웹사이트 모양을 예쁘게 만들었잖아? 이제 그 디자인을 컴퓨터가 알아들을 수 있는 코드로 바꾸는 거지!

1. 준비물 확인!

• Figma MCP 서버 활성화: Figma에서 '개발자 모드'를 켜야 해. 이게 켜져 있어야 Figma 디자인을 코드로 가져올 수 있거든. 메뉴에서 '개발자 모드'를 찾아서 체크해줘!
• Figma 파일: 지난 영상에서 만든 Figma 디자인 파일을 준비해야 해. 파일 안에 있는 모든 요소들(버튼, 글씨, 이미지 등)에 이름을 잘 붙여두면 나중에 코드로 옮길 때 훨씬 편해.

2. 코드 에디터 'Cursor'와 'Claude Code' 설치

• Cursor: 코드를 작성하고 관리하는 데 사용할 프로그램이야.
• Claude Code: AI가 코드를 짜는 걸 도와주는 도구인데, Cursor 안에 설치할 수 있어. 터미널에서 간단한 명령어를 입력하면 설치가 돼.

3. Nux.js 프로젝트 만들기

• Nux.js: 웹사이트를 쉽게 만들 수 있게 도와주는 프레임워크야. Claude Code에게 "Nux.js 프로젝트를 만들어줘!"라고 요청하면 돼.
• 프로젝트를 만들 때 "프로젝트 루트 폴더 대신 Nux.js 프로젝트를 만들어줘"라고 구체적으로 말해주면 좋아.

4. Figma 디자인을 코드로 가져오기

• MCP 서버 연결: Cursor에서 Figma MCP 서버를 연결해야 해. 이걸 해야 Figma 디자인 정보를 가져올 수 있거든.
• AI에게 디자인 설명하기: Cursor의 채팅창에 Figma 디자인을 어떻게 코드로 만들고 싶은지 설명해주는 거야. 예를 들어, "이 텍스트 필드에 글자를 입력하면 라벨이 위로 올라가는 애니메이션을 넣어줘" 또는 "이 카드들은 화면 맨 아래에 고정되게 해줘" 처럼 말이지.
• 로고 바꾸기: Figma에서 만든 로고를 SVG 파일로 내보내서 프로젝트 폴더 안에 넣어주면 돼. 보통 'public'이라는 폴더에 넣으면 돼.

5. OpenAI API 연동

• API란? 다른 프로그램과 정보를 주고받을 수 있게 해주는 약속 같은 거야. 여기서는 OpenAI의 AI 기능을 사용하기 위해 API를 연동할 거야.
• API 키 설정: OpenAI에서 받은 API 키를 설정해줘야 해. 이건 마치 비밀번호 같은 거라서 잘 보관해야 해.
• 기능 구현: 이제 사용자가 관심사나 취미를 입력하면, AI가 사업 아이디어를 8~12개 정도 추천해주는 기능을 만들 수 있어.

6. 결과 확인 및 수정

• 코드 실행: 코드를 실행해서 웹사이트가 제대로 작동하는지 확인해야 해.
• 문제점 찾기: 디자인이 완벽하게 나오지 않거나, 버튼이 제대로 작동하지 않는 등 문제가 있을 수 있어.
• 수정: 문제가 발견되면 코드를 수정해서 디자인을 다듬고 기능을 개선해야 해. 예를 들어, 로고가 가운데 정렬이 안 되면 코드를 수정해서 가운데로 옮겨주는 거지.

앞으로 할 일

다음 영상에서는 Figma로 돌아가서 로딩 화면이나 아이디어를 보여주는 화면을 더 예쁘게 만들고, 이번에 만든 기능들을 더 다듬을 예정이야.

핵심은 이거야!

• Figma로 디자인하고
• Cursor와 Claude Code로 코드를 짜고
• OpenAI API로 AI 기능을 더하는 거지!

이렇게 하면 우리가 상상했던 웹사이트를 실제로 만들 수 있게 되는 거야! 정말 신기하지?