요즘 볼 수 있는 대부분의 웹 페이지에는 강조하고 싶은 요소들에 시각적인 효과를 주기 위해 애니메이션을 적용한다. 잘 적용된 웹 애니메이션은 해당 페이지를 방문했을때 세련되고 깔끔한 경험을 제공한다. 이러한 애니메이션을 직접 만든다고 생각하면 매우 까다로운 작업이겠지만, 다행스럽게도 많은 애니메이션 라이브러리를 GitHub 등에서 찾아볼 수 있다. 이 글에서는 CSS 애니메이션 적용을 위한 리소스를 몇가지 소개하고, 또 어떻게 적용하면 사용자 경험을 상승시킬 수 있을지 간략하게 고찰한다.
이 라이브러리는 웹페이지의 요소들에 적용할 수 있는 여러 애니메이션을 제공하는데, 특정 방향에서 날라와(Sliding) 표시한다던지, 통통 튀는 듯한(Bouncing) 표현을 한다던지 등의 예제를 볼 수 있다. 이런 효과들은 페이지에 접근(Entrance) 했을때 강조하고 싶은 요소에 적용하거나, 상하스크롤같은 특정 트리거 의해 호출되어 동작하는 애니메이션 적용에 적합하다.
이 라이브러리는 버튼 요소에 마우스오버 인터랙션이 발생했을때 사용하기 위한 효과들의 모음이다. 요즘은 단순하게 선택할 수 있는 버튼에 대한 강조 뿐만 아니라, 다른 요소들을 이동시키거나 동작할 때 연관된 요소들을 강조하거나 감추고 싶을 때 사용하기도 한다.
Animista는 Pre-made된 CSS 애니메이션을 재생하고 코드를 생성해주는 일종의 서비스형 소프트웨어이다. 사용자는 사전에 정의된 속성값을 직접 입력하고, 입력한 값을 기반으로 생성된 애니메이션을 재생하며, 코드를 생성할 수 있다.
위에 소개한 라이브러리들을 외에 다양한 CSS 애니메이션 효과는 조금만 검색해도 쉽게 찾아볼 수 있는데,
사실 그러한 효과들을 적용하는 것과 별개로 어디에 어떻게 쓰여야 적합할 지 판단하는 능력이 매우 중요하다.
기획단계에서부터 강조할 만한 요소들을 미리 선정하고 어떠한 효과를 줄지 협의하자
화면에서 표시되야하는 여러 요소들중에서 분명 강조하고 싶은 요소들이 있을 것이다. 더욱이 이러한 요소들은 전체적인 개발 단계에 있어서 서로 중요하다고 생각되는 영역이 다를 수 있다. 상호간의 커뮤니케이션을 통해 사전에 미리 이러한 요소들을 확인하면 쓸데없는 효과를 적용함으로 인해 발생하는 생산성 · 사용성의 하락을 미리 방지할 수 있다.
요소들과의 상호작용을 통한 사용자 경험을 고려하자
애니메이션은 사용자에게 시각적인 즐거움을 제공하나 직관적 · 일관적이지 않은 구성은 오히려 불편을 줄 수 있다.
주로 사용할 것으로 예상되는 플랫폼의 특성과 접근성을 반영하자
이 글을 읽는 사람 모두 잘 알겠지만 모바일(태블릿을 포함)에서는 마우스오버 등 특정 인터랙션을 사용하지 않을 수 있다. 이러한 인터랙션을 트리거로 애니메이션을 적용한다면, 더욱이 그 애니메이션에 중요한 인포메이션이 보여지거나 기능을 수행하도록 되어 있다면 아무리 화려하고 아름다운 효과도 의미가 없어져버린다.
'서비스 기획' 카테고리의 다른 글
| IT Service Production Framework (0) | 2022.07.21 |
|---|---|
| 비대면 Fit Interview 설계 (0) | 2021.12.20 |
| 서비스 기획 신입 및 경력 면접 예상질문 (0) | 2021.04.16 |
| 프로덕트에 내러티브를 입히다 (0) | 2021.01.20 |
| (UI/UX 리뷰) 모바일게임 [바람의나라:연] 사용자 인터페이스에 관하여 (0) | 2020.07.20 |