모션

모션 (Motion)

애니메이션은 인터페이스에 생동감을 더하고 사용자 경험을 강화해요.

출처: 문서

본문

Ant Motion은 Ant Design의 원칙에 기반한 애니메이션 라이브러리예요. 단순한 라이브러리 하나가 아니라, 현대 애플리케이션을 위한 React 기반의 완전한 솔루션이에요. 목표는 개발자가 최소한의 노력으로 프로젝트에 애니메이션을 적용하도록 돕는 거예요. Ant Motion은 단일 동작에서 동작의 조합까지 모든 입자(granularity) 수준의 애니메이션을 제공해요.

애니메이션의 가치 (Values of Animations)

부드러운 상호작용(Smooth interactions) - 애니메이션은 사용자 상호작용을 더 자연스럽게 만들 수 있어요.
생동감 부여(Bring vividness) - 애니메이션은 더 많은 생동감을 불어넣어 사용자의 주의를 끌고 상호작용 의욕을 높일 수 있어요.
위계 정의(Define hierarchies) - 애니메이션은 요소의 위계와 논리적 관계를 가장 직관적인 방식으로 정의할 수 있어요.
피드백 제공(Provide feedbacks) - 애니메이션은 모션 피드백을 제공해 사용자 경험을 강화할 수 있어요.

애니메이션의 효과 (Effectiveness of Animations)

애니메이션이 효과적인지 아닌지는 다음 두 가지 측면에서 판단할 수 있어요.

정당함(Justified) - 이 애니메이션이 필요한가? 이 애니메이션은 사용자가 정보를 소화하도록 도와주는가? 효과적인 애니메이션은 중복적이어서는 안 돼요.
성능(Performant) - 프레임 손실이나 지연이 있는가? 효과적인 애니메이션은 매끄러워야 하고, 제품의 전반적인 성능을 해쳐서는 안 돼요.

원칙 (Principles)

일반적인 프런트오피스 애플리케이션에서의 애니메이션 사용과 달리, 엔터프라이즈급 애플리케이션의 애니메이션은 사용자 상호작용과 그 상호작용의 효과를 강화하는 데 큰 노력을 쏟아요. 따라서 우리는 Ant Design의 핵심 디자인 언어에서 세 가지 애니메이션 디자인 원칙을 도출했어요.

/**
 * inline: true
 */

import { Col, Row } from 'antd';

const text = [
  {
    title: 'Natural',
    img: 'https://gw.alipayobjects.com/zos/rmsportal/LyTPSGknLUlxiVdwMWyu.gif',
    content:
      'The animation should based on law of nature. This assures the animation is smooth by its nature and intuitive to its users.',
  },
  {
    title: 'Performant',
    img: 'https://gw.alipayobjects.com/zos/rmsportal/SQOZVQVIossbXpzDmihu.gif',
    content:
      'The animation should have a transition time as minimal as possible so that it serves its purpose in the most effective way.',
  },
  {
    title: 'Concise',
    img: 'https://gw.alipayobjects.com/zos/rmsportal/OkIXkscKxywYLSrilPIf.gif',
    content:
      'The animation should be meaningful and justified. An over fancy animation will frustrate its users, and therefore should always be avoided.',
  },
];

function Principle() {
  const childrenToRender = text.map((item) => (
    <Col key={item.title} sm={24} md={8}>
      <div className="principle">
        <div>
          <img src={item.img} width="80%" />
        </div>
        <h4>{item.title}</h4>
        <p>{item.content}</p>
      </div>
    </Col>
  ));
  return (
    <div className="motion-principle-wrapper">
      <Row gutter={{ md: 32, sm: 0 }} className="principle-wrapper">
        {childrenToRender}
      </Row>
    </div>
  );
}

export default Principle;

세 가지 원칙:

자연스러움(Natural): 애니메이션은 자연의 법칙에 기반해야 해요. 이렇게 하면 애니메이션이 본질적으로 매끄럽고 사용자에게 직관적이게 보장돼요.
성능(Performant): 애니메이션은 목적을 가장 효과적으로 달성하도록 전환 시간을 최소로 가져야 해요.
간결함(Concise): 애니메이션은 의미 있고 정당해야 해요. 지나치게 화려한 애니메이션은 사용자를 좌절시키므로 항상 피해야 해요.

자연스러움 (Natural)

직관적인 애니메이션은 보통 자연의 법칙에 기반해요. 이를 위해 애니메이션이 매끄러워 사용자가 애니메이션의 움직임이 정당하다고 느낄 수 있어야 해요. 자연스러운 애니메이션은 사용자에게 긍정적인 사용자 경험을 불러일으켜요.

버튼 애니메이션을 예로 들면, 디자이너는 버튼을 물 위의 나뭇잎처럼 상상해요. 누르고 놓으면 잎이 물속으로 살짝 들어갔다가 다시 튀어 오르며 주위에 물결(ripple)을 만들어요.

성능 (Performant)

엔터프라이즈급 애플리케이션은 매우 효과적인 사용자 상호작용을 요구해요. 그들의 애니메이션 디자인도 마찬가지로 전환 시간을 최소로 가져요.

예를 들어, 나타나는 애니메이션과 비교해 사라지는 애니메이션은 사용자의 주의를 너무 많이 끌 필요가 없어요. 간결하고 명확하면 충분하죠. 그래서 사라지는 애니메이션은 더 빠른 속도로 스윙 아웃하면서 리스트 항목 사이의 사라짐 지연이 없도록 구성돼요. 하나의 단위로 동시에 사라지는 거죠.

간결함 (Concise)

극적이고 복잡한 애니메이션은 피하세요. 좋은 애니메이션은 사용자를 좌절시키기보다 그 일을 완수할 뿐이에요.

예를 들어, 사용자가 메뉴를 펼칠 때 그의 주요 시선은 오른쪽의 화살표 아이콘 방향 변화가 아니라 메뉴 콘텐츠에 있어요. 따라서 애니메이션은 매우 복잡하거나 주의를 흩뜨릴 필요가 없어요. 전환을 나타내기에 충분히만 바뀌면 되죠.

더 자세한 내용은 Ant Motion Animation Principles를 참고하세요.

모션