모션

움직임은 설명이다

화면의 요소가 위치, 크기, 투명도, 색을 시간에 따라 바꾸는 것을 통틀어 모션(Motion)이라고 한다. 웹에서는 한 상태에서 다른 상태로 넘어가는 동안의 움직임을 전환(Transition), 처음부터 정해 둔 여러 단계를 따라 움직이는 것을 애니메이션(Animation)이라고 부르며 CSS에도 두 가지가 따로 있다. 이 장에서는 둘을 함께 "움직임"이라고 부른다.

정지 화면에서는 두 상태 사이에 무슨 일이 있었는지 보이지 않는다. 메뉴가 닫혀 있다가 다음 순간 열려 있으면, 사람은 "무엇이 바뀌었는지"를 두 화면을 비교해 찾아야 한다. 움직임은 그 사이를 이어 준다. 화면의 움직임이 하는 일은 크게 네 가지다.

이 넷 중 어디에도 들지 않는 움직임, 예를 들어 화면이 열릴 때마다 모든 글자가 날아 들어오거나 스크롤할 때마다 사진이 빙글 도는 것은 장식이다. 장식이 늘 나쁜 것은 아니다. 그림책 같은 사이트, 한 번 보고 끝나는 행사 페이지라면 즐거움 자체가 목적일 수 있다. 하지만 사람이 매일 일을 보는 화면에서 장식은 기다림이 되고, 어떤 사람에게는 몸의 불편이 된다.

이 장의 시뮬레이터는 대부분 움직인다. 그래서 먼저 움직임을 줄이는 스위치를 둔다. 운영 체제에서 "동작 줄이기"(iOS·macOS), "애니메이션 삭제"(Android) 같은 설정을 켜 두었다면 브라우저가 그것을 알려 주고, 이 장의 시뮬레이터는 처음부터 움직임을 줄인다. 아래에서 직접 바꿀 수도 있다. 이 스위치는 장 전체에 적용된다.

이 스위치가 어떻게 기기의 설정을 읽는지는 이 장의 마지막 절에서 다룬다. 여기서 기억할 것은 하나다. 움직임을 줄인다는 것은 정보를 줄이는 것이 아니다. 카드가 나타났다는 사실, 메뉴가 열렸다는 사실은 그대로 전해야 한다. 바뀌는 것은 전하는 방법이다.

빠르기의 모양: 이징

현실의 물체는 정지 상태에서 갑자기 일정한 속도로 움직이지 않는다. 서랍을 열면 처음에 힘을 주어 빨라지고, 끝에 가서 천천히 멈춘다. 공을 던지면 손을 떠날 때 가장 빠르다. 같은 속도로 출발해 같은 속도로 멈추는 움직임은 기계처럼 보인다. 디즈니의 애니메이터 프랭크 토머스와 올리 존스턴은 『The Illusion of Life: Disney Animation』(1981)에서 애니메이션의 열두 원칙을 정리하며 그중 하나로 "천천히 출발하고 천천히 멈추기"(slow in and slow out)를 꼽았다. 움직임의 처음과 끝에 그림을 촘촘히 두고 가운데는 성기게 두는 방법이다.

화면에서 시간에 따라 진행이 빨라지고 느려지는 모양을 이징(Easing)이라고 한다. 시간의 몇 퍼센트가 지났을 때 움직임이 몇 퍼센트 진행했는지를 정하는 함수다. 시간과 진행이 같은 비율로 늘어나는 것은 선형(Linear), 처음이 느리고 끝이 빠른 것은 가속(ease-in), 처음이 빠르고 끝이 느린 것은 감속(ease-out), 양 끝이 느린 것은 가감속(ease-in-out)이다.

아래 시뮬레이터에는 네 개의 공이 같은 시간 동안 같은 거리를 간다. 시간 막대를 끌거나 "재생"을 눌러 비교한다. "같은 시간 간격의 자취"를 켜면 10분의 1 시간마다 공이 있던 자리가 점으로 남는다. 점이 촘촘한 곳은 느린 곳, 성긴 곳은 빠른 곳이다.

