클로드 피그마 MCP로 컴포넌트 만들기 | 프롬프트로 디자인 토큰부터 버튼까지 transcript

자, 이제 AI를 활용해서 컴포넌트를 만들어 볼까요? 지난 영상에서 컴포넌트를 만들기 전에 컴포넌트 리서치의 필요성에 대해 얘기했죠. 오늘은이 리서치를 바탕으로 AI와 함께 피그마 세팅부터 컴포넌트까지 완성해 볼게요. 본격적인 작업에 들어가기 전에 피그마를 직접 제어할 수 있는 AI 환경부터 세팅해 볼게요. 먼저 클로드 데스크톱 앱을 설치해 주세요. 웹 브라우저가 아니라 데스크톱 전용 앱을 써야 피그마를 컨트롤하는 MCP 기능을 제대로 활용할 수 있어요. 그리고 긴 문서와 디자인 시안을 한 번에 다루기 위해 프로플랜 이상을 구독하시는 걸 추천해요. 여기서 피그마 MCP라는 개념이 생소하실 텐데요. 모델 컨텍스트 프로토콜의 약자로 쉽게 말해 클로드와 피그마를 실시간으로 이어주는 연결이에요. 대화창에 채팅만 치는게 아니라 클로드가 직접 피그마 캔버스를 읽고 쓰는 것까지 가능한 기술이에요. 클로드 데스크톱 앱 좌측 하단에 사용자 이름을 클릭하고 설정 메뉴로 들어가 주세요. 설정 모델 창에 뜨면 좌측 하단에 있는 커넥터 메뉴를 선택해 주시고 오른쪽에 탐색 탭으로 이동한 뒤 검색창에 피그마를 입력해 주세요. 이때 검은색 바탕 로고인 피그마를 선택해 주세요. 새로 열리는 웹 브라우저 창에서 연동할 피그마 계정으로 로그인하신 후 클로드가 피그마를 제어할 수 있도록 권한 요청 창에서 얼로우 엑세스 버튼을 눌러 승인해 주세요. 클로드 앱으로 돌아와 피그마 커넥터가 정상적으로 연결되었는지 확인해 주세요. 이제 클로드가 피그마를 직접 조작할 준비가 끝났어요. 이제 파운데이션 단계에서 준비했던 수치들을 피그마 베리어블로 등록해 볼게요. 처음으로 해야 할 건 클로드 메인 화면 좌측 상단에서 코드 탭을 선택해 주세요. 그 후에 원래는 여기서 작업을 저장할 폴더를 선택해야 하지만 지금은 개발 서버와 연결하는 단계가 아니라 피그마 작업만 먼저 진행할 거라서 별도로 작업 폴더를 지정하지 않고 시작할게요. 추후의 개발과 연동에서 코드 파일을 저장하게 돼서 특정 폴더를 지정하면 앞으로의 대화가 그 폴더 단위로 묶여서 생성되니 참고해 주세요. 가장 먼저 파운데이션의 네이밍 컨벤션 규칙을 클로드에게 알려 줄게요. 전체 네이밍 컨벤션을 정의했다면 전체를 입력해 줘도 되지만 만약 파운데이션만 있다면 파운데이션만 입력해 줘도 좋아요. 기본적인 네이밍 규칙이 있어야 피그마에 등록될 때 깔끔하게 등록할 수 있어요. 만약 네이밍 규칙을 입력하지 않는다면 클로드가 임의의 네이밍을 사용할 거예요. 정해둔 규칙이 없다면 기존 유명 디자인 시스템에 네이밍 방식을 그대로 참고해서 넣도록 입력해 줘도 좋아요. 제가 작성한 프롬프트에서 작업자 상황에 맞게 커스텀에서 입력하시면 돼요. 미리 정의해 둔 컬러 팔레트가 있다면 핵스코드 목록을 프롬프트로 전달해요. 만약에 컬러 팔레트가 없다면 제가 지난번에 AI에게 프롬프트로 컬러 팔레트 생성하는 영상을 업로드 했었는데요. 해당 영상의 프롬프트를 클로드에 입력해서 컬러 팔레트를 생성해도 좋아요. 그러면 컬러 팔레트의 컬러를 규칙적인 색상으로 생성할 수 있어요. 이번 영상에서는 컬러 팔레트 로직을 입력해서 컬러 팔레트를 생성했어요. 간격과 라운드 값도 똑같이 등록해 볼게요. 미리 정의해 둔 스페이싱 규칙과 레디어스 값을 프롬프트에 넣고 로컬 베리어블로 등록해 달라고 해요. 화면에 보시는 것처럼 테이블 형태로 정리해 두고 클로드에 읽고 분석할 수 있게 해 주면 좋아요. 타이포그래피는 두 가지 단계를 거쳐야 하는데요. 첫 번째로 폰트와 폰트 사이즈, 라이나이트, 굵기 등을 로컬 베리어블로 등록해야 해요. 이것도 테이블 형태로 정리해 두면 좋겠죠? 그리고 클로드에게이 수치들을 조합해서 헤딩과 바디 같은 피그마 텍스트 스타일로 생성해 달라고 요청해요. 만약에 타이포그래피에 입력할 수치가 없다면 타입 스케일 사이트에 있는 스케일 종류를 참고해서 클로드에게 요청해 주세요. 그러면 클로드가 분석해서 수치를 제안해 줄 것이고 해당 수치로 피그마 로컬 베리어블에 등록해 달라고 요청한 후 텍스트 스타일로 생성해 달라고 요청해 주세요. 이번 영상에서는 테이블 형태로 정리해 둔 값으로 요청했어요. 이제 기존에 작업해 둔 화면 시안 프레임을 선택해서 클로드에게 보여 줄게요. 화면에 쓰인 시각 요소를 분석해서 꼭 필요한 시멘틱 변수 목록을 먼저 텍스트로 추천해 달라고 하는 거예요. 이때 클로드가 불필요하게 너무 많은 베리어블을 생성하지 않도록 프롬프트의 조건을 작성해 주는게 좋아요. 예를 들면 토큰 계수는 최대 20개 이내로 제한하고 재사용성이 높은 UI 패턴 위주로만 시멘틱을 뽑아 달라는 식으로 말이죠. 리스트를 확인하고 승인하면 클로드가 방금 만든 기본 컬러들과 연결해서 시멘틱 베리어블을 등록해 줘요. 파운데이션 세팅이 끝났으니 이제 첫 번째 싱글 컴포넌트를 만들어 볼게요. 버튼을 무작정 그리기 전에 엔트 디자인과 머티리얼 디자인의 버튼 API를 클로드에게 비교해 달라고 해요. 원하는 다른 디자인 시스템이 있다면 그걸로 요청해도 돼요. 글로벌 디자인 시스템들이 버튼에 어떤 속성을 필수로 두고 있는지 한 눈에 파악할 수 있어요. 방대한 속성을 다 만들 필요 없이 우리 프로덕트에 꼭 필요한 스펙을 세 가지 안으로 제안해 달라고 요청해요. 클로드가 제안해 준 안중에서 원하는 옵션을 선택하시면 돼요. 클로드가 정리해 준 속성 구조대로 피그마에서 오토 레이아웃 기능을 활용해서 버튼을 만들어요. 패딩에는 스페이스 변수를 넣고 배경과 텍스트에는 앞서 등록한 시멘티 컬러와 텍스트 스타일을 그대로 연결해 줘요. 베리어블이 제대로 연결되었는지 확인해 주세요. 완성된 버튼 컴포넌트를 기존 작업 화면 시안에 직접 갈아끼워 보세요. 실제 레이아웃 안에서 버튼 크기와 여백이 어색하지 않은지 눈으로 검증하는 과정이에요. 이렇게 하면 버튼 컴포넌트는 1차로 완성되었어요. 지금까지 클로드와 피그마를 연동해서 디자인 토큰과 컴포넌트를 직접 만들어 봤는데요. 원하는 결과물을 정확하게 얻기 위해 프롬프트를 작성할 때 반드시 알아두어야 할 팁들을 정리해 드릴게요.

