MangCho's Guide

  디자이너는 "버튼 색 바꿨어요"라고 했는데 왜 화면에는 열다섯 군데가 다 다른가요? 디자인 토큰이 뭔지, Figma Variables로 어떻게 세팅하고, CSS Custom Properties와 Theme 객체로 코드에 매핑하는지, 그리고 실무에서 동기화가 깨지는 순간을 어떻게 막는지까지 — 이 글 하나로 다 정리해 드릴게요!   디자이너와 개발자 사이에 이런 대화, 다들 한 번쯤 겪어보셨을 거예요. "Primary 색상 조금 바꿨어요~" 한 마디에 개발자가 파일 열다섯 개를 열어서 색 코드를 하나씩 찾아 바꾸는 상황. 혹은 반대로, 개발자가 이미 코드에서 색을 바꿨는데 Figma 파일은 아직 옛날 색인 상황. 😅 이게 한두 번이면 모르겠는데, 프로젝트가 커질수록 이 문제는 기하급수적으로 커져요. 디자인 토큰은 바로 이 문제를 해결하기 위해 나온 개념이에요. "색, 간격, 폰트 크기 같은 디자인 결정 사항을 하나의 이름 붙인 변수로 관리하자"는 아이디어인데요, 말은 쉽지만 실제로 Figma Variables와 코드를 동기화해서 운영하는 건 생각보다 손이 많이 가요. 오늘은 그 전체 흐름을 처음부터 끝까지 정리해 드릴게요!   디자인 토큰이란 무엇인가요? 🔤 디자인 토큰(Design Token)은 UI를 구성하는 시각적 속성값을 이름 붙인 변수로 추상화한 것 이에요. 색상, 타이포그래피, 간격, 그림자, 모션 등 디자인 시스템에서 반복적으로 사용되는 값들이 모두 토큰의 대상이 될 수 있어요. 예를 들어 버튼의 배경색을 #6a1b9a 라는 HEX 값으로 직접 쓰는 대신, color.primary.500 이라는 토큰 이름으로 참조하는 거예요. 나중에 브랜드 색상이 바뀌어도 토큰 값 하나만 수정하면 그 토큰을 참조하는 모든 컴포넌트가 한꺼번에 업데이트되죠. 토큰의 3단계 계층 구조 실무에서 많이 쓰는 3-tier 구조를 알아두면...

  디자인 토큰이 하드코딩된 색상 값으로 변환되어 당황하셨나요? 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는 눈에 보이는 시각적 일치도에 집중하느라 참조된 변수명 대신 즉시 렌더링 가능한 하드코딩 값을 우선적으로 선택 해버리는 경향이 ...