Github : https://github.com/tyleteam/jquery-tyle-player

카드뉴스 플레이어 동작 모습
< 카드뉴스 플레이어 동작 모습 >

타일이 주력하는 부분은 디자인 자동화이고 그렇게 생산된 이미지 컨텐츠들이 어디에서 어떻게 소비되는지는 크게 관여하지는 않는다. 이미 기존에 트래픽이 많이 발생하는 미디어를 통해서 유통하는 것이 훨씬 이득이기도 하다. 한국에서는 생성된 대부분의 이미지들은 페이스북에서 소비되기는 하지만, 모든 사람이 페이스북을 꼭 사용하지 않을 뿐더러 페이스북은 외부로 공유하고 플레이되기가 굉장히 어려운 측면이 있다. 실제로 타일을 제공하면서 밴드나 카톡을 통해서 손쉽게 공유될 수 있는 방법이 없냐고 끊임없이 의견을 받아왔다.

따라서 우리가 주력하지는 않지만, 사용자의 편의 혹은 마케팅 증대를 위해서 손쉽게 공유될 수 있는-즉, 타일로 생성된 이미지가 즉석에서 소비될 수 있는- 페이지를 마련하였다. 컨텐츠를 공개로 전환하면 필수로 필요한 것이 카드뉴스를 원활하게 재생할 수 있는 플레이어를 제공하는 것이었다.

Requirements

  • 부드럽게 동작하여야하며 손에 감겨야한다(구글 이미지 검색 출력 벤치마크)
  • 밴드나 카카오톡, 페북을 통해서 플레이어 링크가 공유되었을 때 즉각적인 재생(여타 부가적인 UI를 제외하고)이 되어야 한다.
  • 터치에 최적화디어 촥촥 감기면서도 이미지가 넘어갈 때 딜레이가 없어야한다(touch gesture & preloading)
  • 서비스 곳곳에 embed되기 용이하도록 반응형이어야하며 부모 컨테이너 혹은 window에 맞춤형이 되어야 한다.
  • 한 카드내에 다양한 사이즈의 슬라이드가 있어도 대응이 가능하여야한다.

즉, 우리가 필요로한 것은 정말로 스토리텔링이 있는 카드뉴스를 손쉽게 볼 수 있는 그러한 플레이어였다. 처음에 이와 같은 조건을 충족하기 위해서 처음에는 간단한 carousel이나 gallery 플러그인을 탐색해보았으나, 우리가 원하는 조건을 모두 만족하는 것은 찾을 수가 없었다. 결국은 직접 제작을 하기로 하였다.

운이 좋게도 우리는 이미 보다 더 복잡한 이미지 플레이어(효과음과 배경음까지 포함한)를 개발해본 적이 있기 때문에, 그것을 기반으로 핵심적인 것들만 추려서 타일 카드뉴스 플레이어를 제작하였다.

이 플레이어는 사용법이 꽤나 간단하고 잘 작동하기 때문에, 카드뉴스 제공 서비스 혹은 이미지 슬라이더로도 사용하기에 적합하다.

Usage

<head>
    <link href="https://d1s0awd0642fry.cloudfront.net/web/plugin/jquery-tyle-player-0.1.0/dist/jquery-tyle-player.min.css" rel="stylesheet" />
    <script src="https://d1s0awd0642fry.cloudfront.net/web/plugin/jquery-tyle-player-0.1.0/dist/jquery-tyle-player.min.js"></script>
</head>
<body>
    <div id="#container"></div>

    <script>
        $('#container').tylePlayer([
            'https://d1s0awd0642fry.cloudfront.net/cards.images/Bz/BzHbuJcmdH39dhtKa_cont.png',
            'https://d1s0awd0642fry.cloudfront.net/cards.images/eK/eK6faxWbRivP7y5zE_cont.png',
            'https://d1s0awd0642fry.cloudfront.net/cards.images/Ek/EkM3BqNtd8GPKiX7w_cont.png'
        ]);
    </script>
</body>

Demo

Options & Events

$(selector).tylePlayer([
    'https://....jpg',
    'https://....jpg',
    'https://....jpg'
],
{
    width: 510,
    height: 510,
    background: '#000',
    enablePageIndicator : true,
    enableFullscreen : true,
    lastSlideLabel : 'AI Design Tool',
    lastSlideLink : 'https://tyle.io',
    onStart : function(){
        console.log("onStart");
    },
    onEnd : function(){
        console.log("onEnd");
    },
    onNext : function(slideNo){
        console.log("next slideNo", slideNo);
    },
    onPrev : function(slideNo){
        console.log("prev slideNo", slideNo);
    },
    onReplay : function(){
        console.log("replay");
    }
});

참고문서