피그마 Make 내보내기와 VS Code 동기화의 함정: regenerate 반복 시 index.css가 꼬이는 진짜 이유

피그마 Make 내보내기 VS Code 동기화 문제는 최근 AI 협업툴을 쓰는 개발팀에게는 관심도가 매우 높은 주제입니다. 특히 regenerate를 반복하면 index.css가 자동으로 덮어써지고, VS Code에서 커스텀한 globals.css와 불일치가 생기면서 스타일 충돌이 누적되는 현상이 자주 발생합니다. 표면적으로는 “index.css를 건드리지 않고 globals.css에만 수정하면 된다”고 생각하기 쉽지만, 실제 개발 환경에서는 그렇지 않습니다.

이 글에서는 피그마 Make 내보내기와 VS Code 환경을 혼합할 때 발생하는 스타일 충돌의 진짜 원인, 그리고 장기적으로 안전한 관리 방법을 정리했습니다.

---

1) 겉보기에는 단순한 규칙처럼 보인다

많은 사용자가 이렇게 생각합니다.

• index.css는 자동 생성이니까 절대 수정 금지
• 커스텀 스타일은 globals.css에서만 관리
• regenerate 후 globals.css를 VS Code 기준으로 다시 복사
• alias는 vite.config.ts에서 관리

이 구조만 보면 문제가 없어 보입니다. 그러나 실제 환경에서 문제는 규칙이 아니라 실행 과정에서 발생합니다.

---

2) 피그마 Make 내보내기(regenerate)가 반복되면 일어나는 충돌

피그마 regenerate는 HTML 구조·클래스·스타일을 매번 조금씩 바꿉니다.

예를 들면,

• div 계층이 달라짐
• class 이름이 변경됨
• 원래 있던 wrapper가 제거됨

이처럼 regenerate가 DOM 구조를 미세하게 변경하면, globals.css의 오버라이드 규칙이 전혀 먹히지 않는 상태가 됩니다.

즉, index.css를 수정하지 않아도 충돌은 자동으로 발생합니다.

---

3) AI 도구(Copilot·Cursor)가 규칙을 어기는 순간 문제는 더 커진다

피그마 메이크 내보내기와 VS Code를 함께 쓰는 환경에서는 AI의 영향이 매우 큽니다.

AI 도구는 다음과 같은 행동을 자주 합니다.

• 화면 깨짐 발견 → index.css에 수정 제안
• 구조 파악 후 → 자동으로 index.css에 새로운 스타일 삽입
• import 순서만 보고 index.css를 “우선 적용 파일”로 판단
• 파일 이름만 보고 리팩터링 제안

즉, 사람이 아무리 “index.css는 건드리지 마”라고 선언해도 AI 입장에서 index.css는 일반적인 수정 대상 파일일 뿐입니다.

이렇게 AI 수정이 한 번이라도 들어가면, regenerate할 때마다 수정 사항이 사라지고 스타일 충돌이 더 심해집니다.

AI와 협업하는 시대에는 규칙만으로는 해결되지 않는 구조적 문제가 됩니다.

---

4) globals.css 수동 머지(Sync)가 누적되면 피로도가 커진다

VS Code에서 globals.css를 수정하고, regenerate 후 Figma의 globals.css에 복사하는 수동 방식은 처음에는 간단하지만 시간이 지날수록 다음 문제가 쌓입니다.

• 한 번이라도 Sync 누락 → regenerate에서 예전 스타일로 회귀
• 팀원이 Figma에서 globals.css를 바꾸면 충돌
• regenerate의 구조 변경 → 오버라이드가 무효화
• globals.css와 figma-generated-css 간 drift 누적

즉, 수정 파일을 globals.css로 통일한다고 끝이 아닙니다. 동기화 자체가 관리 포인트가 되는 구조이기 때문에 장기적으로는 지치기 쉬운 구조입니다.

---

5) 그럼 진짜 해결책은 무엇인가?

결론은 간단합니다.

CSS 구조만으로는 문제를 해결할 수 없다. 도구(피그마, AI, VS Code)와 사람 전체가 이해하는 구조를 설계해야 한다.

추천하는 3층 구조

• figma make 코드구조도 반드시 수정!

styles/
  ├── base.css        ← reset + token + typography
  ├── components.css  ← 공통 컴포넌트 스타일
  ├── figma.css       ← regenerate로 재생성되는 파일만 담당
  └── globals.css     ← 사람이 관리하는 커스텀 오버라이드

핵심 원리

• index.css는 사용하지 않거나 figma.css로 역할 분리
• regenerate 결과는 모두 figma.css에만 갇힘
• globals.css는 완전 ‘수동’ 영역으로 분리
• index.css는 읽기 전용 권한 또는 주석으로 AI 금지 선언
• Cursor/Copilot system prompt에 “index.css 수정 금지” 추가

이 구조가 지속 가능한 CSS 환경을 만드는 가장 안전한 방법입니다.

---

6) 마무리

피그마 Make 내보내기와 VS Code 동기화 문제는 단순한 스타일 충돌이 아닙니다. regenerate가 DOM 구조를 바꾸고, AI가 자동 수정 제안을 넣으며, globals.css가 수동 동기화에 의존하는 구조라는 점에서 장기적으로 스타일이 뒤틀릴 수밖에 없습니다.

해답은 CSS 설계뿐 아니라 사람 + AI 도구 + 리포지토리 전체에 규칙을 일관되게 적용하는 것입니다.