속도 비교: 엄청나게 빠른 Divi 5 Visual Builder 탐색

웹 디자이너와 개발자로서 우리는 성능이 전부라는 것을 알고 있습니다. 느린 페이지 빌더가 변경 사항을 로드하거나 렌더링할 때까지 기다리면 창의적인 흐름이 중단되고 생산성이 저하될 수 있습니다. 그렇기 때문에 Divi 5의 주요 목표 중 하나는 Visual Builder의 속도와 성능을 혁신하는 것입니다. 우리는 Divi의 핵심 구조를 심층 분석하고 처음부터 다시 구축하여 매우 빠르고 반응성이 뛰어난 빌더를 만들었습니다.

이 게시물에서는 Divi 5를 이전 버전보다 빠르게 만드는 Visual Builder의 성능 개선 사항을 살펴보겠습니다. Divi 5 Visual Builder의 모든 기능은 속도에 최적화되었습니다.

이제 이것이 웹 디자인 작업 흐름에 어떤 영향을 미치는지, 그리고 느린 페이지 빌더로 다시 돌아가고 싶지 않은 이유를 살펴보겠습니다.

모든 것을 다시 작성하다: Divi 5가 다른 점은 무엇입니까?

Divi 5는 증분 업데이트 그 이상입니다. 성능, 안정성 및 확장성에 중점을 두고 재구성된 Divi의 핵심 기술을 완전히 재작성한 것입니다. 이러한 근본적인 변화로 인해 Visual Builder가 핵심에서 작동하는 방식을 다시 생각하여 훨씬 더 빠르고 강력하게 만들었습니다.

Divi 4는 이미 수백만 개의 웹사이트에서 강력한 도구였지만 그 아키텍처는 10년이 넘었습니다. 우리는 이를 개선하고 한계를 뛰어넘었지만 마침내 새로운 기반을 구축해야 할 때가 왔습니다.

기술적 부채로 인해 특히 복잡한 레이아웃으로 작업할 때 로드 시간이 느려지고 재렌더링이 지연되며 간헐적으로 불안정해지는 현상이 발생했습니다. 이 문제를 해결하기 위해 Divi 5 팀은 성능과 향후 확장성을 위해 최적화하여 전체 프레임워크를 완전히 다시 구축했습니다. 결과는 자명합니다. Divi 5의 모든 작업은 빌더 로딩부터 편집 및 변경 사항 미리보기까지 더 빠르게 수행됩니다.

Divi 5 Alpha 다운로드 Divi 5 데모 사용해 보기 Divi 5 버그

1. 향상된 Visual Builder 재렌더링 속도

하루 종일 도구를 사용하여 작업할 때는 속도가 중요합니다. 아무리 작은 지연이라도 시간이 지나면 더욱 복잡해집니다. 이전 버전의 Divi에서는 디자이너가 새 요소를 추가하거나 스타일을 조정할 때 Visual Builder가 응답할 때까지 몇 초 동안 기다려야 하는 경우가 있었습니다. 이는 모듈과 사용자 정의 스타일로 채워진 수십 개의 섹션이 있는 긴 문서를 작업할 때 특히 두드러졌습니다.

D4(왼쪽)에서 스타일이 깜박이는 것을 확인하세요. 여기서 버튼은 복제된 섹션의 스타일을 완전히 적용하는 데 밀리초가 걸립니다. 이는 섹션을 복제하는 데 D5(오른쪽)보다 속도가 느린 것입니다.

Divi 5를 사용하면 리렌더링 속도가 획기적으로 향상되어 지연 없이 작업할 수 있습니다. Visual Builder는 새 모듈을 추가하거나 보기 모드를 전환하거나 스타일을 조정할 때 즉시 응답합니다. 이러한 수준의 반응성은 특히 많은 미세 조정이 필요한 복잡한 설계 작업을 할 때 큰 차이를 만듭니다.

하지만 빌더를 훨씬 더 빠르게 만들기 위해 정확히 무엇이 변경되었습니까?

더욱 빠른 재렌더링을 뒷받침하는 기술

이러한 수준의 개선을 달성하는 유일한 방법은 처음부터 시작하는 것이었습니다. 우리는 Divi 개발의 지난 10년 동안 배운 모든 것을 바탕으로 현대 기술을 사용하여 새로운 애플리케이션을 만들어 수년간의 기술적 부채를 제거했습니다. 우리는 다양한 상호 작용을 감사하고 병목 현상을 식별하는 데 시간을 보냈습니다. 우리는 여전히 그렇게 하고 있으며, Divi 5는 업데이트할 때마다 점점 더 빨라지고 있습니다.

단축 코드에서 벗어나 복잡한 디자인을 보다 효율적으로 탐색하는 데도 도움이 되었습니다. 내일 게시물에서는 단축 코드 프레임워크가 왜 사라져야 했는지, Divi 5가 어떻게 작동하는지 논의하겠습니다.

다음 비교 영상에서 차이점을 발견하셨나요? Divi 5의 또 다른 큰 개선 사항은 사전 설정 편집 시 향상된 성능입니다! Divi 5에서는 사전 설정이 클래스 기반입니다. 모든 사전 설정 요소가 동일한 클래스를 공유하므로 빌더에서 다시 렌더링해야 하는 횟수가 줄어들고 프런트 엔드에서 필요한 CSS가 줄어듭니다.

2. 더 빠른 로딩 시간(읽기: 더 이상 이중 재로드 없음)