어느 곡선을 쓸지는 움직임의 방향이 정한다. 화면 안으로 들어오는 것(열리는 메뉴, 나타나는 알림)에는 감속이 어울린다. 빨리 출발해 사람의 눈앞에서 부드럽게 멈추므로 반응이 빠르게 느껴지고 도착한 자리가 분명하다. 화면 밖으로 나가는 것(닫히는 패널, 사라지는 알림)에는 가속이 어울린다. 천천히 출발해 빨라지며 떠나므로 끝을 기다릴 필요가 없다. 화면 안에서 자리를 옮기는 것(정렬되는 목록, 커지는 카드)에는 가감속이 자연스럽다. 시작과 끝이 모두 보이기 때문이다. 선형은 색이 바뀌거나 투명도가 바뀌는 것처럼 "위치"가 없는 변화, 또는 끝없이 도는 로딩 표시에 쓴다.

곡선을 직접 만지기: cubic-bezier

CSS의 이징 곡선은 3차 베지에 곡선(Cubic Bézier curve)으로 정한다. 글꼴의 윤곽선(TypeBook 11장)과 벡터 그림 도구의 펜 도구가 쓰는 바로 그 곡선이다. 네 점 \(P_0, P_1, P_2, P_3\)로 정하는데, 이징에서는 양 끝이 \(P_0 = (0, 0)\), \(P_3 = (1, 1)\)로 고정되고 가운데 두 조절점만 고른다.

아래 그래프에서 두 조절점(손잡이)을 끌어 곡선을 만든다. 곡선 아래의 공은 그 곡선대로 움직인다. 조절점을 위로 1보다 높이 끌어 올리면 진행률이 100%를 넘었다가 돌아온다. 목표를 지나쳤다가 되돌아오는 이 움직임을 오버슈트(Overshoot)라고 한다.

편집기에서 보듯 이징 곡선은 두 점으로 거의 모든 성격을 낼 수 있다. 그래서 디자인 체계마다 몇 개의 곡선만 골라 이름을 붙여 둔다. 곡선이 많으면 사이트 곳곳이 다른 리듬으로 움직여 어수선하다. 대부분의 사이트는 감속 하나(들어오는 것과 자리 옮기는 것), 필요하면 가속 하나(나가는 것) 정도면 충분하다. 오버슈트나 탄성처럼 성격이 강한 곡선은 아주 작은 요소에, 아주 가끔 쓴다.

얼마나 길게: 지속 시간

같은 곡선이라도 시간이 다르면 전혀 다른 움직임이 된다. 너무 짧으면 움직임이 보이지 않아 순간 이동처럼 보이고, 너무 길면 사람이 화면을 기다리게 된다. 인터페이스의 반응 시간에 관한 고전적인 정리(로버트 밀러, "Response time in man-computer conversational transactions", 1968; 제이컵 닐슨, 『Usability Engineering』, 1993)는 대략 0.1초 안의 반응을 "즉각적"으로, 1초 안의 반응을 "생각의 흐름이 끊기지 않는" 정도로 본다. 화면 전환은 사람이 무언가를 누른 뒤에 일어나므로, 전환이 길어질수록 반응이 늦는 것처럼 느껴진다.

그래서 여러 디자인 지침이 인터페이스 전환에 대략 100~500ms 범위를 권하고, 작은 변화는 그 아래쪽, 큰 변화는 위쪽을 쓰라고 말한다. 정해진 표준이 아니라 실무에서 널리 공유된 경험칙(통설)이다. 기준은 세 가지다. 움직이는 거리와 크기(작은 체크 표시는 짧게, 화면 전체가 바뀌는 전환은 조금 길게), 방향(나가는 것은 들어오는 것보다 짧게), 그리고 얼마나 자주 보는가(하루에 백 번 여는 메뉴는 짧게, 한 번 보는 완료 화면은 조금 길게).

아래 휴대폰 목업에서 움직이는 대상의 크기와 지속 시간을 바꿔 가며 "열기·닫기"를 눌러 본다.

