---
url: "/ko/pixelay/upload-designs.md"
description: "Figma 상위 프레임을 선택하고, URL을 설정하고, 디자인을 업로드해 Pixelay 비교 링크를 관리하는 방법이에요."
---

# Figma에서 비교할 디자인 업로드

> Figma 상위 프레임을 선택하고, URL을 설정하고, 디자인을 업로드해 Pixelay 비교 링크를 관리하는 방법이에요.

## Figma 플러그인에서 디자인 준비 {#preparing-designs-in-the-figma-plugin}

Pixelay는 Pixelay Figma 플러그인으로 현재 Figma 페이지의 최상위 상위 프레임 이미지를 업로드한 다음, Pixelay 웹 앱에서 웹사이트 빌드의 해당 페이지 URL 위에 겹쳐서 보여 줘요.

> **Note:** **Figma 상위 프레임이 필요해요**. 디자인을 비교하려면 Figma 페이지에 “상위 프레임”이 하나 이상 있어야 해요. 상위 프레임은 페이지 *바로* 아래에 있는 “프레임”을 말해요.

### 비교할 Figma 프레임 선택 {#selecting-figma-frames-to-compare}

[Video](/assets/videos/pixelay/upload/selecting-frames.mp4)

먼저 웹사이트 빌드의 URL과 비교할 프레임을 Figma 디자인에서 선택해야 해요.

Pixelay는 모든 “상위 프레임”을 웹사이트 빌드와 비교할 수 있는 디자인 목록으로 플러그인에 불러와요. 프레임의 체크박스나 이미지 썸네일을 클릭하면 선택되고, 다시 클릭하면 선택이 해제돼요.

> **Tip:** **Figma 상위 프레임을 강조해서 선택하기**. 비교할 Figma 상위 프레임을 더 쉽게 선택할 수 있도록, Figma 페이지에서 프레임을 클릭하거나 강조하면 Pixelay 플러그인의 사용 가능한 프레임 목록이 자동으로 그 프레임만 남도록 필터링돼요.

### Figma 상위 프레임 새로고침 {#refreshing-figma-parent-frames}

[Video](/assets/videos/pixelay/upload/refreshing-layers.mp4)

Pixelay 플러그인이 이미 실행 중인데 현재 Figma 페이지에서 상위 프레임을 추가하거나 제거해야 한다면, 필요한 대로 수정한 다음 Pixelay 플러그인에서 선택한 프레임 수 옆에 있는 **Refresh frames** 아이콘 버튼을 클릭하세요.

### 웹사이트 URL 입력 {#entering-your-website-url}

[Video](/assets/videos/pixelay/upload/entering-url.mp4)

Pixelay 플러그인 상단의 **Base Website URL** 필드에 유효한 URL을 입력하면, 디자인과 비교할 기본 URL을 지정할 수 있어요. 선택한 디자인과 비교할 때 이 URL이 기본 페이지로 불러와져요.

