Bricks Builder JSON 제작

Bricks Builder JSON 제작은(는) 무엇을 하나요?

처음 붙여넣거나 가져올 때 깔끔하게 동작하는 완전한 Bricks 디자인을 JSON으로 생성합니다.

기본 산출물

사용자가 다른 요청을 하지 않는 한, 인라인 JSON이 아닌 실제 .json 파일을 작업 공간에 생성합니다. 프로젝트의 폴더 규칙이 있으면 따르고, 그렇지 않으면 bricks-json/{유형}-{슬러그}.json을 사용합니다. 최종 응답에는 파일 경로, 사용한 JSON 형식, 수행한 검증 확인 사항을 명시합니다.

워크플로

0. 먼저 입력 사항 확인 — JSON을 작성하기 전에 두 가지를 결정합니다.
   • rem 기준 — 대상 사이트에서 1rem이 몇 픽셀인지 확인합니다(1rem = ? px). 사용자에게 물어보고, 지정되지 않은 경우 기본값은 16px입니다(html { font-size: 62.5% } 리셋이 적용된 경우 10px). 모든 rem/clamp() 계산 및 참조로부터의 px→rem 변환은 이 기준에 따릅니다. → rem 기준
   • 참조 URL — 사용자가 참조 URL(또는 에셋 URL)을 제공하면 이를 가져와 해당 이미지/비디오/SVG/아이콘을 절대 URL로 참조합니다. → references/external-assets.md
1. 형식 선택 — 클립보드 붙여넣기 vs 템플릿 가져오기 vs 프로그래매틱 삽입 → references/json-formats.md
2. 구조 계획 — 의미론적 섹션 → 컨테이너 → 블록 트리; 카탈로그에서 요소 선택 → references/elements.md
3. 설정으로 스타일 지정 — 모든 _ 스타일 키와 정확한 값 모양 → references/style-settings.md
4. 데이터 연결 — 필요에 따라 동적 태그, 쿼리 루프, 필터 연결 (라우팅 테이블 참조)
5. 검증 — 아래 체크리스트를 수행한 후 제공

형식 빠른 참조

클립보드 (빌더에 붙여넣기) — 섹션 및 페이지 콘텐츠의 기본값:

{
  "content": [ /* 요소 노드의 평면 배열 */ ],
  "source": "bricksCopiedElements",
  "sourceUrl": "https://example.com",
  "version": "2.3.6",
  "globalClasses": [ /* _cssGlobalClasses에서 참조하는 전체 클래스 객체 */ ],
  "globalElements": []
}

요소 노드 (content의 각 항목):

{
  "id": "abc123",
  "name": "heading",
  "parent": "xyz789",
  "children": [],
  "settings": {},
  "label": "선택적 구조 패널 레이블"
}

• id: 고유한 6자 영숫자. parent: 부모의 id 또는 루트 요소의 경우 0.
• 배열은 평면입니다 — 계층 구조는 전적으로 parent + children에 의해 결정됩니다(id가 정확히 교차 참조되어야 함).
• 루트 요소는 일반적으로 section입니다. section을 다른 요소 내부에 중첩하지 마십시오.

작업 라우팅

작업	참조
형식 선택, 클립보드/템플릿/메타 저장소, 프로그래매틱 삽입	references/json-formats.md
요소 카탈로그, 요소별 설정, 중첩 가능 요소	references/elements.md
스타일 키, 값 모양(색상/타이포그래피/테두리/그림자/그라데이션/변환), 반응형 + 호버 문법	references/style-settings.md
섹션/그리드/플렉스 레시피, 카드, 오버레이, 고정, 전체 디자인	references/layout-recipes.md
동적 데이터 태그 {post_title}, 인수, {echo:}	references/dynamic-data.md
ACF (반복자, 그룹, 유연한 콘텐츠 포함), Meta Box, JetEngine, Pods, CMB2	references/acf-providers.md
쿼리 루프 (hasLoop + query), 글/분류/사용자 쿼리	references/query-loops.md
패싯 필터, AJAX 페이지네이션, 더 보기, 무한 스크롤, 실시간 검색	references/query-filters.md
표시/숨기기 조건 (_conditions)	references/conditions.md
상호작용, 애니메이션, 스크롤 트리거 (_interactions)	references/interactions.md
팝업 (템플릿, 트리거, 제한, AJAX)	references/popups.md
템플릿 유형, 조건, 가져오기/내보내기, 헤더/푸터/아카이브/404	references/templates.md
컴포넌트, 글로벌 클래스, 글로벌 변수, 색상 팔레트	references/components-classes.md
테마 스타일, 중단점, CSS 생성 순서	references/theme-styles.md
양식 요소, 액션, 유효성 검사	references/forms.md
WooCommerce 템플릿 및 요소	references/woocommerce.md
PHP: 컨트롤이 있는 커스텀 요소	references/custom-elements.md
PHP: 필터 및 액션	references/hooks.md
참조 URL의 외부 에셋 (모든 이미지/비디오/SVG/아이콘, 핫링크 vs 리호스트)	references/external-assets.md
에셋 로딩, 빌더 권한	references/assets-permissions.md

