uniflow
KO / EN
Dev·실행·2026-01-26

피그마에서 만든 React 코드, 뒤로가기가 안 된다면 React Router를 설정하세요

피그마에서 생성한 React 코드는 SPA 특성상 URL이 하나로 고정됩니다. 뒤로가기, 북마크, 공유가 안 되는 문제를 React Router로 해결하는 방법과 서버 설정까지 정리했습니다.

피그마에서 Anima, Locofy 같은 플러그인으로 React 코드를 생성하면 깔끔한 컴포넌트를 바로 얻을 수 있습니다. 그런데 막상 브라우저에서 실행해보면 이상한 점을 발견하게 됩니다. 페이지를 이동해도 URL이 바뀌지 않고, 뒤로가기 버튼을 눌러도 반응이 없습니다. 이 글에서는 React Router를 설정해서 이 문제를 해결하는 방법을 정리합니다.

피그마 코드가 SPA인 이유

피그마는 본래 디자인과 UI 프로토타이핑 도구입니다. 코드 생성 플러그인들은 시각적 요소를 React 컴포넌트로 변환하는 데 집중하기 때문에, 라우팅 기능까지 자동으로 구현해주지 않습니다.

React 자체도 기본적으로 SPA(Single Page Application) 구조입니다. 하나의 index.html 파일에서 JavaScript가 화면을 동적으로 교체하는 방식이죠. 이 구조에서는 URL이 변경되지 않으므로 다음과 같은 문제가 발생합니다.

  • 브라우저 뒤로가기/앞으로가기 버튼이 작동하지 않음
  • 특정 페이지를 북마크할 수 없음
  • 링크를 공유해도 항상 첫 화면만 표시됨
  • 새로고침하면 현재 화면이 사라지고 처음으로 돌아감

React Router가 해결하는 것

React Router는 브라우저의 History API를 활용해서 URL과 컴포넌트를 연결해주는 라이브러리입니다. 사용자가 /about으로 이동하면 About 컴포넌트를 보여주고, /products로 이동하면 Products 컴포넌트를 보여주는 식입니다.

React 공식 라우팅 라이브러리는 존재하지 않지만, React Router가 사실상 표준처럼 사용되고 있습니다. 현재(2026년) 기준 React Router v6가 여전히 주력이며, v7으로의 전환도 non-breaking 업그레이드로 간단하게 진행할 수 있습니다. v6는 간결한 문법과 Data API 같은 기능을 제공합니다.

피그마에서 직접 React Router를 설정할 수 있나요?

결론부터 말하면, 대부분의 피그마 플러그인에서 React Router 설정까지 자동으로 해주지는 않습니다. Anima, Locofy, Builder.io 같은 도구들은 개별 컴포넌트나 페이지의 HTML/CSS/JS 변환에 집중합니다. 라우팅 로직은 프로젝트 구조와 비즈니스 로직에 따라 달라지기 때문에, 이 부분은 개발자가 직접 설정해야 합니다.

참고로 Locofy의 일부 고급 플랜에서는 Figma의 인터랙션 설정을 기반으로 React Router 코드를 생성해주는 기능이 있다고 합니다. 직접 테스트해보지는 않았지만, 멀티 스크린 플로우를 자동으로 연결해주는 옵션이 있으니 관심 있다면 확인해 보시기 바랍니다.

피그마에서 할 수 있는 것과 VS Code에서 해야 하는 것을 구분하면 다음과 같습니다.

작업피그마 플러그인VS Code/개발환경
컴포넌트 코드 생성O–
스타일(CSS/Tailwind) 적용O–
React Router 설치XO
라우트 경로 설정XO
서버 배포 설정XO

VS Code에서 AI에게 React Router 설정 요청하기

GitHub Copilot, Cursor, Claude 같은 AI 코딩 어시스턴트를 사용한다면 React Router 설정을 빠르게 진행할 수 있습니다. 아래는 실제로 사용할 수 있는 프롬프트 예시입니다.

기본 설정 요청 프롬프트

이 React 프로젝트에 React Router v6를 설치하고 기본 라우팅을 설정해줘. 현재 컴포넌트 구조:

  • Home.jsx (메인 페이지)
  • About.jsx (소개 페이지)
  • Products.jsx (제품 목록)
  • ProductDetail.jsx (제품 상세, /products/:id 형태)

BrowserRouter를 사용하고, 존재하지 않는 경로는 404 페이지로 연결해줘.

