Drupal: Canvas 탐색 (파트 1)
Source: Dev.to
Introduction
얼마 전 Canvas의 첫 번째 버전이 출시되었습니다. Drupal 커뮤니티 외부 사람들에게 Canvas는 새로운 시각적 페이지‑작성 모듈입니다.
대부분의 CMS 사용자는 페이지를 만들 때 폼 기반 인터페이스에 익숙한데, 이는 추가 교육이 필요할 수 있습니다. 왜냐하면 추가되는 콘텐츠와 시각적인 연결이 없기 때문입니다. 과거에는 이 문제를 완화하기 위해 미리보기 버튼이 제공되었습니다.
Drupal에서 이전에 사용되던 시각적 페이지 작성자는 Layout Builder였습니다. 주요 제한점은 페이지 메타데이터를 편집하기 위해 여전히 폼이 필요하다는 것이었습니다. 폼과 시각적 레이아웃을 결합한 시각적 인터페이스는 사용자 경험을 개선하는 다음 단계라 할 수 있습니다.
Quick Edit 모듈 역시 시각적 편집 기능을 제공하지만, 전체 페이지를 만드는 대신 인라인·지역 편집에 초점을 맞춥니다.
Installation and First Impressions
릴리스 기사 하단에 데모 저장소가 링크되어 있지만, 저는 깨끗한 환경을 선호했습니다. Drupal 11.20 프로젝트를 새로 만들고 Canvas 모듈만 설치했습니다.
모듈은 Appearance 아래에 Components 탭을 추가합니다. 저는 다른 페이지‑작성 옵션이 위치하는 Structure 아래에 있어야 할 것이라 예상했기 때문에 이 배치가 이상하게 느껴졌습니다.
관리자 상단 메뉴에도 Drupal Canvas 링크가 생기고, Content 섹션에 Pages 탭이 나타납니다.
저장소 구조가 궁금해서 데이터베이스를 살펴보니 Canvas 전용 테이블이 존재했습니다. 이는 Canvas가 전통적인 노드 시스템과는 별도로 동작하며, 노드 위에 시각적 레이어를 얹는 것이 아니라는 것을 의미합니다.
Note: Canvas가 노드 테이블에 의존하지 않기 때문에 유연성이 높아지지만, 검증된 노드 아키텍처와 어떻게 공존할지에 대한 질문도 생깁니다. Canvas 페이지만 사용하는 사이트라면 노드는 불필요한 오버헤드가 될 수 있습니다.
Using Canvas
작은 화면에서 Drupal Canvas 링크에 접근하면 브라우저 창이 너무 좁다는 경고가 나타납니다. 이는 현재 스마트폰에서 페이지 빌딩이 지원되지 않음을 의미합니다.
데스크톱에서는 초기 Canvas 화면이 다음과 같이 보입니다:
- 왼쪽 아이콘은 관리자 인터페이스로 돌아갑니다.
- 상단 툴바는 Drupal 디자인 언어를 따릅니다(Gin 관리자 테마 사용).
- 중앙 드롭다운인 navigator는 페이지 수준 제어를 제공합니다.
- 가장 오른쪽 버튼은 페이지를 저장합니다.
Navigator and Page Creation
navigator를 클릭하면 그 목적이 드러납니다. 새 페이지를 만들면 인터페이스가 다음과 같이 업데이트됩니다:
- navigator 텍스트가 바뀌고 Draft 알약이 나타납니다.
- 페이지 크기를 조절할 수 있는 옵션이 콘텐츠 영역 좌측 상단에 있습니다.
- 콘텐츠 영역은 Structure 섹션의 Block layout과 동일하게 보이며, 이는 Components 탭이 Appearance가 아니라 Structure 아래에 있어야 함을 시사합니다.
- 사각형 자리표시자가 콘텐츠 블록을 드롭하도록 초대합니다.
- 오른쪽에 Page data 툴바가 나타납니다.
이 통합된 페이지‑데이터 툴바는 코어 Layout Builder에는 없는 기능입니다.
Saving a Canvas Page
Canvas가 노드 테이블을 수정하지 않는지 확인하기 위해 페이지 제목을 편집하고 저장했습니다.
