디자인
유저와의 상호작용을 극대화하는 UI 애니메이션 제작 팁!
7분
2021.01.08.7.8K
1. 슬라이드 탭을 사용해서 콘텐츠를 만든다.
왼쪽에서는 콘텐츠가 표시되고 사라집니다. 오른쪽에서는 탭을 이용해서 슬라이드, 즉 밀어내면서 표시됩니다.
좋은 애니메이션은 어떤 상태에서 다른 상태로 넘어갈 때, 화면이 바뀌면서 표시됩니다.
훌륭한 애니메이션은 다른 상태로 넘어갈 때, 콘텐츠가 다른 화면으로 부드럽게 바뀌면서 보여줍니다.
탭이나 펼침 메뉴 같은 인터랙션을 디자인할 때는 콘텐츠의 내용과 사용자의 행동을 서로 연결하는 것이 좋습니다. 즉, 콘텐츠의 구성만이 아니라 그것이 보이는 위치까지도 애니메이션으로 만들 수 있습니다. 그리고 이 작업을 할 때는, 밀어서 넘기는 동작으로 한 상태에서 다른 상태로 넘어가게 해주는 것이 좋습니다.
2. 카드 형태에서 공통되는 요소들을 연결한다.
왼쪽에서는 끌어올려서 새로운 화면이 열립니다. 오른쪽에서는 카드가 확장되면서 화면을 채웁니다.
좋은 애니메이션은 왼쪽으로 밀어내기나 끌어올리기와 같은 행동을 통해서 세부적인 콘텐츠의 화면을 표시합니다.
훌륭한 애니메이션은 공통되는 요소를 애니메이션으로 보여주면서, 두 상태 사이의 연관성을 보여줍니다.
서로 다른 상태 사이에서 애니메이션을 작업할 때는, 둘 사이에 어떤 공통된 요소가 있는지를 살펴보고 그것을 연결할 수 있는 방법이 있는지를 찾아봐야 합니다. 인비전 스튜디오를 사용하면 모션 전환을 생성할 때, 이어지는 두 화면 사이에서 공통적인 요소들이 자동으로 연결됩니다. 그렇기 때문에 애니메이션 프로토타입을 만드는 일이 매우 수월해지죠.
모션 매니페스토(Motion Manifesto)에 들러 보시고, 여러분이 응용할 수 있는 애니메이션이 있는지를 찾아보세요. 위에서 보이는 예시에서는 마스킹(Masking), 트렌스포메이션(Transformation), 페어런팅(Parenting), 이징(Easing)이라는 원칙들을 사용했습니다.
3. 콘텐츠 안에서 케스케이딩 효과(Cascading effects)를 활용한다.
왼쪽에서는 여러 개의 카드가 아래로 한꺼번에 펼쳐지면서 나타납니다. 오른쪽에서는 같은 애니메이션 기법을 사용했지만, 각각의 카드가 보이는 시간에 약간의 딜레이(지연시간)를 두었습니다.
좋은 애니메이션은 어떤 화면을 표시할 때, 재료의 위치와 투명도를 바꿔서 보여줍니다.
훌륭한 애니메이션은 각 그룹이나 요소들이 보이는 모습에 아주 약간의 시차를 둡니다.
이러한 폭포(캐스케이딩) 효과를 얻고 싶으시다면, 콘텐츠의 각 부분이나 그룹이 나타나는 시간에 딜레이를 적용해보세요. 펼쳐지는 속도와 간격을 일정하게 유지한다면, 연속되는 느낌이 만들어집니다. 그렇지만 아주 작은 요소들까지 전부 캐스케이딩 효과로 만드는 것은 추천하지 않습니다. 그럴 때는 해당하는 콘텐츠 그룹에 애니메이션 효과를 주면 좋습니다. 구글에서는 각각의 요소들이 보이는 간격이 20밀리초(0.02초)를 넘으면 안 된다고 권장합니다.
4. 콘텐츠가 다른 요소들을 밀어내도록 만든다.
왼쪽의 애니메이션에서는 다른 요소들의 맨 위에서 애니메이션이 펼쳐집니다. 오른쪽의 애니메이션에서는 콘텐츠의 내용이 커지면서 다른 내용들을 밀어내고 있습니다.
좋은 애니메이션은 상황에 맞는 구성요소들을 움직이고 보여줍니다.
훌륭한 애니메이션은 모습이 바뀔 때, 그 주변에 있는 구성요소들에게 영향을 주면서 변하게 됩니다.
콘텐츠 안에서 주변에 있는 요소들이 서로 연관성이 있게 만드세요. 이는 해당 콘텐츠가 그 주변의 요소들을 끌어들이거나 밀어내게 만든다는 것을 말합니다. 매터리얼 디자인(Material Design)의 어웨어(Aware)라는 모션 원칙을 확인해보면 도움이 되실 겁니다.
5. 메뉴를 상황에 맞게 보여준다.
왼쪽 그림의 메뉴는 아래에서부터 날아들어 옵니다. 오른쪽 그림의 매뉴는, 메뉴를 요청하는 동작에서부터 확대되면서 나타납니다.
좋은 애니메이션 메뉴는, 메뉴를 요청한 버튼의 방향에서 콘텐츠가 나타납니다.
훌륭한 애니메이션 메뉴는, 그것을 요청하면서 터치한 지점에서부터 커지면서 나타납니다.
6. 버튼을 통해서 서로 다른 상태를 보여준다.
왼쪽 그림의 버튼에서는 상태 변화를 텍스트로 표시하고 있습니다. 오른쪽 그림의 버튼에서는 네모 상자를 활용해서 다른 상태라는 것을 표시하고 있습니다.
좋은 인터랙션은 버튼의 옆에서 이벤트를 보여줍니다.
훌륭한 인터렉션은 버튼 자체를 활용해서 다른 상태임을 보여줍니다.
버튼의 네모 상자를 활용해서 상태에 대한 피드백을 시각적으로 전달해서 보여주세요. 예를 들면, 콜 투 액션(CTA)을 호기심이 생기는 요소나 로딩 애니메이션으로 바꿀 수도 있습니다. 아니면 배경의 진행 상태 표시에 애니메이션을 추가할 수도 있죠. 어떻게 할지는 여러분에게 달려있는 것이며, 그 핵심은 사용자가 이미 상호작용하고 있는 그 공간을 활용한다는 것입니다. 버튼의 컬러를 활용해서 완료 상태를 보여준다면 훨씬 더 좋습니다.
7. 중요한 것에 집중하게 만든다.
왼쪽의 예제에서는 색깔과 위치를 이용해서 어떤 요소를 돋보이게 만들고 있습니다. 오른쪽의 예제에서는 은근한 애니메이션을 활용해서 사용자의 주의를 불러일으키고 있습니다.
좋은 디자인은 색상, 크기, 위치를 활용해서 사용자가 알아야 하거나 다음에 해야 할 중요한 행동을 강조해서 표시합니다.
훌륭한 디자인은 애니메이션을 활용해서 사용자의 시선을 방해하지 않으면서도 중요한 행동에 주의를 갖게 해줍니다.
사용자가 무언가 중요한 행동을 해야 할 때면, 그 행동을 애니메이션으로 표현해서 주의를 끌어보세요. 은근한 애니메이션으로 시작해서 그 행동이 얼마나 중요한 지에 따라 (크기, 색깔, 속도의 변화 등) 그 세기를 다르게 하면 원하는 액션 값을 얻을 수 있을 겁니다. 다만 이 효과는 중요한 행동에 대해서만 사용해야 합니다. 이런 효과를 너무 많이 사용하다 보면, 별로 중요하다는 생각이 들지 않게 되고, 무엇보다도 사용자들을 성가시게 만들게 됩니다.
애니메이션을 잘 활용한다면, 상태의 변화를 설명할 수도 있고, 필요한 행동에 주의를 끌게 할 수 도 있습니다. 뿐만 아니라 다른 구성요소들 사이의 관계를 맺게 하고, 제품에도 약간의 재미와 개성을 더할 수 있죠. 이러한 원칙들을 따른다면 좋은 애니메이션을 훌륭한 애니메이션으로 바꿀 수 있을 것입니다.
로그인하고 자유롭게 의견을 남겨주세요.
