Elementor로 애니메이션 엠블럼 로고를 만드는 방법

저자 소개: Roy Eyal, Elementorist @ Elementor

Roy Eyal은 Elementor의 전문 Elementorist이자 디자인을 사랑하고 디자이너와 협력하는 WordPress 웹 개발자입니다.

지난 1년 동안 우리는 여기 Elementor 쇼케이스를 포함하여 이미지를 둘러싼 애니메이션 텍스트의 새로운 디자인 트렌드를 보았습니다. 예를 들어 2020년 8월 쇼케이스에 소개된 Diangelo Santos의 포트폴리오 웹사이트와 2020년 11월 쇼케이스에 소개된 Terrasol이 있습니다.

애니메이션 GIF를 만들 때 사용되는 이 애니메이션 효과를 본 적이 있습니다. 그러나 이러한 GIF를 만들려면 그래픽을 만들고 비디오로 애니메이션한 다음 GIF로 변환할 수 있는 특별한 지식이 필요합니다. 그래픽 디자인 기술을 요구하는 것 외에도 대부분의 사람들에게 너무 많은 시간과 노력이 필요합니다.

이 튜토리얼의 목표는 특별한 그래픽 없이 실제 "라이브" 텍스트(특히 SVG)를 사용하지 않고도 누구나 동일한 효과를 만들 수 있는 방법을 보여주는 것입니다.

더 나은 방법은 두 가지 변형으로 이 효과를 만드는 방법을 보여 드리겠습니다. 하나는 스크롤할 때 엠블럼 텍스트에 애니메이션 효과를 주는 것이고 다른 하나는 엠블럼에 즉시 자동으로 애니메이션 효과를 주는 것입니다.

애니메이션 엠블럼 효과를 사용하면 장식용으로 그래픽의 일부 주위에 회전하는 텍스트를 추가할 수 있습니다(아래에서 몇 가지 예를 보여 드리겠습니다).

이 애니메이션을 제어하는 ​​두 가지 방법 중에서 선택할 수 있습니다.

1. 사용자가 페이지를 탐색할 때 눈길을 끄는 효과를 만드는 Elementor Motion Effects를 사용하여 사용자가 아래로 스크롤할 때 텍스트에 애니메이션을 적용할 수 있습니다.
2. 일부 CSS 코드를 사용하여 텍스트에 자동으로 애니메이션을 적용할 수 있습니다(사용자의 작업 없이도).

다음은 애니메이션 엠블럼 효과의 각 유형에 대한 예입니다.

옵션 1: 모션 효과를 사용하여 스크롤에 대한 애니메이션 엠블럼 효과

옵션 2 : CSS를 사용한 자동 애니메이션 텍스트 효과

이 튜토리얼을 따르고 Elementor에서 자신만의 애니메이션 엠블럼 효과를 만들려면 다음이 필요합니다.

• SVG 파일 – 이 파일을 사용하여 그래픽 주위를 회전할 텍스트를 만듭니다. 첫 번째 단계에서 이것을 만드는 방법을 보여 드리겠습니다.

• CSS 코드 – SVG 파일 내부의 텍스트 스타일을 지정하는 데 사용합니다.

• 자동 애니메이션을 위한 별도의 CSS 코드 – 자동 회전 효과를 사용하려는 경우 CSS를 추가해야 합니다(온스크롤 효과에 대해 Elementor의 내장 모션 효과에 의존하기 보다는).

나는 당신에게 필요한 모든 코드를 제공할 것입니다 – 당신이 해야 할 일은 아래의 튜토리얼을 따라가기만 하면 됩니다.

프로세스를 대략적으로 살펴보면 다음과 같습니다.

1. SVG 텍스트 파일을 설정합니다(제 예제 코드를 시작으로 사용).
2. 아이콘 위젯을 사용하여 SVG 파일을 추가합니다.
3. 사용자 정의 CSS를 추가하여 엠블럼 텍스트의 스타일을 지정하십시오.
4. 배경 그래픽 위에 엠블럼을 배치하려면 절대 위치를 설정하십시오.
5. 애니메이션 효과를 추가합니다(스크롤 시 또는 자동).

