본문으로 건너뛰기

테마 빌더 기능: 블록 테마 뼈대 생성 및 활성화

Superdav AI Agent v1.12.0은 채팅 인터페이스에서 사용자 지정 블록 테마를 생성하고 배포할 수 있는 두 가지 강력한 기능을 도입했습니다.

개요​

scaffold-block-theme과 activate-theme 기능은 에이전트가 다음 작업을 수행할 수 있도록 합니다.

  • 사용자가 지정한 사양에 맞춰 완전하고, 실제 서비스에 바로 사용할 수 있는 블록 테마를 생성합니다.
  • 수동 개입 없이 사이트에 테마를 자동으로 활성화합니다.
  • 안내되는 디자인 결정을 통해 일관성 있는 시각적 아이덴티티를 만듭니다.

블록 테마 뼈대 생성 (Scaffold Block Theme)​

scaffold-block-theme 기능은 다음을 포함하여 완전한 테마 구조를 가진 새로운 WordPress 블록 테마를 생성합니다.

  • 디자인 토큰이 포함된 theme.json 설정 파일
  • 일반적인 레이아웃을 위한 블록 템플릿 파일
  • 사용자 지정 블록 스타일 및 변형
  • 테마 메타데이터 및 지원 선언

사용 방법​

Superdav AI Agent와의 채팅에서 테마 생성을 요청할 수 있습니다.

"파란색과 흰색 색상 구성, 산세리프 타이포그래피, 전문적인 레이아웃을 가진 'Modern Agency'라는 이름의 블록 테마를 만들어 줘"

에이전트는 다음 작업을 수행합니다.

  1. 대화를 통해 사용자의 디자인 선호도를 수집합니다.
  2. 완전한 테마 구조를 생성합니다.
  3. 필요한 모든 테마 파일을 만듭니다.
  4. 테마를 활성화할 준비를 합니다.

예상 출력​

기능이 성공적으로 실행되면 다음 내용을 확인할 수 있습니다.

  • 테마가 뼈대 생성되었음을 알리는 확인 메시지
  • 테마 이름과 위치
  • 적용된 디자인 토큰 요약 (색상, 타이포그래피, 간격)
  • 활성화 준비 완료 상태

예시 출력:

✓ 테마 "Modern Agency"가 성공적으로 뼈대 생성되었습니다.
  위치: /wp-content/themes/modern-agency/
  색상: Primary #0066CC, Secondary #FFFFFF
  타이포그래피: Inter (sans-serif)
  상태: 활성화 준비 완료

테마 활성화 (Activate Theme)​

activate-theme 기능은 사이트를 새로 뼈대 생성된 테마 또는 기존 블록 테마로 전환합니다.

사용 방법​

테마를 뼈대 생성한 후 즉시 활성화할 수 있습니다.

"Modern Agency 테마를 활성화해 줘"

또는 기존 테마를 활성화할 수도 있습니다.

"Twentytwentyfour 테마로 전환해 줘"

예상 출력​

활성화가 성공하면 다음 내용을 확인할 수 있습니다.

  • 현재 활성화된 테마 확인
  • 이전 테마 이름 (참고용)
  • 테마가 현재 적용된 사이트 URL
  • 테마별 설정 참고 사항

예시 출력:

✓ 테마가 성공적으로 활성화되었습니다.
  활성 테마: Modern Agency
  이전 테마: Twentytwentyfour
  적용된 주소: https://yoursite.com
  참고: 레이아웃 확인을 위해 홈페이지를 확인해 주세요.

워크플로우: 뼈대 생성 및 활성화​

일반적인 워크플로우는 두 기능을 결합하여 사용합니다.

  1. 테마 생성 요청: "내 SaaS 랜딩 페이지용 블록 테마를 만들어 줘"
  2. 에이전트가 테마 뼈대 생성: 파일과 디자인 토큰을 생성합니다.
  3. 검토 및 수정: 필요한 경우 디자인 변경 사항을 논의합니다.
  4. 활성화: "지금 테마를 활성화해 줘"
  5. 확인: 사이트를 방문하여 새로운 디자인이 적용되었는지 확인합니다.

디자인 토큰 및 사용자 정의​

뼈대 생성된 테마는 WordPress 디자인 토큰(theme.json을 통해)을 사용하여 다음을 처리합니다.

  • 색상: Primary, secondary, accent, neutral 팔레트
  • 타이포그래피: 글꼴 패밀리, 크기, 굵기, 줄 높이
  • 간격: 패딩, 마진, 간격 스케일
  • 테두리: 반경 및 너비 토큰
  • 그림자: 높이 레벨

이 토큰들은 theme.json에 중앙 집중화되어 있어, 단 하나의 파일에서 전체 디자인 시스템을 쉽게 조정할 수 있습니다.

제한 사항 및 참고 사항​

  • 테마는 /wp-content/themes/에 뼈대 생성되며 WordPress 명명 규칙을 따라야 합니다.
  • 활성화를 위해서는 WordPress 사이트에 적절한 권한이 필요합니다.
  • 테마 내의 사용자 지정 PHP 코드는 최소화하는 것이 좋습니다. 복잡한 기능은 플러그인을 사용하세요.
  • 블록 테마는 WordPress 5.9 이상에서 가장 잘 작동합니다.

문제 해결​

뼈대 생성 후 테마가 보이지 않음

  • 테마 디렉터리가 존재하는지, 그리고 적절한 권한이 설정되어 있는지 확인하세요.
  • theme.json이 유효한 JSON 형식인지 확인하세요.
  • 테마 이름이 기존 테마와 충돌하지 않는지 확인하세요.

활성화 실패

  • 관리자 권한이 있는지 확인하세요.
  • 테마 디렉터리가 WordPress에서 읽기 가능한지 확인하세요.
  • 자세한 내용은 WordPress 오류 로그를 검토하세요.

디자인 토큰이 적용되지 않음

  • theme.json 구문이 올바른지 확인하세요.
  • 캐싱 플러그인을 모두 비워주세요.
  • 사용 중인 토큰을 WordPress 버전이 지원하는지 확인하세요.

다음 단계​

테마를 활성화한 후 다음 작업을 수행할 수 있습니다.

  • Design System Aesthetics skill을 사용하여 타이포그래피, 색상, 간격을 다듬을 수 있습니다.
  • WordPress 블록 에디터를 통해 개별 블록 스타일을 사용자 정의할 수 있습니다.
  • 테마의 style.css 파일에 사용자 지정 CSS를 추가할 수 있습니다.
  • 특정 페이지 유형을 위한 사용자 지정 블록 템플릿을 만들 수 있습니다.