모션 디자인

화면은 원래 순간이동을 합니다. 버튼을 누르면 다음 화면이 그 자리에 갑자기 나타나고, 항목을 지우면 목록이 즉시 다시 그려집니다. 사람의 눈은 그렇게 빠른 교체를 따라가지 못합니다. 무언가 바뀌었다는 것만 알고 무엇이 어떻게 바뀌었는지는 놓칩니다.

페이지덱에서 이 문제는 문의 게시판에 먼저 나타났습니다. 문서 목록에서 항목 하나를 지우면 목록이 즉시 다시 그려졌는데, "지운 게 맞는지 모르겠다", "다른 문서가 사라진 것 같다" 는 문의가 한 달에 열 건 넘게 들어왔습니다. 실제로는 지운 문서만 정확히 빠졌습니다. 다만 그 자리가 0초 만에 메워지는 바람에 무엇이 빠졌는지 눈으로 확인할 틈이 없었을 뿐입니다. 디자이너 민서가 지워지는 항목을 0.2초 동안 옅어지며 위로 접히게 바꾸자 그 문의는 사라졌습니다.

설정 창에서도 같은 일이 있었습니다. 톱니바퀴를 누르면 창이 화면 한가운데에 곧바로 떠서, 사용자가 자기가 어디에 있는지를 놓치고 브라우저 뒤로 가기를 눌러 문서 편집 화면 밖으로 나가 버렸습니다. 창이 톱니바퀴 자리에서 커져 나오게 바꾸자 뒤로 가기를 누르는 사람이 눈에 띄게 줄었습니다.

만드는 쪽의 사정도 있었습니다. 디자인 시안은 정지된 화면 여러 장으로 넘어갑니다. 첫 화면과 다음 화면은 그려져 있지만 그 사이의 변화는 그려져 있지 않아서, 개발자 태오가 화면마다 자기 판단으로 값을 정했습니다. 그 결과 한 제품 안에서 어떤 창은 0.1초에 튀어나오고 어떤 창은 0.6초에 걸쳐 밀려들어 왔습니다. 사용자는 그 차이를 불규칙한 반응 속도로 느꼈습니다.

모션 디자인은 이 사이 구간을 설계 대상으로 끌어올립니다. 기준선은 하나입니다. 목적이 장식이 아니라 설명이라는 것입니다. 상위 갈래인 인터랙션 디자인이 조작과 반응 전체를 다룬다면, 이 갈래는 그중에서 UI 상태가 다른 상태로 넘어가는 순간만 맡습니다. 같은 요소가 기본에서 누름으로, 비어 있음에서 채워짐으로 넘어갈 때 그 사이를 사람이 볼 수 있는 속도로 이어 주는 일입니다. 맡는 구간이 좁은 대신 판단 기준은 분명합니다. 이 움직임이 없어도 무슨 일이 일어났는지 알 수 있다면 그 움직임은 뺍니다. 알 수 없다면 그 자리는 설명이 필요한 자리이고, 얼마나 길게 어떤 속도로 설명할지가 그다음 문제가 됩니다.

이 아래 묶인 말은 세 갈래입니다. 움직임을 무엇 단위로 다루는지가 단위이고, 그 움직임 하나하나를 무엇으로 기술하는지가 속성이며, 움직임 자체가 불편한 사람을 어떻게 다루는지가 접근성입니다.

단위는 움직임을 어느 크기로 끊어 보는지를 가릅니다. 둘이 있고 목적이 다릅니다.

1. 마이크로 인터랙션 — 작은 조작 하나에 붙는 짧은 반응입니다. 하트 버튼을 누르면 살짝 커졌다 제자리로 돌아오고, 토글 스위치를 켜면 동그라미가 반대편으로 미끄러집니다. 하는 일은 피드백입니다. 눌렸다는 사실을 그 자리에서 알려 주는 것이고, 그래서 길이가 0.1초에서 0.2초로 아주 짧습니다. 이만큼도 없으면 사용자는 버튼을 한 번 더 누르고, 페이지덱에서는 그렇게 같은 문서가 두 번 공유된 적이 있습니다. 반대로 이 자리에 0.4초를 주면 알려 주려던 것이 기다림으로 바뀝니다. 누른 뒤에 반응을 지켜보는 시간이 생기기 때문입니다.
2. 트랜지션 — 상태나 화면이 통째로 바뀌는 사이를 잇는 움직임입니다. 목록에서 문서 카드를 누르면 그 카드가 커지면서 문서 화면이 되는 식입니다. 이렇게 하면 지금 보는 화면이 방금 그 카드에서 나왔다는 사실이 남고, 뒤로 가면 카드로 돌아간다는 것도 함께 알려 집니다. 길이는 0.2초에서 0.3초 사이가 보통이고, 움직이는 면적이 넓을수록 조금 더 깁니다. 움직이는 거리도 길이에 들어갑니다. 화면 아래에서 위까지 전체가 올라오는 움직임과 카드 하나가 제자리에서 조금 커지는 움직임에 같은 시간을 주면, 앞은 급하게 지나가고 뒤는 늘어져 보입니다. 그래서 명세에는 시간만 적지 않고 무엇이 얼마나 움직이는지를 함께 적습니다.

