포스트 플래시 시대의 웹 애니메이션

이 치열한 경쟁 환경에서 기업은 사람들의 관심을 사로잡고 유지하는 방법을 미친 듯이 찾고 있습니다. 우리가 일상을 살아가면서 우리의 소셜 미디어 피드는 말할 것도 없고 거리의 애니메이션 광고, 모바일의 비디오에서 우리에게 쏟아지는 끝없는 시각적 자극의 흐름은 우리의 관심을 끌기 위해 경쟁하는 끊임없는 움직임을 만듭니다.

우리 환경의 움직임에 대한 순간적인 반응은 생존의 필요성에서 개발되었으며 잠재적으로 위협적이거나 해로운 것으로 인식되는 환경 자극에 의해 유발됩니다. 사람들은 움직이는 것에 더 많은 관심을 기울입니다. 우리의 의식이 정보를 처리할 시간을 갖기 전에 잠재의식의 뇌가 이미 위험에 반응했기 때문에 뇌는 눈 구석에서 빠르게 움직이는 무언가를 포착할 때 찰나의 순간에 경고합니다.

광고주들은 이것을 알고 있으며 버스 정류장과 지하철 플랫폼에 애니메이션 거리 광고, 소셜 미디어 스트림에 팝업되는 비디오 광고, 풀 모션 비디오가 있는 전자 광고판을 사용하는 이유입니다. 이 기술은 마케팅 메시지를 전달하기 위해 설계된 원투 펀치 효과입니다. 첫째, 우리의 관심을 사로잡음으로써, 둘째, 비디오와 애니메이션을 사용하여 메시지를 전달합니다.

정적인 그림이 천 마디 말의 가치가 있다면 애니메이션의 가치는 얼마입니까?

여기에서 웹 애니메이션이 등장합니다. 웹 디자이너는 우리의 관심을 사로잡고 유지하고 예상치 못한 기쁨을 더해주기를 바랍니다. 웹 애니메이션은 복잡한 프로세스나 아이디어의 다양한 단계를 시각화하거나, 단순한 마케팅 메시지를 설명하거나, 사람들이 스크롤할 때 자연스럽고 유동적인 방식으로 웹 페이지의 항목을 이동하는 데 사용할 수 있습니다.

웹 애니메이션의 시작, GIF의 부상

월드 와이드 웹의 초기에는 상황이 다소 정적이고 지루했습니다. 웹 페이지는 대부분 인쇄 세계의 그래픽 디자인과 레이아웃을 기반으로 했습니다. 그러나 일부 디자이너는 기술 및 대역폭 문제에도 불구하고 보다 역동적이고 매력적으로 만들기 위해 초기 형태의 웹 애니메이션을 포함하기 위해 공동 노력을 기울였습니다. 웹사이트에 GIF 애니메이션을 처음 추가한 것은 1995년 Jeffrey Zeldman의 Batman Forever였습니다. 방문객들은 배트맨이 그들을 향해 날아가는 모습을 사진 시퀀스로 애니메이션으로 환영했습니다.

배트맨 포에버 프로모션 사이트는 당시 가장 인기 있는 사이트 중 하나였습니다. 이는 다른 웹 디자이너와 개발자가 GIF 웹 애니메이션을 기발하고 눈길을 끄는 요소로 웹 사이트에 통합하도록 영감을 주었습니다.

20년이 지난 지금은 애니메이션 GIF가 어디에나 있습니다. Twitter, Messenger, iMessage, WhatsApp, Skype, Instagram 및 Facebook에 있습니다. GIF는 짧은 루프 애니메이션, 이미지 시퀀스 및 짧은 비디오 루프에 적합합니다. 불행한 단점은 GIF 파일 형식에 가변 투명도가 없고 알파 채널을 지원하지 않는다는 것입니다. 따라서 모든 픽셀은 완전히 불투명하거나 완전히 투명합니다.

GIF 애니메이션은 웹 디자인 르네상스의 시작이었지만 이상적이지는 않았습니다. 특히 전화 접속과 느린 인터넷 속도의 초창기에 GIF는 대역폭 호그였습니다. 결과는 저해상도의 픽셀화된 시퀀스였습니다. GIF를 가능한 가장 작은 크기로 압축해야 하는 디자이너의 단점은 제한된 8비트 팔레트로 인해 많은 디더링이 발생했습니다. 이것은 21세기에 고속 인터넷이 보편화되면서 바뀌었고, 결과적으로 웹 애니메이션은 수백만 가지 색상으로 더 보기 좋게, 더 높은 프레임 속도로 더 매끄럽게 되었습니다.

플래시 웹 애니메이션의 시작

Macromedia가 웹 플러그인과 함께 제공되는 프레임 기반 애니메이션 도구인 Macromedia Flash(벡터 애니메이션 프로그램인 FutureSplash Animator를 인수한 후)를 발표한 1996년 Flash가 도입되면서 웹 애니메이션 붐이 일어났습니다. Flash는 웹에 새로운 기능을 제공하는 데 주도적인 역할을 했습니다. 오디오와 애니메이션에서 상호 작용 및 비디오에 이르기까지 Flash는 인터넷을 발전시키는 데 도움이 되었습니다.

