컴포넌트 개요 - Webflow 도움말

사이트 전반에 걸쳐 반복되는 레이아웃과 콘텐츠를 효율적으로 관리하세요.

컴포넌트를 사용하면 요소와 하위 요소로부터 사용자 정의 가능한 블록을 만들어 일관되고 효율적이며 확장 가능한 디자인 워크플로를 유지할 수 있습니다. 이러한 블록을 사이트 전반에 재사용하고, 반복되는 레이아웃을 개별적으로 수정하지 않고도 한 곳에서 수정할 수 있습니다.

컴포넌트 생성 방법

Webflow에서 시각적으로 컴포넌트를 생성하거나 DevLink를 사용하여 외부 코드베이스에서 기존 컴포넌트를 가져올 수 있습니다. 이 섹션은 시각적 개발에 중점을 둡니다.

요소 또는 요소 그룹에서 컴포넌트를 생성하고, 각 인스턴스가 사이트 전반에 동일한지 아니면 콘텐츠, 레이아웃 또는 스타일에 대한 변경을 허용할지를 선택할 수 있습니다:

• 인스턴스별 동일한 콘텐츠 및 디자인 — 사이트 전반에 재사용할 반복 레이아웃(예: 네비게이션 바 및 푸터)을 위한 컴포넌트를 생성합니다. 콘텐츠나 디자인의 변경 사항은 컴포넌트의 모든 인스턴스에 자동으로 업데이트됩니다.
• 인스턴스별 고유한 콘텐츠 — 일관된 레이아웃과 디자인을 가진 컴포넌트를 생성하되, 각 인스턴스가 다른 콘텐츠를 가질 수 있도록 허용합니다(예: 각 인스턴스마다 고유한 텍스트, 이미지 또는 비디오를 가질 수 있는 히어로 섹션 레이아웃). 컴포넌트 속성과 슬롯을 사용합니다.
• 인스턴스별 다른 스타일 변형 — 미리 정의된 스타일 및 레이아웃 옵션을 가진 컴포넌트를 생성합니다(예: 솔리드 및 아웃라인 버튼, 또는 수평 및 수직 카드 레이아웃). 컴포넌트 스타일 변형을 통해 별도의 컴포넌트를 생성하지 않고도 각 인스턴스의 디자인을 사용자 정의할 수 있습니다.

컴포넌트를 생성하려면:

1. 컴포넌트로 전환할 요소를 선택합니다
2. 컴포넌트 패널, 스타일 패널 또는 요소 설정 패널을 엽니다
3. 패널 상단의 “컴포넌트 생성” 아이콘을 클릭합니다
4. 컴포넌트에 이름과 선택적 설명을 입력하고 생성을 클릭합니다

기존 구성 요소를 복제하려면 구성 요소를 선택하고 "더 많은 옵션" 점을 클릭한 다음 복제를 선택하세요.

구성 요소를 만든 후에는 메인 구성 요소 내부에 있게 됩니다. 즉, 메인 구성 요소에 대한 모든 변경 사항이 해당 구성 요소의 모든 인스턴스에 업데이트됩니다. 언제든지 구성 요소 인스턴스에서 메인 구성 요소에 들어가려면:

• 구성 요소 인스턴스를 더블 클릭
• 인스턴스를 마우스 오른쪽 버튼으로 클릭하고 구성 요소 편집 클릭
• 인스턴스를 선택하고 레이블의 "연필" 아이콘 클릭
• 인스턴스를 선택하고 오른쪽 패널의 오른쪽 상단에 있는 "렌치" 아이콘 클릭

메인 구성 요소 편집에 대해 더 알아보기.

구성 요소 사용 및 재사용 방법

구성 요소를 만든 후에는 사이트 어디에서나 재사용할 수 있습니다:

1. 구성 요소 패널 열기
2. 구성 요소 위에 마우스를 올려 미리보기 보기
3. 원하는 구성 요소를 클릭하고 사이트의 페이지로 드래그
4. 구성 요소 인스턴스를 캔버스에 직접 드롭하거나 내비게이터에 드롭

구성 요소 인스턴스를 선택하면 녹색으로 강조 표시되고 윤곽이 그려집니다. 구성 요소 패널을 열어 사이트에서 각 구성 요소가 몇 번 사용되었는지 확인하세요.

