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는 눈에 보이는 시각적 일치도에 집중하느라 참조된 변수명 대신 즉시 렌더링 가능한 하드코딩 값을 우선적으로 선택 해버리는 경향이 ...