이 장에서는 UI/UX 디자인 도구인 Figma를 소개하고, Claude Desktop에 Figma를 연결해 디자인을 코드로 바꾸는 방법을 간단히 다룹니다. Figma를 쓰지 않는 분은 1절만 읽고 2절은 건너뛰셔도 됩니다. 이후 챕터에서 Figma가 필요한 실습은 없습니다.

1. 디자인 툴 Figma 소개

1.1 Figma란?

Figma: the collaborative interface design tool.

Figma는 UI/UX 디자인을 위한 클라우드 기반 협업 디자인 플랫폼입니다.

쉽게 말해 웹 브라우저에서 디자인 작업을 하고, 링크 하나로 팀원들과 실시간으로 협업할 수 있는 도구입니다. 포토샵이나 일러스트레이터처럼 프로그램을 설치할 필요가 없습니다. 크롬만 있으면 어디서든 작업할 수 있죠.

1.2 왜 Figma를 알아야 할까

바이브 코딩을 하다 보면 디자이너와 협업할 일이 생깁니다. 또는 직접 디자인을 해야 할 때도 있죠. Figma는 현재 전 세계 디자이너들이 가장 많이 사용하는 도구입니다. 2023년 설문조사에서 압도적인 1위를 차지했습니다.

위니브에서도 디자인 시스템 구축, 웹/앱 UI/UX 디자인, 카드뉴스 제작, 교안 이미지 제작, 책 표지 디자인 등 거의 모든 디자인 작업을 Figma로 진행합니다.

1.3 Figma의 핵심 장점

• 웹 환경에서 작동합니다: 프로그램 설치가 필요 없습니다. 맥이든 윈도우든 상관없이 브라우저만 있으면 됩니다.
• 실시간 저장과 협업: 작업 내용이 자동으로 저장됩니다. 여러 명이 동시에 한 파일에서 작업할 수 있습니다. 구글 독스처럼요.
• 무료로 충분합니다: 대부분의 기능을 무료로 제공합니다. 바이브 코딩 수준에서는 유료 기능이 거의 필요 없습니다.

1.4 Figma 제품군 이해하기

Figma는 이제 단순한 디자인 툴이 아닙니다. 아이디어 구상부터 웹 페이지 배포까지 전 과정을 지원하는 플랫폼으로 진화했습니다.

1.4.1 핵심 도구들

1. Figma Design: 디자인 작업의 중심입니다. UI/UX 디자인을 만드는 메인 툴로, 컴포넌트, 오토 레이아웃, 디자인 시스템을 구축할 수 있습니다.

   

2. Dev Mode: 개발자를 위한 모드입니다. 개발자가 디자인을 코드 친화적으로 확인할 수 있는 전용 뷰어로, CSS 속성, 간격, 색상 코드 등을 바로 확인할 수 있어 협업에 유용합니다.

   

3. FigJam: 아이디어 정리 도구입니다. 디지털 화이트보드로, 브레인스토밍, 플로우차트, 회의록 등 협업 아이디어를 시각적으로 정리할 때 사용합니다.

   

4. Slides: 프레젠테이션 제작 도구입니다. 파워포인트처럼 활용할 수 있으며, 피그마 디자인 에셋을 바로 가져와 쓸 수 있어 편리합니다. 웹 기반으로 브라우저에서 바로 공유할 수 있다는 장점이 있습니다.

   

1.4.2 최신 AI 도구들

1. Make: AI 프로토타입 제작 도구입니다. AI가 프롬프트를 받아 디자인과 코드 제안을 생성합니다. 아이디어를 빠르게 시각화하고 프로토타입으로 확장할 수 있습니다.

   

2. Sites: 웹사이트 퍼블리싱 도구입니다. 디자인한 웹사이트를 코딩 없이 바로 배포할 수 있습니다. 반응형 웹사이트 제작을 지원해 디자이너가 손쉽게 웹 퍼블리싱까지 할 수 있습니다.

   

1.5 바이브 코딩에서 Figma 활용법

• 디자인 참고하기: Figma Community에서 수많은 무료 템플릿과 디자인 시스템을 찾을 수 있습니다. 이걸 레퍼런스로 활용하세요.

  

• 디자인을 코드로 변환하기: 뒤에서 다룰 Figma 연결을 활용하면 Figma 디자인을 Code 탭이 바로 코드로 변환합니다.

• 협업하기: 디자이너가 Figma로 디자인을 만들면 링크 하나로 공유받을 수 있습니다. Dev Mode로 보면 필요한 코드 정보를 바로 확인할 수 있죠.

Figma를 마스터할 필요는 없습니다. 하지만 기본적인 사용법과 구조를 이해하면 디자이너와 소통이 훨씬 편해집니다. 처음엔 Community에서 템플릿을 찾아보는 것부터 시작하세요. 마음에 드는 디자인을 발견하면 화면을 캡처해 6장 5절에서 한 것처럼 디자인 시스템 문서로 만들어 보는 겁니다. 이것만으로도 충분히 멋진 서비스를 만들 수 있습니다.

