워드프레스 빌더, 왜 아직도 답답할까요?
워드프레스로 사이트 만들 때 페이지 빌더를 안 쓰는 팀은 거의 없습니다. 그런데 써본 분들은 다 아시죠. 레이아웃은 왜 이렇게 뻣뻣한지, 플러그인은 왜 이렇게 많이 깔아야 하는지, 그리고 결정적으로 왜 이렇게 느린지.
문제는 구조입니다. 대부분의 기존 빌더는 '행(row) → 열(column) → 위젯' 이라는 그리드 문법 위에 세워져 있어요. 이 문법은 2015년에는 혁신이었지만, Figma와 Webflow로 디자인 감각이 올라간 2026년에는 오히려 족쇄가 됐습니다.
Kirki는 이 문법 자체를 버립니다. 무한 캔버스(infinite canvas) 위에서 요소를 자유롭게 배치하고, 반응형 뷰를 동시에 편집하고, Figma 파일을 그대로 임포트합니다. 이번 글에서는 Kirki가 실제로 어떤 문제를 해결하는지, 그리고 Elementor와 비교했을 때 성능·기능·가격 면에서 어떤 트레이드오프가 있는지 정리해볼게요.
참고로 이 글은 Kirki 측의 리뷰 협찬을 바탕으로 작성된 원문을 재구성한 것입니다. 근거자료는 Smashing Magazine 원문 리뷰에서 확인하실 수 있어요.
핵심 기능 한눈에 보기
1. 무한 캔버스(Freeform Infinite Canvas)
행/열 그리드가 아니라 자유 좌표계입니다. 요소를 원하는 위치에 놓고, 겹치고, 배경을 레이어링하고, 인터랙션을 시각적으로 구성할 수 있어요. Figma나 Webflow를 써보신 분이라면 러닝커브가 거의 없다고 보시면 됩니다.
2. 반응형 뷰 동시 편집
데스크톱·태블릿·가로모드·모바일 뷰가 한 캔버스에 나란히 표시됩니다. 모드를 전환하는 게 아니라 동시에 편집하는 방식이에요. 게다가 캐스케이딩 시스템이라 상위 브레이크포인트에서 바꾼 스타일이 하위로 자동 전파됩니다.
/* Kirki의 클래스 기반 스타일링 개념 예시 */
.button-primary {
background: var(--color-brand-500);
padding: var(--space-3) var(--space-5);
border-radius: var(--radius-md);
}
/* 서브클래스로 변형 생성 (부모 스타일 상속) */
.button-primary--secondary {
background: transparent;
border: 1px solid var(--color-brand-500);
}
3. Figma → Kirki 즉시 임포트
Figma 디자인을 그대로 가져오면 기본적으로 반응형 상태로 들어옵니다. 커스텀 브레이크포인트도 무제한 정의 가능하고, 스타일은 작은 화면으로 지능적으로 캐스케이드돼요.
4. 네이티브 다이나믹 콘텐츠
ACF 같은 서드파티 플러그인 없이 커스텀 포스트 타입, 레퍼런스 관계, 동적 템플릿, 동적 SEO를 전부 처리합니다. 이건 국내 워드프레스 유지보수 환경에서 꽤 큰 차이입니다. 플러그인 의존성이 줄어들면 업데이트 충돌 리스크도 같이 줄어들거든요.
5. 클래스 기반 스타일링 + CSS 변수
요소에 스타일을 주면 자동으로 재사용 가능한 CSS 클래스로 저장됩니다. 글로벌 변수로 색상·폰트·스페이싱 토큰을 정의하고, 라이트/다크 모드 전환도 한 번에 처리할 수 있어요.
6. 멀티유저 동시 편집 & 코멘트
워드프레스 생태계 최초로 실시간 협업 편집을 지원합니다. 팀원 커서가 실시간으로 보이고, 변경사항은 색상별로 구분되며, 캔버스 위에 코멘트를 핀으로 남길 수 있습니다. 에이전시-클라이언트 협업 워크플로우에서 체감이 큰 부분이에요.
Elementor vs Kirki: 실측 비교
동일 조건(순정 워드프레스 + Twenty Twenty-Five 테마 + 동일 레이아웃)에서 Lighthouse로 측정한 결과를 정리하면 다음과 같습니다.
| 비교 항목 | Kirki | Elementor |
|---|---|---|
| DOM 구조 | 불필요한 래퍼 없이 깔끔 | 중첩 마크업 다수 |
| 스크립트 로드 | 최소한의 필수 스크립트 | 추가 스크립트 다수 로드 |
| Core Web Vitals | 전 항목 우수 | 단순 레이아웃에서도 저하 |
| 무료 버전 범위 | 상당히 넓음 (워드프레스.org 배포) | 제한적 (핵심 기능 유료 잠금) |
| 유료 시작가 | $59/년 (1사이트, 전 기능 포함) | $60/년 (Essential, 일부 기능 별도) |
| 라이프타임 | $499 1회 결제 | 미제공 |
| 다이나믹 콘텐츠 | 네이티브 내장 | ACF 등 서드파티 필요 |
| Figma 임포트 | 기본 지원 | 별도 플러그인/서비스 |
| 실시간 협업 편집 | 지원 (최초) | 미지원 |
이 기술의 한계와 주의사항
- 러닝커브: 진입장벽이 낮진 않습니다. '간단한 5페이지 사이트'만 필요하면 Elementor가 여전히 더 빠른 선택일 수 있어요.
- 생태계 성숙도: Elementor는 서드파티 애드온 생태계가 압도적입니다. Kirki는 '올인원'을 지향하기 때문에 오히려 확장 옵션이 제한적일 수 있습니다.
- 기존 사이트 마이그레이션: 이미 Elementor로 만든 사이트를 Kirki로 옮기는 건 자동화가 어렵습니다. 신규 프로젝트에서 검토하는 게 현실적이에요.
- 국내 호스팅 이슈: 국내 일부 공유호스팅은 캔버스 기반 에디터의 리소스 사용량에 민감할 수 있습니다. 실서비스 전 스테이징 환경에서 반드시 부하 테스트를 해보시길 권합니다.
국내 개발 생태계에서의 적용 맥락
국내 SI·에이전시 환경에서 Kirki를 검토할 때 특히 눈여겨볼 지점은 **'플러그인 의존성 감소'**입니다. 국내 워드프레스 유지보수 계약은 보통 '월 단위 관리'인데, ACF·Elementor·애드온·커스텀 플러그인이 얽히면 워드프레스 코어 업데이트 때마다 충돌 지옥이 열리죠. Kirki처럼 네이티브로 다이나믹 콘텐츠와 스타일 시스템을 흡수하는 접근은 장기 유지보수 비용을 낮추는 방향과 맞닿아 있습니다.
반대로, 클라이언트가 이미 Elementor에 익숙한 경우는 설득 비용이 발생합니다. '왜 바꿔야 하냐'는 질문에 성능 수치와 유지보수 비용으로 답할 준비가 필요해요.
다음 단계 학습 방향
- Figma → WordPress 워크플로우를 먼저 실습해보세요. Kirki의 진짜 강점은 여기서 나옵니다.
- 클래스 기반 스타일링 시스템에 익숙해지면, 이후 다른 빌더로 옮겨가도 자산이 됩니다.
- Core Web Vitals 측정 자동화(Lighthouse CI 등)를 파이프라인에 넣어두면 빌더 선택의 근거를 데이터로 만들 수 있습니다.
함께 보면 좋은 글
결론부터 말하면, Kirki는 '간단한 사이트를 빨리' 만드는 도구가 아니라 '복잡한 사이트를 오래 유지보수 가능하게' 만드는 도구입니다. 성능·유지보수·디자인 자유도 중 하나라도 포기하기 싫은 팀이라면 진지하게 검토해볼 가치가 있어요.