내비게이터 패널에서 구성 요소의 요소 계층을 보려면, Option + 더블 클릭 (Mac) 또는 Alt + 더블 클릭 (Windows) 하거나 "메인 구성 요소 편집" 아이콘을 클릭하세요. 구성 요소 인스턴스 내에서는 구성 요소의 요소 계층을 볼 수 없습니다. 메인 구성 요소에서만 볼 수 있습니다.

컴포넌트 편집 방법

컴포넌트와 상호작용하고 편집할 수 있는 다양한 방법을 살펴보겠습니다:

• 메인 컴포넌트 편집
• 컴포넌트 속성, 슬롯, 스타일 변형
• 컴포넌트 스타일 변형 생성
• 변형 속성 관리
• 컴포넌트 인스턴스의 변형 변경
• 컴포넌트 스타일 변형 재정렬, 이름 변경, 복제 또는 삭제
• 메인 컴포넌트 종료
• 에디터에서 컴포넌트 편집
• 컴포넌트 이름 또는 설명 변경
• 컴포넌트 그룹화
• 컴포넌트 삭제

메인 컴포넌트 편집

컴포넌트의 모든 인스턴스에 동일한 변경을 적용하려면 메인 컴포넌트를 편집해야 합니다. 메인 컴포넌트를 편집하는 방법은 다음과 같습니다:

• 캔버스에서 컴포넌트 인스턴스를 더블 클릭
• 네비게이터에서 Option + 더블 클릭(Mac) 또는 Alt + 더블 클릭(Windows)
• 인스턴스를 오른쪽 클릭하고 컴포넌트 편집 클릭
• 인스턴스를 선택하고 라벨의 “컴포넌트 편집” 아이콘 클릭
• 인스턴스를 선택하고 오른쪽 패널 상단의 “컴포넌트 편집” 아이콘 클릭

메인 컴포넌트에 대한 편집은 모든 컴포넌트 인스턴스에 영향을 미칩니다 (특정 요소에 컴포넌트 속성이 적용된 경우 제외). 메인 컴포넌트를 편집할 때 구조와 요소 순서를 변경하여 사이트 전체의 모든 컴포넌트 인스턴스에 동시에 영향을 줄 수 있습니다.

컴포넌트 속성, 슬롯, 스타일 변형

컴포넌트 속성(Props), 슬롯, 스타일 변형을 통해 각 컴포넌스 인스턴스에 고유한 구성을 만들 수 있습니다:

• 속성(Props) — 메인 컴포넌트의 개별 요소 설정(예: 텍스트, 링크, 이미지 또는 비디오)을 속성에 연결합니다. 이를 통해 컴포넌트의 전체 구조나 디자인을 변경하지 않고 각 인스턴스에서 이러한 설정을 사용자 정의할 수 있습니다. 속성은 CMS 필드에 연결하여 CMS 컬렉션에서 콘텐츠를 동적으로 가져올 수도 있습니다.
• 슬롯(Slots) — 슬롯은 다른 컴포넌트를 위한 자리 표시자로 작동하는 기존 컴포넌트에 배치할 수 있는 요소입니다. 이를 통해 각 인스턴스가 슬롯에 다른 컴포넌트를 포함할 수 있는 모듈식 컴포넌트를 구축할 수 있습니다.
• 스타일 변형 — 단일 컴포넌트에 대한 여러 디자인 옵션을 정의하여 다양한 사용 사례에 맞게 외관을 조정할 수 있습니다. 예를 들어, 실선 또는 윤곽선 버튼, 수평 및 수직 카드 레이아웃과 같은 스타일 변형을 제공할 수 있습니다.

컴포넌트 스타일 변형 생성하기

컴포넌트의 변형을 다양한 레이아웃, 색상, 글꼴 스타일 등으로 생성할 수 있습니다. (예: 솔리드 또는 아웃라인 버튼, 수평 및 수직 카드 레이아웃) 사이트 전반에 걸쳐 각 컴포넌스 인스턴스에서 사용할 변형을 선택할 수 있습니다.

컴포넌트 스타일 변형을 생성하려면:

1. 메인 컴포넌트를 편집합니다.
2. 스타일 패널로 이동합니다.
3. 스타일 선택기에서 "컴포넌트 변형" 아이콘을 클릭합니다.
4. "플러스" 아이콘을 클릭합니다.
5. 변형에 고유한 이름을 지정합니다.
6. Enter/Return 키를 눌러 확인합니다.

변형 속성 관리하기

컴포넌트 스타일 변형을 생성하면, 해당 컴포넌트에 대한 변형 속성이 자동으로 생성됩니다. 속성 패널에서 변형 속성의 이름을 변경하고, 속성 그룹에 추가하며, 컴포넌트의 기본 변형을 설정할 수 있습니다.

변형 속성의 이름을 변경하려면:

1. 메인 컴포넌트를 편집합니다.
2. 속성 패널로 이동합니다.
3. 변형 속성을 클릭합니다.
4. 고유한 속성 이름을 입력합니다.
5. Enter/Return 키를 눌러 확인합니다.

변형 속성을 속성 그룹에 추가하려면:

1. 메인 컴포넌트를 편집합니다.
2. 속성 패널로 이동합니다.
3. 변형 속성을 클릭합니다.
4. 그룹을 선택하거나 고유한 이름을 입력하여 새 그룹을 생성합니다.
5. 생성 버튼을 클릭하거나 Enter/Return 키를 눌러 확인합니다.

컴포넌트의 기본 변형 설정하기:

1. 메인 컴포넌트를 편집합니다.
2. 속성 패널로 이동합니다.
3. 변형 속성을 클릭합니다.
4. 기본값 드롭다운에서 변형을 선택합니다.

컴포넌트 인스턴스의 변형 변경하기

다른 컴포넌트 속성과 마찬가지로, 각 컴포넌스 인스턴스에 대한 스타일 변형을 선택할 수 있습니다. 컴포넌트 인스턴스의 변형을 변경하려면:

1. 컴포넌트를 단일 클릭하여 속성 패널을 엽니다.
2. 이 인스턴스에 대한 변형을 변형 드롭다운에서 선택합니다.

컴포넌트 스타일 변형 재정렬, 이름 변경, 복제 또는 삭제

디자인 모드에서 컴포넌트 스타일 변형을 관리할 수 있습니다 (재정렬, 이름 변경, 복제 또는 삭제).

컴포넌트의 변형을 재정렬하려면:

1. 메인 컴포넌트를 편집합니다
2. 스타일 패널로 이동합니다
3. 스타일 선택기에서 "컴포넌트 변형" 아이콘을 클릭합니다
4. 변형을 클릭하고 드래그하여 새 위치로 이동합니다

변형의 이름을 변경하려면:

1. 메인 컴포넌트를 편집합니다
2. 스타일 패널로 이동합니다
3. 스타일 선택기에서 "컴포넌트 변형" 아이콘을 클릭합니다
4. 변형 위에 마우스를 올리고 "더 많은 옵션" 아이콘을 클릭합니다
5. 이름 변경을 클릭합니다
6. 새롭고 고유한 변형 이름을 입력합니다
7. Enter/Return을 눌러 확인합니다

변형을 복제하려면:

1. 메인 컴포넌트를 편집합니다
2. 스타일 패널로 이동합니다
3. 스타일 선택기에서 "컴포넌트 변형" 아이콘을 클릭합니다
4. 변형 위에 마우스를 올리고 "더 많은 옵션" 아이콘을 클릭합니다
5. 복제를 클릭합니다
6. 새롭고 고유한 변형 이름을 입력합니다
7. Enter/Return을 눌러 확인합니다

변형을 삭제하려면:

1. 메인 컴포넌트를 편집합니다
2. 스타일 패널로 이동합니다
3. 스타일 선택기에서 "컴포넌트 변형" 아이콘을 클릭합니다
4. 변형 위에 마우스를 올리고 "더 많은 옵션" 아이콘을 클릭합니다
5. 삭제를 클릭합니다
6. 팝업 모달에서 삭제를 클릭하여 확인합니다

메인 컴포넌트 종료

메인 컴포넌트 편집을 완료한 후에는 다음 방법으로 메인 컴포넌트를 종료할 수 있습니다:

• 디자이너의 왼쪽 상단 모서리에 있는 "뒤로" 화살표를 클릭합니다
• 캔버스에서 컴포넌트 외부를 클릭합니다
• 키보드에서 Escape를 누릅니다

편집기에서 구성 요소 편집하기

편집기에서 사이트 콘텐츠를 업데이트하도록 콘텐츠 편집자를 초대한 경우, 구성 요소 속성으로 수정되지 않고 모든 인스턴스에서 일관된 구성 요소 요소에 대한 변경 사항은 다른 모든 인스턴스에 적용됩니다.

반대로, 콘텐츠 편집자가 구성 요소 속성을 통해 수정된 구성 요소 요소를 변경하면 해당 변경 사항은 그들이 편집 중인 구성 요소 인스턴스에만 적용됩니다.

구성 요소 이름 또는 설명 변경하기

구성 요소 이름 또는 설명을 변경하려면:

1. 구성 요소 패널을 엽니다
2. 구성 요소 이름 위에 마우스를 올리고 나타나는 "더 많은 옵션" 점을 클릭합니다
3. 설정 편집을 클릭합니다
4. 변경 사항을 적용하고 저장합니다

구성 요소 인스턴스 이름 변경하기

개별 구성 요소 인스턴스의 이름을 변경하여 식별하기 쉽게 만들 수 있습니다. 이는 특히 동일한 구성 요소를 페이지에서 여러 번 재사용할 때 유용합니다.

구성 요소 인스턴스의 이름을 변경하려면:

• 탐색기 또는 오른쪽 패널 상단에서:

1. 구성 요소 이름을 더블 클릭합니다
2. 새 이름을 입력합니다
3. Enter 키를 누르거나 클릭하여 사용자 지정 이름을 저장합니다

• 캔버스에서:

1. 구성 요소 인스턴스를 오른쪽 클릭합니다
2. 이름 변경을 클릭합니다
3. 새 이름을 입력합니다
4. Enter 키를 누르거나 클릭하여 사용자 지정 이름을 저장합니다

이름을 원래 구성 요소 이름으로 재설정하려면, 이름 변경 중에 사용자 지정 이름을 삭제하거나 탐색기 또는 캔버스에서 인스턴스를 오른쪽 클릭하고 이름 재설정을 클릭합니다.

구성 요소 그룹화하기

구성 요소를 그룹으로 정리하려면:

1. 구성 요소 패널을 엽니다
2. 구성 요소 이름 위에 마우스를 올리고 나타나는 "더 많은 옵션" 점을 클릭합니다
3. 설정 편집을 선택합니다
4. 그룹 드롭다운에서 기존 그룹을 선택하거나 새 그룹을 만들기 위해 입력합니다

컴포넌트 그룹의 이름을 변경하거나 그룹 해제를 하려면 그룹 제목 위에 마우스를 올리고 "더 많은 옵션" 점을 클릭하세요.

컴포넌트 삭제하기

컴포넌트를 완전히 삭제하려면:

1. 사이트에서 컴포넌트의 모든 인스턴스를 제거하거나 연결 해제
2. 컴포넌트 패널 열기
3. 컴포넌트 이름 위에 마우스를 올리고 나타나는 "더 많은 옵션" 점 클릭
4. 설정 편집 선택
5. 삭제 클릭하고 확인

컴포넌트 인스턴스를 메인 컴포넌트에서 연결 해제하는 방법

컴포넌트 인스턴스를 연결 해제하고 메인 컴포넌트와 독립적으로 변경하려면:

1. 연결 해제하려는 인스턴스의 컴포넌트 요소를 마우스 오른쪽 클릭
2. 인스턴스 연결 해제 클릭

연결 해제 후, 디자인에서 해당 컴포넌트의 다른 연결된 인스턴스를 편집해도 연결 해제된 인스턴스는 변경되지 않습니다.

라이브러리를 통한 사이트 간 컴포넌트 공유

라이브러리를 사용하여 워크스페이스 내의 사이트 간에 네이티브 및 코드 컴포넌트를 공유할 수 있습니다. 이는 워크플로우를 가속화하고 여러 사이트에서 사용되는 컴포넌트를 업데이트할 수 있는 단일 장소를 제공하여 디자인 시스템을 향상시킬 수 있습니다.

웹플로우 도움말로 돌아가기