---
url: "/ko/pixelay/overview/quickstart.md"
description: "스마트 오버레이로 Figma 디자인을 실제 웹사이트 URL과 비교하고 시각적 QA를 진행하세요."
---

# Pixelay 시작하기

> 스마트 오버레이로 Figma 디자인을 실제 웹사이트 URL과 비교하고 시각적 QA를 진행하세요.

[![Pixelay Figma 플러그인](https://www.hypermatic.com/pixelay.jpg)](https://www.figma.com/community/plugin/816424186244407164/pixelay-compare-design-to-web)

## Pixelay 설치 및 활성화

- [Figma 플러그인 설치 및 실행](/ko/pixelay/overview/install.md): Figma에서 Pixelay를 실행하는 방법
- [Pixelay Pro 활성화](/ko/pixelay/overview/pro.md): Pro 라이선스 키를 구매하고 사용하는 방법

## Pixelay 사용하기

  - [Pixelay 문서](/ko/pixelay/upload-designs.md): 짧은 화면 녹화가 담긴 자세한 문서
  - [Pixelay 영상 튜토리얼](/pixelay/tutorials.md): 처음부터 끝까지 따라 하는 단계별 영상

## 자주 묻는 질문

- [Pixelay 문제 해결](/ko/pixelay/faq/troubleshooting.md): 자주 발생하는 문제와 해결 방법
- [Pixelay 보안](/ko/pixelay/faq/security.md): Pixelay의 작동 방식 자세히 알아보기
- [영수증](/ko/faq/receipts.md): 이메일 영수증과 PDF 인보이스 찾기
- [결제](/ko/faq/billing.md): Pro 구독 관리
- [라이선스 시트 관리](/ko/faq/seats.md): 라이선스 키에 연결된 Figma 사용자 관리
- [Pixelay 무료와 Pro 비교](/ko/pixelay/faq/plans.md): 무료 기능과 Pro 기능 비교

[Video](https://www.hypermatic.com/assets/videos/pixelay/PIXELAY_DEMO.mp4)

## Pixelay 기능

- 여러 Figma 디자인과 URL을 동시에 비교해요.
- Figma Design Mode와 Dev Mode 모두에서 실행되며, Dev 시트 QA 워크플로도 지원해요.
- 여러 페이지를 한 번에 비교하려면 가벼운 [Chrome 확장 프로그램](https://chrome.google.com/webstore/detail/pixelay-for-figma/gnbafbeabkbkecmbedfgebgboicpnkpp)이 필요해요.
- 시각적 QA 중에 Figma 디자인을 구현된 웹사이트와 비교해요.
- 여러 화면 크기(예: 데스크톱, 모바일, 태블릿)를 지원해 반응형 디자인을 테스트해요.
- 여러 개발, 테스트, 프로덕션 URL 사이를 전환해요.
- 투명도, 화면 분할, 토글, 드래그, 차이(diff) 오버레이를 제공해요.
- 원하는 경우 Figma 프레임마다 다른 웹사이트 페이지 URL을 지정할 수 있어요.
- BrowserSync나 핫 모듈 리로딩을 통해 localhost를 지원해요.
- 기본 제공 픽셀 눈금자로 비교 화면에서 간격 차이를 측정해요.
- Figma와 웹사이트 사이의 시각적 차이를 측정하고 검토해요.