상호 작용을 포함하는 전체 사이트에서 간단하고 간결한 벡터 기반 웹 애니메이션을 구축할 수 있는 기회는 풍경을 둘러싸고 있는 (너무) 많은 애니메이션 요소가 있는 웹 디자인의 "바로크" 시대라고 할 수 있는 시기를 만들었습니다. 그럼에도 불구하고 Flash는 동적 웹 디자인의 가능성을 엿볼 수 있는 기회를 제공하여 디자이너가 실험을 할 수 있도록 하고 웹 디자인의 급속한 발전을 가능하게 했습니다.

플래시 애니메이션은 가볍고 비교적 만들기 쉽습니다. 크기가 몇 킬로바이트에 불과한 SWF 파일 형식과 선명한 벡터 그래픽이 포함된 사운드를 사용한 파일로 배포됩니다. 웹 애니메이션을 만드는 것은 웹 페이지 로드 시간을 많이 추가하지 않는 간소화된 프로세스가 되었습니다. 그러나 이 모든 것에도 불구하고 실행하려면 브라우저 플러그인이 필요하다는 심각한 단점이 남아 있었습니다.

또한 Flash의 정교한 상호 작용은 JavaScript와 유사한 객체 지향 프로그래밍 언어인 ActionScript(AS)에 의해 활성화되었습니다. ActionScript는 처음에 단순한 2D 벡터 애니메이션을 제어하도록 설계되었지만 이후 정교한 도구로 발전했습니다.

불행히도 Flash 애니메이션은 반응형이 아니었고 모든 장치에서 제대로 작동하지 않았으며 결국 모든 인기 있는 모바일 장치에서 삭제되었습니다. 파일 크기는 상대적으로 작았지만 Flash는 최적화되지 않았고 결국 CPU가 고갈되어 모바일에서도 문제였습니다. Flash 시대의 종말은 Steve Jobs가 Apple 모바일 장치에서 Flash를 지원하지 않기로 결정한 이후였습니다.

플래시는 PC 시대에 PC와 마우스용으로 만들어졌습니다. 그러나 모바일 시대는 저전력 장치, 터치 인터페이스 및 개방형 웹 표준에 관한 것입니다. 모든 영역에서 Flash가 부족합니다.

스티브 잡스

오늘날의 웹 애니메이션

오늘날 Flash는 더 이상 사용되지 않으므로 웹 애니메이션에 대한 요구 사항이 다릅니다. 도구는 유연하고 가벼워야 합니다. 웹 디자이너는 다양한 화면 크기, 브라우저, 종횡비, 픽셀 밀도 등을 고려하여 다양한 장치(데스크톱, 태블릿 및 모바일)에 대한 반응형 및 적응형 콘텐츠를 만들어야 합니다. 우리의 웹 애니메이션 걸작은 5인치, 720px 모바일에서 9.7인치 QXGA 태블릿, 32인치 Retina 6K 디스플레이에서 작동해야 합니다.

기술은 전력이 부족한 모바일 장치라도 매우 까다로운 웹 애니메이션과 고해상도 비디오 콘텐츠를 처리할 수 있는 대역폭과 처리 능력을 갖출 수 있을 정도로 성숙했습니다. 이것은 웹 사이트가 매우 "바쁘게" 되어야 한다는 것을 의미하지는 않습니다. 항상 그렇듯이 애니메이션, 동적 상호 작용 및 정적 요소 간의 올바른 균형을 맞추는 것이 중요합니다. 오늘날 우리가 많은 멋진 웹 애니메이션을 구현할 수 있다는 사실이 우리가 해야 한다는 것을 의미하지는 않습니다.

웹 디자이너/애니메이터는 플랫폼 간 지원도 고려해야 합니다. 10년 전만 해도 디자이너는 자신의 창작물이 이렇게 다양한 장치에서 잘 보일지 확인할 필요가 없었습니다. 다양한 종횡비, 세로 및 가로 방향뿐만 아니라 다양한 픽셀 밀도 및 보기 거리를 고려해야 합니다. 이 수수께끼는 웹 디자이너에게 일련의 새로운 도전과 잠재적 함정을 제시합니다. 사용자 테스트는 소중한 시간을 소비하고 다양한 플랫폼에서 더 많은 일이 잘못될 수 있으며 웹 애니메이션은 그 어느 때보다 상세해야 합니다.

HTML5, CSS3, JavaScript 및 SVG(확장 가능한 그래픽)는 웹 애니메이션에 가장 적합한 솔루션인 것 같습니다. 이러한 최신 웹 기술과 언어를 사용하면 위의 문제 중 전부는 아니지만 대부분을 해결하는 데 도움이 됩니다. 그러나 특히 미지의 영역에 있을 때 항상 조심스럽게 걷는 것이 좋으며 광범위한 QA 및 테스트가 필수입니다.

웹 애니메이션을 사용하는 이유

