Developer Center

여러분의 웹사이트/CMS에 타일을 포함시켜, 이용자가 직접 이미지를 만들 수 있도록 할 수 있습니다. 타일은 모달창으로 실행되어 완벽하게 여러분의 웹사이트의 일부인 것처럼 작동됩니다. 사용자는 별도의 가입이나 인증절차 없이 타일인지 모른 상태로 여러분의 웹사이트에서 작업을 완료합니다.

Demo

jsFiddle에서 예제확인

준비

클라이언트 토큰 생성

api_key는 일단 예시와 같이 testApiKey로 설정하십시오. support@tyle.io로 연락을 주시면 독립된 api_key를 먼저 발급해드립니다.

스크립트 삽입

아래의 스크립트를 웹사이트에 삽입하면 모든 준비가 완료됩니다.

 <script>
       (function(){var j=document.createElement("script");j.type="application/javascript";j.src='https://tyle.io/sdk/sdk-0.1.1.js';document.body.appendChild(j);})()
 </script>

작동

타일 구동 메소드

여러분의 웹사이트에서 아래의 함수를 실행하면 웹사이트내에 타일 모달창이 작동되고 콜백을 발생시킵니다. 예제는 아래와 같습니다.

 <script>
       tyleSDK.open({
             api_key : 'testApiKey', // 준비중
             user_token : 'testUserToken',
             done_callback : function(data){
                   // do something using data.images
             }
       });
 </script>

Parameters

슬라이드 내부의 값에 대한 설정값은 배열로도 지정이 가능합니다(ex. t1[]=나는&t1[]=천재다)
이렇게 되어 있는 것은 필수 파라미터입니다.

