Figma Make와 VS Code를 병렬로 쓰는 현실적인 방법: Mock API로 로그인 후 UI까지 안전하게 수정하는 구조

Figma Make와 VS Code 병렬 활용 구조는 프론트엔드 비전공자·기획자·PM이 실제 서비스 화면을 빠르게 만들 때 가장 효율적인 조합입니다. 하지만 가장 많이 막히는 부분이 있습니다.

바로 “Figma Make에서는 API 통신이 안 되는데, 로그인 이후 화면의 UI는 어떻게 수정하지?” 입니다.

이 문제는 막연히 어려워 보이지만, 구조만 딱 나누면 매우 간단하게 해결됩니다. 핵심은 다음 한 문장으로 요약됩니다.

“Figma에서는 Mock API, VS Code에서는 실제 API. 이 두 파일만 따로 관리하면 전부 해결된다.”

이 글에서는 이 구조를 어떻게 잡고, 어떤 파일을 어떻게 나누어야 하는지, 실제로 어떤 식으로 관리하는지 실전 관점에서 정리합니다.

---

1. 왜 Figma Make에서는 로그인 후 화면을 볼 수 없을까?

Figma Make의 미리보기 환경은 JavaScript 실행은 되지만, 외부 REST API 호출은 차단되어 있습니다. 즉:

• 버튼 클릭
• 페이지 전환
• 컴포넌트 스타일 확인
• layout 수정

이런 건 문제없지만,

• fetch()
• axios.get()
• 서버 인증 요청

이런 네트워크 통신은 모두 실패합니다.

그래서 로그인 페이지에서 OTP, 인증번호, 토큰 발급 같은 절차가 한 단계도 진행되지 않습니다. 결국 로그인 이후 페이지 UI가 어떻게 생겼는지조차 확인할 수 없는 구조가 되어버리는 것이죠.

---

2. 그렇다면 해결책은? → “Mock API 하나로 끝낸다”

현실적인 정답은 이것뿐입니다.

Figma에서만 동작하는 Mock API 파일을 하나 둔다

폴더 구조 예시는 다음과 같습니다.

📁 Figma Make Preview
├─ LoginPage.tsx (실제 코드)
│   └─ API 호출만
└─ /lib/projectClient.ts (Mock)
    └─ 항상 성공 응답 반환 ✅

여기서 Mock API는 이렇게 작동합니다.

• 로그인 요청 시 항상 성공 응답을 반환
• 서버 검증 없이 즉시 “로그인 성공 → 다음 페이지 이동”
• UI 흐름만 체크 가능
• 버튼·레이아웃·타이포그래피 모두 테스트 가능

즉, API가 실제로 동작하지 않아도 페이지 이동은 정상적으로 진행되는 셈입니다.

---

3. VS Code는 실제 API만 연결한다

실제 서비스에서는 Figma의 Mock 파일을 전혀 쓰지 않습니다. VS Code에서는 완전히 다른 API 파일을 사용합니다.

📁 VS Code 실제 프로젝트
├─ LoginPage.tsx (실제 코드)
│   └─ API 호출만
└─ src/lib/projectClient.ts (실제 API)
    └─ 서버 API 호출 ✅

여기서는 실제 서버에서:

• 인증번호 발송
• 토큰 생성
• 로그인 성공/실패 응답
• 사용자 정보 반환

이 모든 과정을 정확히 수행합니다.

---

4. 핵심 포인트: “LoginPage.tsx는 양쪽에서 동일하게 사용한다”

이 구조의 가장 강력한 장점입니다.

LoginPage.tsx 한 파일만 유지하면 됨

• Figma: projectClient.ts (Mock)
• VS Code: projectClient.ts (실제 API)

LoginPage.tsx 내부의 로직은 단 한 줄도 바꿀 필요가 없습니다. API 호출부만 각각 다른 파일로 분리하여 주입하는 구조죠.

이렇게 하면:

• UI는 어디서든 동일하게 유지
• 비즈니스 로직은 프로젝트 환경에 따라 자동 분리
• Cursor에서도 파일 인식이 쉬워 구조 파악이 정확해짐

---

5. 그럼 Figma에서는 폴더를 직접 만들 수 없는데 어떻게 관리할까?

Figma Make의 단점 중 하나가 바로:

“폴더/파일을 직접 생성할 수 없다”는 것입니다.

하지만 해결책은 매우 간단합니다.

프롬프트로 요청하면 된다

예:

“/lib/projectClient.ts 파일 생성해줘. 로그인 요청은 항상 성공하는 Mock으로 만들어줘.”

Figma Make는 코드 자동생성 환경이라 원하는 파일을 프롬프트로 자연어로 요청하면 자동으로 만들어줍니다.

폴더까지 자동으로 생성해주기 때문에 실제 VS Code 구조와 90% 이상 동일하게 맞출 수 있습니다.

---

6. 결국 유지해야 할 건 단 두 파일

정리하면 다음 두 파일만 잘 나누면 끝입니다.

파일	Figma Make	VS Code
LoginPage.tsx	동일	동일
projectClient.ts	Mock API	실제 API

이 구조만 지키면:

• 로그인 후 페이지 UI 수정 가능
• API 호출이 없는 환경에서도 UI 체크 가능
• VS Code에서는 실제 인증 절차 정상 작동
• Cursor가 전체 구조를 정확히 이해하고 수정해줌

즉, 서비스 개발과 UI 작업이 서로 방해하지 않는 완벽한 병렬 구조가 완성됩니다.