DXPR Theme 서브테마 만들기(Drupal 11)

Q: AI 에이전트가 서브테마와 설정을 대신할 수 있나요?

예. 다음을 실행하면 drush dxt:setup-ai 에이전트가 테마 설정을 알고 브리프대로 바꾸며, 다음으로 서브테마를 직접 만들 수도 있습니다: drush dxt:subtheme:create. 결과는 사이트에서 검토하세요.

Q: DXPR Theme을 업데이트하면 서브테마가 덮어써지나요?

아니요. Composer는 다음만 교체합니다: themes/contrib/dxpr_theme. 서브테마는 다음에 있습니다: themes/custom. 업데이트 뒤에 서브테마 설정 폼을 한 번 저장하면 스타일시트에 새 변수가 반영됩니다.

DXPR Theme은 설정 대시보드에서 색상, 글꼴, 헤더, 간격, 레이아웃을 바꾸므로 대부분의 사이트에는 CSS가 한 줄도 필요 없습니다. 서브테마는 그 나머지, 즉 직접 작성하는 스타일시트, 템플릿 오버라이드, 추가 라이브러리, 코드와 함께 배포하는 색상 팔레트를 위한 것입니다. 서브테마는 DXPR Theme의 모든 스타일시트와 템플릿을 상속받고, 자체 설정을 가지며, DXPR Theme 업데이트가 서브테마에 영향을 주지 않습니다.

이 가이드는 Drupal 10.3과 Drupal 11의 DXPR Theme 8.2를 다룹니다. 사용하는 스타터 키트는 테마 안의 다음 위치에 들어 있습니다: dxpr_theme/dxpr_theme_STARTERKIT. Drupal 코어의 generate-theme 명령은 사용하지 않습니다. DXPR Theme이 자체 스타터 키트와 명령을 제공하기 때문입니다.

시작하기 전에

DXPR Theme을 추가하고 헬퍼 모듈을 활성화하세요. Drupal이 테마를 설치하려면 헬퍼 모듈이 먼저 필요합니다:

composer require drupal/dxpr_theme
drush en dxpr_theme_helper

1. 스타터 키트에서 서브테마 생성하기

가장 빠른 방법은 DXPR Theme Helper가 제공하는 Drush 명령입니다. 프로젝트 루트에서 실행하세요. 머신 네임을 검증하고 스타터 키트를 다음에 복사한 뒤 모든 이름을 바꿔줍니다: themes/custom.

drush dxt:subtheme:create northwind_theme --theme-name="Northwind Theme"

인수 없이 실행하면 명령이 두 이름을 모두 묻습니다. Drush 없이 진행하려면 테마에 포함된 스크립트를 사용하세요. 다음으로 이동한 뒤: web/themes/contrib/dxpr_theme. 다음으로 스크립트에 실행 권한을 한 번 부여하고: chmod +x scripts/*. 다음을 실행한 뒤 묻는 대로 사람이 읽는 이름과 머신 네임을 입력하세요: ./scripts/create_subtheme.sh. 이 스크립트는 해당 폴더에서만 실행됩니다.

어느 쪽이든 다음이 만들어집니다: web/themes/custom/northwind_theme. 스타터 키트의 파일과 구성은 머신 네임으로 바뀌고, 다음 자리 표시자는 info 파일과 스키마 파일에서 교체됩니다: THEMETITLE.

2. 활성화하고 설정을 한 번 저장하기

서브테마에 대해 다음으로 이동하세요: 모양. 설치 후 기본값으로 설정을 선택하세요.
서브테마의 설정을 열고 아무것도 바꾸지 않은 채 구성 저장을 누르세요.

첫 저장에서 새 테마의 설정 스타일시트가 생성됩니다. 서브테마는 DXPR Theme에서 만들었던 설정이 아니라 스타터 키트의 기본 설정에서 시작합니다. 기존 설정을 가져오려면 DXPR Theme에서 내보낸 뒤 서브테마로 가져오세요:

drush dxt:config:export --theme=dxpr_theme --file=theme.yml
drush dxt:config:import theme.yml --theme=northwind_theme

이후부터 대시보드는 DXPR Theme과 똑같이 동작합니다. 색상, 타이포그래피, 헤더, 푸터, 간격이 모두 서브테마의 것이 됩니다.

서브테마의 리전은 베이스 테마와 동일하게 유지하세요. 스타터 키트는 DXPR Theme과 같은 14개 리전을 선언하며, 콘텐츠의 DXPR Theme Helper 리전 숨기기 옵션은 이름으로 해당 리전을 가리킵니다.

3. 스타터 키트 구성 요소

northwind_theme.info.yml: base theme: dxpr_theme와 리전, 스타일시트를 불러오는 라이브러리 global-styling 하나. 주석 처리된 libraries-override 블록에는 끌 가능성이 높은 DXPR Theme 라이브러리가 dxpr_theme/bootstrap-5부터 dxpr_theme/helper-classes까지 나열되어 있습니다.
css/dxpr_theme_subtheme.css: 테마 자체 스타일시트 뒤에 모든 페이지에서 불러옵니다. CSS는 여기에 작성하세요.
templates/: README 외에는 비어 있습니다. 오버라이드할 템플릿을 dxpr_theme/templates에서 여기에 복사하세요.
config/install과 config/schema: 테마 이름으로 바뀐 기본 설정과 스키마.
color-settings.json: 직접 이름 붙인 색상 팔레트. 내장 팔레트 옆의 색상표 목록에 표시됩니다.
logo.svg, favicon.ico, screenshot.png: 자신의 파일로 교체하세요.

4. 설정을 따르는 CSS 작성하기

DXPR Theme은 설정을 CSS 변수에 씁니다. 팔레트는 다음을 사용합니다: --dxt-color-*, 타이포그래피·간격·레이아웃은 다음을 사용합니다: --dxt-setting-*. Bootstrap의 다음 변수에 매핑됩니다: --bs-* 변수. 고정값 대신 스타일시트에서 변수를 사용하면 색상이나 글꼴을 바꿔도 CSS가 대시보드를 계속 따릅니다.

/* css/dxpr_theme_subtheme.css */
.card {
  border-radius: 1rem;
  border-color: color-mix(in srgb, var(--dxt-color-base) 20%, transparent);
}

