MangCho's Guide

  피그마 MCP 연동, 어떤 AI 모델이 가장 코드 변환을 잘할까? 최근 주목받는 MCP(Model Context Protocol) 서버를 활용한 Design-to-Code 워크플로우에서 Claude 3.5 Sonnet, GPT-4o 등 주요 AI 모델들의 실제 퍼블리싱 성능과 사용 편의성을 비교해 보았습니다.   최근 개발자들 사이에서 아주 뜨거운 주제가 하나 있죠. 바로 MCP(Model Context Protocol)를 이용해 피그마(Figma)와 AI를 직접 연결하는 방식입니다. 기존에는 화면을 캡처해서 AI에게 주거나 플러그인에 의존했다면, 이제는 MCP 서버를 통해 AI가 피그마 파일의 레이어 구조와 속성값을 '원본 데이터' 그대로 읽어올 수 있게 되었거든요. 저도 이 환경을 로컬에 세팅하면서 문득 궁금해졌어요. "피그마 데이터를 텍스트로 읽어오는 건 MCP가 해주지만, 그걸 깔끔한 HTML/CSS나 React 코드로 짜는 건 결국 AI 모델의 몫인데... 어떤 모델을 쓰는 게 가장 효율적일까?" 하고요. 그래서 실무에서 가장 많이 쓰이는 대표적인 AI 모델들을 MCP 환경에 물려보고, 그 결과와 장단점을 비교해 보았습니다. 피그마 AI 퍼블리싱 도입을 고민 중이시라면 이 글이 좋은 참고가 될 거예요. 😊   MCP 환경에서 AI의 역할 짚어보기 🤔 비교에 앞서, MCP가 무엇을 전달하고 AI가 무엇을 처리하는지 역할을 명확히 할 필요가 있습니다. 피그마 MCP 서버는 디자인 파일의 노드(Node) 정보, 예를 들어 width: 100px , color: #FFF , layoutMode: HORIZONTAL 같은 원시 JSON 데이터를 AI에게 던져줍니다. 이때 AI 모델의 역량은 이 방대한 메타데이터 속에서 '유의미한 UI 구조'를 추론 ...

  AI Design-to-Code 결과물이 자꾸 깨지나요? Figma의 오토레이아웃이 AI 코드 변환 과정에서 누락되거나 CSS Flexbox로 제대로 매핑되지 않는 현상의 원인과 실질적인 해결 방법을 알아봅니다.   요즘 ChatGPT나 Claude, v0 같은 AI 도구에 Figma 디자인 시안을 던져주고 UI 코드를 짜달라고 요청하는 경우가 많아졌죠. 디자인이 눈앞에서 바로 코드로 변환되는 걸 보면 신기하기도 하지만, 막상 결과물을 브라우저에서 열어보면 레이아웃이 와장창 깨져 있는 경험, 한 번쯤 해보셨을 거예요. 가장 흔한 문제는 Figma에서 공들여 설정한 오토레이아웃(Auto Layout)이 통째로 무시되고, 모든 요소가 position: absolute 로 고정되어 버리는 현상입니다. 이렇게 되면 화면 크기를 조금만 줄여도 요소들이 겹치고 난리가 나죠. AI가 오토레이아웃을 CSS Flexbox로 깔끔하게 변환하게 만들려면 디자인 원본 구조와 프롬프트를 조금 다듬어줄 필요가 있습니다. 오늘은 이 지긋지긋한 레이아웃 파싱 오류를 줄이는 방법을 차근차근 짚어볼게요. 😊   오토레이아웃 파싱 누락, 왜 일어날까요? 🤔 AI가 Figma 데이터를 읽어들일 때, 보통 플러그인을 통한 JSON 데이터 추출이나 이미지 비전(Vision) 기능을 활용합니다. 이때 디자인 구조가 명확하지 않으면 AI는 요소들의 위치를 상대적인 흐름(Flow)이 아닌, 절대 좌표(Absolute X, Y)로 해석해버리기 쉽습니다. 특히 일반 그룹(Group)과 프레임(Frame)을 혼용 하거나, 오토레이아웃 내부에 '절대 위치(Absolute position)' 속성을 남용했을 때 파싱 에러가 잦습니다. 컴퓨터에게 텍스트 문서의 문단을 알려주지 않고 글자들의 좌표만 던져주는 것과 ...

  Figma MCP 403 Forbidden 오류 대처하기 최근 MCP 서버에 피그마를 연동하다가 권한 오류로 막히셨나요? 토큰 발급부터 환경 변수 설정까지, 차근차근 원인을 짚어보고 문제를 풀어나가는 과정을 정리해 보았습니다.   요즘 LLM이나 AI 에이전트 환경에 MCP(Model Context Protocol)를 연결해서 피그마(Figma) 디자인 데이터를 직접 읽어오는 시도를 많이들 하시죠. 저도 최근에 피그마 MCP 서버를 로컬에 세팅하다가 뜬금없이 403 Forbidden 에러를 마주하고 꽤나 당황했던 기억이 납니다. "분명히 시키는 대로 토큰을 넣었는데 왜 접근이 안 되지?" 하면서 말이죠. 서버 로그를 열어보면 403 에러가 붉은 글씨로 찍혀 있는데, 이 에러는 보통 서버가 요청을 이해하긴 했지만 권한이 없어서 거부할 때 발생해요. 피그마 연동에서는 십중팔구 토큰(Token)의 스코프(권한)가 부족하거나, 복사하는 과정에서 형식이 틀어졌거나, 이미 만료된 경우랍니다. 오늘은 제가 이 문제를 어떻게 하나씩 확인하고 풀어나갔는지, 그 트러블슈팅 과정을 공유해 보려고 해요. 똑같은 오류로 답답해하시는 분들께 조금이나마 실질적인 도움이 되었으면 좋겠네요. 😊   첫 번째 의심: 토큰 권한(Scope) 설정이 맞을까? 🤔 피그마에서 발급받는 Personal Access Token(PAT)은 내 계정의 어떤 데이터에 접근할 수 있는지 '범위(Scope)'를 지정하게 되어 있어요. 403 에러가 났다면, 가장 먼저 이 스코프 설정을 의심해봐야 합니다. 단순히 토큰만 발급받았다고 해서 모든 파일에 접근할 수 있는 건 아니거든요. MCP 서버가 피그마 파일의 노드(Node) 정보나 텍스트, 컴포넌트 데이터를 읽어오려면 최소한 파일 읽기 권한이 필수적입니다. 종종 토...

  "자고 일어났더니 AWS에서 10만 원이 결제됐어요!" 개발자 커뮤니티의 단골 괴담인 AWS 프리티어 요금 폭탄. 나도 모르게 새어나가는 숨은 과금 요소를 찾아내고, 1달러만 넘어도 즉시 알려주는 CloudWatch 결제 알람 설정법을 완벽 정리해 드립니다!   코딩 공부를 시작하거나 개인 사이트를 배포할 때, 누구나 한 번쯤 거쳐 가는 관문이 바로 AWS(아마존 웹 서비스) 프리티어 입니다. 1년 동안 서버를 무료로 준다길래 신나서 가입하고 이것저것 클릭해 보던 기억, 다들 있으시죠? 저도 처음 AWS에 입문했을 때 "와, 아마존 진짜 혜자다!" 하면서 이것저것 막 눌러봤던 기억이 나네요. 그런데 문제는 그로부터 한두 달 뒤에 발생합니다. 갑자기 날아온 카드사 알림에 찍힌 'AWS $50.00 결제'... 솔직히 말해서 이때 심장이 철렁 내려앉는 기분, 안 당해본 사람은 모릅니다. "난 분명 무료라고 해서 썼는데 왜 돈이 나가지?!" 하고 억울해하지만, 알고 보면 우리가 프리티어의 '숨은 한도'를 넘겼기 때문이에요. 그래서 오늘은 여러분의 소중한 지갑을 지켜드리기 위해, AWS에서 나도 모르게 돈이 새는 주범들을 샅샅이 찾아내고, 요금이 단 1달러라도 발생하면 즉각 내 이메일로 경고를 보내주는 CloudWatch 결제 알림 설정법 을 아주 쉽게 알려드릴게요. 이 글만 다 읽으시면 더 이상 월말마다 불안에 떨지 않으셔도 됩니다! 😊   1. AWS 프리티어, 진짜 '완전 무제한 무료'일까? 🤔 많은 분들이 가장 크게 오해하시는 부분부터 확실히 짚고 넘어갈게요. AWS 프리티어는 '무제한 무료 뷔페'가 아닙니다. 정확히 정해진 접시 수(한도)만큼만 무료로 제공하는 시식 코너 에 가깝습니...