Design and Implementation of the Primitive Motion API for Kinetic Typography

키네틱 타이포그래피를 위한 기본모션 API 설계 및 개발

Abstract

The kinetic typography animates the static text and it will enable the delivery the opinion and emotion, but we should use professional software or do complex coding precess to create a motion into an existing static text. In this paper, we propose the primitive motion API which is the way to configure the kinetic typography easily by adding a motion into the static text. In the pursuit of this purpose, we analyzed the movement of the text, defined the underlying levels of the movement and designed the primitive motion API to express the kinetic typography promptly. Furthermore, we verified the performance of the primitive motion API by testing the usability. Using the primitive motion API to implement the kinetic typography explicitly might substitute for tedious coding process and usage of the existing professional software so it makes anyone be able to apply the kinetic typography in a variety of applications.

1. 서 론

영상 문화의 발달, 디지털 기술의 급속한 발전과 더불어 글자는 단순한 정보 전달에서 나아가 다양한 효과를 지닌 커뮤니케이션의 도구로 자리 잡기 시작했다. 루돌프 아른하임(Rudolf Arnheim)이 “움직임은 주의력을 끄는 매우 강한 시지각의 대상으로 환경의 여러 조건들 속에서 변화를 가져오고, 변화는 반응을 필요로 한다”며 움직임의 중요성을 강조한 것처럼 키네틱 타이포그래피란 기존의 정적인 글자에 시간, 공간, 스피드, 중량 등 다양한 효과를 추가함으로서 시공간적인 이미지를 동시에 표현하는 글자의 동적인 표현방식이다[1].

기존에 키네틱 타이포그래피를 제작하기 위해서는 Flash나 AfterEffect와 같은 전문적인 애니메이션 저작도구를 이용하거나 SVG나 SMIL과 같이 번거로운 코딩으로 원하는 모션을 표현해야 한다[2-5]. 또한 키네틱 타이포그래피의 기술 연구는 MIT와 CMU 등 국외에서 활발하게 진행되고 있으며, 대표적인 연구로는 키네틱 타이포그래피의 엔진 구현 연구와 시간을 기반으로 한 타이포그래피의 제작 기술연구 등이 있다[6,7]. 이는 키네틱 타이포그래피가 다양한 응용 시스템에서 사용될 수 있고, 인간의 표현력이 풍부해질 수 있음을 보여준다. 그러나 기존의 애니메이션 제작도구와 제작언어는 제작시간이 오래 걸리고 전문적인 기술이 필요하며, 키네틱 타이포그래피를 표현하기에는 너무나 전문적이다. 또한, 국외의 연구는 표준 웹 환경에의 적용이 불가능하다.

본 논문에서는 소셜미디어 환경에서 키네틱 타이포그래피를 활용하는 어플리케이션에 모션을 쉽게 제작하고 코딩할 수 있도록 기본모션 API를 제안한다. 기본모션 API는 한글의 키네틱 타이포그래피 제작에 필요한 대표적인 모션을 체계적으로 분석하고 글자속성을 더하여 기본모션의 속성을 정의한 것으로, 어플리케이션에 기본모션 API를 적용하여 기존의 번거로운 키네틱 타이포그래피 제작과정을 대체할 수 있다. 그러므로 본 논문은 기존의 전문적인 저작도구의 사용이나 번거로운 코딩 작업을 대체하기 위한 기본모션 API를 제안하고, 키네틱 폰트 렌더링 엔진 및 기본모션 API를 적용한 모바일 어플리케이션 시스템을 시범 구현하여 기본모션 API의 활용 가능성을 보인다.

 

2. 관련연구

2.1 키네틱 타이포그래피 엔진

기존의 전문적인 애니메이션 저작도구가 아닌 글자의 특징을 고려한 키네틱 타이포그래피 저작을 위한 기술 연구는 90년대 후반부터 진행되어 왔다. 키네틱 타이포그래피 엔진은 키네틱 타이포그래피 저작을 위한 기초 프레임 워크로서 글자의 이동, 회전, 비틀림과 같은 기본적인 모션을 사용자에게 제공한다. 최근에는 기초 프레임 워크를 위한 인터페이스를 추가한 KTE2가 발표되었다[8]. 그러나 기존의 키네틱 타이포그래피의 엔진 구현 연구와 시간을 기반으로 한 타이포그래피의 제작 기술 연구 등 키네틱 타이포그래피 기술 연구는 표준 웹 환경의 키네틱 타이포그래피 저작도구로는 적합하지 않으며, 추가적인 움직임을 표현할 수 있는 기능이 미약하다. 본 논문은 표준 웹 환경에서 응용 가능한 키네틱 타이포그래피 엔진 개발을 위한 기본모션 API를 제안한다는 점에서 기존 연구와 차별화 된다.

