워드프레스 유용한 소식을 전하는 세컨드라이프입니다. 오늘은 엘리멘터의 편집 에디터인 v3가 조만간 v4로 변경될 것이라는 소식을 가지고 왔습니다. v3 에디터와 v4 에디터에는 어떤 차이가 있으며 변경시에 어떤 이점이 있을 지에 대해서 알아보도록 하겠습니다.
엘리멘터의 에디터가 v3에서 v4로 변경될 예정이네요.
엘리멘터의 에디터는 현재까지 v3 버전이었습니다. v3 에디터는 오랫동안 사용자들에게 사랑을 받았는데요. 하지만 불편한 점도 다수 존재했습니다. 최근 엘리멘터는 v4 에디터로의 전환을 계속해서 테스트하고 있는데요. 기존 v3 에디터와 다른게 많은 부분에서 변화를 준 것 같습니다. 어떠한 변화가 v4 에디터에서 생길 것인지에 대해서 알아보겠습니다.
엘리멘터 v3의 3단 편집 항목이 v4에서는 2단으로 변경됩니다.
기존 엘리멘터 v3 에디터는 3단으로 구성되어 있습니다. [콘텐츠], [스타일], [고급]의 3개 탭으로 구성되어 있었는데요. v4에서는 [일반], [스타일]의 2개 항목만으로 구성되어 있습니다. [상호작용] 탭이 있긴하지만 pro에서만 사용되는 기능이고 기본적인 기능에서 제외한다고 한다면 요소 편집 시에는 이제 2개의 탭만으로 편집한다고 보면 될것 같습니다.
기존 v3 에디터는 요소마다 속성 내용이 달라서 편집시에 어려움을 겪었다고 한다면 신규로 변경되는 v4 에디터에서는 동일한 속성 레이아웃을 제공하여 학습 곡선을 많이 줄였다고 하는 것이 장점이라고 하네요.
아직은 v3 요소들과 v4 요소들이 섞여서 v3 요소들은 기존과 같이 편집하고 v4의 요소들은 2가지 탭으로 나타나지만 이것도 언젠가는 통합되어 v4 형태로 수정될 가능성이 높습니다. 아직은 v4 편집기가 정식 버전이 아닌 알파 버전이기에 정식 버전이 나올 경우의 업데이트를 체크해야 할 것 같습니다.
홈페이지의 속도가 빨라집니다.
기존 v3 에디터에서 제작한 홈페이지보다 v4에서 제작한 홈페이지의 속도가 더 빠릅니다. 이는 내부적인 코드의 문제라고 하는데요. 기존 v3 에디터로 생성한 홈페이지의 경우 중첩으로 div 태그를 많이 만들어서 속도의 이슈가 꾸준히 제기되었다고 합니다.
그에 반해 새로운 v4 에디터로 제작된 홈페이지는 중첩을 최대한 줄이고 단일화된 div 태그 사용을 통해 홈페이지의 속도를 더 빠르게 만들다고 하네요. 이를 통해 최소 20~30% 이상의 속도 향상이 있는 것으로 알려져 있습니다. 만약 추후에 홈페이지를 엘리멘터로 만든다고 한다면 v4 편집기가 기본이 되겠죠?
디자인 시스템 관리 도구의 등장 (CSS-First)
이 부분이 v3 에디터와 많이 달라진 부분인데요. 솔직히 이 부분이 새로운 학습 곡선을 높이는데 영향을 미치는 부분이 될 것 같은 느낌이 듭니다. v4 에디터는 CSS-First를 지향하고 있는데요. 기존 v3 에디터가 요소별 편집 지향이었다고 한다면 금번 v4 에디터는 CSS-First를 지향하고 있습니다.
물론 CSS-First라고는 하지만 CSS 코드를 더 많이 사용한다는 의미는 아닙니다. 스타일 탭에서 CSS 형태의 클래스를 지정해서 전체 홈페이지에 동일한 코드를 적용할 수 있도록 수정했다고 합니다. 익숙해지는데는 시간이 좀 걸리겠지만 기존 v3에서 홈페이지 요소별 개별 스타일을 수동으로 적용시키는 것에 비해서는 한번에 전체 스타일로 변경할 수 있다고 하니 이 부분은 작업 시간을 단축시킬 수 있는 기능이 될 것 같습니다.
엘리멘터 v3와 v4 에디터 비교
| 기능 | Elementor v3 | Elementor v4 |
| 주요 접근 방식 | 개별 위젯 스타일링 | 클래스 및 변수 기반 시스템 |
| 패널 구성 | 3개 탭 (Content, Style, Advanced) | 2개 탭 (General, Style) |
| 성능 | 보통 (불필요한 코드 다수) | 우수 (최소화된 깔끔한 마크업) |
| 반응형 자유도 | 제한적 (일부 속성만 지원) | 완전 자유 (모든 속성 지원) |
| 적합한 사용자 | 초보자, 빠른 페이지 제작 | 전문가, 확장성 있는 대형 프로젝트 |
앞으로 엘리멘터를 사용하여 홈페이지를 제작하려고 하시는 분들은 v4 에디터를 미리미리 학습해 두시는 것이 좋을 것 같습니다. 물론 현재 프로젝트에서는 v3 에디터를 통해서 제작을 해야 하겠지만 향후 v4 에디터가 정식 버전으로 출시되기 전에 미리 v4 에디터에 대해 학습을 해두시는 것이 좋을 것으로 생각됩니다.
현 시점에서도 v4 에디터를 알파버전으로 사용할 수 있으니 로컬 워드프레스나 학습용 워드프레스 사이트에 엘리멘터 v4 에디터를 설치해서 홈페이지 제작에 사용해보면 어떨까 하네요. 저도 로컬 워드프레스에 v4 에디터로 전환해서 현재 사용중인데 v3와 v4를 같이 사용할 수 있기 때문에 v4 에디터를 추가하더라도 홈페이지 제작 학습에는 크게 무리가 없는 것 같습니다.
오늘 소개드린 엘리멘터 v4 에디터에 대한 소개가 도움이 되셨다면 좋겠네요. 계속해서 유용한 워드프레스 관련 정보들을 소개해 드리도록 하겠습니다.