이 방법에서는 보다 대중적이고 효율적인 변환 플러그인인 'Uichemy'를 사용하겠습니다. 이 플러그인은 매우 번거롭지 않고 간단한 작업 흐름을 제공하여 변환 프로세스를 원활하게 만듭니다. 코딩 전문 지식이 없는 초보자와 프로세스 속도를 높이려는 개발자에게 가장 적합합니다.
현재 이 플러그인은 Figma 디자인만 Elementor 및 Bricks 웹 사이트 편집기로 변환할 수 있지만 회사는 향후 Gutenberg 블록에 대한 지원을 제공하겠다고 약속했습니다.
1단계: Figma 디자인을 열고 Figma 대시보드에 Uichemy 플러그인을 설치하여 변환 프로세스를 시작합니다.
이렇게 하려면 검색창에서 “ UiChemy ”를 검색하고 UiChemy 플러그인을 찾으세요.
Figma에 UiChemy 플러그인 설치
"시작하기" 버튼을 클릭하고 설치 및 활성화 지침을 따르십시오.
Figma에서 Uichemy 플러그인 설정
활성화를 완료하려면 시리얼 키를 입력하세요. (시리얼 키의 경우 '무료 시작' 버튼을 클릭하여 무료 계정을 만드세요. 계정을 만든 후 Posimyth Store 계정의 대시보드에서 라이센스 키를 찾을 수 있습니다.)
Figma에서 활성화하려면 Uichemy에 시리얼 키를 입력하세요.
2단계: 활성화가 성공적으로 완료되면 WordPress로 변환하려는 Figma 디자인 또는 프레임을 선택하고 팝업 창에서 “ Elementor로 변환 ” 버튼을 클릭하세요.
Uichemy 플러그인을 사용하여 Figma 디자인을 Elementor로 변환
(변환 프로세스 전에 WordPress 사이트에 Elementor 플러그인을 설치하고 활성화했는지 확인하고 Figma 디자인을 변환하기 전에 모든 조건을 읽어보십시오.)
3단계: 이제 사이트의 URL과 토큰 키를 입력하여 디자인을 미리 볼 수 있습니다. 원하지 않는 경우에는 "Elemetor로 변환" 버튼을 직접 클릭하세요. (토큰 키 및 웹사이트 URL 생성에 대한 지침은 "실시간 미리보기란 무엇입니까?"에 대한 UiChemy 튜토리얼을 참조하세요.)
Figma 디자인을 Elementor로 변환한 후 미리보기
3단계: 디자인이 변환되고 JSON 파일을 다운로드합니다.
Uichemy 플러그인을 사용하여 Figma 디자인을 Elementor로 변환한 후 JSON 파일을 다운로드하세요.
이제 WordPress 관리 대시보드를 열고 > 템플릿 > 저장된 템플릿으로 이동하세요.
이제 페이지 상단의 " 템플릿 가져오기 " 버튼을 클릭하고 JSON 파일을 업로드하세요.
WordPress에 템플릿 업로드하기
4단계: 축하합니다! 이제 Figma 디자인이 '저장된 템플릿' 섹션에 표시되며, 여기서 열어서 추가 편집 또는 사용자 정의를 수행할 수 있습니다.
5단계: 사용자 정의 또는 편집을 완료한 후 프런트 엔드에서 디자인을 봅니다. 모든 이미지와 버튼이 올바르게 정렬되어 제대로 작동하는지 확인하세요. 또한 디자인이 모든 화면 크기에서 반응하는지 확인하세요.
옵션 3: 수동으로 Figma를 WordPress로 변환(개발자용)
이 방법은 상당히 기술적이므로 WordPress CMS에 대한 지식이 필요하고 인내심이 거의 필요하지 않으므로 코딩을 좋아하는 사람들에게 가장 적합합니다.
1단계: 첫 번째 단계는 Figma에서 아이콘 및 이미지와 같은 모든 디자인 조각을 내보내는 것입니다. 이를 위해 Figma Design을 열고 내보낼 항목을 선택하세요. 이제 "내보내기" 버튼을 클릭하고 올바른 형식과 해상도를 선택하세요.
Figma 디자인 내보내기
참고: 이미지를 내보낼 때 PNG 또는 JPG를 선택하고, 아이콘 및 벡터의 경우 품질을 유지하려면 SVG를 선택하는 것이 좋습니다. 또한 파일을 내보낼 때 파일 형식이 올바른지 주의하세요. 그렇지 않으면 웹사이트 모양에 심각한 영향을 미칠 수 있습니다.
Figma 디자인을 PNG 또는 JPG 파일로 내보내기
2단계: 이제 모든 Figma 디자인을 WordPress 사이트로 변환하기 위해 사용자 정의 WordPress 테마를 만들어야 합니다. WordPress 테마는 웹사이트의 표시 및 기능을 제어하는 요소이기 때문입니다.
일반적인 WordPress 테마 파일은 PHP 코드, JavaScript 파일 및 CSS 스타일시트 파일로 구성됩니다.
wp-content/themes 디렉토리에 테마에 대한 새 폴더를 WordPress에 만들고 원하는 이름을 지정합니다. (Cpanel, WordPress Editor 또는 FTP 클라이언트를 통해 이러한 파일에 액세스할 수 있습니다.) 또는 "WordPress 테마를 설치하는 방법"에 대한 전용 블로그를 확인하세요.
WPOven 사용자라면 이 튜토리얼을 따라 WordPress 파일에 액세스할 수 있습니다. “사이트의 파일과 폴더를 쉽게 관리할 수 있는 새로운 파일 관리자.“
이제 index.php, header.php, footer.php 및 function.php와 같은 파일을 추가하세요. (지금은 이 파일을 비워 두세요). 또한 style.css 파일을 추가하여 동일한 폴더에 테마의 CSS 스타일시트를 설정하세요.
(이 특정 style.css 파일은 웹사이트의 모든 색상, 글꼴, 테두리, 여백 및 기타 시각적 요소를 표시하는 역할을 합니다.)
이제 아래와 같이 style.css 파일에 다음 헤더 주석을 추가하십시오.
/*
Theme Name: Example WordPress Theme Author: WPOVen Description: This code converts Figma design to WordPress. Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
여기에서 사용자 정의 WordPress 테마의 테마 이름과 작성자를 제공해야 합니다. 이는 WordPress에서 사용자 정의 테마를 식별하는 데 도움이 됩니다.
또한 YouTube 썸네일처럼 WordPress 디렉토리에서 쉽게 알아볼 수 있도록 WordPress 테마에 대한 이미지를 추가하는 것을 잊지 마세요.
권장 크기는 800×600 픽셀이어야 하며 PNG 형식이어야 합니다. 원하는 이름을 지정하고 테마 폴더에 추가하세요.
3단계: 이제 내보낸 모든 Figma 자산을 사용자 정의된 테마 폴더에 추가해야 합니다.
팁: 사이트가 복잡한 경우 아래 그림에 표시된 것처럼 특정 하위 폴더에서 모든 자산을 관리하는 것이 좋습니다.
4단계: WordPress 테마가 완벽하게 작동하도록 하려면 테마 파일에 HTML, CSS 및 JavaScript를 추가해야 합니다.
어떻게 할 수 있는지 살펴보겠습니다.
먼저 Figma 모형을 코드로 변환해야 하며, 이를 위해서는 코드 편집기 도구가 필요합니다.
머리글, 바닥글, 탐색 모음, 섹션과 같은 요소로 HTML 구조를 설정하는 것부터 시작하세요. PHP 파일(index.php, header.php 및 footer.php)에 코드를 추가합니다.
이제 CSS를 사용하여 HTML 요소의 스타일을 지정하세요. 'style.css' 파일에 스타일을 추가하고 색상, 글꼴, 크기 및 기타 디자인 측면을 설정하세요.
더 나은 스타일링을 위해 다음을 사용할 수 있습니다.
SASS 또는 LESS와 같은 CSS 전처리기
Bootstrap 또는 Tailwind와 같은 프레임워크
WordPress 스타터 테마
복잡한 디자인의 경우 모든 CSS를 단일 파일에 넣을 필요는 없지만 좀 더 체계적으로 정리할 수 있습니다. 자산 폴더의 여러 부분에 대해 별도의 CSS 파일을 추가하면 나중에 쉽게 관리하고 문제를 해결할 수 있습니다.
마지막으로 Javascript의 경우 드롭다운 메뉴, 슬라이더 등 대화형이 필요한 요소를 파악합니다.)
AJAX 호출 및 DOM 조작과 같은 작업을 더 쉽게 만들고 functions.php 파일을 사용하여 WordPress 테마에 CSS(스타일시트) 및 JavaScript 파일(스크립트)을 적절하게 로드하려면 jQuery를 사용하는 것이 좋습니다.
5단계: 이제 테스트 부분이 나옵니다. 위의 모든 단계를 성공적으로 수행한 후 파일을 저장하고 모든 것이 제대로 작동하는지 확인합니다. 하지만 그 전에 플러그인을 활성화해야 합니다.
플러그인을 활성화하려면 WordPress 대시보드> 모양> 테마 로 이동하세요. 사용자 정의 테마는 이전에 테마 폴더에 업로드한 이미지와 함께 표시되기 시작합니다. 이를 클릭하여 활성화하면 WordPress 사이트를 테스트할 준비가 됩니다.
다음은 따를 수 있는 몇 가지 테스트 제안 사항입니다.
다양한 브라우저와 화면 크기에서 사이트가 어떻게 보이고 작동하는지 확인하세요.
더 빠른 로딩을 위해 도구를 사용하여 이미지를 최적화하세요.
사이트 속도를 높이려면 캐싱을 구현하세요.
사이트를 활성화하기 전에 백업해 두세요.
요약
Figma에서 WordPress로 변환하는 것은 웹사이트의 복잡성에 따라 보기만큼 쉽지 않습니다. 디자인이 복잡할수록 따라야 할 프로세스도 더 복잡해집니다. 우리는 모든 유형의 사용자를 위한 모든 옵션을 다루려고 노력했습니다.
수동으로 수행하면 더 많은 제어력을 얻을 수 있지만 많은 시간과 노력이 소모됩니다. 그러나 플러그인을 활용하여 변환 프로세스 속도를 높일 수 있지만 더 나은 결과를 얻으려면 여전히 특정 변경이 필요할 수 있습니다.
어떤 방법을 선택하는지는 전적으로 귀하의 선호도와 이해의 용이성에 달려 있습니다.
라훌
Rahul Kumar는 웹 매니아이자 WordPress 및 웹 호스팅을 전문으로 하는 콘텐츠 전략가입니다. 수년간의 경험과 업계 동향에 대한 최신 정보를 얻으려는 노력을 통해 그는 트래픽을 유도하고 참여도를 높이며 전환율을 높이는 효과적인 온라인 전략을 수립합니다. Rahul은 세부 사항에 대한 관심과 매력적인 콘텐츠 제작 능력으로 인해 온라인 인지도를 향상하려는 모든 브랜드에 귀중한 자산이 되었습니다.