2.2 키네틱 타이포그래피를 활용한 모바일 메신저

키네틱 타이포그래피를 활용한 모바일 인스턴트 메신저는 모바일 인스턴트 메신저를 위해 모션 라이브러리를 구축하고, 사용자의 능숙도와 적극성에 따라 누구나 쉽고 빠르게 키네틱 타이포그래피를 제작할 수 있도록 설계하였다[9]. 이 과정에서 키네틱 타이포그래피의 모션을 구성하고 있는 속성들을 분석한 후 모션 라이브러리를 네 가지 그룹으로 구분하였다. 본 연구에서는 네 가지 그룹의 모션 라이브러리를 바탕으로 모션을 재분석하고 체계적으로 분류하여 기본적인 움직임을 정리한 기본모션 API를 제안한다.

 

3. 기본모션 API 설계

3.1 기본모션 API의 필요성 및 개요

키네틱 타이포그래피 제작은 PC상에서의 애니메이션 저작 도구를 활용한 키네틱 타이포그래피 제작방법과는 그 환경과 의미가 많이 다르다. 기존의 PC상에서의 애니메이션 저작도구는 전문적이며 제작시간이 오래 걸리기 때문에 소셜미디어 환경에서의 키네틱 타이포그래피를 제작하기 위해서는 진입장벽이 높다. 소셜미디어 환경에서의 키네틱 타이포그래피는 쉽고 빠르게 제작되고 수정되어야 하며, 모바일 환경을 위해서는 움직일 수 있는 모션의 크기를 비롯하여 제작을 위한 메뉴 등의 선택과 설정 방법 등에도 달라야 한다. 이에, 본 논문에서는 소셜미디어 환경에서도 키네틱 타이포그래피를 효과적으로 활용할 수 있는 ‘기본모션 API’라는 개념을 제안한다.

기본모션 API는 글자의 기하학적인 움직임을 제어하기 위한 기초적인 수준으로 키네틱 모션을 정의한 것으로, 모션 라이브러리의 기초가 되는 모션을 함수로 제공한다. 또한 키네틱 모션 효과가 적용된 벡터폰트를 화면에 렌더링 할 수 있도록 기본모션 API를 포함한 키네틱 폰트 렌더링 엔진을 제공하여 도메인에 따른 키네틱 모션 라이브러리를 쉽게 구성한다. Fig. 1과 같이 키네틱 폰트 엔진은 표준 웹 환경에서 기본모션 API를 제공하여, 기본모션 API를 통하여 도메인에 따른 키네틱 모션 라이브러리를 구축하고 어플리케이션에 적용할 수 있을 것이다.

Fig. 1.Structure of hierarchical motion library.

3.2 움직임의 분류에 따른 기본모션의 구성

키네틱 타이포그래피의 모션 분석은 PC환경에서 키네틱 타이포그래피의 제작을 돕는 어도비 사의 플래시와 애프터이펙트의 애니메이션 저작도구를 분석하였고, 마이크로소프트사의 파워포인트의 애니메이션 효과와 애플사의 키노트 효과를 분석하였다. 그 결과, 본 연구에서는 키네틱 타이포그래피를 구성하는 요소를 크게 두 가지로 나누었다. 일반적인 타이포그래피를 구성하고 있는 요소와 키네틱 타이포그래피의 모션 요소이며, 이는 Table 1에서와 같이 9가지의 기본 요소와 5가지의 모션 요소로 구성된다.

Table 1.Motion configuration of the Kinetic typography

타이포그래피의 기본 요소에는 글자의 글꼴, 글자크기, 글자 색상, 바탕 색상, 글자의 투명도, 굵기, 이탤릭체의 여부, 밑줄의 여부, 자간 등의 요소로 구성된다. 키네틱 타이포그래피의 모션을 구성하는 요소는 속도, 이동방향, 글자의 위치, 모션의 크기, 모션의 반복 등이다. 이후, 모션 요소들을 조합하여 Fig. 2와 같이 키네틱 타이포그래피가 가질 수 있는 대표적인모션을 구성하였다.

