명심해야 할 7가지 Divi UX 모범 사례

Divi가 매우 다재다능하다는 사실에 우리 모두 동의할 수 있다고 생각합니다. 구축 중인 모든 웹사이트를 사용자 정의하고 개인화할 수 있는 가능성이 무궁무진합니다. 업무 생산성을 높이고 싶다면 이 게시물이 가장 적합할 것입니다. 우리는 당신이 익숙하거나 익숙하지 않을 수도 있는 7가지 Divi UX 모범 사례를 다룰 것입니다. 제가 공유할 7가지 팁은 제가 개인적으로 많이 사용하고 매일 Divi와 함께 작업하면서 도움이 되는 몇 가지입니다.

가자!

1. 마이크로 애니메이션 사용하기

기억해야 할 첫 번째 Divi UX 모범 사례는 과도한 애니메이션 대신 마이크로 애니메이션을 사용하는 것입니다. 웹사이트에 애니메이션이 많을수록 대중에게 '더 커스터마이징'되거나 '고급'되는 것처럼 보이던 시절이 있었습니다. 그러나 그 시대는 끝났습니다. 정말 멋지게 보일 뿐만 아니라 과도한 애니메이션은 웹사이트에서 사람들이 갖는 전반적인 사용자 경험에 기여하지 않습니다. 사실, 그들은 종종 방문자가 정말로 중요한 것을 산만하게 할 수 있습니다. 대신 마이크로 애니메이션을 선택하는 것이 좋습니다. Divi의 애니메이션 옵션을 사용하면 추가하는 애니메이션의 속도와 강도를 사용자 지정할 수 있습니다. 마이크로 애니메이션을 만드는 핵심은 약간 더 긴 애니메이션 지속 시간과 함께 낮은 애니메이션 강도를 사용하는 것입니다.

디자인 요소의 디자인 탭으로 이동

원하는 디자인 요소를 열고 고급 탭으로 이동합니다. 거기에서 애니메이션 옵션을 찾을 수 있습니다.

소량의 애니메이션 강도 사용

애니메이션 유형을 선택하고 애니메이션 강도를 줄일 수 있습니다. 아래로 내려갈수록 애니메이션이 더 미묘해집니다. 애니메이션 지속 시간을 늘리면 애니메이션이 눈에 띄지 않게 진행되지 않도록 할 수 있습니다.

2. 수동으로 응답 최적화

Divi의 가장 큰 장점 중 하나는 만들고 있는 레이아웃도 반응형으로 쉽게 만들 수 있다는 것입니다. 사실, Divi는 이미 대부분의 작업을 수행합니다. 당신이 만드는 모든 것은 당신이 그것을 추가하는 순간부터 반응하게 됩니다. 그 시점부터는 디자인 요소를 수동으로 변경하는 일만 남았습니다. 여기에는 예를 들어 화면 크기에 따라 공유하는 사본의 텍스트 크기를 변경하는 것이 포함됩니다.

이제 행과 열에는 화면 크기에 따라 변경되는 미리 정의된 여백 값이 내장되어 있습니다. 그러나 반드시 이러한 기본값을 사용할 필요는 없습니다. 예를 들어, 저는 많은 인기 있는 웹사이트가 더 작은 화면 크기에서 왼쪽과 오른쪽 여백을 덜 사용한다는 것을 발견했습니다. 그렇게 하면 더 많은 콘텐츠를 가로로 맞출 수 있으므로 세로 스크롤이 덜 필요합니다.

작은 화면 크기에서 사용되는 기본 왼쪽 및 오른쪽 여백은 40px입니다. 작은 화면 크기의 전체 너비를 활용하려면 이 값을 25px로 바꾸는 것이 좋습니다.

절차를 단계별로 살펴보겠습니다.

행 크기 변경

가장 먼저 해야 할 일은 행의 크기 설정에서 다음 옵션을 활성화하여 섹션, 행 및 모듈 사이의 모든 공간을 제거하는 것입니다.

• 이 행을 전체 너비로 만들기: 예
• 사용자 지정 거터 너비 사용: 예
• 거터 폭: 1

섹션 또는 행 패딩 추가