파헤쳐보자…

시작하려면 애니메이션을 적용할 텍스트를 표시하도록 SVG 파일을 사용자 정의해야 합니다.

이렇게 하려면 아래 예제 SVG 파일을 다운로드하고 코드 편집기에서 엽니다.

코드 강조 표시가 있는 코드 편집기를 사용하는 것이 좋습니다. 그러면 코드를 훨씬 쉽게 편집할 수 있습니다. Visual Studio Code와 Atom은 모두 무료이며 크로스 플랫폼(PC, Mac, Linux)입니다. 개인적으로 Nova를 사용하지만 macOS에서만 사용할 수 있습니다.

팁 – 코드 편집기가 텍스트를 제대로 강조 표시하지 않으면 SVG를 XML 파일로 볼 수 있습니다. 이렇게 하면 문제가 해결되고 아래 예시 스크린샷과 같은 강조 표시가 표시됩니다.

텍스트를 사용자 정의하려면 "Elementor is Awesome! ..."를 사용하려는 텍스트와 함께 사용합니다. 공간이 제한되어 있으므로 문자 수를 제한해야 합니다. 예제 텍스트와 같은 길이로 유지하려고 합니다.

다음 단계에서 필요하므로 쉽게 액세스할 수 있는 폴더에 파일을 저장합니다.

다음으로 Icon 위젯을 사용하여 Elementor 디자인에 SVG 파일을 추가해야 합니다.

애니메이션 엠블럼을 추가할 배경 그래픽을 이미 추가했다고 가정하겠습니다. 아직 수행하지 않은 경우 일반 이미지 위젯을 사용하여 수행할 수 있습니다.

SVG 파일을 추가하고 사용자 정의하려면:

1. 대상으로 지정하려는 그래픽 위로 새 아이콘 위젯을 끕니다. 즉, 기존 이미지 위젯 위에 아이콘 위젯을 추가합니다.

2. 아이콘 설정의 고급 탭으로 이동합니다. CSS 클래스 필드를 엠블럼 과 동일하게 설정합니다.

3. 콘텐츠 탭으로 돌아갑니다. SVG 업로드 옵션을 클릭하고 이전 단계에서 생성한 SVG 파일을 업로드합니다.

4. 스타일 탭으로 이동하여 텍스트의 기본 색상 을 선택합니다. 이상적으로는 테마와 일치하는 전체 색상입니다.

5. 스타일 탭에서 크기를 늘립니다. 160으로 시작할 수 있지만 올바른 효과를 얻으려면 크기를 조정해야 할 수도 있습니다. 지금 엠블럼 텍스트가 너무 크게 보이더라도 걱정하지 마세요. 다음 단계에서 CSS로 수정할 것입니다.

참고 – SVG 파일을 업로드하는 데 문제가 있는 경우 SVG 파일 업로드가 활성화되어 있는지 확인해야 합니다. WordPress는 기본적으로 SVG 업로드를 비활성화하지만 Elementor는 Icon 위젯에서 SVG 업로드 기능을 사용할 때 SVG 업로드를 자동으로 활성화해야 합니다.

SVG 업로드가 활성화되어 있는지 확인하려면 Elementor → 설정 → 고급으로 이동하여 필터링되지 않은 파일 업로드 활성화 드롭다운이 활성화 로 설정되어 있는지 확인합니다.

이제 CSS를 사용하여 엠블럼 텍스트의 스타일을 지정해야 합니다. 이렇게 하면 아이콘 위젯의 크기를 늘린 후 발생한 모든 문제가 수정됩니다.