Fig. 2.Set of typical motion according to the motion components.

이를 바탕으로 타이포그래피가 움직이기 위하여 취하는 이동방법에 따라 키네틱 타이포그래피의 모션을 크게 세 가지의 기본모션으로 나누고, 기본모션의 이동방향에 따라 세부모션으로 구분한 후, 모션의 움직임에 영향을 주는 속성을 분류하였다.

기본모션은 키네틱 타이포그래피의 모션 이동 방법에 따라 제자리모션, 직선모션, 곡선모션으로 나누고, 속도·글자분리·회전·움직임크기·글자크기·투명도 등으로 모션의 움직임에 영향을 주는 속성 값을 정의하였다. 이 때, 기본모션 중 제자리모션은 이동방향이 없으므로 세부모션은 없으며, 직선모션은 이동방향을 상·하·좌·우로 구분한 직선과 각도에 따른 사선으로 구분한 세부모션을 갖는다. 곡선모션은 이동모양에 따라 기본적으로 동심원과 포물선으로 구분되는 세부 모션을 지닌다. 이러한 분류 체계는 기존의 SMIL transition 분류체계를 참고로 하여 키네틱 타이포그래피 모션 분류에 적용하였다.

3.3 기본모션 API의 설계

키네틱 타이포그래피의 제작을 위한 기본모션 API은 앞서 말한 모션 분류에 따라 기본모션을 그룹지어 구축하였다. 이후, 설계된 그룹별로 속성 값을 추출하여 API로 설계하고, 이를 바탕으로 각 그룹별로 모션들의 템플릿을 구축하였다. 이는 후에 사용자가 모션을 바로 확인하고, 적용 가능하도록 만든 것이다.

3.3.1 기본모션 API를 위한 그룹핑

본 논문에서는 키네틱 타이포그래피의 모션 분류기준에 따라 기본모션 API를 제자리모션·직선모션·곡선모션 등 크게 세 가지로 정의하였다. 이후 Fig. 3과 같이 각각의 기본모션 API를 세부모션 API로 세분화한 후 각 세부모션 API에서 필요시 되는 모션속성 값을 따로 정의하였다.

Fig. 3.Motion and attributes that make up the primitive motion API.

3.3.2 기본모션 API의 속성값 설계

세부모션 API의 파라미터는 각 세부모션에서 기본적으로 움직임이 표현될 대상 객체와, 각 세부모션별로 모양을 결정짓는 속성 값으로 구성된다. Table 2는 각 세부모션 API에 대한 속성 값을 정리한 것으로 이러한 구성은 후에 사용자가 세부모션 API를 선정한 후, 단순히 모션 속성 값을 변경함으로써 키네틱 타이포그래피를 제작할 수 있게 하기 위함이다.

Table 2.Details, properties, and usage for the primitive motion API

기본모션 API의 첫 번째 그룹인 제자리모션은 제자리에서 발생하는 움직임을 Table 2의 속도, 글자분리, 회전, 움직임크기, 글자크기, 투명도로 분류하였던 모션속성에 따라 제자리회전API, 제자리글자크기변화API, 제자리투명도변화API, 제자리흔들림API로 세분화하였다. 또한 세분화된 각각의 API는 ‘움직임 대상’ 파라미터, ‘제자리 회전각·글자 크기 변화값·투명도 변화값·흔들림 크기변화값’과 같이 시간에 따라 변화할 값을 지닌 파라미터, 그리고 해당 모션이 보여지는 ‘진행시간’의 파라미터를 갖는다. 예를 들어, A라는 글자 객체에 제자리에서 회전하는 움직임을 더할 경우, 움직임 대상에 A를 선언하고, 회전각을 조절하고 진행시간을 선택함으로써 제자리에서 회전하는 키네틱 타이포그래피가 완성된다.