Key	Type	Default	Description
`api_key`	String		API를 이용하기 위한 웹사이트에 할당된 고유키
`user_token`	String		여러분의 웹사이트에 로그인된 사용자의 고유키입니다. 클라이언트상 노출되므로 임의 조정이 어렵도록 알파벳 대소문자와 숫자가 포함된 해쉬된 형태의 문자열이 좋습니다.
`done_callback`	Function	function(data){ }	사용자가 타일에서 생성한 이미지들을 여러분의 웹사이트에서 어떻게 처리할 것인가 정의하는 콜백함수입니다. 이 함수를 통해서 여러분은 화면에 표시 및 자체 DB에 저장할 수 있습니다. data에는 base64로 인코딩된 이미지들과 텍스트 정보가 들어 있습니다. { card_id : "1I3ecoe796c", title : "테스트 입력 카드", slides : [ { t1 : '제목 텍스트 정보', t2 : '본문 텍스트 정보' } ], images : [ 'data:image/png;base64,iVBO...', 'data:image/png;base64,bAbo...' ] }
cancel_callback	Function	function(data){ }	사용자가 발행까지 가지 않고 모달창을 취소하는 경우입니다.
modal_max_width	Number	1024	타일 모달창의 최대 크기로 단위는 px입니다.
modal_max_height	Number	800	타일 모달창의 최대 크기로 단위는 px입니다.
selector	String	#target-dom	타일을 모달이 아닌 특정 Dom내에 위치시킬 수 있습니다.
no_sidebar	Boolean	false	좌측 상단의 사이드바와 사이드바를 여는 버튼을 숨길 수 있습니다.
no_header	Boolean	false	최상단의 관련 도구들을 숨길 수 있습니다. 완료 버튼도 함께 사라지기 때문에 외부 페이지에서 `tyleSDK.save()` 혹은 `tyleSDK.done()` 을 호출하도록 하여야합니다.
no_footer	Boolean	false	하단의 타일 사이트 관련 정보를 숨길 수 있습니다.
card_id	String	cPYEjPwiTB1472616291	시작시 특정 카드 수정모드로 진입합니다.
duplicate_card_id	String	cPYEjPwiTB1472616291	시작시 특정 카드의 디자인과 내용으로 진입합니다.
layout_id	String	FS	시작시 특정 레이아웃 타입으로 진입합니다. `T` `B` `L` `R` `FS` `MS` `SS` `TS` `BS` `LS` `RS`
container_padding	Number	23	시작시 컨테이너 여백을 지정합니다.
box_padding	Number	23	시작시 박스 안쪽 여백을 지정합니다.
color_id	String	warm_00	시작시 특정 색상으로 진입합니다. 색상 전체보기
size_id	String	size-10	시작시 사이즈를 지정합니다. 사이즈 전체보기
size	String	900x900	시작시 사이즈를 지정합니다. 단위는 px입니다.
box_enabled	Boolean	true	시작시 박스 보이기 여부를 지정합니다. `true` `false`
box_gradient	String	none	시작시 박스의 그라데이션 여부를 지정합니다. `none` `oneway` `twoway`
box_border_style	String		시작시 박스의 외각선 모양을 지정합니다. `solid` `dotted`
box_border_type	String		시작시 박스의 선모양을 지정합니다. `tblr` `tb` `lr` `none`
box_border_radius	Number		시작시 박스의 동그란 모양을 결정합니다. `0` `100`
image_enabled	Boolean	true	시작시 배경이미지 보이기 여부를 지정합니다. `true` `false`
image_url	String		시작시 배경이미지를 지정합니다. `http://domain.com/example.jpg`
image_scale	Number	1	시작시 배경이미지의 크기를 지정합니다. `100` `110` `120` `130` `140` `150` `160` `170` `180` `190` `200`
image_rotate	Number	0	시작시 배경이미지의 회전을 지정합니다. `0` `90` `180` `270`
image_source	String	네모사진	시작시 배경이미지의 출처를 명시합니다. `네모사진`
logo_enabled	Boolean	true	시작시 로고 보이기 여부를 지정합니다. `true` `false`
logo_url	String		시작시 로고를 지정합니다. `http://domain.com/example.jpg`
logo_size	String	m	시작시 로고를 사이즈를 지정합니다. `s` `m` `l` `xl`
logo_align	String		시작시 로고의 가로 정렬을 지정합니다. `left` `center` `right`
logo_valign	String		시작시 로고의 세로 정렬을 지정합니다. `top` `middle` `bottom`
logo_invert	String		시작시 로고의 특수효과를 지정합니다. `auto` `y` `n` `w` `b`
t1_enabled	Boolean	true	시작시 제목텍스트를 보이기 여부를 지정합니다. `true` `false`
t1	String		시작시 임의의 제목텍스트를 지정합니다.
t1_id	String		시작시 제목텍스트를 지정합니다. 폰트 전체보기
t1_size	Number		시작시 제목텍스트 사이즈를 지정합니다. `60` `70` `80` `90` `100` `110` `120` `130` `140` `150` `160`
t1_align	String		시작시 제목텍스트 가로정렬을 지정합니다. `left` `center` `right` `justify` `stretch`
t1_valign	String		시작시 제목텍스트 세로정렬을 지정합니다. `top` `middle` `bottom`
t1_area	String		시작시 제목텍스트가 박스안으로 들어갈지 지정합니다. `in` `out`
t2_enabled	Boolean	true	시작시 본문텍스트를 보이기 여부를 지정합니다. `true` `false`
t2	String		시작시 임의의 본문텍스트를 지정합니다.
t2_id	String		시작시 본문텍스트를 지정합니다. 폰트 전체보기
t2_size	Number		시작시 본문텍스트 사이즈를 지정합니다. `30` `40` `50` `60` `70` `80` `90` `100` `110` `120` `130`
t2_align	String		시작시 본문텍스트 가로정렬을 지정합니다. `left` `center` `right` `justify`
t2_valign	String		시작시 본문텍스트 세로정렬을 지정합니다. `top` `middle` `bottom`
url	String		시작시 임의의 웹주소의 컨텐츠를 가져와서 지정합니다. 제목/본문/대표이미지 등이 인식됩니다.(현재 미지원) `https://yourdomain.com`
return_type	String	base64	어떤 타입으로 이미지 결과를 반환 받을건지 지정합니다. `base64` `url` `modal`
language	String	ko	사용가능한 언어코드 en - English ko - 한국어

타일 저장/추출 메소드

타일 모달내에서 추출까지 대부분의 작업은 이루어지지만, CMS등에서 강제 저장을 발생시키기 위해서는 아래의 메서드를 호출하십시오.

 <script>
       tyleSDK.save()
 </script>