이제 섹션과 행 사이에 충분한 공간이 있어야 합니다. 작업 중인 행이나 섹션에 왼쪽 및 오른쪽 사용자 지정 패딩을 추가할지 여부를 선택할 수 있습니다. 행에 추가해도 섹션의 다른 행에는 영향을 미치지 않습니다. 그러나 반면에 섹션에 적용하면 추가하는 행의 수에 관계없이 이러한 여백이 전체 섹션에서 동일하게 유지됩니다.

• 왼쪽 패딩: 23vw(데스크톱), 30px(태블릿), 25px(전화)
• 오른쪽 패딩: 23vw(데스크톱), 30px(태블릿), 25px(전화)

열 패딩 추가

열과 모듈 사이의 공간도 중요합니다. 다양한 화면 크기에 따라 이러한 값을 사용자 정의할 수 있습니다.

• 열 1 오른쪽 패딩: 1vw(데스크톱), 0vw(태블릿 및 휴대전화)
• 열 2 왼쪽 패딩: 1vw(데스크톱), 0vw(태블릿 및 휴대전화)
• 열 2 오른쪽 패딩: 1vw(데스크톱), 0vw(태블릿 및 휴대전화)
• 열 3 왼쪽 패딩: 1vw(데스크톱), 0vw(태블릿 및 휴대전화)

텍스트 크기 줄이기

더 작은 화면 크기에서 얻은 가로 너비를 100% 활용하고 싶으십니까? 본문 텍스트 크기의 13px는 랩톱의 관점에서 작게 보일 수 있지만 일반적으로 모바일 장치에는 충분합니다. 위의 단계와 함께 휴대전화에서 13px 본문 텍스트 크기를 확인하면 내가 무슨 말을 하는지 알 수 있습니다!

3. 픽셀 대신 뷰포트 단위 사용

이것은 이전 단계에서도 수행한 작업 중 하나입니다. 웹사이트가 모든 데스크톱 화면 크기에서 반응을 유지하도록 하려면 픽셀 대신 뷰포트 단위를 사용하는 것이 좋습니다. 이렇게 하면 27인치 데스크탑 모니터에서도 웹사이트가 디자인한 방식대로 멋지게 보일 것입니다.

반면에 더 작은 화면 크기는 15인치 대 27인치 데스크탑 화면만큼 차이가 나지 않는 경향이 있습니다. 수직 겹침을 만들 때 뷰포트 단위를 사용하는 것이 도움이 될 수 있지만 왼쪽 및 오른쪽 패딩/여백에 대해 픽셀을 사용하면 아무런 해를 끼치지 않습니다.

4. 텍스트 방향 스타일 확장

사람들이 웹사이트에서 무의식적으로라도 빠르게 알아차릴 수 있는 것 중 하나는 구축한 디자인에서 얼마나 일관성이 있는지입니다. 여기에는 페이지 전체에서 사용하는 텍스트 방향이 포함되지만 이에 국한되지 않습니다. Divi의 UX 모범 사례 중 하나는 텍스트 방향을 확인하여 디자인을 마무리하는 것입니다. 잘 생각하고 실행한다면 페이지 내에서 다양한 텍스트 방향을 결합할 수 있습니다. 그러나 하나의 특정 섹션에서 다른 텍스트 방향을 결합하면 더 어려워집니다. 최고의 시나리오; 페이지 전체에 하나의 텍스트 방향을 유지합니다. 그러나 더 많은 실험을 하고 싶다면 섹션당 적어도 한 종류의 텍스트 방향을 유지하십시오. 다른 모든 디자인 요소를 살펴보는 것만으로 이를 수행할 수 있습니다. 또는 작업을 수행할 Divi의 효율성 기능 중 하나를 사용할 수 있습니다.

몇 단계만 거치면 전체 페이지나 섹션에서 동일한 텍스트 방향과 일관성을 사용하고 있는지 확인할 수 있습니다.

해당 단계를 살펴보겠습니다.

텍스트가 포함된 모든 모듈 열기

페이지에서 텍스트가 포함된 모듈을 열고 텍스트 설정으로 이동합니다.

텍스트 방향 옵션을 마우스 오른쪽 버튼으로 클릭

텍스트 설정에서 찾을 수 있는 텍스트 방향 옵션을 마우스 오른쪽 버튼으로 클릭하고 '스타일 확장' 옵션을 선택합니다.

섹션 또는 전체 페이지에서 선택한 텍스트 방향 확장

