AK Elementor Studio
by Abanoub Khalil — Senior WordPress & Webflow Developer
규칙 #1 — 이 스킬에서 가장 중요한 규칙
HTML 위젯 = 자바스크립트 <script> 태그 전용.
html 위젯의 유일한 유효한 용도는 다음과 같습니다:
→ JavaScript 동작을 위한 <script> 태그 삽입
그게 전부입니다. html 위젯에는 다른 어떤 것도 넣지 마세요.
제목, 텍스트, 배지, 탐색 링크, 카드, 레이아웃, 가격, 타임라인,
아이콘, 통계 등 어떤 시각적 콘텐츠도 넣지 마세요.
모든 시각적 요소에는 네이티브 Elementor 위젯이 있습니다. 그것을 사용하세요.
규칙 #2 — 절대 JSON 규칙
1. 주석 없음 — /* */ 와 // 모두 JSON 파싱을 깨뜨립니다.
❌ { /* hero */ "id": "a1b2c3d4" } ✅ { "id": "a1b2c3d4" }
2. 후행 쉼표 없음
❌ { "a": 1, "b": 2, } ✅ { "a": 1, "b": 2 }
3. ID = 고유 8자리 16진수만
❌ "id": "hero_section" ✅ "id": "a1b2c3d4"
4. 모든 요소는 반드시 "elements": [] 를 가져야 함
❌ { "widgetType": "heading", "settings": {} }
✅ { "widgetType": "heading", "settings": {}, "elements": [] }
5. isInner 규칙
"content": []의 직계 자식 → "isInner": false
컨테이너 안에 중첩된 컨테이너 → "isInner": true
위젯 (모든 컨테이너 안) → "isInner": false
6. 16진수 색상만 — 절대 색상 이름 사용 금지
❌ "background_color": "white" ✅ "background_color": "#FFFFFF"
단계 0 — 사전 비행 인터뷰
모두 하나의 메시지로 물어보세요. 절대 건너뛰지 마세요.
👋 시작하기 전에 간단한 정보가 필요합니다:
1. 사이트맵 — 페이지는 몇 개인가요? (페이지당 하나의 .json 파일을 생성합니다)
2. ELEMENTOR 버전 — 무료 또는 프로?
Pro: Theme Builder 헤더/푸터, 사용자 정의 CSS, 고정, 스크롤 효과
Free: 헤더/푸터 = 각 페이지 내 일반 섹션
3. 사용자 정의 포스트 타입 — CPT가 있나요?
(서비스, 포트폴리오, 플러그인, 팀, 사용후기 → ACF JSON을 생성합니다)
4. 출력 형식
a) 개별 .json 파일 — 템플릿 → 저장된 템플릿을 통해 하나씩 가져오기 (항상 작동, 무료 + 프로)
b) Elementor 네이티브 내보내기 ZIP — Elementor → 도구 → 가져오기 키트를 통해 가져오기 (추가 플러그인 불필요)
c) Envato 템플릿 킷 ZIP — WordPress에 "Template Kit Import" 플러그인 설치 필요
d) 개별 .json + ACF 필드 그룹 파일
5. 브랜드 — 16진수 색상 코드 + Google Fonts?
(또는 디자인에서 추출합니다)
단계 1 — 입력 감지
| 입력 | 파이프라인 |
|---|---|
| HTML/CSS/JS | 코드 파이프라인 |
| PNG/JPG/WebP/스크린샷/목업/Figma | 시각 파이프라인 |
| PDF 파이프라인 | |
| 텍스트만 | 설명 파이프라인 |
| 기존 Elementor JSON | 편집 파이프라인 |
| 혼합 | 두 파이프라인 모두, 병합 |
전체 위젯 참조 — 모든 요소에 대한 네이티브 위젯
텍스트 및 숫자
| 요소 | 위젯 |
|---|---|
| h1 / h2 / h3 / h4 / h5 / h6 | heading |
| 문단 / 본문 텍스트 | text-editor |
| 애니메이션 카운터 (500+, 10K) | counter |
| 진행률 / 기술 막대 | progress |
동작
| 요소 | 위젯 |
|---|---|
| 버튼 / CTA / 링크-버튼 | button |
| FAQ / 접을 수 있는 행 | accordion |
| 탭 탐색 | tabs |
| 알림 / 정보 배너 | alert |
미디어
| 요소 | 위젯 |
|---|---|
| 사진 / 이미지 | image |
| YouTube / Vimeo / 비디오 | video |
| 이미지 그리드 | image-gallery |
| 이미지 슬라이더 / 캐러셀 | image-carousel |
카드 및 목록
| 요소 | 위젯 |
|---|---|
| 아이콘 + 제목 + 설명 | icon-box |
| 아이콘이 있는 글머리 기호 목록 | icon-list |
| 사진 + 제목 + 텍스트 | image-box |
| 고객 인용문 | testimonial |
레이아웃 도우미
| 요소 | 위젯 |
|---|---|
| 수평선 / 구분선 | divider |
| 수직 빈 공간 | spacer |
유틸리티
| 요소 | 위젯 |
|---|---|
| 소셜 미디어 아이콘 | social-icons |
| 지도 임베드 | google-maps |
| 플러그인/양식 단축코드 | shortcode |
html 위젯 없이 복잡한 요소 해결하기
탐색 모음
구조: 플렉스 컨테이너 (행, space-between)
└── image 위젯 ← 로고
└── icon-list 위젯 ← 탐색 링크 (아이콘을 "none"으로 설정, 각 항목 = 페이지 링크)
또는 여러 button 위젯 (크기: xs, 스타일: link/ghost, 탐색 항목당 하나씩)
└── button 위젯 ← CTA 버튼
배지 / 상태 표시 / 태그
옵션 A: button 위젯
텍스트: "FULL-TIME", 크기: "xs", border_radius: 100px
button_text_color: "#00D4C8", button_background_color: "rgba(0,212,200,0.1)"
링크 href 없음 (또는 "#"로 연결)
옵션 B: alert 위젯
type: "success" / "info" / "warning"
alert_title: "WordPress Developer"
(Pro인 경우 사용자 정의 CSS로 스타일링)
경력 타임라인 / 업무 이력 항목
구조: inner container (열, border-left: 2px solid accent)
└── inner container (행, gap: 8px) ← 날짜 + 상태 행
└── text-editor 위젯 ← "OCT 2024 — PRESENT"
└── button 위젯 (xs, pill) ← "FULL-TIME" 배지
└── heading 위젯 (h3/h4) ← "Senior WordPress & Webflow Developer"
└── text-editor 위젯 ← "InVitro Capital — Cairo, Egypt"
└── text-editor 위젯 ← 설명 문단
└── inner container (행, wrap) ← 기술 태그 행
└── button 위젯 (xs, ghost) ← "WordPress"
└── button 위젯 (xs, ghost) ← "Webflow"
└── button 위젯 (xs, ghost) ← "CMS"
연락처 정보 패널
구조: 스타일 지정 컨테이너 (배경: #141628, border-radius: 12px, padding: 32px)
└── inner container (행) 정보 행당:
└── text-editor 위젯 ← 레이블 "LOCATION" (작게, 흐리게)
└── text-editor 위젯 ← 값 "Cairo, Egypt"
└── inner container (행) 클릭 가능한 행당:
└── text-editor 위젯 ← 레이블 "EMAIL"
└── button 위젯 ← "[email protected]" (스타일: link, href: mailto:)
└── alert 위젯 ← "Currently available" 상태
└── button 위젯 ← "Book a discovery call" CTA
기술 깊이 / 진행률 막대
구조: container (열)
└── text-editor 위젯 ← "SKILL DEPTH" 제목
└── 기술당: inner container (행)
└── text-editor ← "WP" 레이블
└── progress 위젯 ← percent: 95, type: line, bar_color: accent
└── text-editor ← "Expert" 레이블
가격 카드
구조: inner container (열, 배경: #141628, border-radius: 12px, padding: 40px)
└── text-editor 위젯 ← 요금제 등급 레이블
└── heading 위젯 (h2) ← "$99" 가격
└── text-editor 위젯 ← "/month" 기간
└── divider 위젯
└── icon-list 위젯 ← 기능 목록 (체크 표시 아이콘)
└── button 위젯 ← "Get Started" CTA (전체 너비)
사용후기 카드
testimonial 위젯 사용 (네이티브로 모든 처리):
image: 아바타 URL, name: "Client Name", title: "CEO, Company"
content: "Quote text here"
또는 사용자 정의 레이아웃:
inner container (열)
└── icon-list 위젯 (1개 항목, 별 아이콘 × 5) ← 별점
└── text-editor 위젯 ← 인용문 텍스트
└── inner container (행)
└── image 위젯 (border-radius: 50%) ← 아바타
└── inner container (열)
└── heading 위젯 (h5) ← 이름
└── text-editor 위젯 ← 직책/회사
로고 클라우드 / 파트너 로고
image-carousel 위젯 사용:
slides: [logo1, logo2, logo3, logo4, logo5]
slides_to_show: 5, autoplay: yes, navigation: none
image_size: medium
푸터 열 구조
열 1 (브랜드 열):
└── image 위젯 ← 로고
└── text-editor 위젯 ← 태그라인
└── social-icons 위젯 ← LinkedIn, GitHub, Twitter
열 2-4 (링크 열):
└── heading 위젯 (h5) ← "Quick Links" / "Services" / "Contact"
└── icon-list 위젯 ← 링크 (icon: none 또는 arrow, 링크당 하나씩)
하단 바:
└── container (행, space-between)
└── text-editor ← "© 2025 Abanoub Khalil"
└── text-editor ← 개인정보/이용약관 링크 (인라인 <a> 태그)
코드 파이프라인
단계 1 — 목록 작성
모든 요소에 대해: 이름을 지정하고, 네이티브 위젯을 선언하고, 이유를 설명합니다. html 위젯을 고려했다면, 먼저 JS 전용 자체 확인을 적용합니다.
단계 2 — 위젯 할당
html 위젯에 시각적 콘텐츠를 넣지 않습니다. 위의 전체 위젯 참조를 적용합니다.
단계 3 — CSS 추출
CSS → Elementor 설정 매핑 (references/style-map.md). CSS 변수 → 16진수로 해결.
단계 4 — JSON 빌드
섹션별로. 작성하면서 유효성을 검사합니다.
단계 5 — 출력
페이지당 하나의 .json. 주석 없음. 모든 ID는 고유한 8자리 16진수.
시각 파이프라인
단계 1 — 목록 작성 (위에서 아래로)
네비게이션 바:
로고: [위치 / 유형: image 또는 text]
탐색 링크: [각각 나열] → icon-list 항목 또는 button 위젯
CTA 버튼: [텍스트 / 색상 16진수]
배경: [#HEX 또는 투명]
히어로:
BG: [단색 #HEX / 그라디언트 #X→#Y N도 / 이미지 오버레이 / 비디오]
레이아웃: [중앙 정렬 / 텍스트-왼쪽+이미지-오른쪽]
최소 높이: [100vh / 고정 px]
요소:
[배지?] → alert 위젯 또는 button 위젯 (xs, pill)
[h1] → heading 위젯
[h3/부제목] → heading 위젯
[설명] → text-editor 위젯
[CTA 버튼] → button 위젯
[이미지] → image 위젯
섹션 N:
목적: [기능 / 통계 / 소개 / 타임라인 / 연락처 패널 / 사용후기 / CTA]
레이아웃: [1열 / 2열 / 3열 / 4열]
배경: [#HEX]
열당: 각 요소에 대한 네이티브 위젯 나열
푸터: [N개의 열, 열당 콘텐츠]
단계 2 — 색상
다음에 대한 16진수 추출: 기본, 보조, 강조, 제목 텍스트, 본문 텍스트, 흐리게, 밝은 배경, 어두운 배경, 카드 배경, 테두리.
→ 전체 참조 테이블은 references/visual-analysis.md 참조
단계 3 — 타이포그래피
제목 글꼴, 본문 글꼴, 레이블 글꼴 — 패밀리, 두께, 데스크톱/태블릿/모바일 크기.
단계 4 — 레이아웃 매핑
references/section-patterns.md의 컨테이너 그리드를 사용합니다.
단계 5 — 위젯 할당
전체 위젯 참조를 적용합니다. 시각적 콘텐츠에 html 위젯을 사용하지 않습니다.
단계 6 — 간격
섹션 패딩: 60-80px 표준, 100-120px 히어로. 카드 패딩: 24-32px. 간격: 20-30px.
단계 7 — 분석 요약 + JSON
## 🔍 시각 분석 — [페이지]
**감지된 페이지:** [목록]
**스타일:** [어두움/밝음/대담함/미니멀]
| 토큰 | 값 |
|---|---|
| 기본 | #______ |
| 강조 | #______ |
| 제목 텍스트 | #______ |
| 본문 텍스트 | #______ |
| 배경 | #______ |
| 제목 글꼴 | Inter 700 |
**위젯 맵:**
1. 네비게이션 바 → image + icon-list + button
2. 히어로 → alert (배지) + heading + text-editor + button + image
3. 통계 → N× counter 위젯
4. 타임라인 → 항목당 N× [text-editor + button (배지) + heading + text-editor + button 행]
5. 연락처 패널 → 스타일 지정 컨테이너 + text-editor 행 + button 링크 + alert + button
6. 푸터 → image + text-editor + social-icons + icon-list 열
**사용된 html 위젯:** [<script> JS 사용만 나열. 없으면: "없음."]
**가정:** [모든 근사값 나열]
**⚠️ 가져온 후:** 플레이스홀더 이미지 교체, 탐색 링크 업데이트
PDF 파이프라인
단일 PDF → 시각 파이프라인. 여러 페이지 → 페이지당 하나의 템플릿. 선택 가능한 텍스트 → 정확한 복사본 추출.
설명 파이프라인
페이지 유형 질문. 위젯 참조 적용. 기본값 사용: 기본 #1A1A2E, 강조 #005AFF, 글꼴 Inter.
편집 파이프라인
구문 분석 → 찾기 → 변경 → 다시 완전한 유효한 JSON 출력 → 요약.
핵심 스키마
섹션 컨테이너
{
"id": "a1b2c3d4",
"elType": "container",
"isInner": false,
"settings": {
"content_width": "full",
"flex_direction": "column",
"flex_align_items": "center",
"flex_justify_content": "flex-start",
"flex_gap": { "unit": "px", "column": "30", "row": "30", "isLinked": true },
"padding": { "unit": "px", "top": "80", "right": "60", "bottom": "80", "left": "60", "isLinked": false },
"padding_tablet": { "unit": "px", "top": "50", "right": "30", "bottom": "50", "left": "30", "isLinked": false },
"padding_mobile": { "unit": "px", "top": "40", "right": "20", "bottom": "40", "left": "20", "isLinked": false },
"background_background": "classic",
"background_color": "#FFFFFF"
},
"elements": []
}
내부 컨테이너 (열)
{
"id": "b2c3d4e5",
"elType": "container",
"isInner": true,
"settings": {
"width": { "unit": "%", "size": 50 },
"width_tablet": { "unit": "%", "size": 100 },
"width_mobile": { "unit": "%", "size": 100 },
"flex_direction": "column",
"flex_align_items": "flex-start",
"padding": { "unit": "px", "top": "20", "right": "20", "bottom": "20", "left": "20", "isLinked": true }
},
"elements": []
}
위젯
{
"id": "c3d4e5f6",
"elType": "widget",
"widgetType": "heading",
"isInner": false,
"settings": {},
"elements": []
}
CSS → Elementor (빠른 참조)
전체 테이블은 references/style-map.md 참조.
"padding": { "unit": "px", "top": "80", "right": "60", "bottom": "80", "left": "60", "isLinked": false }
"_padding": { "unit": "px", "top": "0", "right": "0", "bottom": "20", "left": "0", "isLinked": false }
"_margin": { "unit": "px", "top": "0", "right": "auto", "bottom": "30", "left": "auto", "isLinked": false }
"typography_typography": "custom", "typography_font_family": "Inter",
"typography_font_size": { "unit": "px", "size": 48 },
"typography_font_size_tablet": { "unit": "px", "size": 36 },
"typography_font_size_mobile": { "unit": "px", "size": 24 },
"typography_font_weight": "700",
"typography_line_height": { "unit": "em", "size": 1.3 },
"typography_letter_spacing": { "unit": "px", "size": -0.5 }
"background_background": "gradient", "background_gradient_type": "linear",
"background_color": "#005AFF", "background_color_b": "#0040CC",
"background_gradient_angle": { "unit": "deg", "size": 135 }
"border_border": "solid",
"border_width": { "unit": "px", "top": "1", "right": "1", "bottom": "1", "left": "1", "isLinked": true },
"border_color": "#E5E7EB",
"border_radius": { "unit": "px", "top": "12", "right": "12", "bottom": "12", "left": "12", "isLinked": true }
"box_shadow_box_shadow_type": "yes",
"box_shadow_box_shadow": { "horizontal": 0, "vertical": 4, "blur": 24, "spread": 0, "color": "rgba(0,0,0,0.08)" }
…
[번역을 위해 축약됨]