---
url: "/ko/weblify/build/site-builder.md"
description: "템플릿, 섹션, 요소, 반응형 레이아웃 기본 요소로 Weblify 페이지를 만드세요."
---

# Figma에서 웹사이트 만들기

> 템플릿, 섹션, 요소, 반응형 레이아웃 기본 요소로 Weblify 페이지를 만드세요.

Weblify의 **Add**, **Navigator**, **Style** 탭에서는 웹사이트 페이지를 편집 가능한 Figma 레이어로 만들고 편집해요. 생성된 레이어에는 Weblify 메타데이터가 남아 있어서, 플러그인이 이를 미리 보고 점검하고 정적 웹사이트로 내보낼 수 있어요.

## 페이지 시작하기 {#start-a-page}

1. **Navigator** 탭을 열고 **New page name**에 이름을 입력한 다음 **Add page**를 선택하세요. 또는 **Add** 탭을 열고 **Templates**를 고른 다음 템플릿을 선택하면, 템플릿 이름으로 된 새 페이지로 추가돼요.
2. 콘텐츠를 추가하기 전에 Figma 캔버스나 **Navigator**에서 생성된 페이지를 선택하세요.

아무것도 선택하지 않으면 Weblify는 처음 찾은 Weblify 페이지를 사용하거나 **Home**이라는 페이지를 만들어요. **Add** 탭의 필터 아래에 있는 줄에 새 콘텐츠가 삽입될 위치가 표시돼요.

## 섹션과 요소 추가 {#add-sections-and-elements}

**Add** 탭은 검색할 수 있는 하나의 라이브러리예요. **Templates**, **Sections**, **Elements**, **Layouts** 필터를 사용하거나 이름으로 검색하세요. 내비게이션, 히어로, 콘텐츠, 가격, 폼, 푸터처럼 페이지의 완성된 영역은 **Sections**를, 개별 컴포넌트는 **Elements**를 사용하세요. 항목을 선택하면 삽입돼요.

항목을 삽입하기 전에 Weblify 페이지, 섹션 또는 열을 선택하세요. 그래야 Weblify가 부모를 예측할 수 있고, 내보낸 구조도 그대로 유지돼요.

항목에 별표를 표시하면 **Favourites**에 추가돼요. 직접 만든 섹션을 재사용하려면 **Navigator**에서 해당 섹션의 **⋯** 메뉴를 열고 **Save to My sections**를 선택하세요. 그러면 **Add** 탭의 **My sections**에 나타나요.

## 구조 편집 {#edit-the-structure}

**Navigator** 탭에는 페이지 목록과 현재 페이지의 섹션이 표시돼요. 여기서 다음 작업을 할 수 있어요.

- 페이지를 추가하고, 페이지와 섹션을 드래그해 순서를 바꾸고, **⋯** 메뉴로 이름 변경, 복제, 숨기기, 삭제, 홈페이지 설정을 하세요.
- 페이지 옆의 **⚙** 버튼을 선택해 URL과 검색 메타데이터를 편집한 다음 **Save page**를 선택하세요.
- 섹션의 **⋯** 메뉴에서 해당 섹션을 모든 페이지에 헤더나 푸터로 표시하세요.

페이지 메타데이터에는 제목, 설명, 정규 URL, 소셜 공유 필드, 파비콘, Twitter 카드 유형, 검색 엔진 설정이 포함돼요.

선택한 섹션, 행, 그리드, 열이 태블릿과 휴대폰에서 어떻게 바뀔지 설정하려면 **Style** 탭을 열고 **Responsive**를 펼치세요.

## 스타일과 이미지 적용 {#apply-styles-and-images}

**Style** 탭을 열고 **Brand styles**를 펼치면 생성된 콘텐츠에 쓰인 테마, 색상, 타이포그래피, 모서리 반경을 검토할 수 있어요. **Images**를 펼치면 플레이스홀더 이미지 목록이 나오므로, 내보내기 전에 실제 이미지 URL로 바꿀 수 있어요.

플러그인을 벗어나지 않고 현재 웹사이트를 확인하려면 **Preview** 탭을 여세요.