AI에게 프롬프트를 입력할 때는 일반적인 대화와 달리 몇 가지 신경 써야 할 규칙들이 있어요. 작은 차이만으로도 결과물의 완성도와 작업 속도가 달라져요. 첫 번째는 명확한 역할 부여예요. 인공지능에게 시니어 디자인 시스템 엔지니어와 같은 구체적인 페르소나를 지정해 주어야 해당 맥락에 맞는 전문적인 결과물을 낼 수 있어요. 두 번째는 요청 사항을 단계별로 나누어 전달하는 거예요. 한 번에 너무 많은 명령을 내리면 로직이 꼬이기 쉬움으로 한 단계씩 진행하고 결과를 확인하며 다음 작업을 지시하는 방식이 훨씬 안전해요. 세 번째는 피그마에 바로 적용하지 말고 사전 검토 단계를 두는 거예요. 적용할 내용을 표화 요약본으로 먼저 출력하게 한 뒤 사람이 확인하고 승인했을 때 비로소 쓰기 작업을 진행하도록 제어해 주세요.네 번째는 지시 사항을 최대한 구체적으로 작성하는 거예요. 단순히 분석해 달라고 하기보다는 비교할 대상 라이브러리와 출력할 테이블 구조처럼 세부 조건을 명확히 짚어 주어야 방황하지 않아요. 또는 학습할 내용이나 링크를 미리 제공해 주면 원하는 디자인에 더욱 가까운 결과물이 나올 수 있어요. 마지막으로 가장 중요한 팁은 하지 말아야 할 행동을 반드시 적어 주는 거예요. 금지 조건을 명시하지 않으면 AI가 임의로 추론해서 불필요한 레이어나 코드를 만들기 쉬우니 건드리지 말아야 할 범위는 반드시 제안해 주세요. 오늘은 클로드와 피그마 MCP를 활용해서 파운데이션을 피그마에 등록하고 컴포넌트까지 만들어 봤어요. 오늘도 학습하시느라 수고 많았어요. 우리 다음 영상에서 만나요.

I'm do.