워드프레스 빌더, 이제는 '무한 캔버스' 시대입니다
워드프레스로 사이트를 만들 때 페이지 빌더는 이제 선택이 아니라 기본값이 됐어요. 그런데 막상 써보면 아쉬운 점이 한두 개가 아니죠. 행(Row)과 컬럼(Column)에 갇힌 레이아웃, 기능 하나 쓰려고 서드파티 플러그인을 서너 개씩 깔아야 하는 번거로움, 그리고 무엇보다 사이트를 무겁게 만드는 지저분한 코드 출력.
여기서 소개할 Kirki는 이 '빌더의 숙명' 같은 문제들을 정면으로 다시 설계한 워드프레스용 노코드 비주얼 빌더예요. 핵심은 세 가지입니다.
- 무한 캔버스(Infinite Canvas): Figma나 Webflow처럼 자유롭게 배치·겹치기·레이어링이 가능한 캔버스
- 올인원(All-in-one): ACF, 팝업 빌더, 폼 빌더, 다이나믹 콘텐츠까지 서드파티 없이 내장
- 클린 코드 출력: 불필요한 래퍼(wrapper)와 스크립트를 최소화한 DOM
기존 빌더들이 '기능을 얹는 방식'으로 진화했다면, Kirki는 처음부터 다시 그린 쪽에 가까워요. 이 글에서는 가격, 성능, 사용성, 기능, 테마 호환성 순으로 기존 빌더와 무엇이 다른지 짚어볼게요. 근거자료는 Smashing Magazine 리뷰 원문에서 확인할 수 있어요.
성능: 같은 조건에서 돌려보니 차이가 확실했습니다
성능은 사용자 경험, SEO, 전환율에 직결되니까 그냥 넘어갈 수 없죠. 원문에서는 동일한 조건에서 Kirki와 Elementor를 비교했습니다.
테스트 조건
- 클린 워드프레스 설치
- 동일 테마: Twenty Twenty-Five
- 동일 레이아웃 구조 및 디자인 요소
- Lighthouse 성능 점수 측정
결과 요약
| 항목 | Kirki | Elementor |
|---|---|---|
| DOM 구조 | 단순, 래퍼 최소 | 중첩된 마크업 다수 |
| 추가 스크립트 | 최소 | 다수 로드 |
| Lighthouse 성능 | 우수 | 상대적으로 낮음 |
| Core Web Vitals | 양호 | 개선 필요 |
단순 레이아웃에서도 Elementor는 중첩 마크업과 추가 스크립트가 붙어 성능이 떨어졌고, Kirki는 훨씬 깔끔한 DOM을 생성했습니다. 코드 출력 예시는 아래와 같은 차이를 보여줍니다.
<!-- Kirki 출력 예시: 불필요한 래퍼 없이 시맨틱하게 -->
<section class="hero">
<h1 class="hero__title">Welcome</h1>
<p class="hero__desc">Clean output</p>
</section>
<!-- Elementor 출력 예시: 중첩 래퍼 다수 -->
<div class="elementor-element elementor-widget">
<div class="elementor-widget-container">
<div class="elementor-heading-title">
<div class="elementor-size-default">Welcome</div>
</div>
</div>
</div>
성능과 코드 품질이 우선순위라면, 이 지점에서 Kirki가 앞선다고 볼 수 있어요.
핵심 기능 톺아보기
1. 무한 캔버스와 동시 반응형 편집
Figma를 써봤다면 바로 익숙해질 인터페이스예요. 데스크톱·태블릿·가로·모바일 뷰가 한 화면에 나란히 펼쳐져 있어서, 데스크톱을 만지다가 모바일 깨짐을 즉시 확인하고 고칠 수 있습니다. 게다가 캐스케이딩 시스템이라 큰 브레이크포인트의 변경이 작은 화면으로 자동 전파돼요.
2. Figma → Kirki 임포트
Figma 디자인을 그대로 임포트하면 기본적으로 반응형 상태로 들어옵니다. 커스텀 브레이크포인트도 무제한으로 정의할 수 있어요.
3. 다이나믹 콘텐츠 내장 (ACF 불필요)
커스텀 콘텐츠 타입·필드, 레퍼런스 관계, 다이나믹 템플릿, 동적 SEO까지 코드 없이 처리됩니다. 기존에는 ACF + 커스텀 코드로 하던 작업이에요.
4. 클래스 기반 스타일링 + CSS 변수
스타일을 지정하면 재사용 가능한 CSS 클래스로 자동 저장돼요. 글로벌 변수(색상·폰트·간격)와 조합하면 라이트/다크 모드 전환도 한 번에 됩니다.
5. 비주얼 인터랙션 빌더
스크롤 애니메이션, 호버·클릭 효과, 타임라인 기반 다단계 애니메이션까지 비주얼로 구성할 수 있어요. 텍스트는 글자·단어 단위로 애니메이션 지정이 가능합니다.
6. 멀티유저 동시 편집 & 코멘트
워드프레스 최초로 실질적인 동시 편집을 지원합니다. 팀원 커서가 실시간으로 보이고, 변경 사항은 색상으로 구분·귀속되며, 캔버스 위에 코멘트를 남길 수 있어요.
7. 페이지 감사(Page Audit)
발행 전 alt 텍스트 누락, 깨진 링크, 중복 클래스, 접근성 이슈를 자동 스캔합니다.
가격 및 플랜
| 플랜 | 가격 | 특징 |
|---|---|---|
| Free | $0 | 무한 캔버스 포함, 실사용 가능한 수준 |
| Starter | $59/년 | 1개 사이트, 모든 프리미엄 기능 |
| Lifetime | $499 (1회) | 무제한 사용, 갱신 없음 |
Elementor Pro Essential이 연 $60부터 시작하면서도 일부 기능을 페이월 뒤에 두는 것과 비교하면, Kirki는 처음부터 전부 포함하는 구조예요.
주의사항 및 한계
- 러닝 커브: 무한 캔버스는 자유도가 높은 만큼, 기존 'Row/Column' 사고방식에 익숙한 사용자에게는 초반 적응이 필요해요.
- 단순 사이트엔 오버스펙: 5페이지짜리 정적 사이트를 빠르게 뽑는 게 목적이라면 Elementor 같은 가벼운 선택지가 여전히 유효합니다.
- 생태계 성숙도: 서드파티 애드온 생태계는 Elementor가 여전히 압도적이에요. Kirki는 '애드온이 필요 없는' 방향으로 승부하는 만큼, 특수한 니즈는 자체 대응이 필요할 수 있어요.
다음 단계 학습 방향
- 무료 버전으로 무한 캔버스에 익숙해지기
- 클래스 기반 스타일링 + 글로벌 변수로 디자인 시스템 구축
- Figma 임포트 → 다이나믹 콘텐츠 → 인터랙션 순으로 확장
- 팀 프로젝트라면 동시 편집·코멘트 워크플로우 정착
결론: '빌더의 숙명'을 다시 쓴 쪽에 가깝습니다
정리하면 Kirki는 기존 워드프레스 빌더가 오랫동안 안고 있던 트레이드오프 — 자유도 vs 성능, 편의성 vs 코드 품질 — 를 다시 설계한 시도예요. 깔끔한 코드 출력, 무한 캔버스, 올인원 기능 세트는 분명 차별점이고, 무료 버전만으로도 실사용이 가능한 수준이라는 점이 특히 인상적입니다.
한국 개발 생태계에서의 적용 맥락
국내 SI·에이전시 환경에서는 '납품 후 유지보수'가 큰 비중을 차지하죠. 이때 클린 DOM과 클래스 기반 스타일링은 유지보수 비용을 크게 낮춰줍니다. 클라이언트가 나중에 디자인을 손봐도 클래스 하나만 수정하면 전체 반영되니까요. 다만 국내 호스팅 환경(카페24, 가비아 등)에서 성능 이점을 온전히 누리려면 캐싱·CDN 세팅을 함께 점검하는 걸 권합니다.
함께 보면 좋은 글
빌더 선택은 결국 '무엇을 만들 것인가'의 문제예요. 픽셀 단위 컨트롤과 확장성을 원한다면 Kirki, 빠른 프로토타이핑이 목적이라면 기존 도구도 여전히 유효합니다.