웹 애니메이션은 정적인 웹 페이지보다 더 오래 사람들의 관심을 끌고 관심을 끌 수 있으며 아이디어나 개념을 보다 명확하고 효과적으로 전달할 수 있습니다. 뛰어난 웹 애니메이션은 움직임의 모든 부분에 대한 이야기를 전달합니다. 의미와 "영혼"(lat. anima)으로 애니메이션에 생명을 불어넣는 것입니다.

웹 애니메이션은 부드럽고 의미가 있어야 하며 방문자의 여정을 지원해야 합니다. 웹 디자이너/애니메이터는 애니메이션이 사용자 경험에 어떻게 맞는지 알고 있어야 하며, 가능한 사용자 흐름을 예측한 다음 의미 있는 방식으로 지원해야 합니다.

웹 디자이너는 순전히 기술적인 관점에서 웹 애니메이션을 봐서는 안 됩니다. 사용자의 관점에서 바라볼 필요가 있습니다.

애니메이션에서 중요한 것 중 하나는 타이밍입니다. 적절한 타이밍은 애니메이션에 물리적, 정서적 의미를 부여합니다. 경험은 매끄럽고 논리적이어야 합니다. 애니메이션이 유동적이지 않으면(타이밍 문제가 있음) 사람들이 이를 버그로 인식하고 웹사이트를 더 탐색할 동기를 잃을 수 있습니다.

애니메이터는 의도한 효과를 제공하기 위해 적절한 타이밍을 사용해야 합니다. 애니메이션에는 몇 개의 키프레임을 사용해야 합니까? 방문자 상호작용으로 인한 애니메이션의 동적 변화는 무엇이며 상호작용 후 응답이 얼마나 빨리 오는가? 애니메이션이 기발하고 진지하며 재미있습니까?

논리적인 관점에서 웹 애니메이션을 두 가지 기본 유형으로 나눌 수 있습니다.

• 정적, 비대화형 웹 애니메이션(예: GIF 애니메이션).
• 사용자 입력에 따라 변경되는 사용자 참여 및 상호 작용이 포함된 동적 웹 애니메이션입니다.

동적 애니메이션의 가장 좋은 예는 사용자가 화면 콘텐츠를 조작하는 게임입니다. 또 다른 간단한 예는 웹사이트 방문자가 시차 스크롤링 웹사이트를 스크롤할 때 특정 요소의 위치를 ​​변경하는 것입니다. 애니메이션은 수동적이지 않으며 사용자 동작에 따라 다릅니다.

동적 웹 애니메이션은 웹사이트에 애니메이션 인포그래픽을 표시하는 데 자주 사용되므로 사람들은 페이지를 스크롤하는 동안 특정 영역에 더 주의를 기울입니다. 이는 관련 정보를 강조 표시하는 강력한 방법입니다.

웹 애니메이션의 장단점

다음은 더 이상 사용되지 않는 레거시 솔루션을 포함하여 웹 애니메이션 기술의 장단점입니다.

일반적으로 웹 애니메이션의 장단점은 어떻습니까? 제대로 실행된 웹 애니메이션은 여전히 ​​적절하지 않을 수 있으므로 웹 사이트 디자인에 애니메이션을 통합하기 전에 몇 가지 중요한 질문(퀴즈 클라이언트 및 기타 팀 구성원 포함)을 하는 것이 좋습니다.

먼저 애니메이션이 사용자 경험에 어떤 영향을 미치는지 확인해야 합니다. 웹사이트의 UX가 향상 됩니까? 디자이너는 다음을 수행해야 합니다.

• 기존 웹사이트 디자인 검토(가능한 경우)
• 대상 고객과 그들이 사용하는 하드웨어 플랫폼 확인
• 사이트 로드 시간 및 CPU 로드 확인
• 다른 대안 살펴보기
• 사용성을 주시하라

단순히 트렌드를 따르기 위해 사이트에서 웹 애니메이션을 사용하는 것은 좋은 생각이 아닙니다 .

웹 애니메이션을 사용하기로 한 결정은 다른 디자인 결정으로 간주되어야 합니다. 웹 디자이너는 장단점을 따져보고 사용자 경험이 손상되지 않도록 해야 합니다. 또한 개발자와 협력하여 코드 요구 사항을 확인하고 향후 조정해야 할 수 있는 비효율적인 코드에 얽매이지 않도록 해야 합니다.

최신 웹 애니메이션 기술은 지난 20년 동안 크게 발전하여 성능, 사용 가능한 대역폭 및 렌더링 품질이 향상되었습니다. 그러나 디자이너는 사용자 경험을 의미 있게 향상시키는 경우에만 웹사이트에 애니메이션을 추가할 때 신중을 기해야 합니다.

Toptal Design 블로그에 대한 추가 정보:

• 이탈률을 줄이기 위해 사용자 정의 로딩 애니메이션을 만드는 방법
• 스케치와 루퍼로 순식간에 멋진 일러스트레이션 만들기
• 원리와 스케치를 사용한 UI 애니메이션에 대한 단계별 가이드
• 귀하의 브랜드를 더욱 친근하게 만드는 로고 애니메이션 영감
• 애니메이션 제품 설명 동영상 제작을 위한 단계별 가이드