Drupal: Canvas 탐색 (파트 2)

발행: 1일 전 (2025년 12월 17일 오후 06:38 GMT+9)

10 min read

원문: Dev.to

Source: Dev.to

번역을 진행하려면 전체 텍스트를 제공해 주시겠어요? 텍스트를 주시면 요청하신 대로 한국어로 번역해 드리겠습니다.

Source: …

컴포넌트 탐색

이전 글에서 새로운 모듈을 소개했고, 좋은 시작을 보였습니다.
이번 글에서는 컴포넌트를 살펴보겠습니다.

컴포넌트란?

용어는 의도적으로 포괄적으로 사용됩니다. 컴포넌트는 프론트엔드 기반일 수도 있고 백엔드 기반일 수도 있습니다.
실제로 컴포넌트는 정의가 있는 원자적인 HTML 조각에 불과합니다.

프론트엔드 예시 (React)

const Component = () => {
  return (
    <div>
      Test
    </div>
  );
};

export default Component;

프론트엔드 개발자는 이 React 컴포넌트를 바로 인식할 것입니다.

백엔드 예시 (Drupal 단일 디렉터리 컴포넌트)

# test.component.yml
'$schema': 'https://git.drupalcode.org/project/drupal/-/raw/HEAD/core/assets/schemas/v1/metadata.schema.json'
name: test

