기타 활용팁

타일을 사용하다보면 기획이나 배포 단계, 혹은 전혀 다른 측면에서 다른 니즈들이 생기곤합니다. 필요한 모든 것들을 타일에 적용하면 무거워질 수 있기 때문에 사전 단계로 [#툴즈페이지]를 개설하여 실험적으로 기능들을 테스트하고 있습니다. 여기에서 유용함이 판단되는 경우 타일의 메이저 업데이트에 반영되기도 합니다.

URL을 통한 공유

타일에서 생성된 카드는 기본적으로 추출을 통해서 이미지 혹은 동영상의 형태로 완료됩니다. 그리고 이러한 파일 형식은 표준이기 때문에 어디에서나 업로드 가능하고 보여질 수 있습니다.

하지만 어떨때에는 업로드나 전송할 여건이 안 되는데, 제 3자에게 컨텐츠를 공유해야하는 경우가 생길 수도 있습니다. 그럴 때에는 타일의 웹공유 기능을 이용하여 URL을 얻고, 그 URL을 공유하여 제 3자가 컨텐츠를 보게 할 수 있습니다. 이는 타일 자체적으로 제공하는 컨텐츠 제공페이지로 카드뉴스 및 동영상 모두 최적화된 재생이 가능합니다.

카드편집 완료하기

상단의 완료 버튼 클릭

카드 완료(추출)를 통해서 현재 제작된 컨텐츠를 타일서버가 이미지/동영상으로 추출할 수 있도록 요청합니다. 이 작업이 완료되면 다운받지 않아도 서버상에 완료된 파일들이 생성되게 됩니다.

공유주소 획득하기

share에서 URL 복사

조금의 시간이 흐른 후에 완료 창이 나타나는 것을 확인할 수 있습니다. 여기에서 우측에 Share 파트를 보면 https://tyle.io/exp...와 같은 주소가 있고 그 옆에 Copy가 있는 것을 볼 수 있습니다. Copy를 클릭하여 이 주소를 복사하고, 메신저나 메일 등의 방법을 통해서 공유하고자하는 대상에게 전달하십시오.

주소를 통한 접근

URL을 알고 있는 제 3자는 해당 주소를 클릭하여, 모바일에서나 데스크탑에서나 접근하고 제작된 컨텐츠를 볼 수 있습니다.

웹브라우저를 통해 해당 주소에 접근

해당 카드가 동영상으로도 추출되었다면 자동으로 동영상모드를 우선으로 합니다. 카드뉴스 모드로 열리는 것을 원한다면 URL의 가장 뒤에 #image를 붙여서 https://tyle.io/ex...#image와 같이 주소를 만들고 공유하십시오.

타인의 완성물로 바로 시작

[제작 실습]에서 나온 것처럼 타일은 기본적으로 슬라이드 하나만 있어도, 내용을 조금씩 치환해가면서 원하는 내용을 만들어낼 수 있습니다. 추가로 뭔가 시작하는 기본틀이 필요하다면 [템플릿]을 이용할 수도 있습니다.

그럼에도 불구하고, 정말로 A부터 Z까지 완성된 것이 이미 있고 거기에 약간의 수정만 가하고 싶을 수도 있습니다. 타일에서는 다른 사람들이 만든 분위기와 내용 구성을 공개하는 장치가 있고, 공개된 작품을 이용하여 나의 작품으로 만들 수도 있습니다.

둘러보기 페이지 접근

상단의 네비게이션에서 둘러보기를 눌러, 공개된 작품리스트에 접근합니다.

둘러보기 페이지로 접근

이곳엔 다른 사용자분들이 공개한 작품들이 전시되어 있습니다. 우리는 이곳에서 마음에 드는 작품을 고르고, 해당 디자인을 바탕으로 보다 빠르게 작업을 할 것입니다.

마음에 드는 작품을 하나 선택하면 재생화면으로 전환됩니다. 본인이 원하는 스타일인지 확인하십시오.

작품 확인

해당 재생화면 하단에 Start with this design 버튼이 보일 것입니다. 이 버튼을 클릭하시면, 이 디자인이 세팅된 편집화면을 보실 수 있습니다.

편집 화면

타인의 저작물이기 때문에 완전히 동일하게 사용할 수는 없고, 텍스트와 비주얼은 사용자에 맞게 편집해주시면 완료가 가능합니다.

나만의 커스텀으로 시작

타일은 웹사이트(tyle.io)에 접속하여 진행하는 SaaS(Soft as a service)입니다. 따라서 접속하고 화면상에 있는 기능들을 이용하여 원하는 작업물을 완료하는 것이 기본입니다. 그런데 타일은 웹의 특성을 적극적으로 활용하여 자동화 할 수 있는 기능들도 숨어 있습니다.

파라미터를 통해서 제어할 수 있는 전체 리스트는 개발자를 위한 페이지에 게재되어 있습니다. 간단하게 몇 가지 예시를 통해서 활용할 수 있는 방법에 대해서 알아봅니다.

이 페이지를 이해하기 위해서는 웹사이트의 URL에 대한 지식이 조금 필요합니다.

특정 텍스트를 깔고 시작

대부분의 파라미터는 시작하는 시점에 특정 조건을 가지도록 하는 것입니다(물론 중간 변경도 가능합니다). 우리가 어떤 작업을 하는데 항상 똑같은 텍스트로부터 시작을 한다고 가정합니다. 그러면 편집화면을 불러올 때 이 텍스트가 기본적으로 배치된 상태로 시작할 수 있도록 지정할 수 있습니다. 제목텍스트는 t1 파라미터를 이용하면 됩니다. 아래의 링크를 클릭해보십시오.

https://tyle.io/create?t1=타일은 텍스트를 커스텀 할 수 있습니다.

'타일은 텍스트를 커스텀 할 수 있습니다'라는 텍스트가 시작하자마자 들어가 있는 것을 알 수 있습니다. 제목테스트 말고도 본문 텍스트도 기본으로 배치할 수 있습니다.

https://tyle.io/create?t1=타일은 텍스트를 커스텀 할 수 있습니다.&t2=그리고 본문 텍스트도 변경 가능합니다

위와 같이 시작하는 텍스트를 미리 입력하는 방법을 알아보았습니다.

이번에는 다른 변수에 대한 예시를 알아보도록 합니다. 타일에서는 컨텐츠의 브랜드를 나타낼 수 있는 로고를 삽입할 수 있습니다. 특정 그룹이 생성하는 고정된 로고가 있다면, 시작할 때마다 특정 로고로 시작하는 링크를 생성할 수도 있습니다. logo_url 파라미터를 이용하면 됩니다.

https://tyle.io/create?logo_url=https://tyle.io/i/logo-sample.png

위 링크로 편집화면에 진입하면 미리 지정된 샘플로고가 기본적으로 배치된 상태로 시작합니다.

특정 카드를 깔고 시작

위 방법 등을 통해서 텍스트, 로고, 색상, 레이아웃 등 각각의 특성들을 하나 혹은 여러개 조합하여 지정할 수 있습니다. 그런데 가장 확실한 것은 이미 이 모든 조건들이 조합되어 이미 생성된 카드일 것입니다. 사용자가 원하는 모든 조건이 다 적용된 카드를 하나 생성하고 저장합니다.

그리고 이 카드의 고유주소를 이용하여 같은 방법으로 주소를 생성하면 됩니다. 아래의 방법으로 브라우저 상단의 주소창에서 카드 고유번호를 복사합니다.

주소창에서 카드 고유번호 추출

이제부터 시작할 때마다 이 카드의 내용물을 기본적으로 적용한 상태로 시작해보겠습니다. 카드로부터 시작하는 파라미터는 duplicate_card_id입니다. 아래와 같이 주소를 생성하시면 됩니다.

주소창에서 복제하기 위한 주소입력

실제 작동되는 예시는 아래와 같습니다.

https://tyle.io/create?duplicate_card_id=9soxa5kmrqyj5u

특정 카드의 내용을 기반으로 시작하는 것은 타일 기능인 [복제]에서도 사용하고 있습니다. 좌측 사이드바에서 대상 카드쪽으로 이동하고 를 누른 후 복제를 선택합니다. 그러면 새로운 주소로 이동되는데, 이때 주소창을 보면 위 링크처럼 되어 있는 것을 확인할 수 있습니다. 이 주소를 그냥 활용하셔도 됩니다.

내용으로 시작할 때, 편집 화면이 열리지 않고 바로 결과물을 호출할 수도 있습니다. 편집화면 없이 이미지 생성를 참고하십시오.

텍스트 영상 제작

타일이 마케팅 목적을 달성하기 위하여 만들어졌지만, 결과물 자체는 다소 심심할 수 있습니다. 최근에는 보다 더 속도감 있고 짧고 임팩트 있는 영상들이 많이 소비되어가는 추세도 존재합니다. 타이포 모션을 이용하면, 메시지만 입력하여 속도감 있는 타이포그래픽 모션을 생성할 수 있습니다.

당연한 이야기지만 텍스트 영상 제작을 위해서는 타일 계정이 필요합니다.

사용방법은 전반적으로 타일과 비슷합니다. 기본적으로 텍스트만 입력하면 되기에 오히려 더 간단합니다. 다 채우고 나서 미리보기를 통해서 영상화 되었을 때의 모습을 볼 수 있습니다.

편집화면 접속

타이포모션 편집 화면

https://tyle.io/typemotion

심플 모션에 접속하기 위해서는 위 주소로 접속하십시오. 로그인이 되어 있지 않다면 바로 로그인 화면으로 이동됩니다. 타일의 로그인 계정을 이용하여 접속하십시오(타일 계정이 없다면 가입하기를 먼저 하십시오).

편집화면에 접속하면 타일과 비슷하게 가운데 하나의 슬라이드가 있습니다.

텍스트 편집

심플 모션은 타일과 다르게 보다 더 속도감있고 심플한 영상 제작을 목적으로 합니다. 따라서 텍스트는 단일로만 제공됩니다. 슬라이드의 가운데를 클릭하여 텍스트를 입력해보십시오. 텍스트 박스에 커서를 넣는 경우 좌측에서 텍스트에 관한 기본적인 설정을 할 수 있습니다.

툴바 기능
색상 컬러 셋을 변경
효과 텍스트가 나타나는 효과를 변경, 텍스트에 대한 효과는 미리보기에서도 일괄 변경 가능
폰트 텍스트 폰트 변경
배경 텍스트 박스의 배경 느낌 변경
크기 텍스트 크기 변경
줄간격 텍스트의 줄간격 변경
가로정렬 텍스트 가로 정렬
세로정렬 텍스트 세로 위치 변경
전체 적용 현 텍스트의 설정을 모든 슬라이드에 적용

배경이미지 편집

슬라이드에서 가운드를 조금 벗어난 부분을 클릭하면, 이미지 편집에 관한 툴바가 열립니다.

툴바 기능
찾아보기 이미지 검색
크기 이미지의 크기 모드 변경
가독성 가독성을 위한 밝기 변경
색상 이미지 외부의 배경 색상 변경
전체 적용 현 이미지의 설정을 모든 슬라이드에 적용
삭제 이미지를 제거하고 배경색만 남김

로고 편집

왼쪽 상단의 로고를 클릭하면, 로고 편집에 관한 툴바가 열립니다.

툴바 기능
찾아보기 로고 검색
크기 로고의 크기 변경
가로위치 슬라이드내 로고의 가로 위치 변경
세로위치 슬라이드내 로고의 세로 위치 변경
전체 적용 현 로고의 설정을 모든 슬라이드에 적용

슬라이드 설정

각각의 요소 외에 슬라이드 자체에 관한 설정도 할 있습니다. 각 슬라이드의 우측 상단에 톱니바퀴 아이콘을 클릭하면 아래의 기능들을 사용할 수 있습니다.

툴바 기능
Set Duration 슬라이드의 유지시간을 수동으로 설정
Duplicate 슬라이드를 복제하여 바로 밑에 생성
Delete 슬라이드 삭제

미리보기 및 추출

타일에서와 마찬가지로 상단의 미리보기 버튼을 눌러, 동영상이 되었을 때의 모습을 볼 수 있습니다. 또한 같은 화면 하단에 있는 옵션들을 조정하면 실시간으로 재조정이 됩니다.

작업물이 다 완성이 되면, 상단에서 완료버튼을 누르면 바로 영상 추출이 시작됩니다. 타일과는 다르게 완료 되기까지 몇 분 정도 기다려야되므로, 탭을 가만히 둔 상태에서 다른 작업을 진행하시면 됩니다. 완료되면 자동으로 다운로드가 실행되고 사용자의 컴퓨터 다운로드 폴더에서 확인이 가능합니다.

앰프스토리 제작

앰프스토리는 구글에서 제안하는 보다 빠른 스토리텔링 방법입니다(공식사이트). 앰프스토리를 이용하면 컨텐츠가 모바일의 구글 검색에서 상위에 노출되며, 사용자가 클릭했을 때에도 굉장히 빠른 속도로 열립니다. 이는 속도 최적화를 위해 구글에서 컨텐츠를 자체적으로 캐시하기 때문입니다.

타일의 실험적인 기능들을 통해 이러한 앰프스토리 추출을 지원하고 있습니다(타일의 다음 메이저 업데이트에 공식 반영될 예정입니다). 아래의 주소를 통해 앰프스토리 툴에 접근할 수 있습니다.

앰프스토리 편집 화면

https://amp.tyle.io

사이트에 전반적인 사용방법은 [텍스트 영상 제작]와 동일합니다. 텍스트를 입력하고, 필요한 경우 이미지나 동영상을 배경에 넣을 수 있습니다. 그리고 상단의 Preview를 눌러, 몇 가지 애니메이션 효과를 넣을 수 있습니다.

제작을 완료했을 때에는 상단의 Save 혹은 옆의 에서 Export to AMP를 눌러 앰프스토리 파일로 다운 받을 수도 있습니다. 단일 html 파일이지만 해당 파일안에 필요한 리소스에 대한 모든 요청이 기록되어 있습니다.

앰프스토리는 자체 서버를 통해서만 제공되기 때문에 해당 파일을 개발 혹은 서버관리자에게 전달하시면 됩니다.

웹페이지 내용으로 시작

웹 서핑을 하다보면 특정 이미지를 배경으로 간단하게 글씨를 삽입하고 싶은 경우가 있습니다. 아니면 블로그의 내용을 기반으로 썸네일을 생성하려고 하는 경우도 있을 수 있습니다. 이럴 때에 해당 이미지를 다운 받고 타일에 접속해서 업로드하고 내용수정하는 과정이 없이, 바로 이미지를 이용하여 편집화면을 호출할 수 있습니다. 이에 대한 몇 가지 도구를 제공하고 있습니다.

북마클렛

북마클렛 페이지

https://tyle.io/bookmarklet

북마크에 버튼을 추가하고, 이미지화하고 싶은 어떤 이미지가 있을 때 해당 버튼을 누르면 웹페이지의 내용을 기반으로 편집화면을 지동으로 구성합니다. 북마크바를 이용하는 것이므로 모든 데스크탑 기반 브라우저에서 사용 가능합니다.

크롬 확장프로그램

크롬 웹스토어 tyle image picker

크롬을 사용중이라면, 크롬의 확장 프로그램을 이용해보십시오. 썸네일화 하고 싶은 페이지에서 확장프로그램을 실행하면 자동으로 내용을 기반으로 썸네일 편집화면을 제작합니다. 확장 프로그램을 사용하면 페이지 외에도 특정 이미지에 마우스를 대고 이미지로 제작을 시도할 수도 있습니다.

수동 방법

만약 북마크바나 확장 프로그램 모두 싫다면 아래와 같이 파라미터로 직접 이용하는 방법도 있습니다.

https://tyle.io/create?url=대상 웹페이지 URL

각 플랫폼별 비용 분석

통합 비용분석이 필요한 이유

비용분석기를 이용하면 모든 플랫폼의 전환률을 확인 가능

온라인 마케팅을 진행하면 페이스북, 구글, 네이버 등 광고관리자가 있는 여러 플랫폼을 이용하게 됩니다. 자사의 사이트에 분석을 구글분석기(analytics)로 하고 있다면, 각 플랫폼의 광고 집행 데이터를 한 곳에 모아서 분석을 할 수 있습니다. 이렇게하면 실제로 전환률이나 구글분석기의 목표(Goal) 기능과도 연결을 지을 수가 있어서 보다 효율적인 분석이 가능합니다.

문제는 각 플랫폼별 양식이 통일되어 있지 않은데 구글분석기에는 통일을 해서 넣어야하는 것입니다. 각각의 날짜 형식도 다르고, 추출되는 데이터의 컬럼명 들도 제각각입니다. 타일의 비용분석기 페이지는 이러한 노가다 작업을 대신해주는 툴입니다.

비용 분석기(Cost Analysis) 기능을 사용하기 위해서는 뷰(View)에서 이것을 활성화하여야합니다. 메뉴로 접근했을 때 자동으로 활성화 버튼이 나오므로, 설정으로 이동한 이후에 활성화하면 됩니다.

비용데이터 변환기 접속

비용분석기

https://tyle.io/ga-cost-import

페이지는 단순하게 구성되어있습니다. 각 플랫폼의 광고관리자에서 데이터를 추출하여 이 페이지에 넣으면 되는 것입니다. 각 플랫폼별 추출하는 방법은 아래의 링크를 참고해주십시오.

구글애즈에서의 추출

...

페이스북에서 추출하는 방법

...

네이버에서 추출하는 방법

...


비용분석기로 변환

각각의 사이트에서 추출한 자료(csv)를 이 페이지의 가운데에 떨구면 자동으로 추출됩니다. 자동으로 각 파일별로 추출한 날짜의 기간을 하단에 표시하므로, 다음 추출시에 이 날짜를 참고하여 중복되지 않는 기간을 설정할 수 있습니다.

구글분석기에 입력

...

;