최근 인기 워드프레스 테마와 페이지 빌더는 알림판 내에서 테마 빌더 등을 도입하여 알림판 내에서 전체 사이트 편집이 가능하도록 하는 추세입니다. 이러한 전체 사이트 편집 기능은 Divi 테마에서 먼저 도입했습니다. Divi 테마는 최근 디자인 작업을 쉽게 할 수 있도록 배경 마스크 및 패턴을 도입하여 배경에 다양한 효과를 적용할 수 있도록 했습니다.
워드프레스 Divi 테마 배경 마스크 및 패턴 도입
지난 주, Elegant Themes는 디자인 작업을 보다 수월하게 할 수 있는 배경 마스크와 배경 패턴(Background Masks And Patterns)이라는 새로운 기능 두 가지를 도입했습니다.
배경 마스크(백그라운드 마스크; Background mask)는 음영 공간을 사용하여 배경을 프레임화하고 새로운 모양을 만들어냅니다. 배경 마스크는 배경 요소 위에, 콘텐츠 아래에 위치합니다. 이 기능은 배경색, 그라데이션, 이미지 및 동영상을 프레임화하고 해당 요소들만 마스크를 통해 노출되어 새로운 모양을 만들어내는 방식으로 작동한다고 합니다.
마스크는 SVG를 사용하여 만들어지므로 매우 선명하고 가벼우며 요소의 크기에 자동으로 일치하게 됩니다.
Divi에는 다양한 마스크가 포함되어 있습니다. 마스크는 좌우 반전, 회전 및 반전되어 더 많은 모양을 만들어 될 수 있습니다. 백그라운드 마스크는 모듈, 컬럼, 행 및 섹션 등 모든 요소에 적용이 가능합니다.
다음 영상에서 볼 수 있듯이 각 마스크를 커스텀하여 다양한 모양을 연출할 수 있습니다.
배경 마스크는 배경 패턴(백그라운드 패턴; Background Pattern)과 함께 사용할 수 있습니다. 배경 마스크는 배경색, 그라데이션 및 이미지 위에, 마스크 아래에 위치합니다. 패턴은 배경 요소 위에 입혀져서 페이지에 무늬를 추가하는 데 사용할 수 있습니다.
12가지 Divi용 무료 배경 마스크 및 패턴 디자인 다운로드
Elegant Themes는 블로그를 통해 Divi용 배경 마스크 및 패턴 디자인을 무료로 다운로드할 수 있도록 공개했습니다. "Download 12 FREE Background Mask and Pattern Designs for Divi"에서 무료 배경 마스크 및 패턴 디자인을 다운로드할 수 있습니다.
블로그에서 배경 마스크와 패턴 파일을 다운로드하여 압축을 해제한 후에 워드프레스 알림판 > Divi > Divi Library로 이동하여 Import & Export를 클릭하여 임포트할 수 있습니다.
Divi 테마를 최신 버전으로 업데이트하면 모듈이나 섹션 설정의 Background 부분에 배경 패턴과 배경 마스크를 지정할 수 있는 옵션이 추가되어 있음을 확인할 수 있습니다.
Mask Transform에서 좌우회전, 상하회전, 반전 등의 옵션을 적용하여 한 가지 패턴에 대해서도 여러 가지 효과를 낼 수 있어 재미있게 작업할 수 있는 것 같습니다.
마치며
Divi에 백그라운드 마스크와 백그라운드 패턴 기능이 도입되었다는 소식을 들었을 때에는 '편의 기능이 추가되었는가 보다'라고 생각했지만, 실제로 사용해보니 쉽게 다양한 디자인 효과를 낼 수 있어 놀랐습니다.
Divi 테마를 사용하고 있다면 이번에 새로 추가된 배경 마스크와 패턴 기능을 사용해보시기 바랍니다.
Elegant Themes에서는 매주 새로운 레이아웃 팩을 공개하고 있습니다. 앞으로 공개되는 레이아웃 디자인에는 배경 마스크와 패턴 기능이 적용되지 않을까 생각됩니다.
댓글 남기기