두 번째 그룹인 직선모션 API는 90°, 180°, 270°, 360° 등의 직각을 유지하며 이동하는 움직임과 직각이 아닌 다른 각의 움직임을 표현한다. 직선모션 API는 ‘움직임 대상’ 파라미터, ‘움직임방향’ 파라미터, ‘움직임길이’ 파라미터, ‘진행시간’ 파라미터 등 네 가지 속성 값을 갖는다. 움직임 대상은 직선모션이 표현될 글자 객체이며, 원하는 각도 혹은 상·하·좌·우와 같은 방향을 움직임방향 파라미터로 설정한다. 움직임 길이 파라미터를 조절하여 글자의 움직임 크기를 선택할 수 있으며, 진행시간의 파라미터를 통하여 움직임이 진행될 시간을 설정하여 직선모션의 속도를 설정하게 된다.

기본모션 API의 곡선모션 그룹은 동심원API가 있으며, 곡선모션이 표현될 글자객체를 설정하는 ‘움직임 대상’ 파라미터와 움직임의 속도를 조절할 수 있는 ‘진행시간’ 파라미터를 갖는다. 추가적으로 움직임 크기를 표현하는 원의 각도인 ‘동심원각도’ 파라미터와 원의 반지름을 조절하는 ‘동심원반지름’ 파라미터를 지닌다.

 

4. 기본모션 API의 구현

기본모션 API는 기존의 제한적인 기능을 가진 폰트 렌더링 엔진 기술을 확장한 고수준의 개념으로, 기존의 전문적인 소프트웨어의 사용이나 번거로운 코딩 과정을 대체할 수 있다. 또한 어플리케이션에서 키네틱 타이포그래피 객체의 생성을 자동화하고 움직임을 간편하게 표현할 수 있다. 즉, API의 단순한 호출로 글자 객체에 움직임을 적용한 키네틱 타이포그래피를 표현할 수 있다.

4.1 기본모션 API의 구현

기본모션 엔진은 표준 웹 환경인 HTML 기반의 자바스크립트 라이브러리 형태로 개발하였으며, 기본모션 엔진에서 제공하는 기본모션 API는 시간에 따른 글자의 움직임을 기하학적으로 처리한다. 즉, 기본모션 API는 Fig. 4와 같이 폰트 렌더링 엔진과 기하변환 처리 모듈을 포함하여 글자의 음직임을 제어한다. 이를 위하여 글자 객체를 생성하는 글자 객체 생성 모듈과 글자의 속성을 변환하는 모듈, 그리고 기하변환 모듈을 구현하였으며, 어플리케이션에서 기본모션 API의 호출만으로도 글자 객체를 생성하고 속성을 변환하며, 움직임을 표현할 수 있도록 구현하였다.

Fig. 4.Structure of the primitive motion API.

4.2 기본모션 API의 사용 예제 및 결과

4.2.1 기본모션 API 사용법

기본모션 API는 PC 및 스마트폰, 태블릿 PC 등 멀티 플랫폼 환경을 지원하기 위하여 표준 웹 환경인 HTML 기반의 javascript로 제공되어, 이를 Fig. 5와 같이 사용자가 작성한 HTML의 엘리먼트에 내장형 또는 플러그인 형태로 기본모션 API을 호출하여 글자 객체의 생성 및 움직임을 지정할 수 있다.

Fig. 5.Use example the primitive motion API.

4.2.2 기본모션 API의 기본 예제