> **Note:** **Pixelay Chrome 확장 프로그램을 설치하세요**. Pixelay로 디자인을 URL과 비교하려면 [Pixelay Chrome 플러그인](https://chrome.google.com/webstore/detail/pixelay-for-figma/gnbafbeabkbkecmbedfgebgboicpnkpp)을 설치해 주세요. 확장 프로그램은 백그라운드에서 실행되다가 브라우저에서 플러그인이 만든 URL을 감지하면 Pixelay를 불러와요.

> **Tip:** **`https://` URL을 사용하세요.** Pixelay는 공개된 웹사이트와 로컬 개발 URL을 HTTPS로만 불러올 수 있어요.

#### 페이지별 웹사이트 URL 추가 {#adding-page-specific-website-urls}

여러 프레임을 동시에 비교한다면 *프레임마다* 비교할 URL을 지정할 수 있어요. 예를 들어 “About” 페이지 디자인을 비교한다면 _https://yoursite.com/about/_ 같은 URL을 넣을 수 있어요. 이렇게 지정한 URL은 Pixelay 툴바의 기본 URL보다 우선해요.

### 여러 환경의 웹사이트 URL 추가(선택 사항) {#adding-multiple-environment-website-urls-optional}

[Video](/assets/videos/pixelay/upload/add-environment-urls.mp4)

웹사이트 환경이 둘 이상이라면 개발, 스테이징, 프로덕션 사이트마다 기본 URL을 추가하세요. Pixelay 웹 앱에서 [이 환경들 사이를 전환](/ko/pixelay/compare-designs#toggling-between-environment-urls)할 수 있어요.

URL을 더 추가하려면 기본 웹사이트 URL 옆의 **Show extra website URLs** 아이콘 버튼을 클릭하고, **Add Extra Base URL** 필드에 새 URL(예: `https://dev.yoursite.com` 또는 `https://test.yoursite.com`)을 입력한 다음 **Add URL** 버튼을 클릭해 추가 환경 기본 URL 목록에 넣으세요. 플러그인에서 디자인을 다시 업로드하면 이 URL들이 Pixelay 웹 앱에 드롭다운 목록으로 표시돼요.

> **Tip:** 환경 URL을 제거하려면 드롭다운에서 URL을 선택하고 **Delete selected URL** 아이콘을 클릭한 다음, **Delete**를 클릭해 확인하세요. 현재 비교 링크에 변경 사항을 적용하려면 Pixelay 디자인을 다시 업로드하세요.

### 비교 URL 만들기 {#generating-your-comparison-url}

[Video](/assets/videos/pixelay/upload/compare-upload.mp4)

비교할 Figma 프레임을 선택하고 웹사이트 빌드 URL을 지정했다면, Pixelay 플러그인에서 **Compare Designs** 버튼을 클릭하세요(비교할 프레임 수가 버튼에 표시돼요). **Compare Figma Designs** 패널에서 **Upload Designs** 버튼을 클릭해 확인하고 업로드를 시작하세요.

> **Tip:** **Compare Designs**를 사용할 수 없다면 버튼 위에 마우스를 올려 이유를 확인하세요. 먼저 기본 웹사이트 URL을 입력하거나, 프레임을 하나 이상 체크해야 해요. 무료 모드에서는 너비가 430px 이하인 프레임만 비교할 수 있어요. 그러면 선택한 Figma 프레임의 이미지가 업로드되고, Pixelay 웹 앱으로 이동하는 URL이 만들어져요.

> **Warning:** **Figma 파일을 복제하면 URL도 함께 복사돼요.** 복제한 파일에 다른 URL을 만들려면 플러그인이 열려 있는 동안 코나미 코드(**Up**, **Up**, **Down**, **Down**, **Left**, **Right**, **Left**, **Right**, **B**, **A**)를 입력하세요. Pixelay는 이전 URL을 삭제하지 않고 새 URL을 만들어요.

> **Note:** 프레임 업로드나 새로고침에 실패하면 Pixelay가 플러그인에 오류를 표시하고 진행 표시를 멈춰요. 업로드 오류가 나도 이미 비교 페이지로 보낸 프레임이나 설정이 되돌려지지는 않아요.

### 비교 URL 열기 {#opening-your-comparison-url}

[Video](/assets/videos/pixelay/upload/copy-url.mp4)

모든 프레임이 업로드되면 비교 페이지 URL을 사용할 준비가 되었다는 **Designs Uploaded Successfully!** 확인 메시지가 표시돼요.

**Copy link** 아이콘 버튼을 클릭해 URL을 복사한 다음 웹 브라우저에 붙여 넣거나(다른 사람과 공유해도 돼요), 확인 메시지의 **Comparison URL** 링크를 클릭하세요. 브라우저에서 Pixelay 웹 앱이 열리고, Figma 디자인과 웹사이트 개발 URL을 비교할 수 있어요.

참고로 Pixelay로 디자인을 URL과 비교하려면 [Pixelay Chrome 플러그인](https://chrome.google.com/webstore/detail/pixelay-for-figma/gnbafbeabkbkecmbedfgebgboicpnkpp)을 설치해 주세요. 플러그인의 확인 메시지에도 이 링크가 있어요.

#### 플러그인에서 비교 URL 다시 열기 {#accessing-your-comparison-url-from-the-plugin-again}

플러그인으로 이미 비교 URL을 만들었고, 디자인을 다시 업로드하지 않고 URL만 다시 복사하고 싶다면 Pixelay 플러그인의 **Compare Designs** 버튼을 클릭하세요. **Compare Figma Designs** 패널에 이전에 만든 비교 URL이 표시돼요. URL을 다시 사용하려면 **Copy link** 아이콘 버튼을 클릭해 URL을 복사한 다음 웹 브라우저에 붙여 넣거나(다른 사람과 공유해도 돼요), 패널의 **comparison URL** 링크를 클릭하세요.

### 비교 URL에 Figma 디자인 다시 업로드 {#re-uploading-your-figma-designs-to-the-comparison-url}

[Video](/assets/videos/pixelay/upload/reupload-images.mp4)

디자인을 수정했거나, 포함하거나 제외할 Figma 프레임을 바꾸고 싶거나, 비교 URL의 웹사이트·페이지 링크를 변경하고 싶다면, 처음 업로드할 때와 같은 방법으로 선택한 디자인을 비교 URL에 다시 업로드할 수 있어요. Pixelay 플러그인에서 **Compare Designs** 버튼을 클릭한 다음, 이번에는 **Update Designs** 버튼을 클릭하세요.

> **Note:** **디자인을 다시 업로드해도 비교 URL은 그대로예요**. **Update Designs** 버튼을 클릭할 때마다 이전에 업로드한 프레임과 웹사이트 링크가 교체되고, 이전에 만든 Pixelay 비교 URL이 새 디자인과 링크로 업데이트돼요.