시뮬레이터에서 본 것처럼 지속 시간은 거리와 함께 생각해야 한다. 같은 250ms라도 20px을 가는 스위치는 느리고 300px을 가는 화면 전체는 빠르다. 그렇다고 속도를 일정하게 맞추면 큰 전환이 너무 길어지므로, 실무에서는 크기가 커질수록 시간을 조금씩만 늘린다. 또 하나, 사람의 눈은 들어오는 것을 보고 싶어 하지만 나가는 것은 보내 버리고 싶어 한다. 닫힘은 열림보다 짧게(예: 열림 250ms, 닫힘 150~200ms) 두는 경우가 많다.

전환이 알려 주는 공간

화면 전환의 가장 큰 쓸모는 공간 관계를 알려 주는 것이다. 웹 화면에는 실제 공간이 없지만, 사람은 움직임을 보고 머릿속에 공간을 짓는다. 메뉴가 "더보기" 단추에서 펼쳐지면 메뉴는 단추 안에 접혀 있던 것이 되고, 닫으면 단추 속으로 돌아간다. 카드를 눌렀을 때 그 카드가 커져 상세 화면이 되면, 상세 화면은 그 카드의 "안쪽"이 된다. 다음 화면이 오른쪽에서 밀려 들어오면 사람은 "한 칸 깊이 들어왔다"고 느끼고, 뒤로 가기를 누르면 왼쪽으로 돌아나갈 것을 기대한다.

아래 목업에서 "더보기" 메뉴와 신간 카드의 상세 화면을 네 가지 방식으로 열어 본다. 화면을 눌러도 열고 닫힌다. 점선 상자는 움직임이 시작한 자리다.

"움직임 없음"이 늘 나쁜 것은 아니다. 바로 위에 단추가 있고 그 아래로 짧은 목록이 붙는 정도라면, 움직임 없이도 관계가 분명하다. 하지만 새 화면이 넓게 덮을수록, 원래 화면과의 관계가 덜 분명할수록 출발점을 지키는 전환이 도움이 된다. 반대로 출발점이 엉뚱한 움직임은 없느니만 못하다. 사람은 움직임에서도 의미를 읽으려 하기 때문에, 왼쪽에서 날아온 메뉴는 "왼쪽 어딘가에 있던 것"처럼 읽힌다.

차례로 나타나기

목록의 항목이 한꺼번에 나타나지 않고 조금씩 시간 차를 두고 하나씩 나타나게 하는 것을 스태거(Stagger, 차례 등장)라고 한다. 잘 쓰면 눈이 목록을 위에서 아래로 따라가게 이끈다. 문제는 시간이 더해진다는 것이다. 항목이 \(n\)개, 차례 간격이 \(d\), 한 항목의 전환 시간이 \(T\)이면 마지막 항목이 다 나타나는 시간은 \((n-1)\,d + T\)다. 항목이 많아지면 이 시간이 금세 1초를 넘는다.

차례 등장을 쓸 때는 총 시간에 상한을 둔다. 많이 쓰는 방법은 두 가지다. 간격을 아주 짧게(수십 ms) 두거나, 처음 몇 개(첫 화면에 보이는 것)에만 차례를 주고 나머지는 한꺼번에 보이게 한다. 그리고 차례 등장은 처음 한 번만 쓴다. 필터를 바꿀 때마다, 뒤로 가기로 돌아올 때마다 목록이 다시 하나씩 나타나면 사람은 매번 기다려야 한다.

과한 움직임과 전정 장애

귀 안쪽의 전정 기관(Vestibular system)은 몸의 기울기와 움직임을 느껴 균형을 잡는다. 이 기관이나 그 신호를 처리하는 뇌에 문제가 생긴 상태를 전정 장애(Vestibular disorder)라고 한다. 어지럼증, 메스꺼움, 두통 같은 증상이 나타나는데, 눈으로 보는 움직임과 몸이 느끼는 움직임이 어긋날 때 증상이 생기거나 심해지기도 한다. 멀미와 비슷한 원리다. 전정 장애가 없어도 편두통이 있거나, 피곤하거나, 나이가 들어 균형 감각이 약해진 사람은 화면의 큰 움직임에 불편을 느낄 수 있다.

모든 움직임이 문제인 것은 아니다. 문제가 되기 쉬운 것은 화면의 넓은 면적이 움직이는 것, 특히 사람이 일으키지 않은 움직임, 스크롤과 속도가 다르게 움직이는 배경(시차 스크롤), 화면 전체가 확대·축소되거나 회전하는 전환, 빠르게 오가는 움직임이다. 작은 단추의 눌림이나 투명도 변화는 대부분 괜찮다.