사용자는 기본모션 API를 사용하기 위하여 먼저 HTML 파일에 해당 라이브러리를 추가(Table 3-(1))하고, 고유 아이디를 지닌 엘리먼트를 생성(Table 3-(2))한다. 그 후 kitySetText 함수를 호출((Table 3-(3))하면, 입력한 속성 값에 따라 글자 엘리먼트가 생성된다.

Table 3.Example source code using primitive motion API

Table 3의 예제는 HTML 내의 버튼에 클릭 이벤트 발생 시 kityLine 함수가 호출(4)되며, 해당 함수의 속성 값으로 엘리먼트의 아이디 값과 오른쪽방향, 500(px) 그리고 1초의 진행시간을 포함한다. 버튼 이벤트가 발생하면 Fig. 6과 같은 움직임을 확인할 수 있다.

Fig. 6.Examples of the linear movement.

 

5. 기본모션 API의 분석 및 평가

본 논문에서 제안하는 기본 모션 API는 사용자로 하여금 보다 쉽게 글자에 움직임을 표현할 수 있도록 함을 목적으로 한다. 이를 위하여 기본모션 엔진을 구현하였으며, 기본모션 API를 제공하여 보다 쉽게 움직임을 표현할 수 있게끔 하였다. 이를 평가하기 위하여 첫째, 기존의 애니메이션 제작도구인 프리미어로 만든 움직임과 기본모션 API를 이용하여 만든 움직임을 비교하여 기본모션 API가 정확한 움직임을 보이는지 평가한 후, 기존의 애니메이션 제작 언어인 SVG와 기본모션 API를 활용한 모바일 엽서 어플리케이션을 개발하여 기본모션 API의 적합성을 검사하였다.

5.1 기본모션의 적합성 검사

기본모션의 적합성 검사는 기존의 애니메이션 제작도구인 어도비사의 프리미어와 기본모션 API로 동일한 움직임을 구성한 후 비교하여 움직임의 적합성 검사를 진행하였다. 15명을 대상으로 평가를 진행하였으며, 평가 항목은 움직임의 동일함을 ‘매우 다르다(1점)’, ‘다르다(2점)’, ‘보통(3점)’, ‘대체로 동일하다(4점)’, ‘매우 동일하다(5점)’로 평가하였다.

6개의 기본 움직임에 따른 프리미어와의 움직임을 비교한 결과, 15명 모두 ‘매우 동일하다’로 답하였다(Table 4). 이를 통하여 기본 모션 API는 기존의 소프트웨어로 만들어진 움직임과 매우 동일한 움직임을 표현해냄을 확인할 수 있었다.

Table 4.Result of the primitive motion API suitability testing

Fig. 7.Screen of the mobile postcard application.

5.2 기본모션 API의 적합성 검사

기본모션 API의 적합성 검사를 위하여 제작한 모바일 엽서 어플리케이션은 선모션, 도형모션, 반짝임모션 등 3개의 모션 라이브러리로 구성하였다. 선모션과 도형모션은 해당 경로에 따라 글자가 움직이며 반짝임모션은 글자의 투명도가 반복하여 변하는 움직임을 나타낸다. 또한 해당 어플리케이션을 움직임속도 등의 모션 상태 변화 및 글자·색깔 등 타이포그래피의 속성을 수정할 수 있도록 개발하였다. 이 과정에서 기존의 방식과 기본모션 API를 평가하기 위하여 해당 어플리케이션의 대표적인 모션으로 지정된 모션 라이브러리를 먼저, 기존의 키네틱 타이포그래피를 표현할 수 있는 프로그래밍 언어인 SVG로 개발한 후, 기본모션 API로 추가 구현하여 동일한 움직임을 표현하였다.

5.2 기본모션 API를 통한 코드의 간편화

먼저, SVG로 움직임을 표현하기 위하여 사용자가 설정한 배경, 글자, 모션은 2차원 벡터 그래픽을 표현하는 XML 기반의 SVG파일을 필요로 한다. 그러나 이러한 SVG는 픽셀정보를 조작하기 어려워 미리 저장된 패스에 따른 움직임으로 움직임이 표현하게 된다. 반면, 기본모션 API는 글자 객체를 생성하고, 글자 속성 및 움직임을 설정하기 때문에 웹 환경에서 단순히 기본모션 API을 호출하여 글자 객체의 생성 및 움직임을 지정할 수 있다. 오른쪽으로 이동하는 움직임과 동심원 움직임을 표현하기 위한 SVG 소스코드와 플러그인 형태로 기본모션 API를 호출하여 오른쪽으로 이동하는 움직임과 동심원 움직임의 키네틱 타이포그래피를 구성한 기본모션 API 소스코드는 Table 5와 같다. 이와 같이, 기존의 SVG 코드와 기본모션 API 코드의 글자 수를 비교 평가하여 실험을 진행하였으며, 해당 코드는 각각 직선과 원의 움직임을 표현하는 움직임에 대한 예제이다.

Table 5.Soucre code of SVG and the primitive motion API about the same movement

Table 6과 같이, 동일한 움직임을 표현하는 SVG 코드와 기본모션 API 코드의 글자 수를 공백을 제외하여 비교평가를 진행한 결과는 기본모션 API 코드가 SVG 코드와 비교하여 약 0.33배만으로도 동일한 움직임을 보일 수 있었다. 이는 기존의 방법보다. 기본모션 API를 이용하게 되면 훨씬 간편한 코딩 과정이 수행됨을 증명한다.

Table 6.Letters of SVG and primitive motion API source code

5.3 기본모션 API를 통한 코드의 이해도 향상

소스코드를 통한 움직임에 대한 이해도를 측정하기 위하여 동일한 움직임을 표현하는 SVG 코드 및 기본모션 API 코드로 움직임을 매칭시키는 실험을 진행하였다. 평가항목은 소스코드로 올바른 움직임을 추측하여 연결시킨 <정답률>이며, 17명의 사용자에게 SVG코드와 기본모션 API코드를 보고, 움직임을 나타낸 그림과 연결하도록 하였다. 즉, 사용자로 하여금 소스코드만을 보고 그에 따른 움직임을 파악하도록 한 것이다.

그 결과, Fig. 8과 같이 SVG 코드와 각 코드에 해당 움직임을 바르게 연결시킨 정답률은 평균 22.94%였으며, 기본모션 API로 구현된 코드와 실제의 움직임을 바르게 연결시킨 정답률은 평균 72.94%로, SVG 코드의 정답률보다 기본모션 API의 정답률이 3.17배 이상 높음을 확인하였다. 이는 기본모션 API 코드가 SVG 코드보다 소스코드만으로도 움직임에 대한 이해도가 높았음을 확인하였다.

Fig. 8.Understanding assessment about the movement via source code.

5.4 기본모션 API의 실제 사용 여부 평가

기본모션 API가 제공된다면 실제 사용 여부를 평가하기 위하여 앞의 사용자에게 기본모션 API가 제공된다면 실제로 사용할 것인지 평가하였다. 이를 위하여 리커트 척도에 기반하여 ‘전혀 사용하지 않는다(0점)’부터 ‘반드시 사용한다(5점)’까지의 점수를 부여하도록 하였다.

Fig. 9.Evaluation the actual usage of the primitive motion API.

평가 결과, ‘반드시 사용한다’가 58.8%, ‘사용한다’가 35.3%, ‘보통’은 6%였으며, ‘사용하지 않는다’ 와 ‘절대 사용하지 않는다’는 0%의 비율을 보였다. 즉, 기존의 키네틱 타이포그래피 표현 방식과 비교했을때, 17명 중 16명이 기본모션 API에 대하여 긍정적으로 생각함을 확인하였으며, 이러한 결과를 통하여 기본모션 API의 가능성을 확인하였다.

 

6. 결 론

기존의 키네틱 타이포그래피를 제작하기 위해서는 영상 편집 및 움직임 표현을 위한 전문적인 소프트웨어를 사용하거나 번거로운 코딩 작업이 필요하였다. 본 논문에서는 키네틱 타이포그래피를 표현하기 위하여 기본모션 API를 제안한다. 기본모션 API는 애니메이션의 기본 개념에 시간, 움직임, 한글의 속성 등의 한글의 키네틱 타이포그래피 개념을 추가한 것으로, 키네틱 폰트 렌더링 엔진을 포함하기 때문에 기본모션 API의 호출만으로도 쉽게 키네틱 타이포그래피를 구성할 수 있을 것이다. 이를 위하여 움직임을 구성하는 요소를 분류하기 위하여 키네틱 모션 요소를 분석하였으며 이를 토대로 기본모션 API를 설계하였다. 또한 표준 웹 환경에서 키네틱 타이포그래피를 표현할 수 있도록 Javascript 기반으로 기본모션 API를 구현하였으며, 해당 기본모션 API를 적용한 모바일 엽서 어플리케이션을 제작하여 실생활에서의 키네틱 타이포그래피의 응용 가능성을 보였다. 이후 기본모션 API가 적용된 모바일 엽서 어플리케이션을 SVG로 재개발하여 기본모션 API가 기존의 제작 방식보다 간편하게 키네틱 타이포그래피를 구성할 수 있음을 확인하였다.

본 논문에서 제안한 기본모션 API는 기존의 키네틱 타이포그래피 제작 방식을 대체하여 함수의 호출만으로 쉽게 움직임을 표현할 수 있을 것이다. 또한 기본모션 API의 조합은 다양한 모션으로 확장되어 사용자의 설정에 따라 감성 및 움직임을 풍부하게 만들어 낼 수 있을 것이다. 기본모션 API를 이용한 모션 라이브러리를 구성하여 키네틱 타이포그래피가 적용된 어플리케이션의 활용이 기대된다.