모달 외부에서 강제로 추출까지 진행하려면 아래의 메서드를 호출하시면 됩니다. 이 메서드가 호출되면 타일 SDK는 전달받은 doneCallback을 호출합니다.

 <script>
       tyleSDK.done()
 </script>

타일 종료 메소드

타일 모달의 배경이나 X를 눌러 사용자가 닫을 수도 있지만, 웹사이트 자체에서도 수동으로 닫을 수 있습니다.

 <script>
       tyleSDK.close()
 </script>

스타일링하기

여러분의 웹사이트에서 구동되는 모달창의 프레임은 간단하게 CSS 변경만으로도 바꿀 수 있습니다. 모달을 구성하는 엘리먼트는 #tyle-sdk-wrapper라는 최상위 객체에 포함되어 있으므로 자체 CSS 설정시 #tyle-sdk-wrapper #tyle-sdk-iframe-wrapper {}와 같이 최상위 객체를 같이 지정하여 오버라이드를 해주시면 됩니다.

엘리먼트의 계층구조는 아래와 같습니다.

 <div id="tyle-sdk-wrapper">
       <div id="tyle-sdk-iframe-wrapper">
             <div id="tyle-sdk-iframe-bg"></div>
             <iframe id="tyle-sdk-iframe" frameborder="0"></iframe>
       </div>
       <div id="tyle-sdk-overlay"></div>
 </div>

Save base64 as image binary

done_callback을 통해서 전달받은 base64는 인터페이스상에서는 플랫폼에 상관없이 쉽게 사용가능합니다. 이 이미지를 자체 서버에 저장하는 경우는 아래의 코드들을 참고해주세요.

Node.js: http://stackoverflow.com/questions/6926016/nodejs-saving-a-base64-encoded-image-to-disk
http://stackoverflow.com/questions/20267939/nodejs-write-base64-image-file
PHP: http://stackoverflow.com/questions/11511511/how-to-save-a-png-image-server-side-from-a-base64-data-string
ASP: http://stackoverflow.com/questions/14629104/save-base64-to-an-image-using-classic-asp

iOS / Android에서의 호출

모바일의 경우에 성능상의 문제로 SDK script를 호출하기 보다 직접 create 페이지를 호출하는 것하고 결과에 대한 콜백을 받는 것을 추천합니다. 웹뷰 호출시 https://tyle.io/create?api_key=xxx&user_token={sdk_id+xxx} 주소를 부르고 네이티브에서 tyleSDKCallback(jsonResult)를 웹뷰쪽에서 호출 할 수 있도록 건네주시면 됩니다.

직접 호출하는 경우에는 user_token 값 앞에 sdk id를 붙여서 호출하셔야합니다. sdk id가 100이고 기본적인 user_token이 asdf라면 user_token=100-asdf와 같이 호출해주여야합니다. sdk id는 hhlee@tyle.io에 문의를 주시면 됩니다.

※ jsonResult 값은 done_callback과 동일합니다.

iOS

Switf3 기반 WKWebView를 이용합니다.

참고자료 :

https://github.com/tyleteam/Webview_sdk_switf3

Android

webview.addJavascriptInterface를 이용합니다.

참고자료 :

SDK내 모든 카드리스트 호출

귀사의 SDK를 이용하여 작성된 카드 리스트를 불러올 수 있습니다. 가입한 계정의 이메일을 {your@example.com}에 입력하여 간단한 인증을 합니다.

GET https://tyle.io/sdk-cards/{api_key}/{your@example.com}.json

Parameters

Key	Type	Default	Description
last_card_id	String		last_card_id보다 작은 조건으로 리스트를 불러옵니다. 보통 리스트에서 '더보기'를 눌렀을 때 추가적으로 불러오게 되는데 이때 지정을하여 다음 페이지를 불러 올 수 있습니다.

 {
     "status":"done",
     "message":"",
     "rows":[
         {
             "user_id":"UkxEIJTIFdPS0FJhZGlv",
             "title":"테스트입니다!",
             "tags":"자동디자인,테스트,카드뉴스",
             "hits":0,
             "description":"테스트로 작성한 설명",
             "created_at":"2016-11-02 10:29:46",
             "updated_at":"2016-11-04 11:37:55",
             "lang":"ko",
             "card_id":"xvbZFofzqtm"
             "view_url":"https://tyle.io/cards/xvbZFofzqtm"
             "update_url":"https://tyle.io/update/xvbZFofzqtm"
         }
         ...
     ]
 }

