이것 저것

Figma MCP를 이용해서 사이드 프로젝트 디자인, 퍼블리싱 해보기 (feat. Readdy ai)

Lv1_junior_dev 2025. 5. 19. 22:36

https://github.com/modelcontextprotocol

 

사이드 프로젝트를 진행할 때 디자인과 퍼블리싱 작업에 많은 시간이 소요됩니다.
하지만 AI 기술을 활용하면 이 과정을 크게 단축할 수 있습니다.

이 글에서는 Readdy AI와 Figma, 그리고 MCP(Model Context Protocol)를 활용해 디자인부터 코드 구현까지 AI가 도와주는 방법을 소개하려 합니다.

제 0장. MCP ?

  • MCP에 대해서.
    • AI 시스템이 콘텐츠 저장소, 비즈니스 도구, 개발 환경 등 다양한 데이터 소스와 원활하게 연결될 수 있도록 지원하는 표준화된 프로토콜입니다.
  • MCP 서버의 구조와 주요 기능
    • MCP는 클라이언트-서버 모델을 기반으로 하며, AI 시스템이 다양한 데이터 소스와 연결될 수 있도록 설계된 프로토콜입니다.
https://x.com/akshay_pachaar/status/1900456268084764689
 
  • MCP Server 특징
    • 데이터 소스 연결: AI 시스템이 파일 시스템, GitHub, Google Drive, Slack, Postgres 등의 외부 데이터 소스와 직접 통신 가능
    • 보안성 강화: 각 연결은 안전하게 관리되며, 조직의 내부 시스템과 AI가 안전하게 연동
    • 양방향 데이터 흐름 지원: 기존 API 기반 통합과 달리, MCP는 AI가 데이터를 읽고 수정하는 양방향 통신을 지원
    • 확장성: 오픈 소스 커뮤니티에서 적극적으로 지원하고 있으며, 기업 및 개인 개발자가 새로운 MCP 커넥터를 직접 개발하고 확장 가능

제 1장.  Readdy.ai를 이용해 웹페이지 UI 생성 및 Figma로 Export 해보기

1. VSCode 설치 (링크) 

2. GitHub Copilot Extensions 설치

3. Copilot Chat 설정 변경 (Ask → Agent로 설정을 변경합니다.)

 

4. readdy.ai 웹사이트로 접속하여 로그인을 진행하여 프로젝트를 생성
(프로젝트 페이지는 로그인 완료 시 자동 진입 됨)

5. 필요한 작업 사항들을 작성하여 전송

 

작성 예시

1. 헤더 필요 / 헤더의 좌측에는 IPF FE TEAM 로고를 삽입해줘 / 색상은 rgb(239, 80, 48) / 조금 귀여운 느낌을 첨가해줘 / 헤더 로고 클릭 시 홈 화면으로 으로 이동 필요
2. 네비바 필요/ 메뉴는 적절히 5개 정도 만들어줘. IPF 소개 이 2개는 반드시 들어가야함 / 네비바 호버시에는 서브 메뉴들이 보여져야함
3. 바디 영역에는 적절한 크기의 캐러셀이 필요 / 캐러셀의 이미지는 총 5개 / 좌우 버튼을 통한 캐러셀 이미지 전 후로 이동 / 캐러셀의 하단 중앙에는 현재 몇 번째 캐러셀 이미지인지 점으로 알려줘야함 / 선택되지 않은 점은 살짝 흐리게 선택된 점은 선명하게
4. 바디 영역에 캐러셀 영역을 제외하고는 팀원들 소개하는 카드 컴포넌트가 위치해야함 / 팀원들 이름[   ] 는 카드 컴포넌트 이미지 영역에 청년(남성)사진, 팀원 소개글은 카드를 클릭했을 때 별도의 모달이 출력되도록 하고, 모달의 내용에는 사용하는 기술 스택을 뱃지 형태로 표기, 기술 스택은 알아서 / 모달의 헤더 중앙에는 팀원의 이름, 우측 끝에는 닫기 버튼 / 모달 출력 시 뒷 배경을 블러 처리
5. 푸터에는 적절하게 알아서

 

6. Generate 버튼 클릭

7. 완료된 결과물을 확인하고

8.Figma Export 버튼 클릭 !
(유료 입니다 ㅠ …. 월 20달러 !)

제 2장. Figma ↔︎ Copliot Agent 연동하기 (MCP)

1. Figma에서 개인용 엑세스 토큰을 발급함. (권한은 File content만 Read-only로 줘도 충분)
Settings → Security → Personal access tokens

2. VSCode에서 command + shift + p

  • MCP Add…. 입력

 

3. Command 선택 후

  • npx figma-developer-mcp --figma-api-key=<your-figma-api-key> 명령어 입력

(Sever 이름은 자유롭게)

 

4. mcp.json 파일 생성 여부 확인

  • mcp.json에 "Figma MCP": {"url": "http://localhost:3333/sse"} 추가

mcp.json 최종 구조

5. figma, Figma MCP를 순차적으로 실행시켜 줍니다.

  • 아래 이미지와 같이 “Establishing new SSE connection”이 출력되면 성공적으로 연결된 것입니다.

 

6. 도구에 Figma MCP Server가 정상적으로 등록된 것을 확인해줍니다.

 

7. copilot에게

Create a complete React project using TypeScript based on this Figma design <Figma Url> Use PandaCSS as the CSS-in-JS library. Put all images in the images folder.

해당 명령어를 삽입

 

8. 코파일럿이 출력하는 결과들을 사용자의 입맛에 맞게끔 커스텀

9. 끝 !