네비게이션 추가 요청 프롬프트

현재 프로젝트에 상단 네비게이션 바를 추가해줘.

  • Home, About, Products 메뉴가 있어야 함
  • 현재 활성화된 메뉴는 스타일이 다르게 표시되어야 함
  • NavLink 컴포넌트를 사용해줘

기존 코드에 라우팅 적용 요청 프롬프트

피그마에서 생성한 이 컴포넌트들을 React Router로 연결해줘. 각 컴포넌트의 버튼 클릭 시 해당 페이지로 이동하도록 Link 컴포넌트로 교체하고, useNavigate 훅을 사용한 프로그래매틱 네비게이션 예시도 보여줘.

React Router 기본 설정 코드

AI의 도움 없이 직접 설정한다면 아래 순서를 따르면 됩니다.

1단계: 설치

터미널에서 react-router-dom 패키지를 설치합니다.

Advertisement본문 중간 · 반응형본 도메인에서만 게재
 npm install react-router-dom

2단계: 라우터 설정

main.jsx 또는 App.jsx에서 BrowserRouter로 앱을 감싸고, Routes와 Route로 경로를 정의합니다.


import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Products from './pages/Products';
import NotFound from './pages/NotFound';
<p class="font-claude-response-body break-words whitespace-normal leading-[1.7]">function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/products" element={<Products />} />
<Route path="*" element={<NotFound />} />
</Routes>
</BrowserRouter>
);
}</p>
<p class="font-claude-response-body break-words whitespace-pre-wrap leading-[1.7]">export default App;

3단계: 링크 연결

기존 버튼이나 a 태그를 Link 컴포넌트로 교체합니다.


import { Link } from 'react-router-dom';
<p class="font-claude-response-body break-words whitespace-normal leading-[1.7]">function Navigation() {
return (
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
<Link to="/products">Products</Link>
</nav>
);
}

배포 시 서버 설정이 필요한 이유

React Router를 설정하고 로컬에서 테스트하면 잘 작동합니다. 그런데 실제 서버에 배포한 후 /about 같은 URL로 직접 접속하거나 새로고침하면 404 에러가 발생합니다.

이유는 간단합니다. 서버 입장에서는 /about 경로에 해당하는 about.html 파일을 찾으려고 하는데, SPA는 index.html 하나만 존재하기 때문입니다. 서버가 모든 요청을 index.html로 보내도록 설정해야 React Router가 URL을 처리할 수 있습니다.

Nginx 서버 설정

Nginx를 사용한다면 설정 파일에 try_files 지시어를 추가합니다. 설정 파일 위치는 보통 /etc/nginx/sites-available/ 디렉토리 또는 /etc/nginx/conf.d/ 디렉토리입니다.


