디자인 시스템에 모션적용하기
모션도 디자인 시스템화 & 동작으로 브랜드 아이덴티티 표현하기
본 글은 blog.prototypr.io에 기재된 글을 각종 번역기와 의역, 배경지식을 활용해 번역한 글입니다. 최대한 이해가 가기 쉽게 번역했지만, 영어 능력이 좋으시다면 이 글 보다는 아래의 원글을 보시는 것을 권해드립니다. (본 글의 저작권은 Eastern Standard의 Concepts Blog에 있습니다.)
지난 10년 동안 디자이너의 역할은 크게 바뀌었습니다. 데스크톱 환경 디자인에서 다양한 기기를 지원하는 반응형 웹 사이트로, 정적인 환경에서 매우 역동적인 웹 사이트로, 편집 디자인에서 디지털 미디어로 많이 진화했습니다. 이러한 발전 과정에서 디자이너들은 변화에 따라 생겨난 다양한 역할에 적응하고 기술과 어휘를 만들어 나가야 했습니다.
재사용할 수 있는 디자인 구성요소와 디자인 토큰 및 스타일 가이드의 시스템 측면에서 디자이너들은 능숙하게 대하지만, 여전히 대부분의 디자이너는 웹을 다룰 때 보수적으로 접근하고 있습니다. 우리가 지향하는 디자이너의 역할은 이야기꾼(storytellers)입니다. 우리의 일은 고객의 목표를 가지고 최종 사용자에게 매력적인 방법으로 전달하는 것입니다.
디자인 토큰은 색상, 애니메이션, 간격, 글꼴, 그림자 등과 같은 것을 설명하는 디자인 관련 변수를 저장하는 데 사용하는 기본 요소이다.
출처 — https://brunch.co.kr/@thinkaboutlove/288
끊임없이 변화하는 디자인 업계에서 우리는 청중을 끌어들일 뿐만 아니라, 그들을 사로잡아야 합니다. 애니메이션은 우리가 브랜드의 톤과 이야기를 전달하기 위해 디자인에 활용할 수 있는 효과적인 요소 중 하나입니다.
모션을 사용하여 의미 전달하기
우리는 주변의 모든 디자인 요소에 모션을 포함시킬 때 영감을 얻을 수 있습니다. 모션에 대한 영감을 돕기 위한 웹 사이트(dribbble, behance, Pinterest혹은 youtube, Vimeo 등)가 생겨나기 시작했고, 여러분은 비판적인 눈으로 TV를 보는 것만으로도 모션 이론에 대해 많은 것을 배울 수 있습니다. 당신이 보는 모든 TV 프로그램이나 영화에는 모션 디자인의 기본 원칙이 존재합니다. 웹디자이너의 역할은 감독의 역할과 비슷합니다. 캔버스에 있는 UI 요소들은 배우이며, 요소에 움직임을 부여(안무)하는 것입니다.
웹 사이트는 의역입니다. 원문은 ‘culture of inspiration board websites’ 문화에 영감을 주는 보드 웹 사이트라고 표기되어 있습니다.
Office Space — Mike Judge | 1999
Office Space의 한 장면을 예로 들어보겠습니다. 영화에 대한 전체적인 맥락을 모르더라도 누군가 위 장면에 관해 설명해달라고 부탁하면 대부분의 사람은 프린터에 분노하고 있다는 것을 알 수 있다고 생각합니다. 영상에 나오는 소리에서는 이를 표현하기 위한 다양한 묘사들이 나와 있습니다. 하지만 음소거로 다시 봐도 등장인물의 신체적인 언어와 영상의 프레임 샷을 통해 쉽게 알아볼 수 있습니다.
The Heider-Simmel Illusion — Fritz Heider & Marianne Simmel | 1944
좀 더 심층적으로 알아보기 위해 심리학자 프리츠 하이더 (Fritz Heider)와 마리안 시멜 (Marianne Simmel)이 제작한 비디오를 살펴보겠습니다. 연구 과정에서 과학자들은 환자에게 위 영상을 보고 어떤 일이 일어났는지 이야기해달라고 했습니다. 영상을 본 사람들은 자신이 본 객체(모양)에 인격을 부여할 것입니다. 한번 재생해 보세요. 그리고 인격을 부여하지 않고 설명해 보세요. 생각보다 쉽지 않습니다.
모션 디자인은 무성 영화를 연출하는 것과 매우 유사합니다. 고객의 요구를 만족하게 하기 위해서는 제한된 상황에서 작업해야 합니다. 대부분의 사람이 유쾌하거나 긴장감이 도는 애니메이션을 이해할 수 있기 때문에 모션은 효율적이고 보편적으로 브랜드 아이덴티티와 톤을 전달하는 데 효과적이라는 것을 알게 될 것입니다.
디자인 시스템에서 모션을 적용하기에 앞서
디자인 시스템을 만들 때 모든 측면을 고려해야 합니다. 글꼴과 색상을 반복적으로 사용할 수 있는 디자인 토큰으로 생각하는 것이 당연시되었습니다. 모션 또한 마찬가지로 다양한 Javascript 라이브러리와 CSS3가 진화하여 보다 쉽게 웹에서 애니메이션을 구현할 수 있도록 발전됨에 따라 디자인 시스템에서 모션을 정의할 때 반복적으로 사용할 수 있도록 고려해야 합니다.
디자인 시스템을 구축하기 위해 브레인스토밍을 하는 동안(의역: 브랜드 스러움을 찾는 과정), 우리는 종종 고객에게 프로젝트와 관련된 단어들을 알려달라고 요청할 것입니다. 전달받은 단어들은 고객이 의뢰한 작업에 애니메이션을 통해 활기를 불어넣을 수 있는 영감들을 얻을 수 있습니다. 때로는 말보다 더 효과적으로, 우리는 개성을 표현하기 위한 보편적인 도구로 모션을 활용할 수 있습니다.
아래의 예를 들어보자면, 좌우 모양은 모두 같지만, 두 애니메이션은 서로 다른 느낌을 전달합니다. 왼쪽의 애니메이션은 상대적으로 더 부드러운 전환을 통해 우아한 느낌을 주고, 오른쪽의 애니메이션은 빠르게 튀어나오면서 활기찬 느낌을 줍니다.
우리가 사용하는 디자인 툴들은 코드보다는 jpg(정지영상)로 추출하는데, 이러한 제한적인 방식이 가져다주는 부작용으로 디자이너들이 작업물에 대해 어떻게 실현되기를 원하는지 실제 구현이 되기 전까지 알 수 없고 기다려야 한다는 것입니다.
의역: 움직임에 대해 개발자들에게 구현을 요청하고, 구현될 때까지 제대로 잘 반영되는지 알지 못한다는 것을 말하는 것 같습니다.
아래에 이정영 님의 글 (왜 실제 제품은 디자이너의 프로토타입과 다른가)을 보면 이해하기 쉽습니다.
만약 여러분이 디자인할 때 디자인에 모션을 적용하는 방법에 대해 생각하지 않고, 모션이 구현될 때까지 기다린다면 여러분은 자신의 이야기를 더 잘 말할 수많은 기회들을 놓치고 있는 것입니다. 그에 따라 말이 안 되는 사이트가 나오게 될 수도 있습니다.
예를 들어 모달이 아래에서 왼쪽으로 미끄러지게 구현되면 사용자를 당황하게 하고 혼란스럽게 하는 문제가 생깁니다.
본격적으로 CSS 모션 적용해보기
가장 간단한 수준에서 CSS 애니메이션은 세 가지 변수로 구성됩니다.
애니메이션 속성 (property)
애니메이션 지속 시간 (duration)
애니메이션 타이밍 기능 (timing-function: ease-in 과 같은 속성)
transition: [property] [duration] [timing-function];여기서 “속성(property)”는 애니메이션을 적용하려는 CSS 속성을 나타냅니다. transform (for animating position, scale, rotation), opacity, color (혹은 background color)또는 기타 원하는 속성이 해당됩니다.
지속 시간 (duration)은 시스템화할 수 있는 애니메이션의 첫 번째 요소입니다. 애니메이션 길이를 디자인 시스템상에서 표준화하고 정의함으로써 프로젝트에 애니메이션을 쉽게 유지 보수할 수 있습니다.
타이밍 기능 (timing-function)은 애니메이션이 재생되는 시간 안에서 속성이 얼마나 빨리 동작하는지를 나타냅니다. 어렵죠? 아래 gif 애니메이션을 봐주세요.
모든 사각형이 가로지르는 시작과 종료 시각은 동일하지만, 가로지르는 동안 각각 다른 속도로 움직이는 것으로 보입니다. 위 이미지에 있는 5개의 속성(Linear, Ease, Ease-in, Ease-out, Ease-In-Out)는 CSS에 있는 기본 속성입니다. 다. 단순히 hover, foucs시 색상 변경과 같은 간단한 애니메이션을 나타내기엔 충분하지만, 브랜드 스러움(브랜드의 가치 혹은 특성)를 나타내고자 할 때에는 Cubric-Bezier으로 표현하는 방법을 공부하고 싶을 것입니다.
Cubric-Bezier을 사용하면 한 요소가 평면 위를 이동하는 속도를 지정하여 자유롭게 정의할 수 있어 브랜드 애니메이션을 정의할 때 브랜드다움을 나타낼 수 있도록 상세한 조정이 가능합니다. Cubric-Bezier의 개념과 방정식을 이해하는 것은 조금 어려울 수 있지만 감사하게도 일부 친절한 사람들이 좀 더 쉽게 이해할 수 있고 다룰 수 있는 도구와 속성값을 만들었습니다.
직접 값을 만들거나 easings.net에서 일부 값을 가져와서 타이밍 기능 (timing-function)에 적용해 보세요. 이를 통해 디자인 시스템 전체에서 일관된 애니메이션을 정의할 수 있으므로 개발자와 디자이너가 더 행복해지고 사이트를 보다 일관성 있고 통일된 느낌으로 만들 수 있습니다.
매우 효과적이라는 것이 알려졌기 때문에 앞으로 애니메이션은 고객의 이야기를 전달하고 최종 사용자들을 끌어들이는 중요한 요소로 남을 것입니다. 그리고 이러한 접근 방식을 다루는 형식은 달라질 수 있지만 전략은 그대로 유지될 것입니다. 고객을 고려하고 그에 따라 디자인하세요!
번역 후기
타이밍 기능 (timing-function)은 AfterEffect을 한 번쯤 다루어 보았다면 다들 이미 알고 계셨을 겁니다.
저는 KAKAO MAP 프로모션 사이트의 아이폰 목업 안의 스크롤 되는 애니메이션을 베껴 제 포트폴리오에 적용하면서 Cubric-Bezier에 대해 알게 되었습니다. 외국 디자인을 벤치마킹하며 애니메이션을 그대로 복사/붙여 넣기 하면서 Cubric-Bezier의 중요성과 효과는 알고 있었으나 그냥 느낌대로 괜찮으면 가져다 쓰는 식으로 사용했습니다.
업무에서 바뀐 디자인 시스템에 Transition을 적용하면서 브랜드 구성요소의 하나로써 브랜드다움을 나타낼 수 있고, 감정을 표현할 수 있다는 것을 알게 되었습니다.
국내 인기 있는 에이전시 Plus-X의 강연을 보면 작년 말 이후로 이에 관한 슬라이드가 추가되어 있습니다. 특히, 새로 개편된 Plus-X 사이트를 뜯어 보며 react 기반으로 구성되어 scss로 Transition에 대해 컴포넌트화시킨 부분도 열심히 보고 영감받고 있습니다. (위에서 말한 디자인 시스템화)
Adobe, Microsoft 디자인 시스템, 해외 서비스들 또한 뜯어 보며 많은 영감을 받고 있고요… 지금은 업무 때문에 Transition을 다루다가 멈춰져 있는데 가능할지 모르겠지만 모션을 적용하는 것에서 멈추는 것이 아닌 시스템화하는 것이 저의 목표입니다.
번역하면서 공부가 많이 되었습니다.
참고하면 도움이 될 두 가지의 글을 소개하며 마무리합니다.