속성은 움직임 하나를 실제로 기술하는 값입니다. 움직임은 세 가지를 정하면 완성됩니다. 무엇이 변하는지(위치·크기·투명도), 얼마나 오래 변하는지, 그 사이의 속도가 어떻게 바뀌는지입니다. 뒤의 둘이 각각 하나의 용어이고, 셋을 다른 방식으로 대신 정하는 방법이 하나 더 있습니다.

1. 듀레이션 — 움직임이 이어지는 시간이고 보통 밀리초로 적습니다. 값의 크기는 움직이는 면적을 따라갑니다. 버튼 하나가 색을 바꾸는 데는 100에서 200 사이, 화면 전체가 바뀌는 데는 300에서 400 사이를 씁니다. 0이면 앞에서 본 순간이동이 되고, 500을 넘기면 사람이 기다린다고 느끼기 시작합니다. 하루에 스무 번 하는 조작이라면 0.5초짜리 움직임이 하루 10초가 됩니다.
2. 이징 — 그 시간 동안 속도가 어떻게 바뀌는지를 정한 곡선입니다. 속도를 일정하게 두면 기계가 미는 것처럼 보입니다. 현실의 물체는 멈출 때 천천히 멈추기 때문입니다. 그래서 화면에 들어오는 것에는 빨리 출발해 천천히 멈추는 곡선을, 화면에서 나가는 것에는 천천히 출발해 빨리 사라지는 곡선을 씁니다. 나가는 쪽을 빠르게 두는 이유는 이미 볼 일이 끝난 것을 오래 보여 줄 까닭이 없기 때문입니다. 곡선은 보통 이름이 붙은 몇 가지를 돌려 씁니다. 들어올 때 쓰는 ease-out, 나갈 때 쓰는 ease-in, 화면 안에서 자리만 옮길 때 쓰는 ease-in-out 셋이면 대부분의 자리가 채워집니다. 종류를 늘리는 대신 셋을 정해 두고 어디에 무엇을 쓸지 규칙으로 적어 두는 쪽이 제품 전체의 인상을 고르게 만듭니다.
3. 스프링 애니메이션 — 시간과 곡선 대신 물리값으로 움직임을 기술하는 방식입니다. 무게, 뻣뻣함, 감쇠 같은 값을 주면 용수철처럼 목표 지점을 살짝 지나쳤다가 돌아와 멈춥니다. 시간을 정해 두지 않기 때문에 움직이는 도중에 목표가 바뀌어도 끊기지 않고 이어진다는 점이 다릅니다. 사용자가 카드를 끌다가 손을 놓으면 그 속도를 그대로 이어받아 자리를 잡는 동작이 대표적인 자리입니다. 대신 몇 초에 끝나는지를 미리 정해 두지 못해서, 여러 요소가 줄지어 순서대로 움직여야 하는 자리에는 잘 맞지 않습니다. 손가락을 따라가는 움직임에는 스프링을, 화면이 정해진 순서대로 바뀌는 자리에는 시간과 곡선을 쓰는 식으로 나눠 씁니다.

접근성은 이 갈래에서 빠지기 쉬운 자리입니다. 모션 감소는 움직임에 불편을 겪는 사용자를 위해 애니메이션을 줄이는 설정입니다. 화면이 크게 미끄러지거나 확대되는 움직임은 전정 기관이 예민한 사람에게 실제로 멀미와 어지럼을 일으킵니다. 운영체제에 이 설정이 있고, 웹과 앱은 그 값을 읽어 자기 움직임을 줄일 수 있습니다. 줄인다는 것이 전부 없앤다는 뜻은 아닙니다. 큰 이동과 확대는 빼되 옅어졌다 나타나는 정도는 남겨서, 무엇이 바뀌었는지 알려 주는 기능은 지킵니다. 페이지덱은 이 설정을 값 하나로 처리했습니다. 움직임마다 따로 조건을 거는 대신 시간을 정하는 값을 한곳에 모아 두고, 설정이 켜져 있으면 큰 이동에 쓰는 값만 0에 가깝게 내립니다. 옅어지는 움직임은 그대로 둡니다. 이렇게 해 두면 새 화면을 만드는 사람이 접근성을 따로 기억하지 않아도 같은 규칙이 저절로 걸립니다.