이전 버전의 Divi에서 가장 큰 문제점은 Visual Builder를 시작할 때 두 번 다시 로드하는 것이었습니다. 이는 타사 모듈과 플러그인이 실수로 Visual Builder의 캐시에 동적 데이터를 삽입했을 때 발생했습니다. 이 실수는 너무 널리 퍼져 있어서 이중 재장전이 일반적인 문제점이 되었습니다.

Divi 5는 캐싱이 필요하지 않을 정도로 빠른 속도로 이 문제를 "수정"합니다! 아무것도 캐싱하지 않으므로 캐시가 무효화될 가능성이 없으며 다시는 이중 다시 로드가 발생하지 않습니다.

로딩 시간이 전반적으로 개선되었습니다. Divi 4와 비교했을 때 Divi 5가 얼마나 빨리 로드되는지 확인해 보세요. 테스트에서 로드 속도가 너무 빨라서 멋진 새 프리로더 애니메이션을 볼 기회조차 얻지 못했습니다.

이러한 개선 사항은 대규모 프로젝트를 진행하는 디자이너에게 특히 두드러집니다. 이전에는 Visual Builder에서 대규모 프로젝트를 열면 완전히 로드하는 데 몇 초가 걸렸습니다.

3. 모든 인터페이스 애니메이션을 제거했습니다.

Divi 5의 새로운 인터페이스에서 (현대적인 재설계를 넘어) 가장 눈에 띄는 변화 중 하나는 모든 애니메이션이 제거되었다는 것입니다.

이전 버전에서는 빌더와 상호 작용할 때(예: 새 모듈 추가 또는 보기 모드 전환) 애니메이션이 시각적 피드백을 제공했습니다. 이러한 애니메이션은 일정 수준의 즐거움을 더해 주었지만 특히 느린 시스템에서는 디자인 프로세스에 약간의 지연이 발생했습니다.

Divi 5의 디자인 철학은 다릅니다. 인터페이스는 귀하에게 서비스를 제공하기 위해 존재하는 것이며 그 이상은 아닙니다. 최소한입니다. 방해가 되지 않습니다. 그것은 당신의 디자인과 경쟁하지 않습니다. 멋있어 보이는 건 상관없어요. UI/UX는 속도와 효율성에 기반을 두고 있습니다.

Divi 4에서 사용하는 미묘한 애니메이션(페이드 인 아웃, 슬라이드 인 아웃 등)을 모두 보셨나요? 불필요하게 UI가 느리고 반응성이 떨어지는 느낌을 줍니다. Divi 5에서는 속도보다 스타일에 중점을 둔 접근 방식을 취했습니다. 우리는 빌더의 속도를 높이고 반응성을 높이기 위해 이러한 애니메이션을 제거했습니다. 이제 전적으로 기능에 중점을 두어 빌더에서 수행하는 모든 작업이 최대한 빠르게 수행되도록 합니다.

Divi 5는 여기서 어디로 갈까요?

퍼블릭 알파가 공식적으로 출시되었습니다. 먼저, 지난 몇 달 동안 Divi 5의 Public Alpha를 출시하기 위해 열심히 노력한 동안 여러분의 인내심에 감사드립니다. 이는 결코 작은 일이 아니었으며 우리의 작업은 이제 막 시작되었습니다.

Nick이 목요일에 논의한 것처럼, 우리는 백로그에서 알려진 버그와 커뮤니티에서 현재 발견하고 있는 많은 버그를 수정하는 데 약 한 달을 보낼 것입니다. Divi 5의 Public Alpha는 거의 알파이지만 우리는 이를 프로덕션 준비 상태로 만들기 위해 끊임없이 노력하고 있습니다. 로컬 및 스테이징 사이트에서 Divi 5를 사용해 보고 가능한 모든 버그를 찾아 지원 팀에 보고하면 도움이 될 수 있습니다. 우리는 발견된 각 버그를 분류하고 가장 시급한 버그가 발견되면 작업할 것입니다.

Divi 5 Alpha 보고서 Divi 5 버그 다운로드

테스트할 준비 또는 로컬 사이트가 없는 경우에도 Divi 5의 데모 버전을 사용해 볼 수 있습니다. 이는 새로운 빌더 재설계 및 레이아웃에 익숙해지는 좋은 방법입니다. 그것은 상당한 변화이지만 매우 필요한 변화였습니다.

Divi 5 데모를 사용해 보세요

Divi의 미래는 빠릅니다

Divi 5는 속도와 성능 면에서 획기적인 발전을 이루었습니다. 이제 Divi는 매우 빠른 재렌더링, 더 빠른 로드 시간, 스타일보다 유틸리티를 우선시하는 재설계된 빌더를 통해 더욱 강력하고 반응성이 뛰어납니다. 귀하가 솔로 웹 디자이너이든 대규모 개발 팀의 일원이든 관계없이 이러한 개선 사항을 통해 작업 흐름이 더욱 빠르고 원활하며 효율적으로 개선될 것입니다.

Divi 4를 사용해 본 적이 있다면 Divi 5의 속도에 깜짝 놀라게 될 것입니다. 가장 좋은 부분은? 이것은 시작에 불과합니다. Divi 5 프레임워크를 최적화하고 확장함에 따라 빌더는 더욱 빠르고 강력해질 것입니다. Divi를 통한 웹 디자인의 미래는 눈부시게 빛나고 있습니다. 우리는 이제 막 시작했을 뿐입니다.

앞으로 Divi 5가 단축 코드에서 벗어나 사이트 마이그레이션 시스템과 개발자 관련 이점에 대해 자세히 알아보는 것이 무엇을 의미하는지 이야기하겠습니다. 이러한 업데이트 등을 확인하려면 팔로우하고 구독하는 것을 잊지 마세요.