제품 디자인에 있어서 애니메이션과 모션의 중요성은 아무리 강조해도 지나치지 않습니다. Nielsen Norman Group 이 강조한 것처럼 이러한 요소는 관심을 끌 뿐만 아니라 사용자의 즐거움을 높이고 제품이 신선하고 현대적인 느낌을 갖도록 도와줍니다. 애니메이션이 충분히 정교해지면 사용자에게 자신의 행동에 대한 명확한 피드백을 제공하여 인터페이스가 더욱 직관적으로 느껴질 수 있습니다. 특히 전환 애니메이션은 사용자를 한 단계에서 다음 단계로 원활하게 안내하므로 제품 디자인의 핵심입니다. 제품을 더욱 사용하기 쉽고 매력적으로 만들고 다양한 단계를 연결하며 전반적인 제품 품질을 향상시킵니다. 애니메이션과 모션은 중요한 역할을 하기 때문에 제품 팀은 그 중요성을 인식하고 있습니다. 디자이너는 이를 프로토타입으로 광범위한 팀에 제시하여 출시 전에 제품을 시연하고 테스트합니다. 그러나 완벽한 애니메이션을 디자인하는 것은 복잡한 노력입니다. 문제는 미묘함과 강조 사이의 적절한 균형을 찾는 데 있습니다. 애니메이션의 복잡함을 파헤치는 온라인 리소스와 기사가 부족하지 않지만 놀라울 정도로 많은 제품이 이를 성공적으로 구현하지 못했습니다. 이 문서에서는 특히 전환 애니메이션에 중점을 둡니다. 목표는 기본적이고 간결하며 디자인 프로세스에서 누구나 즉시 사용할 수 있는 예제를 통해 전환 애니메이션의 원리를 보여주는 것입니다. 이러한 통찰력은 정해진 규칙이 아니라 신제품 개발에 대한 고려 사항을 안내합니다. 이 책은 전환 애니메이션 기술에 대한 간결하고 실용적인 가이드라고 생각하세요. 더 나은 전환 애니메이션을 위한 6가지 원칙 불투명도로 페이드 인 및 페이드 아웃 생동감을 더하는 확장 일관된 방향성 유지 균형 속도 우선순위 지정, 순서 지정 및 그룹화 공간성 확립 1. 불투명도로 페이드 인 및 페이드 아웃 흰색 원 개체가 페이드 인 및 페이드 아웃됩니다. 페이드 인/아웃 불투명도에 따른 페이드 인 및 아웃은 기본이면서도 강력한 원리입니다. 이 기술 하나만 활용해도 상당한 차이를 만들 수 있습니다. 현재 화면에서 다음 화면으로 전환할 때 관련 없는 요소는 페이드 아웃하고 다음 부분은 페이드 인시켜 간결한 피드백을 전달할 수 있습니다. 어떤 디자인에서든 불투명도 값을 100에서 0(또는 0에서 100)으로 설정하면 이를 달성할 수 있습니다. /프로토타이핑 도구. 두 개의 동일한 스마트폰 앱 화면을 비교합니다. 오른쪽에는 페이드 효과가 있는 토글 애니메이션이 표시되고 왼쪽에는 페이드 효과가 없는 토글 애니메이션이 표시됩니다. 그림 1–1 그림 1-1 토글 전환 비교. 갑작스러운 전환이 단절된 느낌을 주는 반면(왼쪽 이미지 참조) 불투명도 효과를 추가하면 더 부드럽고 매력적으로 느껴집니다(오른쪽 이미지 참조). 두 개의 동일한 스마트폰 앱 화면을 비교합니다. 오른쪽에는 페이드 효과가 있는 메뉴 열기 애니메이션이 표시되고 왼쪽에는 페이드 효과가 없는 애니메이션이 표시됩니다. 그림 1–2 그림 1–2 메뉴 열기 비교. 왼쪽 이미지처럼 메뉴를 아래에서 위로 갑자기 자르는 대신, 페이드 애니메이션을 활용하면 오른쪽 이미지처럼 더 부드럽고 유동적인 전환이 가능합니다. 이를 통해 메뉴에 대한 사용자 참여가 향상됩니다. 스마트폰 앱 화면이 한 상태에서 다른 상태로 전환됩니다. 그림 1–3 그림 1-3 다음은 한 상태에서 다른 상태로 전환하기 위해 페이드 애니메이션을 사용하는 일반적인 예입니다. 또한 다음 원칙에 따라 다루게 될 크기 및 수직 이동을 사용하여 애니메이션을 적용합니다. 고급 사용 사례로서 이 기술은 두 화면 레이어 또는 시퀀스 간의 상호 작용을 원활하게 통합합니다. 이 방법을 사용하면 장면 전환이 사용자에게 사실상 감지되지 않습니다. 많은 성공적인 제품은 향상된 사용자 경험을 위해 이 전략을 사용합니다. 스마트폰 앱 화면이 상태 간에 전환됩니다. 전환하는 동안 '프로필 보기'라는 제목의 작은 파란색 카드가 전체 화면을 채울 정도로 확장되어 새 페이지로 전환됩니다. 그림 1–4 그림 1-4 "프로필 보기" 레이어는 다음 상태로 전환하는 동안 원활하게 이동합니다. 포괄적인 분석은 다음 이미지에서 확인할 수 있습니다. 자세한 분석에는 "작은 제목 레이어"와 "큰 제목 레이어"라는 두 가지 차트 세트가 표시됩니다. 이 차트는 0%에서 100% 사이의 불투명도 및 배율 값을 나타내며 "프로필 보기" 텍스트의 미묘한 전환을 자세히 설명합니다. 보는 사람에게는 부드러운 애니메이션으로 보이지만 더 작은 "프로필 보기" 텍스트 레이어 사이를 전환하여 매끄러운 환상을 만들어냅니다. 그림 1–5 그림 1-5 이 유체 전환은 크고 작은 두 개의 "프로필 보기" 레이어를 활용하여 달성되었습니다. 크기 조정 효과를 통합하고 두 레이어 사이를 부드럽게 페이드함으로써 전환은 마치 단일 타이틀 레이어가 두 화면 상태를 원활하게 연결하는 것처럼 나타납니다. 2. 생동감을 더하는 확장 흰색 원 개체는 크기가 커지면 페이드 인되고 크기가 작아지면 사라집니다. 페이드를 사용한 스케일 — 스케일 효과의 일반적인 사용법 스케일링은 전환에 역동적이고 활기차고 방향성 있는 요소를 도입합니다. 예를 들어 다음 화면으로 전환할 때 페이드 아웃 효과와 함께 기존 구성 요소와 레이어를 100%에서 90%로 축소할 수 있습니다. 예를 들어 오버레이를 표시할 때 현재 화면을 축소할 수 있습니다. 이는 오버레이가 상위 레이어에서 미끄러지는 듯한 느낌을 주며 상태 간 연결을 강조합니다. 원하는 대로 배율 값을 위아래로 조정할 수 있습니다. 스케일링은 일반적으로 첫 번째 원칙인 페이드 인/아웃과 함께 사용됩니다. 자세한 분석은 한 상태에서 다른 상태로 전환되는 스마트폰 앱 화면을 보여줍니다. 화면 옆에는 각 상태의 화면 레이어가 수평으로 나열되어 스케일 및 페이드를 사용하여 전환을 설명합니다. 그림 2–1 그림 2-1 페이딩과 함께 크기 조정 효과를 통합하면 이 예에서 볼 수 있듯이 객체에 더욱 역동적이고 생생한 존재감을 부여할 수 있습니다. 이 전환은 마치 레이어가 위에서 아래로 미끄러지는 것처럼 우아한 동작을 가집니다. 수직으로 쌓인 이미지가 있는 소셜 미디어 스타일의 앱으로 각각 'Following', 'For You', 'Near You'라는 라벨이 지정되어 있습니다. 세로 스크롤 중에 활성 레이블은 크기가 커지고 페이드 인되는 반면, 다른 레이블은 크기가 줄어들고 약간 페이드 아웃됩니다. 앱 화면이 상태 간에 전환됩니다. 전환하는 동안 '프로필 보기'라는 제목의 작은 파란색 카드가 전체 화면을 채울 정도로 확장되어 새 페이지로 전환됩니다. 그림 2–2 그림 2–2 다음은 텍스트 레이어에 크기 조정 효과를 사용하는 몇 가지 예입니다. 왼쪽 이미지는 스케일과 약간의 페이드 아웃을 사용하여 활성 및 비활성 레이어가 강조 표시되는 방식을 보여줍니다. 오른쪽 이미지는 텍스트와 카드 레이어의 크기를 조정하여 생생한 전환을 구현하는 방법도 보여줍니다. 음악 앱이 재생 보기에서 최소화된 상태로 전환됩니다. 소셜 미디어 앱의 댓글 오버레이 열기 전환입니다. 그림 2–3 그림 2–3 이 두 가지 예는 크기 조정 전환을 통해 더 큰 요소를 향상시킬 수 있는 방법을 보여줍니다. (왼쪽) 앨범 표지 전환 중에 음악 앱에서 익숙한 크기 조정 사례를 볼 수 있습니다. 음악 플레이어 오버레이가 축소됨에 따라 앨범 표지는 축소판 크기로 부드럽게 축소됩니다. (오른쪽) 오버레이를 열 때 축소하고 이전 화면을 약간 표시하여 배경에 레이어가 있음을 암시할 수도 있습니다. iOS의 기본 오버레이 스타일입니다. 3. 일관된 방향성을 유지하세요 제품의 모든 움직임, 크기 조정 또는 움직임은 본질적으로 방향을 암시합니다. 이는 제품의 컨텍스트를 나타내며 전환이 일관되게 보이도록 하는 강력한 방법입니다. 요소가 언제 위아래로 움직이는지, 오버레이가 어느 쪽에서 나오는지 등과 같은 자세한 방향 정보를 문서화하는 것이 중요합니다. 잘 디자인된 제품은 상황에 맞춰 명확하고 일관된 방향성을 유지합니다. 두 개의 소셜 미디어 스타일 앱 화면 비교: 왼쪽 화면은 하단에 게시물이 있는 가로 토글 항목을 표시하고, 오른쪽 화면은 왼쪽 중앙에 게시물이 오른쪽에 있는 세로 토글 항목을 표시합니다. 그림 3–1 그림 3–1 (왼쪽) 가로 탐색으로 보기 옵션을 전환하는 것은 일반적인 소셜 미디어 앱 동작입니다. 이렇게 하면 토글을 스와이프하거나 탭하여 보기를 전환할 수 있습니다. (오른쪽) 반면, 이 앱은 세로 탐색이 포함된 레이아웃이 약간 다릅니다. 이 경우 보기 옵션을 전환하는 방법은 위아래로 스와이프하는 것입니다. 두 개의 소셜 미디어 스타일 앱 화면 비교: 왼쪽은 게시물의 수직 탐색을 보여주고, 오른쪽은 수평 탐색을 보여줍니다. 그림 3–2 그림 3-2 여기에서 각 앱 예의 게시물을 스크롤할 때 방향성이 반대입니다. (왼쪽) 역시 위아래로 스와이프하면 게시물을 찾아볼 수 있습니다. (오른쪽) 이 앱에는 수직 탐색 기능이 있으므로 게시물을 스크롤하는 것은 수평 동작이 됩니다. 두 개의 소셜 미디어 스타일 앱 화면의 메뉴 열기 전환 비교: 왼쪽에서는 위에서 아래로 부드러운 수직 움직임으로 메뉴가 페이드 인되고, 오른쪽에서는 왼쪽에서 부드러운 수평 움직임으로 페이드 인됩니다. 오른쪽으로. 그림 3–3 그림 3–3 메뉴나 기타 관련 전환을 열 때에도 항상 앱의 전반적인 방향성을 암시할 수 있습니다. (왼쪽) 메뉴를 여는 것은 앱의 수직 브라우징 경험을 의미합니다. (오른쪽) 메뉴 요소는 왼쪽에서 오른쪽으로 나타나 앱의 수평 탐색 환경을 나타냅니다. 4. 균형 속도 적절한 애니메이션 속도는 실용적인 피드백과 의미 있는 경험을 제공합니다. 너무 느린 전환은 사용자를 지루하게 만들 수 있고 지나치게 빠른 전환은 의미가 없습니다. 그렇기 때문에 속도 균형을 맞추는 것이 중요합니다. 일부 기사에 따르면 100ms에서 500ms까지의 속도가 이상적 이며 대부분의 경우에 적합합니다. 이를 지침으로 따를 수 있지만 제품에 맞게 사용자 정의하십시오. 이는 남들과 다른 독특한 제품을 만드는 또 다른 방법입니다. 두 개의 동일한 스마트폰 앱 화면의 페이지 내 전환 속도 비교: 왼쪽은 적절한 속도로 작동하고 오른쪽은 느린 속도를 보여줍니다. 그림 4–1 그림 4–1 이 예의 토글 슬라이더와 같은 빠른 작업은 사람들에게 피드백을 제공하기 위한 적절한 속도를 갖는 것이 중요합니다. 이는 페이지 내 전환이므로 페이지 간 애니메이션보다 약간 더 빠릅니다. 두 개의 동일한 스마트폰 앱 화면의 페이지 간 전환 속도를 비교한 것으로, '프로필 보기'라는 제목의 작은 파란색 카드가 전체 화면을 채울 정도로 확장되어 새로운 페이지로 전환됩니다. 왼쪽 화면은 적절한 속도로 작동하는 반면, 오른쪽 화면은 느린 속도로 전환됩니다. 그림 4–2 그림 4–2 많은 요소가 포함된 페이지 간 전환의 경우 사람들이 각 상태에서 단절감을 느끼지 않도록 컨텍스트가 필요합니다. 이는 페이지 내 전환보다 약간 느릴 수 있습니다. 그러나 이것이 반드시 애니메이션 속도를 늦추는 것을 의미하지는 않습니다. 제품이 느리게 느껴지지 않도록 하려면 적절한 속도가 여전히 중요합니다. 5. 우선순위 지정, 순서 지정 및 그룹화 여러 요소를 전환할 때 중요도에 따라 순위를 지정하면 사용자가 주요 상호 작용에 집중할 수 있습니다. 한꺼번에 전환하는 대신 우선순위에 따라 순서를 지정하세요. 유사한 항목을 함께 그룹화한 다음 해당 그룹의 순위를 지정하세요. 중요한 섹션에 집중하기 위해 관련 없는 그룹을 완전히 숨길 수 있습니다. 앱 화면의 페이지 간 전환에 대한 자세한 분석에는 '프로필 보기'라는 제목의 작은 파란색 카드가 전체 화면을 채우도록 확장되어 새 페이지로 변환되는 것을 보여줍니다. 화면 옆에 있는 분석에는 '기본'과 '보조'라는 두 세트로 그룹화된 앱 레이어가 표시되어 순차적 전환을 보여줍니다. 그림 5–1 그림 5-1 이 화면의 모든 요소가 동시에 애니메이션으로 표시된다면 화면이 복잡하고 복잡하게 느껴질 것입니다. 이것이 중요도에 따라 우선순위가 부여된 계단식 전환이 있는 이유입니다. 이 앱에서는 기본 요소가 '프로필 보기'와 지원 차트여야 합니다. 이러한 요소는 두 상태 모두에 존재하기 때문입니다. 그러면 기본 요소보다 덜 중요한 보조 요소가 그 다음으로 이어질 수 있습니다. 음악 앱이 재생 보기에서 최소화된 상태로 전환됩니다. 그림 5–2 그림 5-2 플레이어 보기를 축소할 때 음악 앱의 전환이 복잡한 것처럼 느껴집니다. 표지와 제목 레이어에 초점을 맞추는 것만으로도 원활한 전환을 달성할 수 있습니다. 다음 이미지를 보면 좀 더 자세한 분석 내용을 볼 수 있습니다. 두 개의 음악 앱 화면은 재생 보기에서 최소화된 상태로의 전환을 보여줍니다. 왼쪽에서는 재생 보기 오버레이를 강조하기 위해 앨범 표지 레이어를 의도적으로 제거했습니다. 오른쪽은 최소화 과정에서 앨범 커버 전환을 강조하기 위해 음악 정보와 컨트롤 레이어를 의도적으로 제거한 것입니다. 그림 5–3 그림 5–3 (왼쪽) 이 애니메이션은 플레이어 오버레이가 최소화되는 방식을 보여줍니다. 보시다시피 기존 음악 제목과 플레이어 요소는 하단으로 슬라이드하면 간단히 사라집니다. (오른쪽) 화면이 최소화된 후 새로운 타이틀 레이어가 나타납니다. 이렇게 하면 플레이어의 요소와 커버 스케일 애니메이션에 방해가 되지 않습니다. 6. 공간성 확립 사용자 상호작용 영역이 기기 화면으로 제한되더라도 보이는 프레임 너머의 '보이지 않는' 공간을 디자인하는 것이 중요합니다. 공간성을 설정하면 사용자가 제품의 정신적 모델을 형성하고 경험을 향상시키는 데 도움이 됩니다. 디자이너는 평면 화면에 깊이와 공간성을 부여하기 위해 여러 기능 레이어를 사용하는 경우가 많습니다. 음악 앱이 재생 보기에서 최소화된 상태로 전환됩니다. 음악 앱 전환이 어떻게 작동하는지 설명하기 위해 모든 숨겨진 레이어를 노출하는 등각 보기를 통한 자세한 분석입니다. 그림 6–1 그림 6–1 이 다이어그램은 음악 앱의 보다 자세한 컨텍스트를 보여줍니다. 이 앱의 기능 레이어가 무엇으로 구성되어 있는지, 플레이어 보기가 축소될 때 전환이 어떻게 발생하는지 설명하고 최소화된 보기로 개요 화면을 표시합니다. 소셜 미디어 앱의 댓글 오버레이 열기 전환입니다. 소셜 미디어 앱 전환이 어떻게 작동하는지 설명하기 위해 모든 숨겨진 레이어를 노출하는 등각 보기를 통한 자세한 분석입니다. 그림 6–2 그림 6–2 이 예는 두 부분으로 구성됩니다. 먼저, 이 소셜 미디어 앱 화면의 여러 레이어가 어떻게 만들어지는지 보여줍니다. 둘째, 기존 화면이 축소되어 앱의 가장 낮은 레이어인 어두운 배경 레이어가 도입되는 동안 댓글 오버레이가 하단에서 슬라이드됩니다. 게다가 방향성 움직임을 지닌 모든 레이어와 요소들은 공간성의 일부이다. 다음 예에는 동일한 상호 작용과 레이어 요소가 있지만 서로 다른 공간 모델을 사용하여 제품 경험에 대한 다른 느낌을 만들어냅니다. 두 개의 소셜 미디어 스타일 앱 화면을 그 뒤에 숨겨진 모든 레이어를 노출하여 전체 앱 구조를 조감도로 비교한 것입니다. 왼쪽에 있는 항목은 하단에 기둥이 있는 수평 토글 항목을 표시하고, 오른쪽에 있는 항목은 오른쪽에 기둥이 있는 왼쪽 중앙에 수직 토글 항목을 표시합니다. 그림 6–3 그림 6–3 방향성 원칙에서 강조된 것처럼 이 두 앱은 서로 다른 탐색 구조를 가지고 있습니다. 화면 영역 너머를 살펴보고 전환과 움직임의 근원을 이해함으로써 전체적인 공간 구조를 파악할 수 있습니다. 이러한 공간 프레임워크를 구축하면 제품 사용자 경험의 고유성이 크게 향상됩니다. 복잡한 전환 애니메이션의 세계를 여행하면서 겉보기에 미세한 세부 사항이 사용자 경험에 얼마나 큰 영향을 미칠 수 있는지 분명해졌습니다. 여기에 제시된 예와 원칙은 기초 역할을 하지만 기존 앱 및 제품과의 일상적인 상호 작용에서 자신만의 영감을 얻을 수 있습니다. 이러한 개인적인 경험을 통해 자신만의 독특한 애니메이션 스타일을 만들고 사용자에게 독특한 경험을 제공하는 방법을 배울 수 있습니다. 이러한 원칙을 받아들이고, 매일 접하는 것을 실험하고, 창작물이 그 자체로 생명력을 얻는 모습을 지켜보세요.