2. Claude Desktop에 Figma 연결하기

2.1 Figma 디자인이 있다면

이미 Figma로 만든 디자인이 있다면, 캡처해서 보여주는 대신 Figma를 Claude Desktop에 직접 연결할 수 있습니다. 그러면 Claude가 선택한 화면의 크기, 색상, 간격 같은 정보를 그대로 읽어 HTML, CSS 코드로 변환합니다. 이 연결은 Figma 유료 구독이 필요하고, Figma를 쓰지 않는 분에게는 필요 없는 기능입니다. 지금 당장 Figma 디자인이 없다면 이 절은 건너뛰어도 됩니다.

Dev Mode MCP 서버 안내서

2.1.1 MCP란 무엇인가

MCP는 쉽게 말해 AI에게 실제 작업을 시킬 수 있게 해주는 통로입니다. 3장에서 커넥터와 함께 짧게 소개했습니다.

요즘 AI는 정말 똑똑합니다. 글도 잘 쓰고 요약도 잘합니다. 그런데 현실의 작업은 못합니다. 예를 들어서

• "내 휴가 일정 등록해줘"
• "내 컴퓨터에서 OO파일 열어봐"
• "내 이번달 매출을 엑셀로 정리해줘"

이런 것들은 할 수 없었습니다. AI가 실제 컴퓨터나 프로그램을 조작할 수 없었기 때문입니다.

그러나 MCP가 나오면서 이런 것들이 가능해졌습니다.

사람: "오늘 누구 휴가야?"

AI: (휴가 관리 시스템에 직접 접속해서 확인하고 알려줌)

사람: "이 자료 PDF로 바꿔줘!"

AI: (파일을 불러오고 변환해서 저장까지 함)

Claude Desktop에서는 이 통로를 클릭으로 붙입니다. 사이드바의 사용자 지정 메뉴에 들어가면 커넥터와 MCP를 한곳에서 관리할 수 있습니다.

2.2 Figma 연결로 할 수 있는 일

Figma 연결은 Figma와 AI가 직접 대화할 수 있게 해주는 다리입니다.

2.3 연결 방법

2.3.1 Figma 앱 설정

Figma Dev Mode MCP 기능을 활용하려면 Figma 데스크톱 앱이 필요합니다. 최신 버전으로 업데이트해 주세요.

1. Figma 앱을 실행합니다.
2. 디자인 파일 내에서 '개발자 모드'를 실행합니다.
3. Main menu > Preferences > Enable Dev Mode MCP server를 체크하여 MCP를 활성화합니다.

2.3.2 Claude Desktop 설정

Claude Desktop 사이드바에서 사용자 지정을 열고 커넥터 추가 화면으로 들어갑니다. 여기서 Figma가 목록에 있다면 그대로 연결하면 되고, 없다면 사용자 지정 커넥터로 Figma가 안내하는 주소(http://127.0.0.1:3845/sse)를 넣어 추가합니다. 화면 구성은 버전에 따라 조금씩 다르니, 헷갈리면 채팅 탭에 "Figma Dev Mode MCP를 Claude Desktop에 연결하는 방법 알려줘"라고 물어보세요. 공식 문서를 찾아 지금 화면 기준으로 알려줍니다.

연결이 끝나면 Code 탭 입력창의 + 버튼 메뉴에 Figma가 보이거나, "연결된 도구 목록 보여줘"라고 물었을 때 Figma가 나오면 성공입니다.

2.4 Figma 디자인 변환 요청하기

2.4.1 기본 변환 과정

1. Figma '개발자 모드'에서 변환하고 싶은 프레임을 선택합니다.

   

2. Code 탭에서 작업 폴더를 지정하고 아래처럼 요청합니다.

   내 Figma 선택 항목을 일반 HTML + CSS로 생성해줘. index.html 파일로 저장해줘.
   

3. Claude가 선택한 디자인을 읽어 HTML, CSS로 변환하고 폴더에 저장합니다. 폴더에서 index.html을 더블클릭해 브라우저로 열어 확인합니다.

   

   

2.4.2 추가 작업 요청

변환된 코드에 추가 작업을 요청할 수 있습니다.

변환한 디자인 유지하고 반응형 적용해줘

각 버튼 요소에 호버 애니메이션 자연스럽게 추가해줘

2.5 팁과 주의사항

• 아이콘과 로고 처리: 아이콘이나 로고를 SVG로 저장하는 기능은 아직 불안정합니다. 직접 저장해서 폴더에 넣어 두는 것을 권장합니다.
• 복잡한 디자인 처리: 선택한 프레임에 디자인 요소가 너무 많으면 변환이 제대로 되지 않습니다. 긴 랜딩페이지나 복잡한 디자인은 섹션별로 분할해서 작업하는 것이 효과적입니다.
• 권장 작업 방식: 한 번에 하나의 섹션만 선택하고, 간단한 컴포넌트부터 시작해서, 점진적으로 복잡한 요소를 추가합니다.