Figma Make 코드 수정 후 화면이 깨질 때: globals.css·index.css 충돌부터 점검하세요

Figma Make로 디자인을 구성하고 React/Vite 코드로 내보낼 때, 많은 분들이 처음 겪는 공통적인 문제가 있습니다. 바로 VS Code에서 일부 수정만 했음에도 “디자인이 다 날아간 것처럼 화면이 완전히 깨지는 현상”입니다. 버튼의 색, 간격, 그림자가 사라지고 전체 페이지가 기본 HTML처럼 보일 때는 당황스럽기 마련입니다.

하지만 이 문제는 대부분 복잡한 로직의 문제가 아니라 CSS 기준이 둘로 갈라지며 발생하는 충돌에서 시작됩니다. 특히 Figma Make는 기본적으로 globals.css 하나를 기준으로 스타일을 생성하는 반면, 내려받기 과정에서는 Vite 기본 템플릿 때문에 index.css가 자동 생성되는 경우가 많습니다. 이 두 파일의 역할이 명확하게 구분되지 않으면, 화면이 쉽게 깨질 수 있습니다.

---

1. Figma Make는 globals.css 하나만을 기준으로 한다

Figma Make에서 코드를 내보내면 보통 다음 구조를 포함합니다.

• src/styles/globals.css
• main.tsx 내 import 구문 import "./styles/globals.css";

즉, Figma는 자신의 스타일을 항상 globals.css 파일에 저장하고 여기에 덮어쓰는 방식을 사용합니다. 문제는 여기서 시작됩니다. 다운로드 구조에서 index.css가 함께 생성되는 순간, 스타일 기준이 두 개로 나뉘게 됩니다.

---

2. 내려받기하면 index.css가 자동 생성된다

Vite 기반 템플릿에서는 index.css가 기본 파일로 취급됩니다. 그래서 다음 구조가 종종 나타납니다.

• src/index.css 자동 생성
• main.tsx에 다음과 같은 import가 남아 있음 import "./index.css"; import "./styles/globals.css";

이렇게 두 파일을 동시에 import하면 브라우저는 어떤 규칙을 우선해야 하는지 혼란스러워집니다. 이때부터 “조용한 충돌”이 일어나고, 어느 순간 화면 전체가 깨지는 접근성 문제가 발생합니다.

---

3. VS Code와 AI 도구는 index.css를 먼저 건드린다

파일명만 보더라도 index.css는 흔히 “프로젝트 대표 스타일”로 인식됩니다. Copilot·Cursor 같은 AI 리팩토링 도구도 index.css를 우선적으로 수정합니다.

• 기본 컴포넌트 스타일 → globals.css
• 내가 추가한 스타일 or AI가 자동으로 추가한 스타일 → index.css

이렇게 두 파일의 성격이 자연스럽게 분리됩니다.

이 상태에서 Figma와 다시 동기화하면, globals.css는 재생성되고, index.css는 그대로 남아 있어 서로 엇갈린 구조가 됩니다. 그리고 이 시점에서 스타일이 한 번에 깨지는 일이 발생하게 됩니다.

---

4. 지속적으로 동기화 가능한 안전한 구조: index.css를 ‘허브’로 만든다

globals.css를 index.css로 통합해버리면 한 번은 해결되지만, Figma regenerate 과정에서 globals.css가 계속 재생성되기 때문에 장기적으로는 안정적이지 않습니다.

따라서 실전에서는 index.css가 전체 스타일의 허브 역할을 하도록 구성하는 것이 가장 안전합니다.

구조 예시main.tsx

import "./index.css";

index.css

/* Figma 스타일 가져오기 */
@import "./styles/globals.css";

/* 이후부터는 내가 사용하는 오버라이드 / 커스텀 규칙 */
body {
  font-family: system-ui, sans-serif;
}

.button-primary {
  border-radius: 100px;
}

• Figma는 globals.css만 계속 덮어씀
• 나는 index.css만 관리하면 됨
• AI 도구도 대부분 index.css만 수정
• main.tsx는 불필요한 혼선을 피하기 위해 index.css만 import

이렇게 역할을 완전히 분리하면, Figma ↔ 코드 양 방향 동기화를 안정적으로 계속 유지할 수 있습니다.

---

5. 기획자·PM에게 특히 필요한 관점

Figma와 코드를 병행하는 작업은 생각보다 섬세합니다. 화면이 깨졌다고 해서 JS 문제일 때는 드물고, 거의 대부분이 스타일 진입점이 둘 이상 존재할 때 나타납니다. 이 글에서 소개한 방식으로 통일하면 Figma regenerate → VS Code 수정 → AI 리팩토링 → 다시 Figma regenerate 같은 순환 흐름에서도 안정성이 크게 높아집니다.

---

6. 다음 글을 위한 ‘작은 퀴즈’

여기까지의 방식이면 Figma와 VS Code를 계속 오가며 업데이트하더라도 스타일이 깨지지 않는 구조가 만들어집니다. 그런데… 이 구조에도 한 가지 숨은 문제가 남아 있습니다.

❓ globals.css를 index.css로 import하는 구조에서는, Figma regenerate 시 어떤 문제가 추가로 생길 수 있을까요?

이것이 다음 포스팅의 핵심 주제입니다. 다음 글에서 이 문제를 자세히 다뤄보겠습니다.