Weblify Figma 플러그인은 웹사이트 가져오기를 위해 무료 Weblify Chrome 확장 프로그램으로 연결해요. 이 확장 프로그램은 브라우저에서 바로 작동하며, 현재 로그인 상태나 브라우저 세션을 사용하는 페이지에서도 쓸 수 있어요.
웹사이트 가져오기
- Weblify Chrome 확장 프로그램을 설치하세요.
- 복사하려는 웹페이지를 Chrome에서 여세요.
- Weblify 확장 프로그램 아이콘을 선택해 페이지에 툴바를 여세요.
- Current Window Size를 그대로 두거나, 크기 컨트롤을 열어 캡처할 크기를 하나 이상 고르세요.
- 페이지 전체를 복사하려면 Copy page를, 요소 하나를 선택하려면 Pick element를 고르세요.
- Copied to clipboard 확인 메시지가 나타날 때까지 기다리세요. 페이지를 복사할 때는 Weblify가 스크롤과 콘텐츠 준비를 마칠 때까지 기다리세요.
- Figma 파일로 돌아가 macOS에서는 Command + V, Windows에서는 Ctrl + V로 붙여 넣으세요.
Weblify Figma 플러그인의 ⋯ 메뉴에서 Import website를 고른 다음 Download the Chrome Extension을 선택해도 돼요.
캡처 크기 선택
Weblify 로고 옆의 크기 컨트롤을 열면 Capture sizes가 보여요. 컨트롤에는 선택한 크기가 표시되고, 여러 개를 선택하면 2 sizes처럼 개수가 표시돼요.
| 크기 | 브라우저 뷰포트 |
|---|---|
| Current Window Size | 현재 브라우저 창의 콘텐츠 너비와 높이예요. 창 크기를 바꾸면 치수도 갱신돼요. |
| Desktop | 1440 × 900픽셀 |
| Tablet | 768 × 1024픽셀 |
| Mobile | 390 × 844픽셀 |
| Custom | 너비는 280~2560픽셀, 높이는 320~2400픽셀 사이로 입력하세요. |
체크박스를 여러 개 선택하면 이름이 붙은 별도의 프레임이 Figma에 나란히 복사돼요. 크기는 최소 하나가 항상 선택되어 있어요. Restart를 사용해도 웹페이지를 새로 고치기 전까지는 선택한 크기가 유지돼요.
Copy page는 선택한 너비마다 페이지 전체 높이를 포함해요. 높이 설정은 페이지 레이아웃에 쓰이는 뷰포트를 정할 뿐, 결과를 그 높이로 자르지 않아요. Pick element는 선택한 요소를 고른 크기마다 보이는 모습 그대로 복사해요.
현재 배치된 그대로의 실시간 페이지를 캡처하려면 Current Window Size만 단독으로 사용하세요. 다른 크기는 페이지 사본을 다시 배치하므로, JavaScript로 제어되는 콘텐츠, 임베드된 콘텐츠, 캔버스 그래픽은 달라질 수 있어요.
복사 전 콘텐츠 불러오기
Copy page는 캡처하기 전에 페이지를 자동으로 끝까지 스크롤해요. 덕분에 지연 로딩되는 이미지와 스크롤할 때 나타나는 섹션이 불러와질 시간이 생겨요. 그런 다음 Weblify는 원래 스크롤 위치로 돌아가 준비된 페이지를 선택한 크기로 캡처해요.
끝없이 이어지는 피드가 있는 페이지가 계속 로딩되지 않도록 준비 단계에는 시간과 스크롤 한도가 있어요. 그래서 아주 느리게 불러와지는 콘텐츠, 끝없는 피드의 뒤쪽 항목, 스크롤할 때 사이트가 제거하는 콘텐츠는 여전히 빠질 수 있어요. Pick element는 먼저 페이지를 자동으로 스크롤하지 않아요.
빠진 부분이 있다면 직접 그 위치로 스크롤해서 나타날 때까지 기다린 다음, Current Window Size만 선택한 상태로 Pick element를 시도해 보세요.
요소 선택
Pick element를 선택한 다음 페이지 위에 마우스를 올리고 복사할 요소를 클릭하세요. 복사하기 전에 위아래 컨트롤로 부모 요소나 자식 요소로 이동할 수 있어요.
선택한 요소가 고른 크기 중 하나에서 숨겨져 있으면, Weblify는 빈 프레임을 복사하는 대신 오류를 알려요. 요소가 보이는 크기를 골라 다시 시도하세요.
복사에 성공하면 Restart를 선택해 크기 선택을 유지한 채 툴바로 돌아가거나, 확인 알림을 닫으세요.
브라우저 내부 페이지와 Chrome 웹 스토어에서는 확장 프로그램이 페이지 컨트롤을 삽입할 수 없어요. Weblify 확장 프로그램 아이콘을 선택하기 전에 일반 웹사이트 탭을 여세요.