바로 붙여넣기 가능한 예제 (히어로, 그리드, ACF 루프, 필터링된 아카이브, 헤더/푸터, 팝업…): patterns/ — patterns/INDEX.md 참조.

비협상 규칙

1. 평면 트리 무결성 — 모든 children id는 parent가 다시 가리키는 노드로 존재합니다. 고아나 중복이 없어야 합니다.
2. 검증된 값 모양만 사용 — 색상은 객체({"hex": "#222"} 또는 {"raw": "var(--x)"}), 타이포그래피 키는 CSS 속성 이름("font-size", fontSize 아님), 상자 그림자 오프셋은 values 아래에 중첩, 그라데이션은 colors: [{color, stop}] 사용. 확실하지 않으면 style-settings.md를 확인하고 모양을 추측하지 마십시오.
3. 반응형 문법 — 콜론으로 구분된 설정:중단점:의사: _padding:tablet_portrait, _background:hover, _margin:mobile_portrait:hover. 기본 중단점 키: tablet_portrait (991), mobile_landscape (767), mobile_portrait (478). 데스크탑은 베어 키입니다.
4. 단위는 문자열 — "3rem", "100%", "24px". 숫자만 있으면 Bricks가 px를 추가합니다.
5. 간격 규모 규율 — 하나의 규모(또는 사이트의 글로벌 변수)를 선택하고 디자인 전체에 걸쳐 일관되게 사용합니다.
6. 실제 구조, 채우기 없음 — 섹션/블록의 의미론적 tag 설정(header, nav, article, aside, footer), 페이지당 하나의 h1, 제목 수준 내림차순.
7. 글로벌 클래스 동반 — 요소의 _cssGlobalClasses에 나열된 모든 id는 최상위 globalClasses 배열에 해당하는 전체 클래스 객체가 있어야 합니다.
8. 설정 키를 임의로 만들지 마십시오 — 참조 문서에 문서화되었거나 Bricks 소스에서 발견된 키만 사용하십시오. 알 수 없는 키는 자동으로 무시되어 사용자의 신뢰를 잃게 됩니다.
9. rem 사용 전에 rem 기준 확인 — 묵시적으로 1rem = 16px라고 가정하지 마십시오. 사용자에게 물어보고, 응답이 없을 때만 기본값 16px를 사용하십시오. 참조에서 가져온 px 값은 확인된 기준을 사용하여 변환하십시오.
10. 외부 에셋은 절대 url로 참조하고 id는 사용하지 마십시오 — 참조 URL 또는 에셋 URL이 제공되면 모든 에셋을 절대 URL로 확인하고 미디어 컨트롤의 url/external을 통해 참조하십시오(첨부 파일 id는 사이트 간에 확인되지 않음). 라이선스를 준수하십시오 — 저작권이 있거나 브랜드 에셋을 프로덕션에 핫링크하지 마십시오. → references/external-assets.md

검증 체크리스트 (제공 전 실행)

• JSON 구문 분석 (python3 -m json.tool file.json 또는 동등한 명령)
• 모든 parent/children 참조 확인; id 고유, 6자 영숫자
• source: "bricksCopiedElements" + version 존재 (클립보드 형식)
• 모든 _cssGlobalClasses id가 globalClasses에 일치하는 객체를 가짐
• 값 모양이 style-settings.md와 일치 (색상, 타이포그래피, 간격을 스팟 체크)
• 반응형 키가 유효한 중단점 이름 사용
• 쿼리 루프: hasLoop: true + query.objectType 존재; 필터가 filterQueryId를 통해 실제 쿼리 요소 id를 가리킴
• 동적 데이터 태그가 명시된 필드 제공자와 일치 (예: {acf_*}가 사용자의 필드 이름과 일치)