특정 유저의 모든 카드리스트 호출

특정 유저가 SDK를 이용하여 작성된 카드 리스트를 불러올 수 있습니다. SDK 호출시 입력한 user_token을 이용하시면 됩니다.

GET https://tyle.io/sdk-cards/{api_key}/{user_token}.json

Parameters

Key	Type	Default	Description
last_card_id	String		last_card_id보다 작은 조건으로 리스트를 불러옵니다. 보통 리스트에서 '더보기'를 눌렀을 때 추가적으로 불러오게 되는데 이때 지정을하여 다음 페이지를 불러 올 수 있습니다.

 {
     "status":"done",
     "message":"",
     "rows":[
         {
             "user_id":"UkxEIJTIFdPS0FJhZGlv",
             "title":"테스트입니다!",
             "tags":"자동디자인,테스트,카드뉴스",
             "hits":0,
             "description":"테스트로 작성한 설명",
             "created_at":"2016-11-02 10:29:46",
             "updated_at":"2016-11-04 11:37:55",
             "lang":"ko",
             "card_id":"xvbZFofzqtm"
             "view_url":"https://tyle.io/cards/xvbZFofzqtm"
             "update_url":"https://tyle.io/update/xvbZFofzqtm"
         }
         ...
     ]
 }

특정 유저의 카드 삭제

특정 유저의 카드를 삭제합니다. SDK 호출시 입력한 user_token을 이용하시면 됩니다.

DELETE https://tyle.io/sdk-cards/{api_key}/{user_token}/{card_id}.json

 {
     "status":"done",
     "message":""
 }

Add Image Library

각 유저의 '나의 이미지들'에 임의로 등록이 가능합니다.

POST https://tyle.io/custom/add-image-libs

Parameters

Key	Type	Description
`api_key`	String	API를 이용하기 위한 웹사이트에 할당된 고유키
`user_token`	String	여러분의 웹사이트에 로그인된 사용자의 고유키입니다. 클라이언트상 노출되므로 임의 조정이 어렵도록 알파벳 대소문자와 숫자가 포함된 해쉬된 형태의 문자열이 좋습니다.
`image_url[]`	String	업로드할 이미지에 대한 원격지 주소를 등록합니다. 배열키이므로 여러개를 등록하실 수 있습니다.

 {
     "status":"done",
     "code":200,
     "message":"Success upload",
     "data":[]
 }

주소로 통해 시작틀 생성

타일의 제작화면을 열 때, 지정된 파라미터를 이용하여 시작틀을 설정할 수 있습니다.

GET https://tyle.io/create?k1=v1&k2=v2...