이렇게 하려면 섹션 또는 디자인의 전역 CSS에 다음 CSS를 추가합니다.

 .emblem text { font-family: initial; font-size: 16px; font-weight: normal; letter-spacing: 0px; } <code readonly="true">.emblem text { font-family: initial; font-size: 16px; font-weight: normal; letter-spacing: 0px; }</code> .emblem text { font-family: initial; font-size: 16px; font-weight: normal; letter-spacing: 0px; }
			

엠블럼 텍스트에 변경 사항이 즉시 표시되지 않으면 두 가지 문제 해결 단계가 있습니다.

• 아이콘 위젯의 CSS 클래스를 엠블럼 과 동일하게 설정했는지 확인하십시오.
• 페이지를 새로고침하여 Elementor 인터페이스를 다시 로드합니다. 새로 고침하기 전에 변경 사항을 저장했는지 확인하십시오.

텍스트가 많지 않은 경우 더 나아가서 글자를 약간 채워서 엠블럼 효과를 향상시킬 수 있습니다.

여기에는 두 가지 주요 옵션이 있습니다.

1. 글꼴 두께를 굵게 설정할 수 있습니다.
2. 문자 간격을 0픽셀에서 더 높은 숫자로 늘릴 수 있습니다. 3픽셀이 좋은 시작점이지만 기본 설정에 따라 사용할 수 있습니다.

다른 글꼴을 선택할 수도 있습니다. 예를 들어 아래의 사용자 지정 코드에서 세 가지 작업을 수행했습니다.

1. 글꼴을 몬세라트로 변경했습니다.
2. 글꼴을 굵게 표시했습니다.
3. 글자 간격을 3px로 늘렸습니다.

 .emblem text { font-family: "Montserrat", Sans-serif; font-size: 16px; font-weight: bold; letter-spacing: 3px; } <code readonly="true">.emblem text { font-family: &quot;Montserrat&quot;, Sans-serif; font-size: 16px; font-weight: bold; letter-spacing: 3px; }</code> .emblem text { font-family: "Montserrat", Sans-serif; font-size: 16px; font-weight: bold; letter-spacing: 3px; }
			

이제 아이콘 위젯이 대상 이미지 위에 나타나도록 만들 차례입니다. 지금은 배경 이미지 위에 위치하며 분리되어 있습니다.

이렇게 하려면 엠블럼 텍스트의 위치를 ​​픽셀 단위로 완벽하게 제어할 수 있는 절대 위치 지정을 사용할 수 있습니다.

아이콘 위젯에 대한 설정을 엽니다. 그런 다음 고급 탭으로 이동하여 위치 설정을 찾습니다. 다음과 같이 구성합니다.

• 너비 : 인라인(자동)
• 위치 : 절대
• 수평 방향 : 오른쪽
• 오프셋(가로) : -16px
• 수직 방향 : 상단
• 오프셋(세로) : -16px

가로 및 세로 오프셋 모두에 대해 -16을 선택했지만 디자인과 배경 이미지에 가장 적합한 것을 찾기 위해 다른 숫자를 가지고 놀고 싶을 수도 있습니다. 또한 기본 설정에 따라 가로 및 세로 방향을 변경할 수 있습니다.

또한 반응형 설정을 사용하여 모바일 및 태블릿 장치의 오프셋을 조정해야 합니다. 세로 스크롤 문제를 방지하려면 모바일 장치의 가로 오프셋을 0으로 설정해야 합니다.

작업을 완료하려면 엠블럼에 대한 애니메이션을 설정해야 합니다. 다시 말하지만 두 가지 옵션이 있습니다.

1. 사용자가 아래로 스크롤할 때 회전하도록 엠블럼에 애니메이션을 적용할 수 있습니다.
2. 사용자 입력 없이 회전하도록 엠블럼을 자동으로 애니메이션할 수 있습니다.

두 가지를 모두 구성하는 방법을 보여 드리겠습니다. 하지만 이 방법 중 하나만 선택해야 합니다.

사용자가 아래로 스크롤할 때 엠블럼에 애니메이션을 적용하려면 Elementor의 내장 모션 효과를 사용할 수 있습니다.