{# test.twig #}
<div>
  Test
</div>

편집자 입장에서는 두 유형 사이에 시각적인 차이가 없습니다.

Props

텍스트나 이미지를 하드코딩하면 편집자에게 유용하지 않으므로, 컴포넌트는 props를 노출할 수 있습니다. 선택된 컴포넌트에 대해 입력 필드 형태로 나타납니다.

Prop이 있는 프론트엔드 컴포넌트

const Component = ({ name }) => {
  return (
    <div>
      Test {name}
    </div>
  );
};

export default Component;

Prop이 있는 캔버스 컴포넌트

Prop이 있는 백엔드 컴포넌트

# text.component.yml
'$schema': 'https://git.drupalcode.org/project/drupal/-/raw/HEAD/core/assets/schemas/v1/metadata.schema.json'
name: test
props:
  type: object
  properties:
    name:
      type: string
      title: Name

{# text.twig #}
<div>
  Test {{ name }}
</div>

Slots

Slots를 사용하면 편집자가 컴포넌트를 중첩시켜 보다 복잡한 페이지 레이아웃을 만들 수 있습니다.

프론트엔드 컴포넌트에서는 slot 변수도 prop 변수와 동일하게 취급됩니다; 단, camelCase를 사용해야 합니다.
백엔드 컴포넌트에서는 YAML 파일에 정의된 키를 Twig 템플릿 안에서 prop 또는 slot 변수로 사용할 수 있습니다.

빈 슬롯 컴포넌트 (시각적 힌트)

빈 슬롯 컴포넌트

슬롯을 포함하는 컴포넌트를 추가하면, 해당 슬롯은 일반 컴포넌트에 사용되는 파란색 자리표시자 대신 보라색 자리표시자로 표시됩니다.

컴포넌트를 포함한 슬롯

테스트 컴포넌트가 들어간 슬롯

참고: 스크린샷은 스타일이 적용되지 않은 컴포넌트를 보여줍니다; 스타일이 적용된 컴포넌트는 더 깔끔하게 보이지만, 시각적 힌트(자리표시자)는 여전히 서로 겹쳐서 표시됩니다.

페이지에서 컴포넌트 조작

컴포넌트 추가

Add component toolbar

왼쪽 캔버스 툴바에 있는 플러스 (+) 아이콘을 클릭합니다.
사용 가능한 모든 컴포넌트 목록이 표시됩니다.

Content 사각형은 컴포넌트를 끌어다 놓을 수 있는 자리 표시자이지만, 현재 UI에서는 다음 방법으로만 컴포넌트를 추가할 수 있습니다:

컴포넌트의 점 3개 메뉴를 클릭합니다.
Insert(삽입)를 선택합니다.

Insert component

컴포넌트에 이미 슬롯이 있더라도 Insert 링크는 슬롯 내부가 아니라 메인 Content 영역에 새 컴포넌트를 추가합니다.

컴포넌트 편집 / 제거

컴포넌트를 우클릭하면 조작 옵션이 포함된 컨텍스트 메뉴가 열립니다.
또는 왼쪽 툴바의 Layers 아이콘을 클릭하면 페이지에 있는 모든 컴포넌트를 계층적으로 볼 수 있습니다.

Summary

Components는 프런트‑엔드(React, Vue 등) 또는 백‑엔드(Drupal 단일 디렉터리)일 수 있습니다.
Props는 편집자를 위한 편집 가능한 필드를 노출합니다.
Slots는 구성 요소를 중첩시켜 복잡한 레이아웃을 만들 수 있게 합니다.
Canvas UI는 추가, 삽입 및 구성 요소 관리를 위한 툴바 아이콘을 제공하며, 오른쪽 클릭 및 레이어‑뷰 옵션을 통해 추가 조작이 가능합니다.

이 기본 사항을 통해 새로운 모듈 편집기에서 구성 요소를 만들고 배치할 수 있습니다. 즐거운 코딩 되세요!

구성 요소를 드래그 앤 드롭할 수 있습니다. 구성 요소 이름 옆의 세 점을 클릭하면 페이지에서 오른쪽 클릭했을 때와 동일한 메뉴가 표시됩니다.

예시에서는 블록 레이아웃이 정의되어 페이지에 헤더와 푸터가 포함됩니다.

기본 블록 구성을 가질 필요는 없습니다 – 여기서 패턴이 역할을 합니다.

Patterns는 구성 요소 설정의 스냅샷(예: 헤더 또는 푸터)입니다.
재디자인 시 새 패턴을 추가하고 모든 페이지에서 변경해야 합니다.
패턴은 구성 요소 메뉴의 Add pattern 링크를 통해 추가할 수 있습니다.

Frontend 컴포넌트 만들기

백엔드 컴포넌트의 생성은 Canvas 모듈과 분리되어 있어, 편집자가 건드리지 않기를 원하는 컴포넌트라고 생각합니다.

Frontend 컴포넌트는 코드 컴포넌트 관리 권한이 있는 편집자가 만들 수 있습니다.

라이브러리 관리 아이콘을 클릭하면 추가 아이콘을 클릭했을 때 표시되는 목록과 유사한 리스트가 나타납니다.

가장 큰 변화는 New 드롭다운 메뉴와 Code 섹션이 추가된 점입니다.

New를 드롭다운 메뉴로 만든 이유는 잘 모르겠지만, 실제로는 프론트엔드 컴포넌트만 추가할 수 있습니다.
Code 섹션에서는 생성되었지만 컴포넌트 리스트에 연결되지 않은 컴포넌트를 확인할 수 있습니다.

New 드롭다운에서 Code component 링크를 클릭하면 컴포넌트 이름을 입력하라는 팝업이 나타납니다. 팝업을 닫으면 해당 컴포넌트의 편집 인터페이스가 표시됩니다.

오른쪽 상단에 Review changes 버튼이 있어 컴포넌트를 저장할 수 있습니다.
그 왼쪽 아래쪽에 Add to components 버튼이 있습니다 – 이 버튼을 눌러야 컴포넌트를 페이지에 추가할 수 있습니다.

컴포넌트를 만들고 수정해 보면서 저장할 때 오류가 자주 발생하는 것을 발견했지만, 두 번째 저장에서는 오류가 사라지는 경우가 많았습니다.

임시 결론

구성 요소들이 이미 많은 기능을 제공하고 있지만, 왼쪽 툴바는 사용해 보면 할수록 혼란스러워집니다.

비슷한 두 개의 툴바 섹션과 유사한 팝업 메뉴가 있어 잘못된 아이콘을 클릭하는 경우가 더 자주 발생합니다. 탐색기 옆에 Manage components 버튼을 두어 팝업을 여는 방식이면 혼란을 줄일 수 있을 것 같습니다.

하지만 이는 아직 초기 단계의 문제들일 뿐입니다.