Key	Type	Default	Description
duplicate_card_id	String	cPYEjPwiTB1472616291	시작시 특정 카드의 디자인과 내용으로 진입합니다.
layout_id	String	FS	시작시 특정 레이아웃 타입으로 진입합니다. `T` `B` `L` `R` `FS` `MS` `SS` `TS` `BS` `LS` `RS`
container_padding	Number	23	시작시 컨테이너 여백을 지정합니다.
box_padding	Number	23	시작시 박스 안쪽 여백을 지정합니다.
color_id	String	warm_00	시작시 특정 색상으로 진입합니다. 색상 전체보기
size_id	String	size-10	시작시 사이즈를 지정합니다. 사이즈 전체보기
size	String	900x900	시작시 사이즈를 지정합니다. 단위는 px입니다.
box_enabled	Boolean	true	시작시 박스 보이기 여부를 지정합니다. `true` `false`
box_gradient	String	none	시작시 박스의 그라데이션 여부를 지정합니다. `none` `oneway` `twoway`
box_border_style	String		시작시 박스의 외각선 모양을 지정합니다. `solid` `dotted`
box_border_type	String		시작시 박스의 선모양을 지정합니다. `tblr` `tb` `lr` `none`
box_border_radius	Number		시작시 박스의 동그란 모양을 결정합니다. `0` `100`
image_enabled	Boolean	true	시작시 배경이미지 보이기 여부를 지정합니다. `true` `false`
image_url	String		시작시 배경이미지를 지정합니다. `http://domain.com/example.jpg`
image_scale	Number	1	시작시 배경이미지의 크기를 지정합니다. `100` `110` `120` `130` `140` `150` `160` `170` `180` `190` `200`
image_rotate	Number	0	시작시 배경이미지의 회전을 지정합니다. `0` `90` `180` `270`
image_source	String	네모사진	시작시 배경이미지의 출처를 명시합니다. `네모사진`
logo_enabled	Boolean	true	시작시 로고 보이기 여부를 지정합니다. `true` `false`
logo_url	String		시작시 로고를 지정합니다. `http://domain.com/example.jpg`
logo_size	String	m	시작시 로고를 사이즈를 지정합니다. `s` `m` `l` `xl`
logo_align	String		시작시 로고의 가로 정렬을 지정합니다. `left` `center` `right`
logo_valign	String		시작시 로고의 세로 정렬을 지정합니다. `top` `middle` `bottom`
logo_invert	String		시작시 로고의 특수효과를 지정합니다. `auto` `y` `n` `w` `b`
t1_enabled	Boolean	true	시작시 제목텍스트를 보이기 여부를 지정합니다. `true` `false`
t1	String		시작시 임의의 제목텍스트를 지정합니다.
t1_id	String		시작시 제목텍스트를 지정합니다. 폰트 전체보기
t1_size	Number		시작시 제목텍스트 사이즈를 지정합니다. `60` `70` `80` `90` `100` `110` `120` `130` `140` `150` `160`
t1_align	String		시작시 제목텍스트 가로정렬을 지정합니다. `left` `center` `right` `justify` `stretch`
t1_valign	String		시작시 제목텍스트 세로정렬을 지정합니다. `top` `middle` `bottom`
t1_area	String		시작시 제목텍스트가 박스안으로 들어갈지 지정합니다. `in` `out`
t2_enabled	Boolean	true	시작시 본문텍스트를 보이기 여부를 지정합니다. `true` `false`
t2	String		시작시 임의의 본문텍스트를 지정합니다.
t2_id	String		시작시 본문텍스트를 지정합니다. 폰트 전체보기
t2_size	Number		시작시 본문텍스트 사이즈를 지정합니다. `30` `40` `50` `60` `70` `80` `90` `100` `110` `120` `130`
t2_align	String		시작시 본문텍스트 가로정렬을 지정합니다. `left` `center` `right` `justify`
t2_valign	String		시작시 본문텍스트 세로정렬을 지정합니다. `top` `middle` `bottom`
url	String		시작시 임의의 웹주소의 컨텐츠를 가져와서 지정합니다. 제목/본문/대표이미지 등이 인식됩니다.(현재 미지원) `https://yourdomain.com`

카드의 데이터

GET https://tyle.io/explore/{카드번호}.json

Response(json)

 {
     "status":"done",
     "message":"",
     "row":{
         "card_id":"xvbZFofzqtm",
         "title":"항상 따고!",
         "slides":[
             {
                 "t1":"여기를 두 번 클릭하여 제목을 입력해주세요",
                 "t2":"여기를 두 번 클릭하면 본문을 여러줄 입력 가능합니다."
             },
             {
                 "t1":"여기를 두 번 클릭하여 제목을 입력해주세요",
                 "t2":"여기를 두 번 클릭하면 본문을 여러줄 입력 가능합니다."
             }
         ],
         "images":[
             "https://d1s0awd0642fry.cloudfront.net/cards.exports/xv/xvbZFofzqtm/tyle-xvb-1.png",
             "https://d1s0awd0642fry.cloudfront.net/cards.exports/xv/xvbZFofzqtm/tyle-xvb-2.png"
         ]
     }
 }

타일을 운영하면서 만든 여러가지 소스들입니다. 모두 MIT 라이센스이므로 자사에 자유롭게 사용가능합니다.

Jquery - CardNews Player

타일의 플레이어는 이미지들만 지정하면 해당 이미지들을 자유롭게 플레이할 수 있는 라이브러리입니다. 마우스 기반, 터치기반에서도 자유롭게 스와이프할 수 있으며 반응형입니다.

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

jQuery - Progress Indicator

컨텐츠페이지에서 현재 유저가 얼마나 읽었는지 상태를 알려주는 막대입니다.

https://github.com/tyleteam/jquery-progress-indicator