MangCho's Guide

  디자인 토큰이 하드코딩된 색상 값으로 변환되어 당황하셨나요? AI를 활용한 Figma to React 퍼블리싱 과정에서 디자인 변수(Token)가 누락되는 원인을 알아보고, 프롬프트와 구조화를 통해 변수 매핑 오류를 해결하는 방법을 알아봅니다.   요즘 AI 도구를 사용해서 피그마(Figma) 시안을 React 코드로 뚝딱 변환하는 작업, 다들 한 번쯤 시도해 보셨을 텐데요. 디자인이 곧바로 컴포넌트로 바뀌는 걸 보면 정말 신세계가 따로 없죠. 하지만 막상 결과물을 프로젝트에 적용하려고 코드를 까보면 한숨이 나오는 경우가 종종 있어요. 분명히 피그마에서는 Primary/500 같은 디자인 토큰(Design Token)으로 예쁘게 묶어놨는데, AI가 뱉어낸 코드에는 color: #6a1b9a 처럼 헥스(Hex) 코드가 생으로 하드코딩되어 있는 현상 말이에요. 다크모드 대응이나 테마 변경을 하려면 이걸 일일이 다 찾아 바꿔야 하니 완전 짜증나죠. 저도 실무에서 이 문제 때문에 AI가 짜준 코드를 통째로 갈아엎은 적이 있답니다. 왜 이런 일이 발생하는지, 그리고 어떻게 하면 AI가 우리 팀의 디자인 토큰을 똑똑하게 매핑하게 만들 수 있는지 차근차근 짚어보도록 할게요. 😊   왜 AI는 디자인 토큰을 무시할까요? 🤔 AI가 코드를 생성할 때 피그마 API나 플러그인을 통해 데이터를 읽어오는데요. 이때 피그마의 내부 구조상 레이어에 적용된 '최종 결과값(Raw Value)'과 '참조된 변수명(Variable/Style Name)'이 분리되어 전달됩니다. 우리가 AI에게 "이 화면을 React로 만들어줘"라고 단순하게 명령하면, AI는 눈에 보이는 시각적 일치도에 집중하느라 참조된 변수명 대신 즉시 렌더링 가능한 하드코딩 값을 우선적으로 선택 해버리는 경향이 ...

  피그마 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) 정보나 텍스트, 컴포넌트 데이터를 읽어오려면 최소한 파일 읽기 권한이 필수적입니다. 종종 토...