Pushing the Web Forward: Address Most Web Animation Limitations with One Tool

요즘 대부분의 웹 사이트 빌더에서는 개체의 크기나 불투명도를 변경하거나 사전 설정을 제공하는 간단한 마이크로 애니메이션 생성을 허용합니다. 보다 복잡한 애니메이션의 경우 코딩 방법을 알아야 합니다. 코딩 없이 웹 사이트를 만드는 데 도움이 되는 디자인 도구인 Readymag 는 제어 가능한 다단계 및 다중 매개 변수 애니메이션, Lottie 애니메이션 지원, 웹 사이트 디자인을 한 단계 더 끌어올릴 수 있는 내부 효과 등 고급 애니메이션 도구 상자를 제공합니다. 애니메이션 옵션 외에도 Readymag는 빈 레이아웃, 구독 내에서 사용할 수 있는 5,000개 이상의 글꼴, 효율적인 협업을 위한 내부 도구, 조정 가능한 SEO 설정을 통해 완전한 창작의 자유를 제공합니다. 이 기사에서 Readymag의 제품 디자이너인 Alexander Sherman은 Readymag 애니메이션의 성능과 적용 가능성을 설명하고 웹 사이트를 보다 대화형으로 만들기 위한 창의적인 팁을 제공합니다. 부피가 큰 타임라인은 잊어버리고 최대 20단계로 여러 트리거에 효과를 추가하세요. Readymag는 애니메이션에 대한 보편적인 접근 방식을 제공합니다. 편집기에서 바로 다단계 애니메이션을 만들고 편집할 수 있으며 텍스트, 아이콘, 그림, 버튼, 슬라이드쇼 등 레이아웃을 구성하는 구성 요소인 모든 위젯에 적용할 수 있습니다. Readymag 위젯은 다음과 같이 사용할 수 있습니다. 개별적으로 또는 그룹화되어 하나의 단위로 작동하도록 강제됩니다. 또한 별도의 트리거와 단계를 통해 선형 작업과 순차적 시나리오를 실행할 수 있습니다. 트리거는 동작(예: 이동 또는 불투명도 변경)을 호출합니다. Readymag에는 로드 시, 스크롤, 마우스 오버, 클릭 시 작업을 호출하는 4가지 트리거가 있습니다. 트리거를 할당한 후 최대 20단계를 사용하여 작업을 순서대로 구성할 수 있습니다. 위치, 불투명도 등 각 단계에 별도의 다양한 매개변수를 할당하고 맞춤 이징을 설정할 수 있습니다. 또한 단계를 다르게 순환하는 옵션도 있습니다. 예를 들어 한 단계 동안 애니메이션의 일부를 재생한 다음 두 번째, 세 번째, 네 번째 단계를 함께 반복할 수 있습니다. 우리는 사용자 친화성과 전체적인 창의성을 위해 번거로운 타임라인 개념을 버리고 단계와 지연을 결합하여 시간에 맞춰 모션을 전개하는 더 간단한 방법을 도입했습니다. 각 단계에 지연을 할당할 수 있으며, 이 지연은 시각화되지 않은 "타임라인의 지점"이 됩니다. Readymag 도구 상자를 사용하여 애니메이션 게임에 추가할 수 있는 몇 가지 트릭은 다음과 같습니다. 콘텐츠 로딩을 시뮬레이션합니다. 이 트릭은 사용자가 페이지를 아래로 스크롤할 때 물리적인 상호 작용 감각을 제공합니다. Readymag에서 개체의 불투명도를 80에서 100으로 변경하고 조금 위로 이동하여 볼륨을 생성하면 이 효과를 얻을 수 있습니다. 랜딩 페이지를 덜 선형적이고 더 반응적으로 만드는 훌륭한 솔루션입니다. 프롬프트 컨텍스트. 텍스트 애니메이션은 사용자의 시야 내에 컨텍스트를 유지하는 데 도움이 됩니다. 예를 들어, 페이지에는 두 개의 텍스트 열이 있습니다. 왼쪽 부분의 헤드라인과 오른쪽 부분의 텍스트 본문입니다. 오른쪽 텍스트가 끝날 때까지 스크롤 시 왼쪽 헤드라인을 고정할 수 있습니다. 프로세스를 시연합니다. 복잡한 프로세스와 다층 구조는 말과 정적인 그림으로 이해하기 어려운 경우가 많으므로 단계별로 전개하는 것이 중요합니다. 프로세스 또는 해당 구성 요소에 대한 비디오를 별도로 녹화할 수 있습니다. 그러나 독립적으로 호스팅되고 깔끔하게 포함되어야 하며 사용자가 계속 시청할 것이라는 보장은 없습니다. 스크롤 애니메이션을 통해 프로세스를 보여주면 메시지를 전달할 가능성이 더 높아집니다. 베지어 곡선 기반 이징 및 경로를 사용하여 모든 움직임을 자연스럽게 만드세요. 2023년 말에 Readymag는 베지어 곡선 조작을 추가했습니다. 이번 릴리스에는 애니메이션을 더욱 자연스럽고 다양하게 만드는 데 도움이 되는 두 가지 기능이 함께 제공됩니다. 첫 번째 기능은 베지어 곡선을 통해 제어되는 맞춤 이징입니다. 두 번째는 곡선에 의해 제어되는 모션 경로입니다. 이전에는 Readymag의 이징이 간단한 이징 및 아웃을 위해 사전 프로그래밍되었습니다. 이것이 가장 일반적인 유형이지만 때로는 디자이너가 자신만의 레시피를 만들고 싶어하는 경우도 있습니다. 이제 이징을 맞춤설정하고 웹사이트 경험을 시그니처로 만들 수 있습니다. 두 번째 기능은 베지어 곡선을 통해 이동 경로를 제어하는 ​​기능을 제공합니다. 이전에는 직선 부분에서 경로를 만들어야 했지만 베지어 컨트롤이 도입되면서 이러한 애니메이션이 부드럽고 자연스러워졌습니다. 이러한 효과는 디자인 지향적이지 않은 웹 사이트 빌더에서는 달성하기 어렵습니다. 왜냐하면 레이아웃에서 해당 경로를 시각적으로 볼 수 없다면 개체의 궤적을 예측하고 여러 작업을 조정하는 것이 어렵기 때문입니다. Readymag를 사용하면 프로젝트에서 즉시 볼 수 있는 곡선을 형성하고 원하는 대로 베지어 핸들을 이동하기만 하면 됩니다. 베지어 기반 맞춤 이징 및 경로를 사용하면 다음과 같은 작업을 수행할 수 있습니다. 물리적 세계의 법칙을 시뮬레이션합니다. 베지어 곡선을 따른 움직임은 자연스러운 궤적 덕분에 현실 세계의 객체 동작을 재현합니다. 레이아웃이 대부분 그래픽이고 엄격한 그리드를 따르는 경우 베지어 경로를 사용하여 멋지게 분할할 수 있습니다. 레이아웃이 제자리에 있지 않아 눈길을 끌 것입니다. 깃털처럼 가벼운 Lottie로 느리게 로딩되는 애니메이션을 잊어버리고 원하는 대로 혼합해 보세요. Lottie 위젯은 Lottie 애니메이션의 인기가 높아지고 애니메이션 제작을 위한 도구 수가 증가함에 따라 2024년 초 Readymag에 출시되었습니다. Lottie는 매우 가벼워서 빠르게 로드되며, 벡터 기반이므로 확장성이 뛰어납니다. 기술적 관점에서 Lottie는 색상을 픽셀화하거나 왜곡하지 않는 확장 가능하고 빠르게 로딩되는 애니메이션을 삽입하는 데 이상적입니다. 다른 형식에는 제한이 있습니다. 예를 들어 비디오는 YouTube, Vimeo 또는 다른 플랫폼에서 호스팅되어야 합니다. YouTube에서는 컨트롤 숨기기를 허용하지 않으며 Vimeo에서는 유료로 숨길 수만 있습니다. 동영상은 느리게 로드될 수 있고, 스크롤로 제어하거나 재생하기 어렵고, 레이아웃 전체를 차지합니다. 또한 비디오에는 투명한 배경이 제공되지 않습니다. 흰색 배경에 흰색 배경이 있는 비디오를 배치할 수 있지만 비디오에 대해 다른 것을 재생할 수는 없습니다. GIF는 픽셀 기반이고 무겁고 짧습니다. Lotie에는 이러한 문제가 없습니다. Lottie는 Readymag 애니메이션과 완벽하게 결합됩니다. Readymag에서 Lottie는 일종의 컨테이너인 위젯입니다. Lottie 자체와 관련된 모든 것이 이 컨테이너 내에서 재생되지만 상자를 사용하여 이동, 숨기기, 확대 또는 축소 등 무엇이든 할 수 있습니다. Lottie로 할 수 있는 다른 작업은 다음과 같습니다. 비표준 버튼을 만듭니다. 자신만의 애니메이션 버튼을 그려서 위젯에 로드하고 링크를 추가할 수 있습니다. 아이콘에 애니메이션을 적용합니다. 세 개의 수평선이 X로 바뀌고 아이콘이 단순히 서로 교체되는 것이 아니라 역동적인 움직임으로 변형되도록 버거 메뉴 아이콘에 애니메이션을 적용할 수 있습니다. 내러티브 "만화"를 추가합니다. Lottie를 사용하면 타사 편집기에서 만든 긴 애니메이션을 쉽게 통합할 수 있습니다. 개체에 이중 애니메이션을 적용합니다. Lottie를 선택하고 동일한 트리거를 지정하여 Lottie 및 Readymag 애니메이션을 모두 재생합니다. 예를 들어 Lottie 기반 인간이 제자리에서 걷는 것일 수 있습니다. 클릭 시 트리거 애니메이션을 사람에게 할당할 수 있습니다. 즉, 클릭하면 다리와 팔이 움직이면서 제자리에서 행진을 시작합니다. 그런 다음 이미 애니메이션이 적용된 인간에 Readymag 클릭 시 이동 애니메이션을 추가할 수 있습니다. 그러면 인간은 그 자리에서뿐만 아니라 A 지점에서 B 지점까지 걸을 것입니다. 가능한 모든 방법으로 고통 없이 실험해 보세요. 미국 연구원들은 사람들이 단순하고 부피가 큰 텍스트보다 대화형 콘텐츠를 훨씬 더 잘 기억하고 인식하고 탐색한다는 것을 입증했습니다 . 애니메이션은 디자인을 인터랙티브하고 재미있고 기억에 남도록 만들 수 있는 도구 중 하나입니다. Readymag와 협력하면 제한 사항과 번거로운 해결 방법을 잊어버리고 고유한 애니메이션 레시피를 고안하고 놀라운 디자인을 만들 수 있습니다.