세 갈래는 한 문장으로 이어집니다. 단위가 무엇을 움직일지 정하고, 속성이 그것을 얼마나 오래 어떤 속도로 움직일지 정하고, 접근성이 그 움직임을 누구에게 얼마나 줄여 보여 줄지 정합니다.

"이 트랜지션 400이면 늘어져요. 250으로 줄이고 이징만 ease-out으로 바꿔 봅시다."

너무 길어 답답하니 시간을 줄이고 멈추는 느낌만 남기자는 제안입니다.

"지금은 그냥 나타나요. 어디서 나온 창인지 안 보여서 사용자가 뒤로 가기를 눌러요."

움직임이 없어서 화면 사이의 관계가 끊겼다는 지적입니다.

"모션 감소 켠 사용자한테는 슬라이드 빼고 페이드만 남기도록 처리했습니다."

운영체제 설정을 읽어 큰 움직임만 걷어냈다는 뜻입니다.

페이지덱에서는 시안을 넘길 때 움직임 명세가 함께 갑니다. 민서가 화면 옆에 표를 붙여 무엇이 변하는지, 몇 밀리초 동안인지, 어떤 곡선을 쓰는지를 적어 둡니다. 이 표가 생기기 전에는 태오가 화면마다 값을 짐작해 넣었고, 디자인 QA 자리에서 "여기는 왜 이렇게 빨라요" 라는 말이 매번 나왔습니다.

표가 있어도 그대로 되지 않는 경우가 있습니다. 태오가 문서 목록에 항목이 들어올 때마다 60개가 한꺼번에 움직이게 구현했더니 화면이 눈에 띄게 끊겼습니다. 크기와 여백을 바꾸는 움직임은 브라우저가 화면 배치를 처음부터 다시 계산하게 만들기 때문입니다. 위치와 투명도만 바꾸는 쪽으로 다시 짜자 같은 60개가 부드럽게 움직였습니다. 그래서 명세를 적을 때 무엇을 움직일지는 민서가 정하되, 그것을 어떤 속성으로 구현할지는 태오와 함께 정합니다.

값을 고르는 기준도 사람마다 달라서 한동안 회의 시간을 잡아먹었습니다. 지금은 표에 쓸 수 있는 시간이 셋, 곡선이 셋으로 정해져 있습니다. 작은 것은 150, 보통은 250, 화면 전체는 350을 쓰고 그 사이 값은 쓰지 않습니다. 어떤 화면에 240이 좋을지 260이 좋을지를 두고 다투는 일이 사라졌고, 새로 들어온 사람도 표만 보고 값을 고를 수 있게 됐습니다.

움직임을 꾸미기로 여기는 경우가 가장 흔합니다. 포트폴리오나 홍보 영상에 올라오는 화려한 움직임을 먼저 접하기 때문에 생기는 오해입니다. 실제로 제품 안에서 움직임이 하는 일은 설명입니다. 지운 항목이 어디로 갔는지, 열린 창이 어디에서 나왔는지, 지금 누른 것이 반응했는지를 알려 줍니다. 꾸미기로 여기면 작업 순서에서 맨 뒤로 밀리고, 시간이 없으면 통째로 빠집니다. 그렇게 빠진 자리는 사라지지 않고 만드는 사람이 각자 메우게 되어, 같은 제품 안에서 화면마다 반응 속도가 달라집니다.

길고 부드러울수록 좋다고 생각하는 것도 흔합니다. 움직임을 길게 늘이면 시안을 볼 때는 정성 들인 것처럼 보입니다. 하지만 시안은 한 번 보고 제품은 매일 씁니다. 문서를 여는 동작에 0.6초를 주면 하루에 스무 번 여는 사람은 매일 12초를 기다립니다. 처음에는 좋다고 말하던 사용자가 한 달 뒤에 느리다고 말하는 이유가 여기 있습니다. 판단 기준은 보기 좋은지가 아니라 그 움직임이 무엇을 설명하는지이고, 설명할 것이 없으면 시간을 0으로 두는 편이 낫습니다. 반대로 줄이는 판단이 늘 옳은 것도 아닙니다. 화면이 통째로 바뀌는 자리에서 시간을 0.1초까지 내리면 움직임이 있었다는 사실만 남고 무엇이 어디로 갔는지는 다시 안 보입니다. 기준선은 눈이 따라갈 수 있는 최소 시간이고, 그 아래로 줄이면 없애는 것과 같아집니다.