“FigwebX와 html.to.design으로 웹사이트를 워드프레스나 웹플로우로 쉽게 복제하는 방법”

안녕하세요. 이 글은 유튜브채널 “Daps”에서 공개한 “Clone Any Website to WordPress or Webflow using FigwebX & html.to.design” 관련 동영상을 정리한 것입니다. 이 글의 정리 목적은 저희가 필요할 때 자체 검색용, 그리고 참고 목적으로 약식 정리한 것이므로, 개괄적인 내용만 정리했습니다. 세부적이고 보다 자세한 내용은 링크를 참조하여 해당 동영상을 직접 시청하세요.

FigwebX 소개

FigwebX는 Figma 디자인을 WordPress 및 Webflow와 같은 페이지 빌더로 클론하는 데 도움을 주는 도구입니다. 이 툴은 특히 Figma 프로젝트를 빠르고 쉽게 전환할 수 있도록 설계되었습니다. 새로운 웹 디자인 도구가 등장함에 따라, Figma는 점점 더 웹 디자인 분야에서 필수적인 도구로 자리 잡고 있으며, FigwebX는 이러한 흐름을 반영하는 도구입니다.

저렴한 요금제

FigwebX는 무료 플랜을 제공합니다. 현재 프리런칭 상태에 있는 이 툴은 사용할 수 있는 기능에 대한 정보가 명확하지 않지만 기본적으로 100번의 내보내기를 제공합니다. 주간과 월간 요금제로는 각각 $20, $40 및 연간 $300로 이용할 수 있습니다. 프리런칭 기간 동안 무료로 사용해볼 수 있으니 이 기회를 놓치지 마세요.

Figma 디자인을 가져오기

FigwebX를 사용하기 위해서는 먼저 Figma 디자인을 가져와야 합니다. 이를 위해 ‘HTML to Design’ 플러그인을 사용할 수 있습니다. 이 플러그인은 Figma 내에서 사용되는 무료 및 유료 옵션이 있으며, 웹사이트의 URL을 입력하고 ‘가져오기’ 버튼을 클릭하면 Figma로 페이지 디자인이 복사됩니다. 페이지가 여러 개인 경우, 각 페이지마다 같은 절차를 반복해야 합니다.

디자인을 웹 빌더로 내보내기

Figma 디자인을 성공적으로 가져온 후, FigwebX 내부에서 새 프로젝트를 만들어야 합니다. 여기에 Figma 링크를 붙여 넣고 사용할 페이지 빌더를 선택하면 됩니다. 예를 들어 Elementor를 사용하는 경우 SoftLight 플러그인을 다운로드하고 설치해야 합니다. Figma의 프로젝트는 반드시 ‘팀 프로젝트’로 설정되어야 하며, 이를 통해 다른 사용자와 협업할 수 있습니다.

디자인 수정 및 최적화

마지막으로, 내보낸 디자인은 WordPress 또는 Webflow에서 수정 가능합니다. 하지만 주의할 점은 이미지 URL이 외부 경로로 설정되어 있다는 것입니다. 따라서 웹사이트의 서버에 이미지를 업로드하고 링크를 업데이트해야 최종 결과물이 완전해집니다. 기본적인 텍스트 및 스타일 수정도 가능하니 원하는 대로 조정하면 됩니다.

이상으로 FigwebX를 사용해 Figma 디자인을 WordPress나 Webflow로 클론하는 방법에 대해 간략하게 알아보았습니다. 그러니 기회를 놓치지 말고 FigwebX를 사용해 보시기 바랍니다.

세부적이고 정확한 내용을 해당 동영상 시청으로 확인해 주세요.

2024-11-18
해당 동영상 보기