아이콘 위젯을 열고 고급 탭으로 이동합니다. 모션 효과 → 스크롤 효과 (켜기) → 회전 (편집 아이콘 클릭)을 선택합니다. 그러면 몇 가지 추가 설정이 열립니다. 다음과 같이 구성합니다.

• 방향: 오른쪽으로
• 속도 : 4

엠블럼 텍스트에 자동으로 애니메이션을 적용하려면 다음 CSS 코드를 사용할 수 있습니다. 이미 추가한 CSS에 이 코드를 추가하고 싶을 것입니다.

 .emblem svg { animation-name: spinning_animation; animation-duration: 10s; animation-iteration-count: infinite; animation-timing-function: linear; } @keyframes spinning_animation { from { transform: rotate(360deg); } to { transform: rotate(0); } } <code readonly="true">.emblem svg { animation-name: spinning_animation; animation-duration: 10s; animation-iteration-count: infinite; animation-timing-function: linear; } @keyframes spinning_animation { from { transform: rotate(360deg); } to { transform: rotate(0); } }</code> .emblem svg { animation-name: spinning_animation; animation-duration: 10s; animation-iteration-count: infinite; animation-timing-function: linear; } @keyframes spinning_animation { from { transform: rotate(360deg); } to { transform: rotate(0); } }
			

선택 사항: 접근성을 위해 움직임 줄이기

위 코드 스니펫의 마지막 부분은 기술적으로 선택 사항이지만 애니메이션 엠블럼 효과를 지속적인 움직임에 민감한 사용자에게 더 친숙하게 만들어 웹사이트의 접근성을 향상시키기 위해 추가했습니다.

 @media (prefers-reduced-motion) { .emblem svg { animation-duration: 30s; } } <code readonly="true">@media (prefers-reduced-motion) { .emblem svg { animation-duration: 30s; } }</code> @media (prefers-reduced-motion) { .emblem svg { animation-duration: 30s; } }
			

코드의 이 부분은 장치를 "모션 감소" 모드로 설정한 사용자의 애니메이션 속도를 늦춥니다(예: MacOS에서 모션 감소 또는 iOS에서 화면 모션 감소).

효과를 변경하지 않고 코드 조각의 이 부분을 기술적으로 제거할 수 있지만 특히 웹사이트 접근성과 관련하여 사용자의 기본 설정을 존중하는 것이 항상 좋은 생각이므로 그대로 두는 것이 좋습니다. 사용자 기본 설정을 존중하는 또 다른 예는 사용자가 시스템 기본 설정에서 선택한 경우 Elementor 편집기가 다크 모드를 채택하는 것과 같은 다크 모드입니다.

특히, 코드는 사용자가 선호 감소 동작을 설정 한 경우 30초 (30), 10 초 (10 초)에서 애니메이션을 느리게한다.

또 다른 옵션은 사용자가 장치를 "모션 감소"로 설정한 경우 애니메이션을 완전히 중지하는 것입니다. 접근성 중심 코드 스니펫을 다음 스니펫으로 교체하여 이를 수행할 수 있습니다.

 @media (prefers-reduced-motion) { .emblem svg { animation-duration: none; } } <code readonly="true">@media (prefers-reduced-motion) { .emblem svg { animation-duration: none; } }</code> @media (prefers-reduced-motion) { .emblem svg { animation-duration: none; } }
			

애니메이션 엠블럼 효과는 Elementor로 더욱 눈길을 끄는 디자인을 만드는 깔끔한 방법을 제공합니다. 텍스트, 아이콘 위젯 및 약간의 CSS를 제어하기 위한 SVG 파일만 있으면 됩니다.

자신의 Elementor 디자인에서 애니메이션 엠블럼을 어떻게 사용할 것입니까? 또는 작동 방식에 대해 여전히 질문이 있습니까? 댓글로 알려주세요!