아래 목업은 지후가 만든 첫 화면이다. 서점 사진 위에 제목이 있고, 스크롤하면 사진이 글자보다 느리게 움직이며(시차) 조금씩 커진다. 화면을 위아래로 끌어 스크롤한다.

웹 접근성 지침에는 움직임에 관한 기준이 셋 있다. WCAG 2.2의 2.3.3 상호작용에 의한 애니메이션(AAA)은 사람의 조작(스크롤, 누름)으로 일어나는 움직임을, 그것이 기능이나 정보 전달에 꼭 필요한 경우가 아니라면 끌 수 있게 하라고 한다. 등급은 가장 높은 AAA라 법적·계약상 요구에서 빠지는 경우가 많지만, 시차 스크롤 같은 효과에 정확히 해당한다. 2.2.2 일시 정지, 정지, 숨기기(A)는 저절로 시작해 5초 넘게 움직이는 내용(자동으로 넘어가는 배너 등)을 멈추거나 숨길 수 있게 하라고 한다. 2.3.1 세 번의 번쩍임 또는 그 이하(A)는 1초에 세 번 넘게 번쩍이는 것을 금지한다. 광과민성 발작을 일으킬 수 있기 때문이다.

줄인 움직임 선호

운영 체제의 "동작 줄이기" 설정을 켜면, 브라우저는 그 사실을 웹 페이지에 미디어 쿼리(Media query)로 알려 준다. 미디어 쿼리는 화면 폭이나 색 테마 같은 보는 환경의 조건에 따라 다른 CSS를 적용하는 장치다(5장). 움직임 설정을 알려 주는 조건이 prefers-reduced-motion이고 값은 reduce(줄여 달라)와 no-preference(따로 설정 없음) 둘이다. W3C의 Media Queries Level 5에 정의되어 있고 주요 브라우저가 모두 지원한다.

:root {
  --motion-base: 250ms;
  --ease-out: cubic-bezier(0, 0, 0.58, 1);
}
.menu {
  transition: transform var(--motion-base) var(--ease-out),
              opacity var(--motion-base) var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .menu {
    transition: opacity 150ms linear;   /* 이동은 빼고 나타남만 남긴다 */
    transform: none;
  }
  html { scroll-behavior: auto; }       /* 부드러운 스크롤도 끈다 */
}

스크립트에서도 같은 값을 읽을 수 있다. window.matchMedia("(prefers-reduced-motion: reduce)").matches가 true이면 줄여 달라는 뜻이다. 이 장 맨 위의 스위치가 바로 이 값을 읽고, 설정이 바뀌는 순간(change 이벤트)에도 따라 바뀐다. 자바스크립트로 만든 움직임(스크롤 이동, 캔버스 애니메이션, 자동 재생 영상)은 CSS의 미디어 쿼리가 막아 주지 않으므로 스크립트에서 직접 확인해야 한다.

"줄인다"는 말을 "모두 없앤다"로 읽으면 안 된다. 움직임이 하던 일(상태 변화 알림, 공간 관계)은 여전히 필요하다. 아래 시뮬레이터에서 왼쪽은 보통의 전환, 오른쪽은 움직임을 줄인 사람이 보게 될 전환이다. 오른쪽의 방법을 바꿔 가며 비교한다.

시뮬레이터의 네 방법 가운데 정답은 상황마다 다르지만, 원칙은 분명하다. 움직임을 줄인 사람에게는 이동, 확대, 회전, 시차를 빼고, 상태 변화는 짧은 페이드나 색 변화처럼 넓은 면이 움직이지 않는 방법으로 알린다. 포커스 표시, 눌림 표시, 진행 막대처럼 정보를 전하는 작은 변화는 남긴다. 반대로 설정이 없는 사람에게도 화면 전체가 날아다니는 움직임을 기본으로 두지 않는다. 줄인 움직임 설정을 켜는 사람은 불편을 느끼는 사람 가운데 일부일 뿐이다. 설정이 있는 줄도 모르는 사람이 훨씬 많다.

서윤의 웹 개편 노트