.dxpr-theme-footer h2 {
  font-family: var(--dxt-setting-headings-font-face);
  color: var(--dxt-color-footertext);
}

기본 색상, 강조 색상, 본문, 제목, 링크, 카드, 푸터에는 모두 변수가 있습니다. 전체 목록은 테마 README의 CSS Custom Properties (Variables) Reference에 있습니다.

5. 템플릿과 라이브러리 오버라이드

바꿀 템플릿을 다음에서 서브테마의 폴더로 복사하세요: themes/contrib/dxpr_theme/templates templates 폴더. 파일 이름은 유지한 채 편집한 뒤 캐시를 지우세요. Drupal이 서브테마의 복사본을 먼저 사용합니다.

베이스 테마의 스타일시트나 스크립트를 빼려면 info 파일에서 다음 줄과 제거할 라이브러리 줄의 주석을 해제하세요: libraries-override: 이미 다음으로 설정되어 있습니다: false. 직접 추가하려면 다음에 라이브러리를 선언하고: northwind_theme.libraries.yml. info 파일의 다음에 나열하세요: libraries. 스타터 키트가 다음에 대해 그렇게 해 두었습니다: global-styling.

6. DXPR Builder에서 편집자에게 클래스 제공하기

서브테마 info 파일의 다음에 선언한 클래스는 DXPR Builder의 클래스 선택기에 나타납니다: dxpr_builder_classes:. 편집자가 클래스 이름을 입력하지 않고도 다크 밴드나 글라스 패널을 적용할 수 있습니다. 다음에서 해당 클래스의 스타일을 지정하되, 적용 대상 DXPR Builder 요소 범위로 한정하세요: dxpr_theme_subtheme.css.

7. 테마와 함께 색상 팔레트 배포하기

서브테마 루트의 다음에 이름 붙은 스킴을 추가하세요: color-settings.json. 각 스킴은 대시보드가 사용하는 것과 같은 키를 설정합니다: base, basetext, link, accent1, accent2, text, headings, card, footer, header, pagetitle 등. 설정 폼의 색상표 목록에 나타나므로 사이트에서 한 번의 클릭으로 브랜드 팔레트로 바꿀 수 있습니다.

8. 나중에 DXPR Theme 업데이트하기

Composer로 베이스 테마 업데이트: composer update drupal/dxpr_theme --with-dependencies.
데이터베이스 업데이트를 실행하고 캐시를 지우세요.
서브테마의 설정 폼을 열어 한 번 더 저장하세요. 새 변수가 반영된 설정 스타일시트가 다시 생성됩니다.
템플릿이나 리전 변경 사항은 릴리스 노트에서 확인하고, 오버라이드한 템플릿은 새 버전과 비교하세요.

테마 작업을 AI 에이전트에게 맡기기

DXPR Theme 8.1.1 이상에는 에이전트 스킬이 들어 있습니다. 프로젝트에서 다음을 실행하세요: drush dxt:setup-ai. 그러면 코딩 에이전트(Claude Code, Codex, Gemini CLI, Cursor)가 테마 설정과 그 의미를 학습합니다. 브랜드를 설명하면 에이전트가 대시보드가 쓰는 것과 같은 설정으로 색상, 타이포그래피, 헤더 레이아웃, 간격을 정해주고 사이트에서 검토하면 됩니다. 다음으로 서브테마를 만들 수도 있습니다: drush dxt:subtheme:create.

DXPR Builder 스킬은 페이지에, Drush Webmaster는 콘텐츠와 뷰에 같은 일을 합니다. 에이전트 스킬 살펴보기.

DXPR Theme 서브테마에 대한 질문

아니요. 색상, 글꼴, 헤더, 푸터, 간격, 레이아웃은 DXPR Theme 대시보드의 설정입니다. 서브테마는 직접 작성하는 CSS, 템플릿 오버라이드, 추가 라이브러리, 코드와 함께 배포하는 팔레트에만 필요합니다.

예. 다음을 실행하면 drush dxt:setup-ai 에이전트가 테마 설정을 알고 브리프대로 바꾸며, 다음으로 서브테마를 직접 만들 수도 있습니다: drush dxt:subtheme:create. 결과는 사이트에서 검토하세요.

DXPR Theme 8.2와 같습니다. Drupal 10.3 이상과 Drupal 11입니다. 스타터 키트의 info 파일에는 이전 버전도 선언되어 있지만, DXPR Theme 8.2는 Drupal 10.3이 필요한 모듈에 의존합니다.

아니요. Composer는 다음만 교체합니다: themes/contrib/dxpr_theme. 서브테마는 다음에 있습니다: themes/custom. 업데이트 뒤에 서브테마 설정 폼을 한 번 저장하면 스타일시트에 새 변수가 반영됩니다.

DXPR Theme 서브테마 만들기(Drupal 11).