server {
listen 80;
server_name your-domain.com;
root /var/www/your-app;
index index.html;
<div class="relative group/copy bg-bg-000/50 border-0.5 border-border-400 rounded-lg">
<div class="sticky opacity-0 group-hover/copy:opacity-100 top-2 py-2 h-12 w-0 float-right">
<div class="absolute right-0 h-8 px-2 items-center inline-flex z-10"><button class="inline-flex
  items-center
  justify-center
  relative
  shrink-0
  can-focus
  select-none
  disabled:pointer-events-none
  disabled:opacity-50
  disabled:shadow-none
  disabled:drop-shadow-none border-transparent
          transition
          font-base
          duration-300
          ease-[cubic-bezier(0.165,0.85,0.45,1)] h-8 w-8 rounded-md active:scale-95 backdrop-blur-md Button_ghost__BUAoh" type="button" aria-label="클립보드에 복사" data-state="closed">
<div class="relative">
<div class="transition-all opacity-100 scale-100" style="width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;"><svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="transition-all opacity-100 scale-100" aria-hidden="true" style="flex-shrink: 0;"><path d="M12.5 3C13.3284 3 14 3.67157 14 4.5V6H15.5C16.3284 6 17 6.67157 17 7.5V15.5C17 16.3284 16.3284 17 15.5 17H7.5C6.67157 17 6 16.3284 6 15.5V14H4.5C3.67157 14 3 13.3284 3 12.5V4.5C3 3.67157 3.67157 3 4.5 3H12.5ZM14 12.5C14 13.3284 13.3284 14 12.5 14H7V15.5C7 15.7761 7.22386 16 7.5 16H15.5C15.7761 16 16 15.7761 16 15.5V7.5C16 7.22386 15.7761 7 15.5 7H14V12.5ZM4.5 4C4.22386 4 4 4.22386 4 4.5V12.5C4 12.7761 4.22386 13 4.5 13H12.5C12.7761 13 13 12.7761 13 12.5V4.5C13 4.22386 12.7761 4 12.5 4H4.5Z"></path></svg></div>
<div class="absolute top-0 left-0 transition-all opacity-0 scale-50" style="width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;"><svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="absolute top-0 left-0 transition-all opacity-0 scale-50" aria-hidden="true" style="flex-shrink: 0;"><path d="M15.1883 5.10908C15.3699 4.96398 15.6346 4.96153 15.8202 5.11592C16.0056 5.27067 16.0504 5.53125 15.9403 5.73605L15.8836 5.82003L8.38354 14.8202C8.29361 14.9279 8.16242 14.9925 8.02221 14.9989C7.88203 15.0051 7.74545 14.9526 7.64622 14.8534L4.14617 11.3533L4.08172 11.2752C3.95384 11.0811 3.97542 10.817 4.14617 10.6463C4.31693 10.4755 4.58105 10.4539 4.77509 10.5818L4.85321 10.6463L7.96556 13.7586L15.1161 5.1794L15.1883 5.10908Z"></path></svg></div>
</div>
</button></div>
</div>
<div>
<pre class="code-block__code !my-0 !rounded-lg !text-sm !leading-relaxed" style="background: transparent; color: rgb(171, 178, 191); text-shadow: rgba(0, 0, 0, 0.3) 0px 1px; font-family: var(--font-mono); direction: ltr; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; line-height: 1.5; tab-size: 2; hyphens: none; padding: 1em; margin: 0.5em 0px; overflow: auto; border-radius: 0.3em;"><code style="background: transparent; color: rgb(171, 178, 191); text-shadow: rgba(0, 0, 0, 0.3) 0px 1px; font-family: var(--font-mono); direction: ltr; text-align: left; white-space: pre-wrap; word-spacing: normal; word-break: normal; line-height: 1.5; tab-size: 2; hyphens: none;"><span><span>location / {
</span></span><span>    try_files $uri $uri/ /index.html;
</span><span>}</span></code></pre>
</div>
</div>
<p class="font-claude-response-body break-words whitespace-pre-wrap leading-[1.7]">}

try_files $uri $uri/ /index.html 설정의 의미는 다음과 같습니다. 먼저 요청된 파일이 있는지 확인하고, 없으면 디렉토리를 확인하고, 둘 다 없으면 index.html을 반환합니다.

설정 후 Nginx를 재시작합니다.

 sudo nginx -t sudo systemctl restart nginx

Apache 서버 설정

Apache 서버라면 .htaccess 파일을 React 앱의 루트 디렉토리(build 폴더)에 생성합니다.

 <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME} !-l RewriteRule . /index.html [L] </IfModule>

Apache의 rewrite 모듈이 활성화되어 있어야 합니다. 모듈 활성화는 다음 명령어로 확인하고 적용할 수 있습니다.

 sudo a2enmod rewrite sudo systemctl restart apache2

Vercel, Netlify 등 클라우드 플랫폼

Vercel이나 Netlify 같은 플랫폼은 SPA 호스팅에 최적화되어 있어서 별도 설정 없이도 React Router가 잘 작동합니다. 만약 문제가 생긴다면 프로젝트 루트에 설정 파일을 추가합니다.

Vercel의 경우 vercel.json 파일을 생성합니다.

 { "rewrites": [ { "source": "/(.*)", "destination": "/" } ] }

Netlify의 경우 public 폴더에 _redirects 파일을 생성합니다.

 /* /index.html 200

정리

피그마는 UI 퀄리티를 빠르게 뽑아주지만, 현실적인 웹 앱으로 만들려면 React Router와 서버 설정은 필수입니다. 뒤로가기 하나 안 되는 것 같아도, 사용자 입장에서는 “이 사이트 뭔가 이상한데?”라는 느낌을 주게 됩니다. React Router 설치 5분, 서버 설정 5분이면 끝나는 작업입니다. 10분 투자로 사용자 경험이 완전히 달라지니 꼭 해보시기 바랍니다.

Advertisement글 최하단 · 띠배너본 도메인에서만 게재