---
url: "/ko/weblify/overview/quickstart.md"
description: "Weblify로 웹사이트를 만들고, 미리 보고, 검사하고, 내보내세요. Weblify Chrome 확장 프로그램으로 기존 페이지를 Figma에 복사할 수도 있어요."
---

# Weblify 시작하기

> Weblify로 웹사이트를 만들고, 미리 보고, 검사하고, 내보내세요. Weblify Chrome 확장 프로그램으로 기존 페이지를 Figma에 복사할 수도 있어요.

[![Weblify Figma 플러그인](https://www.hypermatic.com/weblify.jpg)](https://www.figma.com/community/plugin/927336249307137996)

## Weblify Figma 플러그인 설치 {#installing-the-weblify-figma-plugin}

1. 아무 Figma 파일이나 여세요.
2. Figma 하단 툴바에서 **Actions** 아이콘을 클릭하세요.
3. **Plugins & Widgets** 탭을 클릭해 Figma 플러그인만 표시되도록 결과를 필터링하세요.
4. 검색창에서 **Weblify**를 검색하세요.
5. 검색 결과에서 **Weblify**를 클릭하세요.
6. **Save** 버튼을 클릭해 Weblify 플러그인을 설치하세요.

> **Note:** **Figma Organization**에 속한 Figma 사용자는 승인된 플러그인만 설치할 수 있을 수도 있어요. 특정 Figma 플러그인을 설치할 수 없다면 회사의 Figma 조직 관리자에게 [Weblify 플러그인 승인](https://help.figma.com/hc/en-us/articles/4404228724759-Manage-plugins-and-widgets-in-an-organization)을 요청해 주세요.

## Weblify Figma 플러그인 실행 {#running-the-weblify-figma-plugin}

**Weblify** Figma 플러그인을 [설치](#installing-the-weblify-figma-plugin)했다면, Figma 파일에서 다음과 같이 플러그인을 실행하세요.

  1. Figma 파일의 페이지 캔버스 아무 곳에서나 **마우스 오른쪽 버튼을 클릭**하세요.
  2. **Plugins** ▶ 메뉴 항목 위에 마우스를 올리세요.
  3. **Saved plugins** ▶ 메뉴 항목 위에 마우스를 올리세요.
  4. **Weblify** 플러그인 메뉴 항목을 클릭하세요.

> **Tip:** Figma 파일에서 **Weblify** 플러그인을 한 번 실행하고 나면, Figma 오른쪽 열(**Plugin** 소제목 아래)의 **Weblify** 아이콘을 클릭해 빠르게 다시 실행할 수 있어요.

> **Warning:** Figma 파일에 **Edit** 권한이 있는 Figma 사용자만 해당 파일에서 Figma 플러그인을 실행할 수 있어요. **View** 권한만 있다면 그 파일에서는 Figma 플러그인을 실행할 수 없어요.

## Weblify 설치 및 활성화

- [Figma 플러그인 설치 및 실행](/ko/weblify/overview/install.md): Figma에서 Weblify를 실행하는 방법
- [Weblify Pro 활성화](/ko/weblify/overview/pro.md): Pro 라이선스 키를 구매하고 사용하는 방법

## Weblify 사용하기

  - [웹사이트 만들기](/ko/weblify/build/site-builder.md): 템플릿, 섹션, 요소로 편집 가능한 웹사이트 페이지 만들기
  - [웹사이트 가져오기](/ko/weblify/advanced/import-website.md): 무료 Chrome 확장 프로그램으로 페이지나 선택한 요소 복사하기
  - [검사 및 내보내기](/ko/weblify/build/export.md): 정적 HTML·CSS 웹사이트를 검증하고 다운로드하기
  - [Figma 레이어 코드 검사](/ko/weblify/inspect/layers.md): 선택한 레이어로 HTML, Tailwind, React, Vue 코드 생성하기

## 자주 묻는 질문

- [Weblify 문제 해결](/ko/weblify/faq/troubleshooting.md): 자주 발생하는 문제와 해결 방법
- [Weblify 보안](/ko/weblify/faq/security.md): Weblify의 작동 방식 자세히 알아보기
- [영수증](/ko/faq/receipts.md): 이메일 영수증과 PDF 인보이스 찾기
- [결제](/ko/faq/billing.md): Pro 구독 관리
- [라이선스 시트 관리](/ko/faq/seats.md): 라이선스 키에 연결된 Figma 사용자 관리
- [Weblify 무료와 Pro 비교](/ko/weblify/faq/plans.md): 무료 기능과 Pro 기능 비교

[Video](https://www.hypermatic.com/assets/videos/weblify/WEBLIFY_DEMO.mp4)

## Weblify 기능

- 템플릿, 섹션, 요소, 반응형 레이아웃으로 편집 가능한 웹사이트 페이지를 만들어요.
- 무료 Chrome 확장 프로그램으로 공개 웹사이트나 로그인이 필요한 웹사이트를 Figma에 복사해요.
- 생성된 웹사이트 결과물을 다양한 뷰포트 너비에서 미리 봐요.
- Weblify 페이지를 검사하고 정적 HTML·CSS 웹사이트로 내보내요.
- 선택한 Figma 레이어를 HTML/CSS, Tailwind, React, Vue 코드로 검사해요.
- 생성된 코드를 복사하거나, 이미지 에셋이 포함된 컴포넌트 ZIP을 다운로드해요.
- Figma Auto Layout, 줄 바꿈(wrap), 최소/최대 레이아웃 속성과 함께 작동해요.
- Figma Dev Mode에서 Weblify의 코드 검사 도구를 사용해요.