Sketching UI Animations

스케치 연습을 보여드리고 몇 가지 조언으로 이 챕터를 마무리하기 전에 다룰 주제가 하나 더 있어요 애니메이션이나 전환 스케치죠 UX 디자이너들은 주로 이벤트 기반 응용 프로그램을 디자인하죠 이벤트 주도형이란 용어는 애플리케이션이 사용자나 시스템의 행동에 반응한다는 뜻이죠 사건의 근원은 두 가지예요 사용자가 사용자 인터페이스에서 뭔가를 하거나 시스템이 작업을 시작해요 가장 흔한 두 사례가 있죠 시간제한이 있어요 예를 들어 5초 후에 모듈 창이 나타나요 네트워크에서 오는 정보에 기반한 행동이죠 채팅창에 메시지가 도착하는 것처럼요 이게 왜 중요하죠? 대부분의 이벤트는 백그라운드에서 일어나지만 일부는 사용자 인터페이스에 나타나거든요 어떤 이벤트는 UI의 변화를 통해 사용자와 직접 소통하죠 이제 스케치해야 할 것들이죠 문제는 어떻게 변화가 일어나느냐죠 이런 변화는 기본적으로 두 가지 형태로 이뤄져요 단순한 양식은 시작점과 UI 상태 끝점이 있어요 B 주예요 우리에겐 이 두 주밖에 없어요 두 번째는 애니메이션이에요 두 개의 주뿐 아니라 두 국가 사이의 전환도 있죠 이런 변화는 움직임의 착시를 일으키죠 간단히 요약하자면 UI 애니메이션을 사용합니다 사용자에게 뭔가를 보여주거나 통신하기 위해 UI를 변경하고 싶을 때요 동시에 움직임의 착시를 일으키는 형태를 원했어요 보다시피 이 주제는 사용자 플로우와 밀접하게 관련돼 있죠 변화를 만들 수 있는 특정한 방법이 있어요 이 부분은 별도의 강의에서 언급할 겁니다 이 기술은 큰 잠재력을 지녔고 의미 있게 사용된다면 사용자 경험을 크게 개선할 수 있으니까요 이 강의는 주로 스케치에 관한 거지만 애니메이션을 포함해야 하는 이유를 간략히 말씀드릴게요 사용자에게 정보나 피드백을 주는 거죠 예를 들어, 휴대폰의 이미지 갤러리에서 스크롤을 내리면 iPhone과 Android 휴대폰 모두에서요 갤러리 하단에 있는 경우 애니메이션이 보이는데 더 내릴 수가 없어요 이렇게 하면 여러분이 내는 제스처가 옳다는 걸 알 수 있죠 휴대폰이 정지된 게 아니에요 이제 마지막 단계예요 일반적으로 효과적인 의사소통을 통해 인지 부하를 감소시키죠 또 다른 이유는 사용자가 현실에서 이미 갖고 있는 정신 모델을 기반으로 하기 위해서죠 UI에서 버튼을 어떻게 사용하는지 생각해 보세요 버튼을 누르는 등의 방법을 제안할 수 있죠 흐름 상태를 만드는 것도 또 다른 이유입니다 사용자에게 즐거운 경험이죠 예를 들어 진행률 표시줄을 특정 방식으로 움직여 시간 인식 방식을 바꿀 수 있어요 또한 사용자의 주의를 끌고 여정을 안내할 수도 있습니다 애니메이션은 브랜딩에도 활용할 수 있습니다 개성을 더하고 정서적 디자인을 하는 데도요 영리한 애니메이션은 눈에 띄게 할 수 있죠 또 강조하고 싶은 건 UI 애니메이션이 없어야 한다는 겁니다 보기에만 좋아서요 특정 UI 요소나 솔루션을 선택할 땐 항상 이유가 있어야 해요 애니메이션과 관련해서는 이게 더 중요해요 움직이는 모든 걸 보니까요 우린 그렇게 타고났어요 생존 메커니즘이죠 의미 없는 UI 애니메이션은 사용자를 방해하죠 애니메이션은 남용하지 마세요 스케치를 보여드리기 전에 한 가지 더 말씀드리죠 애니메이션 타이밍이 중요해요 여기서 중요한 점은 무언가가 선형으로 움직이면 부자연스럽고 로봇 같고 재미가 없다는 거예요 자연에서요 물체는 빨라지고 느려지고 갑자기 멈추는 법이 없죠 디지털 제품에 이런 규칙을 적용하면 우리 뇌가 프로그램된 방식을 반영할 수 있어요 간단히 요약하자면 이를 사용하면 UI를 더 자연스럽게 느낄 수 있죠 시간이 지나면서 매개 변수가 어떻게 변하는지 보여드리죠 선형 애니메이션에서는 시간이 지나면서 값이 같은 양으로 변해요 보통은 사용하면 안 돼요 이지 아웃은 빨리 시작한 뒤에 자연스럽게 느려진다는 뜻이죠 대부분의 경우 이 방법을 사용할 수 있습니다 빠른 스타트는 제품이 빠르게 반응한다고 느끼게 하고 동시에 앱도 더 편하게 사용할 수 있습니다 자연스러운 동작 덕분이죠 감속은 그 반대죠 시작이 느리면 끝도 빨라요 대부분은 사용하면 안 돼요 느린 시작이란 요소가 나타나길 너무 오래 기다려야 한다고 느끼게 하거든요 결국 느린 시작과 느린 끝 사이에 빠른 변화가 생기죠 타이밍의 또 다른 중요한 요소는 지속 시간입니다 경험상 들어왔다 나가는 시간은 200에서 500밀리초 정도입니다 대부분의 경우 300밀리초 이하죠 그게 최선이에요 이론은 충분히 들었으니 이제 잡아보죠 햄버거 메뉴 아이콘을 누르라고 지시하면 사이드바가 풀리죠 왼쪽으로 밀면 같은 방향으로 돌아가죠 두 번째 예제에서는 사용자가 삭제 버튼을 누르면 모드 창이 나타나요 표준 Windows의 경우 지침은 화면에 좀 더 천천히 나타나야 한다는 겁니다 하지만 사용자가 해지하면 화면에서 아주 빨리 사라져야 하죠 화살표로 창문이 어떻게 생겼는지 먼저 표시해 줄게요 커졌다가 줄어들어요 세 번째 예는 같은 속도로 같은 방향으로 움직이는 물체는 함께 속하는 것으로 인식된다는 원리죠 한 요소가 약간 다르게 행동한다면 다른 요소들과 다르다는 걸 의미하죠 이걸 애니메이션에 적용하면 사용자가 마음의 준비를 하고 단서를 얻을 수 있죠 이 예제에서 두 입력 필드가 함께 움직입니다 본질은 같다는 걸 보여주죠 버튼이 약간 지연됐어요 이 원소는 다른 기능을 한다는 신호죠 네 번째 예는 원소 변형이에요 예를 들어 아이콘 변환은 화면에 다양한 기능을 가질 수 있죠 여기 두 곡선 선이 X자로 변한다는 건 소리가 안 난다는 뜻이죠 이 모핑의 또 다른 예는 지메일 앱에서 남성을 누르고 있으면 이 아이콘이 바뀌면서 이 아이템이 선택됐다는 체크마크로 변한다는 거죠 마지막 예시는 iPhone 메일 앱이에요 받은 편지함을 열고 목록 항목을 밀면 메일이 하나 남고 세 가지 옵션이 나타납니다 더 빨리 밀면 메일은 자동으로 보관되죠 확대 기술을 사용하겠습니다 세 가지 새로운 옵션을 보여줍니다 플래그와 아카이브죠 오른쪽으로 밀면 상태만 바꿔도 안 읽게 되죠 반대로도 잘 작동해요 읽지 않은 메일을 읽은 걸로 표시할 수 있어요 애니메이션의 핵심 요소를 보여주는 스토리보드를 만들 수도 있습니다 다음 챕터에서 얘기할 스토리보드와는 다르죠 아이디어는 같아요 아이디어를 전달하기 위해 얼어붙은 순간을 찍는 거죠 UI 애니메이션을 스케치할 때 다음 사항을 유념하세요 이지 인, 이지 아웃 페이드 인, 페이드 아웃 바운스 등의 단어를 알아야 해요 타이밍 같은 중요한 요인을 말해주죠 주파수, 지속 시간, 속도죠 화살표를 이용해 회전 각도와 방향을 표시할 수 있어요 색상을 이용해서 변화를 더 잘 표현할 수 있어요 이벤트가 사용자의 동작에 의해 트리거되면 사용자의 동작이 무엇인지를 보여줍니다 클릭이나 제스처 같은 거요 UI를 스케치할 때 애니메이션과 표기법이 더 유용해요 애니메이션의 어떤 요소가 있는지 알려주고 줌 기술을 사용해요 전환과 새로운 상태에는 점 또는 점선을 사용하세요 지속 시간 동안 대부분 아웃 오브젝트를 사용합니다 300밀리초 미만이죠 자신에게 물어보세요 이 코너의 목표가 뭐죠? 관객이 누구죠? 본인이 직접 그리거나 팀원들에게 스케치를 보여 줄 때 세세한 부분까지 포함할 필요는 없어요 아이디어를 스케치하고 애니메이션이 어떻게 작동할지 캡처한 다음 인터넷에서 영감을 찾아보세요 다음 시간에는 세 가지 스케치 연습을 해 볼 겁니다 저열량 스케치와 고열량 스케치도 보여 드릴게요