영상을 위한 자체 제작툴 만들기>Tool Type Mix

Type Mix

[figma에서 작성한 나의 디자인들] 아무래도 lyrics mv 다 보니 여러 이미지들을 설명하는 것이 필요했다. 그리고 각각의 아이콘과 구성들이 추후 어떻게 가사를 위한 키네틱 타이포 애니메이션으로 응용 되는지 그 작업 플로우의 시각적인 명세가 필요해서 나는 이렇게 예시를 나열하며 각 케이스 스터디를 피그마에서 구현해 보았다.

{ 디자인을 어느 방향으로 했는지 구술 및 전개과정 요약해서 디자인을 이루는 과정들을 UX 디자이너의 관점에서 디자인 시스템에 대해서 이야기하는 내용 }

[텍스쳐 믹스에서 구현하는 키네틱 랩]

키네틱 랩의 앱 구성을 시작했다. 일일이 다른 애니메이션을 매번 일일이 코드를 분석하고 디버깅하며 구성하는 게 너무 신물이 났다.

나는 각각의 키네틱 타이포 애니메이션이 서로 중복되는 코드를 최대한 줄인 채 GUI로 내가 비쥬얼 아이디어를 구성하면 그걸 프롭으로 연결해서 여러 variant를 믹스하면 다채로운 애니메이션을 구성할 수 있는 구성으로 가길 원했다.

포토샵이나 애프터 이펙트, 카발리에서 직관적으로 타이포 그래피를 이루는 과정을 참고 삼아 이를 sencha js의 여러 디폴트 컴포넌트를 써서 UI를 구성하였다.

모바일 리스폰시브로도 구성하려고 했지만 그런 작업은 그만두었다. 웹앱과 다르게 이 툴은 어차피 대부분 데스크탑에서 작업을 할 것이고 굳이 사용하지도 않는 모바일 뷰를 위해 시간과 리소스를 낭비하는 것이 효용성이 없기 때문이다. 모바일을 진행하려면 모바일 유저 경험에 맞게 몇가지의 기능을 축소하고 압축해야하는데 과연 그럴 용의가 있느냐가 문제이다. 결국 UX 란 슬릭한 비쥬얼이 아니라 실 사용자의 요구도와 사용처, 상품의 목적성을 정확히 파악하고 효용성에 맞춰 제한된 시간에 한정된 리소스를 가지고 가장 최적의 목적성을 달성하는 전략디자인인 것이다.

이런 식으로 공통된 프롭을 조정할 수 있는 여러 common 요소들을 gui로 구성한다. 그 이외 프리셋에서 굳이 common한 요소들이 없는 부분은 text 입력창을 통해 파라미터를 넣어 prop을 전달하는 방식으로 가기로 했다.

이렇게 다채롭게 레이아웃 구성을 할 수 있다.

섹션 별로 다른 애니메이션을 줘서 linear하게 컴포넌트들을 나누는 작업을 한다.