Figma 플러그인에서 디자인 준비
Pixelay는 Pixelay Figma 플러그인으로 현재 Figma 페이지의 최상위 상위 프레임 이미지를 업로드한 다음, Pixelay 웹 앱에서 웹사이트 빌드의 해당 페이지 URL 위에 겹쳐서 보여 줘요.
Figma 상위 프레임이 필요해요. 디자인을 비교하려면 Figma 페이지에 “상위 프레임”이 하나 이상 있어야 해요. 상위 프레임은 페이지 바로 아래에 있는 “프레임”을 말해요.
비교할 Figma 프레임 선택
먼저 웹사이트 빌드의 URL과 비교할 프레임을 Figma 디자인에서 선택해야 해요.
Pixelay는 모든 “상위 프레임”을 웹사이트 빌드와 비교할 수 있는 디자인 목록으로 플러그인에 불러와요. 프레임의 체크박스나 이미지 썸네일을 클릭하면 선택되고, 다시 클릭하면 선택이 해제돼요.
Figma 상위 프레임을 강조해서 선택하기. 비교할 Figma 상위 프레임을 더 쉽게 선택할 수 있도록, Figma 페이지에서 프레임을 클릭하거나 강조하면 Pixelay 플러그인의 사용 가능한 프레임 목록이 자동으로 그 프레임만 남도록 필터링돼요.
Figma 상위 프레임 새로고침
Pixelay 플러그인이 이미 실행 중인데 현재 Figma 페이지에서 상위 프레임을 추가하거나 제거해야 한다면, 필요한 대로 수정한 다음 Pixelay 플러그인에서 선택한 프레임 수 옆에 있는 Refresh frames 아이콘 버튼을 클릭하세요.
웹사이트 URL 입력
Pixelay 플러그인 상단의 Base Website URL 필드에 유효한 URL을 입력하면, 디자인과 비교할 기본 URL을 지정할 수 있어요. 선택한 디자인과 비교할 때 이 URL이 기본 페이지로 불러와져요.
Pixelay Chrome 확장 프로그램을 설치하세요. Pixelay로 디자인을 URL과 비교하려면 Pixelay Chrome 플러그인을 설치해 주세요. 확장 프로그램은 백그라운드에서 실행되다가 브라우저에서 플러그인이 만든 URL을 감지하면 Pixelay를 불러와요.
https:// URL을 사용하세요. Pixelay는 공개된 웹사이트와 로컬 개발 URL을 HTTPS로만 불러올 수 있어요.
페이지별 웹사이트 URL 추가
여러 프레임을 동시에 비교한다면 프레임마다 비교할 URL을 지정할 수 있어요. 예를 들어 “About” 페이지 디자인을 비교한다면 _https://yoursite.com/about/_ 같은 URL을 넣을 수 있어요. 이렇게 지정한 URL은 Pixelay 툴바의 기본 URL보다 우선해요.
여러 환경의 웹사이트 URL 추가(선택 사항)
웹사이트 환경이 둘 이상이라면 개발, 스테이징, 프로덕션 사이트마다 기본 URL을 추가하세요. Pixelay 웹 앱에서 이 환경들 사이를 전환할 수 있어요.
URL을 더 추가하려면 기본 웹사이트 URL 옆의 Show extra website URLs 아이콘 버튼을 클릭하고, Add Extra Base URL 필드에 새 URL(예: https://dev.yoursite.com 또는 https://test.yoursite.com)을 입력한 다음 Add URL 버튼을 클릭해 추가 환경 기본 URL 목록에 넣으세요. 플러그인에서 디자인을 다시 업로드하면 이 URL들이 Pixelay 웹 앱에 드롭다운 목록으로 표시돼요.
환경 URL을 제거하려면 드롭다운에서 URL을 선택하고 Delete selected URL 아이콘을 클릭한 다음, Delete를 클릭해 확인하세요. 현재 비교 링크에 변경 사항을 적용하려면 Pixelay 디자인을 다시 업로드하세요.
비교 URL 만들기
비교할 Figma 프레임을 선택하고 웹사이트 빌드 URL을 지정했다면, Pixelay 플러그인에서 Compare Designs 버튼을 클릭하세요(비교할 프레임 수가 버튼에 표시돼요). Compare Figma Designs 패널에서 Upload Designs 버튼을 클릭해 확인하고 업로드를 시작하세요.
Compare Designs를 사용할 수 없다면 버튼 위에 마우스를 올려 이유를 확인하세요. 먼저 기본 웹사이트 URL을 입력하거나, 프레임을 하나 이상 체크해야 해요. 무료 모드에서는 너비가 430px 이하인 프레임만 비교할 수 있어요.
Figma 파일을 복제하면 URL도 함께 복사돼요. 복제한 파일에 다른 URL을 만들려면 플러그인이 열려 있는 동안 코나미 코드(Up, Up, Down, Down, Left, Right, Left, Right, B, A)를 입력하세요. Pixelay는 이전 URL을 삭제하지 않고 새 URL을 만들어요.
프레임 업로드나 새로고침에 실패하면 Pixelay가 플러그인에 오류를 표시하고 진행 표시를 멈춰요. 업로드 오류가 나도 이미 비교 페이지로 보낸 프레임이나 설정이 되돌려지지는 않아요.
비교 URL 열기
모든 프레임이 업로드되면 비교 페이지 URL을 사용할 준비가 되었다는 Designs Uploaded Successfully! 확인 메시지가 표시돼요.
Copy link 아이콘 버튼을 클릭해 URL을 복사한 다음 웹 브라우저에 붙여 넣거나(다른 사람과 공유해도 돼요), 확인 메시지의 Comparison URL 링크를 클릭하세요. 브라우저에서 Pixelay 웹 앱이 열리고, Figma 디자인과 웹사이트 개발 URL을 비교할 수 있어요.
참고로 Pixelay로 디자인을 URL과 비교하려면 Pixelay Chrome 플러그인을 설치해 주세요. 플러그인의 확인 메시지에도 이 링크가 있어요.
플러그인에서 비교 URL 다시 열기
플러그인으로 이미 비교 URL을 만들었고, 디자인을 다시 업로드하지 않고 URL만 다시 복사하고 싶다면 Pixelay 플러그인의 Compare Designs 버튼을 클릭하세요. Compare Figma Designs 패널에 이전에 만든 비교 URL이 표시돼요. URL을 다시 사용하려면 Copy link 아이콘 버튼을 클릭해 URL을 복사한 다음 웹 브라우저에 붙여 넣거나(다른 사람과 공유해도 돼요), 패널의 comparison URL 링크를 클릭하세요.
비교 URL에 Figma 디자인 다시 업로드
디자인을 수정했거나, 포함하거나 제외할 Figma 프레임을 바꾸고 싶거나, 비교 URL의 웹사이트·페이지 링크를 변경하고 싶다면, 처음 업로드할 때와 같은 방법으로 선택한 디자인을 비교 URL에 다시 업로드할 수 있어요. Pixelay 플러그인에서 Compare Designs 버튼을 클릭한 다음, 이번에는 Update Designs 버튼을 클릭하세요.
디자인을 다시 업로드해도 비교 URL은 그대로예요. Update Designs 버튼을 클릭할 때마다 이전에 업로드한 프레임과 웹사이트 링크가 교체되고, 이전에 만든 Pixelay 비교 URL이 새 디자인과 링크로 업데이트돼요.