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

웹 앱은 비교할 각 URL을 iFrame으로 불러오고, 그 위에 Figma 디자인을 겹쳐서 보여 줘요. 업로드한 각 이미지의 크기가 각 iFrame의 너비와 높이로 쓰이기 때문에, 웹사이트 빌드의 “반응형” 동작을 Figma의 원래 디자인과 비교해 테스트할 수 있어요.

Pixelay Chrome 확장 프로그램을 설치하세요. Pixelay로 디자인을 URL과 비교하려면 Pixelay Chrome 플러그인을 설치해 주세요. 확장 프로그램은 백그라운드에서 실행되다가 브라우저에서 플러그인이 만든 URL을 감지하면 Pixelay를 불러와요.

페이지를 스크롤해 모든 프레임 보기

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

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

Figma 디자인 모드와 웹사이트 빌드 모드 전환

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

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

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

투명 오버레이 모드 사용

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

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

화면 분할 오버레이 모드 사용

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

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

블렌드 차이 오버레이 모드 사용

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

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

드래그 오버레이 모드 사용

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

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

픽셀 눈금자로 측정

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

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

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

환경 URL 간 전환

비교할 디자인을 업로드하기 전에 Pixelay Figma 플러그인에서 추가 환경 URL을 넣어 두었다면, 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을 불러와요).

핫 리로드가 켜진 개발 환경에서 사용

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

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