---
url: "/ko/pixelay/compare-designs.md"
description: "Pixelay 웹 앱의 오버레이, 모드, 도구로 Figma 디자인을 실제 URL과 비교하는 방법을 안내해요."
---

# 브라우저에서 Figma 디자인과 실제 웹사이트 URL 비교

> Pixelay 웹 앱의 오버레이, 모드, 도구로 Figma 디자인을 실제 URL과 비교하는 방법을 안내해요.

Pixelay Figma 플러그인에서 URL을 만들었다면, 웹 브라우저에서 그 URL을 열어 Pixelay 웹 앱을 사용할 수 있어요. 웹 앱에서는 Figma 플러그인으로 업로드한 디자인을 개발 중인 웹사이트 빌드의 URL과 비교할 수 있어요.

웹 앱은 비교할 각 URL을 [iFrame](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe)으로 불러오고, 그 위에 Figma 디자인을 겹쳐서 보여 줘요. 업로드한 각 이미지의 크기가 각 iFrame의 너비와 높이로 쓰이기 때문에, 웹사이트 빌드의 “반응형” 동작을 Figma의 원래 디자인과 비교해 테스트할 수 있어요.

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

## 페이지를 스크롤해 모든 프레임 보기 {#scrolling-the-page-to-view-all-of-your-frames}

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

세로와 가로 스크롤만으로 페이지 전체를 둘러볼 수 있어요(마우스 휠을 쓰거나 스크롤바를 클릭해 드래그하세요). 좌우로 스크롤하면 업로드한 여러 프레임을 모두 볼 수 있고, 위아래로 스크롤하면 각 프레임의 콘텐츠를 모두 볼 수 있어요.

> **Tip:** Pixelay 프로젝트에 Figma 프레임이 20개보다 많으면, 모든 URL을 한꺼번에 불러와 페이지가 느려지지 않도록 Chrome 확장 프로그램이 자동으로 한 번에 프레임 하나만 비교하는 방식으로 바뀌어요. 화면 오른쪽 아래의 컨트롤 패널에서 Figma 프레임을 골라 다른 프레임으로 전환할 수 있어요.

## Figma 디자인 모드와 웹사이트 빌드 모드 전환 {#toggling-between-the-figma-design-and-website-build-modes}

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

원래 Figma 디자인과 웹사이트 빌드를 빠르게 전환하려면 Pixelay 컨트롤 패널에서 **Original Figma Design** 아이콘 버튼과 **Live Website Build** 아이콘 버튼을 클릭하세요.

각 버튼을 클릭하면 해당 모드로 전환되어, 다른 모드 없이 그 모드만 따로 볼 수 있어요.

> **Tip:** **실제 웹사이트 미리보기와 상호작용하기**. 오버레이 모드를 **Live Website Build**로 전환하면 페이지와 상호작용할 수 있어요. 비교 중인 원래 Figma 디자인과 실제 웹사이트의 화면을 맞추기 위해 양식 필드를 입력하거나 무언가를 클릭해야 할 때 유용해요.

## 투명 오버레이 모드 사용 {#using-the-transparent-overlay-mode}

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

Figma 디자인과 웹사이트 빌드를 여러 투명도로 비교하려면 **Transparent Overlay** 아이콘 버튼을 클릭해 이 비교 모드를 켜세요. 투명 오버레이 모드가 활성화돼요.

**Overlay Opacity** 슬라이더를 클릭한 채로 드래그하면 원래 디자인과 실제 URL 사이의 투명도를 지정할 수 있어요.

## 화면 분할 오버레이 모드 사용 {#using-the-split-screen-overlay-mode}

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

Figma 디자인과 웹사이트 빌드를 화면 분할 방식으로 비교하려면 **Split Screen Overlay** 아이콘 버튼을 클릭해 이 비교 모드를 켜세요. 화면 분할 오버레이 모드가 활성화돼요.

각 디자인 가운데에 있는 파란색 **Split Line**을 클릭한 채로 드래그하면, 원래 디자인과 실제 URL이 동시에 각각 얼마나 보일지 지정할 수 있어요.

## 블렌드 차이 오버레이 모드 사용 {#using-the-blend-diff-overlay-mode}

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

Figma 디자인과 웹사이트 빌드를 블렌드 차이(blend-diff) 방식으로 비교하려면 **Blend-Diff Overlay** 아이콘 버튼을 클릭해 이 비교 모드를 켜세요. 블렌드 차이 오버레이 모드가 활성화돼요.

**Overlay Opacity** 슬라이더를 클릭한 채로 드래그하면 원래 디자인과 실제 URL 사이의 투명도를 지정할 수 있어요.

## 드래그 오버레이 모드 사용 {#using-the-draggable-overlay-mode}

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

모든 디자인의 오버레이 위치를 직접 조정하려면 **Draggable Overlay** 아이콘 버튼을 클릭해 이 비교 모드를 켜세요. 드래그 오버레이 모드가 활성화돼요.

**Overlay Opacity** 슬라이더를 클릭한 채로 드래그하면 원래 디자인과 실제 URL 사이의 투명도를 지정할 수 있어요.

## 픽셀 눈금자로 측정 {#using-the-measure-pixels-ruler}

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

페이지에 있는 요소 사이의 거리를 픽셀 눈금자로 측정하려면 **Measure Pixels** 아이콘 버튼을 클릭해 이 측정 모드를 켜세요. 픽셀 측정 모드가 활성화돼요.

이 모드가 켜져 있는 동안 페이지의 두 지점 사이를 마우스 커서로 클릭한 채로 드래그하면 픽셀 거리를 측정할 수 있어요.

**Overlay Opacity** 슬라이더를 클릭한 채로 드래그하면 원래 디자인과 실제 URL 사이의 투명도를 지정할 수 있어요.

## 환경 URL 간 전환 {#toggling-between-environment-urls}

[Video](/assets/videos/pixelay/compare/select-environment-url.mp4)

비교할 디자인을 업로드하기 전에 Pixelay Figma 플러그인에서 [추가 환경 URL을 넣어 두었다면](/ko/pixelay/upload-designs#adding-multiple-environment-website-urls-optional), Pixelay 웹 앱 컨트롤 패널의 **Change Environment Base URL** 드롭다운에서 환경 사이를 전환할 수 있어요.

전환하면 Pixelay 미리보기에 있는 모든 프레임의 기본 URL이 자동으로 바뀌어요. 예를 들어 `https://dev.yoursite.com`을 선택하면 페이지별 URL을 포함한 모든 `https://www.yoursite.com` URL의 기본 URL이 `dev.yoursite.com`으로 바뀌어요(예를 들어 페이지 URL이 `https://www.yoursite.com/about`으로 설정된 Figma 프레임은 대신 `https://dev.yoursite.com/about`을 불러와요).

## 핫 리로드가 켜진 개발 환경에서 사용 {#using-with-a-hot-reload-enabled-development-environment}

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

로컬 개발 URL에서 [Hot Module Replacement(HMR)](https://webpack.js.org/concepts/hot-module-replacement/)를 사용하고 있다면, Pixelay 웹 앱 URL 자체를 새로 고치지 않아도 웹 앱의 프레임이 실시간으로 자동 업데이트돼요(프레임이 iFrame 안에서 개발 URL을 가리키고 있기 때문이에요).

코드 편집기에서 로컬로 변경한 내용은 파일을 저장하고 HMR이 변경 사항을 URL에 반영하는 즉시 Pixelay 웹 앱에도 나타나요.