이제 페이지 전체에서 원하는 텍스트 방향의 일관성에 따라 전체 레이아웃 또는 특정 섹션에서 선택한 텍스트 방향을 확장하도록 선택할 수 있습니다.

5. Visual Builder와 Wireframe 모드 간 전환

Divi의 Visual Builder의 가장 큰 장점 중 하나는 백엔드 또는 프론트엔드에서 편집 중 하나를 선택할 필요조차 없다는 것입니다. 둘 사이를 변경하는 데 문자 그대로 1초 미만이 걸립니다. 나는 당신이 두 가지를 결합하면 최고의 생산성과 개요를 얻을 수 있다고 생각합니다. 특히 레이아웃에서 여러 겹침을 처리하는 경우 와이어프레임 모드로 전환하면 빠르게 변경할 수 있습니다. 또는 페이지의 다른 위치에 특정 디자인 요소를 끌어다 놓으려는 경우 와이어프레임 모드로 전환하고 끝없이 스크롤할 필요 없이 특정 요소를 끌어 더 쉽게 만들 수 있습니다.

그리고 디자인 요소의 모달을 열고 모달이 열려 있는 상태에서 Visual Builder와 Wireframe 모드 사이를 전환할 수 있다는 것을 알고 계셨습니까? 이를 통해 디자인의 백엔드를 변경하고 원할 때마다 새로운 디자인 설정이 적용되는 것을 볼 수 있습니다.

6. 페이지에서 직접 레이아웃 가져오기/내보내기

지금까지 우리는 모두 미리 만들어진 레이아웃, 저장된 레이아웃 및 일반적으로 Divi 라이브러리에 익숙해졌습니다. 그러나 로컬 호스트의 특정 페이지에서 작업 중이고 작업이 완료되면 다음과 같은 번거로움 없이 라이브 웹사이트에 업로드하고 싶다고 가정해 보겠습니다.

• 레이아웃을 Divi 라이브러리에 저장
• Divi 라이브러리로 이동하여 JSON 파일 내보내기
• 라이브 웹사이트의 Divi 라이브러리로 이동
• JSON 파일 업로드
• 라이브 웹사이트 페이지로 이동
• 저장된 레이아웃에서 JSON 파일 업로드

그런 다음 페이지에 있는 가져오기/내보내기 옵션을 사용하면 됩니다. 이렇게 하면 Divi 라이브러리에 전혀 액세스하지 않고도 JSON 파일을 만들 수 있습니다.

레이아웃을 내보낸 것과 같은 방식으로 레이아웃을 새 페이지로 가져올 수 있습니다. 그러나 이 접근 방식을 선택하면 라이브 웹사이트의 Divi 라이브러리로 레이아웃을 가져올 수 없습니다. 페이지에만 직접.

7. 관점을 유지하기 위해 '축소' 옵션을 정기적으로 사용하기

이것은 아마도 내가 가장 좋아하는 Divi UX 기능 중 하나일 것입니다. 나는 우리가 전에 그것을 모두 했다고 확신합니다. 우리가 만든 페이지의 결과를 보려면 새 일반 탭이나 시크릿 창을 엽니다. 그런 다음 Chrome 확장 프로그램 또는 Firefox 추가 기능을 사용하여 전체 페이지의 인쇄 화면을 가져왔습니다. 이 모든 것은 작업 중인 레이아웃에 대한 새로운 관점을 제공하고 모든 것이 전체 페이지 구조에 맞는지 확인하기 위한 것입니다.

나는 여전히 가끔 그렇게 할 것을 권장하지만 짧은 시간 내에 여러 번 할 필요는 없습니다. 대신 Visual Builder에 있는 축소 옵션을 사용하세요. 이것은 당신이 찾고 있던 관점을 제공할 뿐만 아니라 페이지를 떠나지 않고도 빠르게 변경할 수 있도록 도와줄 것입니다.

마지막 생각들

이 게시물에서는 Divi로 웹 사이트를 만들 때 생산성을 높이는 데 도움이 되는 7가지 Divi 모범 사례를 보여 드렸습니다. 이 팁은 모든 종류의 웹사이트를 만들 때 확실히 유용할 것입니다! 질문이나 제안 사항이 있으면 아래 의견 섹션에 의견을 남겨주세요!

주요 이미지 by aurielaki / shutterstock.com