vue로 구현하는 카드폼 -Vue interactive Paycard-

'tutorial zine'이 꼽은 2019년 11월 자바스크립트 CSS 라이브러리 순위 10가지가 발표됐다. 그 중에서 vue유저에게 꽤 도움되는 라이브러리 1위는 Interactive Paycard이다. 

payCard는 사용자의 카드입력 상황을 직관적으로 보여준다. vue의 양방향 바인딩과 watch, computed, methods 기능을 시각적 효과와 접목했을 때 어떠한 아웃풋을 만들 수 있을지 정확하게 제시하고 있다. 

아래 코드팬 링크를 통해 payCard의 구현을 살펴보자. 

https://codepen.io/JavaScriptJunkie/pen/YzzNGeR

https://github.com/muhammederdem/vue-interactive-paycard/blob/master/demo.gif

Vue인스턴스 부분을 보면, 메소드 3개, computed 2개, mount 1개로 이뤄져 있다. 전반적으로 CSS가 차지하는 비중이 상당히 높다. Vue는 사용자와 디자인의 중간 역할만 할 뿐 CSS의 Flex레이아웃과 v-if, v-else와 같은 단순한 방식으로도 눈에 띄는 효과를 만들었다. vue paycard와 같은 방식은 향후 웹개발 분야의 방향을 암시한다.

vue를 사용하면 사용자는 마치 반응형 gif(움직이는 이미지)를 보는 듯한 착각에 빠진다. 사용자의 반응에 따라 이미지가 즉시 변경되기 때문에 이러한 방식은 이미지 위주로 짜여진 광고, 엔터테인먼트 광고 시장을 요동치게 만들 가능성이 높다. SVG와 달리 vue는 서버 데이터와 연결할 수 있고, 사용자의 반응이 프로그램의 기능에 직접적인 영향을 줄 수 있다.

특히, Vue와 캔버스 혹은 D3, three.js와 같은 시각적 라이브러리와 결합했을 때 많은 응용이 가능하다. vue Paycard라이브러리는 시각적인 즐거움을 뛰어넘어 표현의 즐거움이 가능한 시대를 암시하고 있다.