웹 디자이너와 개발자에게 좋은 소식, Divi AI 도구 세트 에 획기적인 추가 기능이 출시되었습니다. 2023년 10월, Divi는 Divi 생태계 내에서 웹 개발을 단순화하는 도구인 Divi Code AI라는 AI 툴킷에 새로운 추가 기능을 발표했습니다. Divi Code AI는 코드를 작성하고, CSS를 생성하고, Visual Builder를 통해 Divi 웹사이트를 사용자 정의하는 데 귀중한 지원을 제공하는 고유한 기능을 보유하고 있습니다. 이제 사용자는 모든 Divi 모듈의 복잡성에 정통하고 노련한 프런트 엔드 웹 개발자의 전문 지식을 활용할 수 있습니다. 이 블로그에서는 Divi Code AI가 Divi 웹 디자인 경험을 어떻게 변화시켜 더 큰 효율성과 향상된 수준의 즐거움을 약속하는지 살펴봅니다.
AI 코딩으로 웹사이트 맞춤화
사용자는 Divi의 코드 필드 아래에 있는 새로운 AI 아이콘을 쉽게 찾을 수 있습니다. 이 아이콘을 클릭하기만 하면 개인은 특정 요구 사항을 Divi AI에 전달할 수 있습니다. 사용자 정의되는 요소와 편집 중인 필드의 특성에 따라 Divi AI는 현재 작업에 맞게 신속하게 응답을 조정합니다.
예를 들어 사용자가 Divi에서 기본적으로 사용할 수 없는 디자인 기능인 그라데이션 텍스트를 제목에 통합하려는 경우 Divi AI에 필요한 CSS를 생성하도록 요청하면 됩니다. 몇 분 안에 제목이 놀라운 그라데이션 효과로 장식됩니다.
사용자는 Divi AI와 지속적인 대화에 참여하여 결과를 미세 조정할 수 있습니다. 영상 시연에서 사용자는 초기 경사도가 다소 약해진 느낌을 받았고, 이에 따라 Divi AI에 강도를 높여달라고 요청했습니다. 이제 결과는 이상적인 그라데이션으로 나타나 원하는 생동감을 얻습니다.
놀라운 웹사이트 만들기
최고의 무료 페이지 빌더 Elementor와 함께
지금 시작맞춤 요소 만들기
Code 모듈은 HTML, CSS, JavaScript를 쉽게 처리할 수 있는 능력을 자랑하며 Divi Code AI의 빛나는 별입니다. 사용자는 Divi AI에 30초 지연 팝업을 생성하도록 요청하여 방문자가 팝업 모양을 자유롭게 설명할 수 있도록 뉴스레터를 구독하도록 초대할 수 있습니다. 몇 분 안에 Divi AI는 쉽게 코드를 생성하여 웹 사이트 방문자의 관심을 끄는 눈길을 사로잡는 효과적인 팝업을 생성합니다.
Divi AI는 코드 모듈과 관련하여 광범위한 기능을 자랑합니다. 영웅의 제목에 대한 타이핑 효과나 Divi 섹션을 편리하고 닫을 수 있는 플로팅 사이드바로 변환하는 등의 기능을 쉽게 통합할 수 있습니다. 사용자가 Divi AI와의 상호 작용에 익숙해지면 흥미로운 가능성의 영역이 눈앞에 펼쳐집니다.
모든 모듈에 대한 자유 형식 CSS 옵션
그들은 모든 Divi 모듈에 걸쳐 주목할만한 개선 사항을 구현했습니다. 이는 사용자가 "선택기" 의사 클래스를 사용하여 모듈에 초점을 맞추고 기본 요소의 스타일을 지정할 수 있는 자유 형식 CSS 기능입니다. 예를 들어 Blurb 모듈을 편집할 때 아래와 같은 CSS 규칙을 작성하여 상자 그림자를 쉽게 적용하고 IMG 및 H3 요소의 모양을 조정할 수 있습니다.
selector { <span class="webkit-css-property" aria-label="CSS property name: box-shadow">box-shadow</span><span class="styles-name-value-separator">: </span><span class="value" aria-label="CSS property value: 0 10px 20px 0 #000">0 10px 20px 0 #000</span><span class="styles-semicolon">; }</span>
selector img { border-radius: 100px; border: 5px solid #000; }
selector h3 { margin-top: 20px; }이 추가 기능은 Divi AI에 매우 귀중한 것으로 입증되어 귀하의 요청을 충족하고 전체 모듈을 손쉽게 사용자 정의하는 데 필요한 유연성을 제공합니다.
AI가 생성한 CSS 사용자 정의
새로운 자유 형식 CSS 분야에 Divi Code AI를 활용한 것은 놀라운 경험이었습니다. 아래 비디오 데모에서 사용자는 Divi AI가 일련의 사용자 정의를 쉽게 실행하는 것을 볼 수 있습니다. 지침은 명확합니다. 이미지를 원형 모양으로 변환하고, 미묘한 상자 그림자를 추가하고, 반투명 그라데이션으로 이미지를 오버레이하고, 호버로 트리거되는 확대 애니메이션을 적용하는 것입니다.
Divi AI는 Divi 모듈 구조에 대한 깊은 이해와 CSS 숙련도 덕분에 일반적으로 이러한 복잡한 작업을 초기 시도에서 성공적으로 처리하거나 원하는 결과에 놀라울 만큼 가깝게 가져옵니다.
Divi 코드베이스
Divi Code AI를 차별화하는 것은 Divi 모듈 코드베이스에 대한 미세 조정으로, 다른 대규모 언어 모델에 비해 뚜렷한 이점을 제공합니다. Divi 모듈 클래스 및 HTML 출력에 대한 친숙함 덕분에 모호한 요청을 이해하고 사용자 프롬프트 내에서 Divi 관련 용어를 인식하는 데 탁월합니다.
예를 들어, 아래에 소개된 비디오에서 사용자는 Divi Code AI에 Blurb 및 Button 모듈의 모양을 사용자 정의하기 위한 CSS를 작성하도록 지시합니다. 놀랍게도 Divi Code AI는 Blurb 및 Button 요소의 특성을 본능적으로 식별하여 관련 클래스를 정확하게 찾아냅니다. 이러한 정밀도를 통해 첫 번째 시도만으로 정확한 맞춤 설정을 제공할 수 있습니다.
편리한 코딩
Divi Code AI는 코드를 미세 조정할 수 있는 사용자 친화적인 빠른 작업을 제공합니다. 단 한 번의 클릭만으로 자동으로 최적화하고 형식을 지정하며 이전 브라우저와의 호환성을 향상할 수 있습니다. 또한 프롬프트를 사용하여 코드를 유연하게 수정하여 무한한 창의적 가능성을 열어줍니다.
클라우드 기반 코드 조각 라이브러리
Divi AI는 완벽하지 않을 수 있지만 사용자는 대화를 지속하고 AI와 협력하여 원하는 결과를 개선할 수 있습니다. 사용자는 "재시도"를 요청할 수도 있습니다. 시도할 때마다 Divi AI는 약간 다른 결과를 생성하며 몇 번의 시도 후에 원하는 솔루션을 찾는 경우가 많습니다.
웹 개발에 대한 기본적인 이해가 있는 사람이라도 Divi AI는 웹 사이트 맞춤화를 가속화하고 이전에는 전문가의 참여를 통해서만 달성할 수 있었던 구체적인 결과를 얻을 수 있습니다.
마무리
Divi Code AI 는 단순한 기술 발전 그 이상입니다. 이는 웹 디자인 세계의 판도를 바꾸는 일입니다. Divi Visual Builder 에서 바로 숙련된 프런트 엔드 웹 개발자의 기능을 활용할 수 있는 기능을 사용자에게 제공합니다.
숙련된 웹 디자이너이든 현장 초보자이든 Divi Code AI는 향상된 효율성과 사용자 정의의 문을 열어줍니다. Divi Code AI로 웹 디자인의 미래를 경험해 보세요.
