컨텐츠 요소들

[메시지 중심 원칙]에도 소개되었듯이 타일은 메시지만 작성하면 나머지 비주얼이 자동으로 되는 것을 목표로하고 있습니다. 이에 따라 디자인 요소를 통제하고 통제된 만큼은 타일 자동화 엔진이 통제하도록 하였습니다. 그럼으로써 사용자는 디자인을 신경쓰지 않고 내용에 집중할 수 있게 되는 것입니다. 타일에서 구성하고 있는 구성요소는 크게 아래의 5가지입니다.

다섯가지 요소

슬라이드 컨테이너

슬라이드 컨테이너는 슬라이드 자체를 감싸고 있는 추상적인 요소입니다. 쉽게 말 해 슬라이드 그 자체를 말한다고 보시면 됩니다. [요소 선택기]에서 가장 뒤쪽에 있는 것을 클릭하거나, 혹은 [속성창 호출]을 통해서도 속성창을 호출할 수 있습니다.

속성창에서의 세부적인 기능들은 아래와 같습니다.

개별 다운로드

슬라이드 상단 툴바에서 연필 버튼 > 우측 속성창에서 개별 다운로드 버튼

현재 슬라이드 하나만 이미지로 다운로드 받습니다. 보통은 [이미지 및 영상 추출]을 통하여 추출하는데, 굳이 전체를 받고 압축풀고 그런 것이 아니라 단순히 한 슬라이드의 이미지가 필요할 때 이용합니다.

다운로드 받는 위치는 [faq/edit/available-format/download-folder]을 참고하세요.

슬라이드 복제

슬라이드 상단 툴바에서 연필 버튼 > 우측 속성창에서 복제 버튼

현재의 슬라이드를 그대로 복제하여 바로 아래에 추가합니다. 단순히 현재 슬라이드 바로 아래에 새로운 슬라이드를 추가하는 용도로 사용하기도 합니다(정상적인 추가는 가장 마지막에 추가되므로, 이렇게 추가하고 순서를 변경하는 것보다 더 편할 때도 있습니다).

슬라이드 삭제

슬라이드 상단 툴바에서 연필 버튼 > 우측 속성창에서 삭제 버튼

선택한 슬라이드를 삭제합니다.

각 요소 선택

슬라이드 상단 툴바에서 연필 버튼 > 우측 속성창에서 선택할 요소 선택

슬라이드 컨테이너의 속성창에서는, 세부 요소들을 선택할 수도 있습니다.

슬라이드 유지시간

슬라이드 상단 툴바에서 연필 버튼 > 우측 속성창에서 슬라이드 유지시간 > 원하는 초 설정

슬라이드는 기본적으로 안에 담겨있는 텍스트가 눈으로 읽히는 시간동안 유지됩니다. 이에 따라 사용자가 별도로 슬라이드별 시간을 세세하게 설정하지 않아도 동영상으로 나왔을 때 자연스러운 타이밍에 전환됩니다. 하지만 어떤 슬라이드는 내용이 없어도 오래 유지해야하고, 어떤 슬라이드는 텍스트가 있어도 빨리 전환되어야 할 수도 있습니다. 이 기능을 이용하면 최대 30초까지 임의로 해당 슬라이드의 시간을 조정할 수 있습니다.

이렇게 강제로 지정을 하게 되는 경우 재생되던 나레이션이 겹치거나, 에니메이션이 부자연스럽게 끝날 수 있습니다.

특별한 목적의 슬라이드에 한정해서 사용하셔야합니다. 모든 슬라이드를 재생 최대 시간인 30초까지 늘리면, 전체 재생시간이 추출 가능시간을 초과하여 오류가 생길 수 있습니다. 해당 제약사항은 [faq/edit/available-format/limit-time]을 참고하세요.

모드 조절

슬라이드 상단 툴바에서 연필 버튼 > 우측 속성창에서 모드 스위치 전환

사용자가 전달하려는 메시지에 집중할 수 있도록, 디자인 요소의 시각적부분을 타일의 디자인 엔진이 통제합니다. 하지만 어떠한 경우에는 디자인엔진의 결과가 마음에 들지 않을 수 있고, 사용자가 원하는대로 발현되지 않을 수 있습니다. 이럴 때에 이 모드를 변경하여, 수동모드로 진행하시면 됩니다.

수동모드로 전환하면, 슬라이드 상단의 [디자인 변경] 버튼이 노란색으로 바뀌고, 화면상에 9개의 영역 구분선이 표시됩니다. 그리고 사용자가 요소의 크기나 위치를 마음대로 바꾸어도 디자인엔진은 연산을 포기하게 됩니다. 그래서 사용자는 디자인엔진에 간섭받지 않고 마음대로 커스텀할 수 있습니다.

수동모드로 전환하였다고해서 모든 요소를 그림판 수준으로 커스텀 할 수는 없습니다. 구성요소 일부를 숨길 수는 있지만 새로운 요소를 추가할 수는 없습니다(이 부분은 현재 업그레이드 중입니다).

이미지/동영상

이미지/동영상은 컨텐츠의 비주얼을 담당하는 중요한 요소입니다. 왜냐하면 비주얼도 텍스트와 함께 메시지를 구성하는 주요요소이기 때문입니다. 텍스트에 걸맞는 비주얼을 보여줄 때 시청자는 확실하게 메시지를 전달받을 수 있습니다.

직접업로드

슬라이드에서 이미지/영상 선택 > 우측 속성창에서 직접업로드 > 업로드할 파일 선택

사용자의 컴퓨터(혹은 스마트폰)에 있는 비주얼을 이 기능을 통하여 직접 등록하여 사용할 수 있습니다. 업로드 가능한 비주얼 포맷은 [업로드 가능한 포맷은 무엇인가요?]을 참고하십시오.

직접 업로드한 비주얼은 타일에서 저작권을 보증할 수 없습니다. 직접 업로드한 자료의 사용허가 권리는 사용자가 직접 보증하시고 책임지셔야합니다. 애매한 부분이 있다면 타일에서 제공하는 저작권 걱정없는 [이미지 검색] 혹은 [동영상 검색]를 활용하십시오.

나의 이미지들

슬라이드에서 이미지/영상 선택 > 우측 속성창에서 나의 이미지들

[직접업로드]에서 업로드한 기존의 리소스들을 탐색할 수 있습니다. 더 이상 사용하지 않는다면 우측 상단의 드롭다운(▼)을 누르고 '삭제'를 선택하실 수 있습니다.

이미지 검색

슬라이드에서 이미지/영상 선택 > 우측 속성창에서 이미지 검색 > 원하는 검색어 입력

타일에서 직접 제휴하여 상용적으로 활용 가능한 스톡이미지들을 검색할 수 있습니다.

동영상 검색

슬라이드에서 이미지/영상 선택 > 우측 속성창에서 동영상 검색 > 원하는 검색어 입력

타일에서 직접 제휴하여 상용적으로 활용 가능한 스톡동영상들을 검색할 수 있습니다.

배치

배치에 관한 자세한 사항은 [배치]를 참고해주십시오.

필터

슬라이드에서 이미지/영상 선택 > 우측 속성창에서 필터 > 원하는 필터 선택

이미지/동영상에 효과를 줄 수 있는 필터를 변경할 수 있습니다. 단순히 분위기만을 위해서도 사용할 수 있고, 경우에 따라 가독성을 위해서 사용하기도 합니다.

이미지 밝기

슬라이드에서 이미지/영상 선택 > 우측 속성창에서 이미지 밝기 > 옵션 선택

이미지/동영상의 밝기를 변경합니다. 경우에 따라 가독성을 위해서 어둡게(혹은 밝게) 변경하기도 합니다.

테두리마진

슬라이드에서 이미지/영상 선택 > 우측 속성창에서 테두리 마진 > 옵션 선택

[배치]에 따라 변경가능 여부가 결정되는 것으로, 이미지/동영상 주위를 감싸고 있는 여백을 조절할 수 있습니다. 설명이 애매하므로 아래 이미지를 참고하십시오.

현재 슬라이드에 적용된 [배치]에 따라 비활성화 되어 있을 수 있습니다.

크기

슬라이드에서 이미지/영상 선택 > 우측 속성창에서 크기 > 옵션 조절

비주얼의 크기를 조정합니다.

테두리의 크기는 [반응형 디자인 원칙]에 의해 자동으로 결정되기 때문에 내부에 보이는 크기에 대해서만 변경이 가능합니다. 크기를 확대하여 내용물이 확대되면 테두리보다 왼쪽에서 드래그를 통해서 포커스되는 영역을 변경할 수도 있습니다. 만일 이미지 내용과 테두리 자체의 크기를 꼭 맞게 조절하고자 한다면 [모드 조절]을 이용하십시오.

회전

슬라이드에서 이미지/영상 선택 > 우측 속성창에서 회전 > 옵션 선택

이미지/동영상을 회전시킵니다. 가끔씩 폰에서 촬영한 것을 직접업로드 했을 때 회전값이 정상적으로 인식되지 않을 때도 활용 가능합니다.

출처

슬라이드에서 이미지/영상 선택 > 우측 속성창에서 출처 > 출처 기입

[직접업로드]를 이용하여 사용하는 경우, 라이센스에 따라 해당 자료에 관한 출처정보를 기입할 필요가 있습니다. 이럴 때 텍스트와 별개로 이미지/동영상에 한정해서 조그만 출처를 지정하는데 쓰입니다. 출처 기입이 필요하거 없을 때에는 비워두거나, 혹은 단순히 조그만 보조정보처럼 기입하여 활용할 수 있습니다.

출처란은 간단하게 기입하는 것을 목적으로 하고 있기에 짧은 글자만 입력 가능합니다. 원하는 모든 출처를 기입하기 어려울 때에는 간략하게 줄여서 기입하여 주십시오.

텍스트

텍스트는 보통 비주얼 위에 나타나서 명시적으로 메시지를 설명하는 요소입니다. 따라서 이미지/동영상과 함께 메시지를 이루는 중요한 요소라고 할 수 있습니다. 보통 모바일에서 소비된다고 가정했을 때 텍스트가 많으면 바람직하지 않으므로 단순히 한 덩어리의 텍스트만 있어도 무난합니다. 하지만 여러 경우를 소화하기 위하여 타일에서는 텍스트를 '제목텍스트'와 '본문텍스트' 두 덩어리를 제공합니다. 상황에 따라 사용자가 선택하여 사용 가능합니다.

내용

슬라이드에서 텍스트 선택 > 바로 내용 작성(모바일의 경우 속성창에서 변경)

텍스트의 내용 그 자체를 말합니다. 슬라이드에서 수정하고자하는 텍스트 요소를 선택하고, 한 번 더 선택하면 내용을 변경할 수 있는 상태로 바뀝니다.

텍스트는 아무런 꾸밈요소를 넣지 않고 그냥 타이핑만을 제안드리지만, 일부 단어나 글자에 꾸밈효과를 넣어야 할 때도 있습니다. 그럴 때에는 효과를 주려고하는 글자를 선택한 후에 바로 위 툴바의 효과 버튼을 누르면 됩니다. 화면상에서는 특수기호가 추가되는 모습이지만 완료를 눌러서 위지윅 상태로 전환하면 적용된 모습을 볼 수 있습니다.

텍스트 효과 넣기

내용 입력시 적용하고자하는 글자 앞뒤로 특수문자 기입

위에서 추가된 특수기호는 마크다운이라고 하는데, 타일에서는 아래와 같은 마크다운 기능들을 제공합니다. 임의로 직접 아래의 마크다운 기호를 써서 적용하시는 것도 가능합니다(모바일에서는 이렇게 입력합니다).

기호 효과 예시 결과
| 하이라이트 `텍스트`
** 굵게 **텍스트**
` 음영 `텍스트`
`` 반전 ``텍스트``
|| 하이라이트 그림자 ||텍스트||
@@ 그림자 @@텍스트@@
&& 3D 그림자 &&텍스트&&
== 네온 ==텍스트==
\\ 외곽선 \\텍스트\\

텍스트의 양에 제한은 없지만, 주 소비매체인 모바일을 고려했을 때 지나치게 작거나 많은 텍스트는 입력이 불가능합니다. 타일에서 추천하는 적절량은 제목텍스트 한줄, 본문텍스트 두세줄 정도입니다.

마크다운을 여러번 지정하여 뭔가 의도대로 효과가 나타나지 않으면, 마크다운 특수기호를 전부 지우고 다시 지정하시길 바랍니다.

색상

색상을 입히고자하는 텍스트에 앞뒤로 |기호를 삽입 > 슬라이드 하단의 색상 버튼 선택 > 우측 속성창에서 원하는 색상 선택 및 강조색 변경

타일에서의 텍스트 색상은 다소 특이한 방법으로 적용됩니다. 보통의 다른 서비스라면 적용하고자하는 텍스트를 선택하고 원하는 색상을 정하면 그만입니다. 하지만 이렇게 된다면 일관성없는 색들이 슬라이드에 들어가므로 결과물의 퀄리티가 많이 떨어지게 됩니다.

그래서 타일에서는 이미 어울리는 [색상세트]들을 만들어두고 있고, 이 [색상세트]을 교체함으로써 색상을 변경하는 것입니다. 그리고 각 [색상세트]마다 강조색을 몇 가지 가지고 있는데, 이 강조색은 텍스트내에 텍스트 효과를 지정한 곳에만 적용됩니다. 아래의 예시 영상을 보시면 쉽게 알 수 있습니다.

글꼴

슬라이드에서 텍스트 선택 > 글꼴 > 글꼴 선택

텍스트가 메시지의 중요한 부분임을 감안했을 때 텍스트의 글꼴 역시 중요한 요인입니다. 타일에서는 제휴된 폰트업체를 통해 상용 폰트를 제한없이 사용하도록 제공하고 있습니다.

타일에서 제공하는 모든 라이센스는 타일의 정상적 사용에 기반할 때에만 보증합니다. 만일 타일의 결과물을 임의로 편집 및 변형하거나 외부 리소스와 결합했을 때에는 보증에서 제외됩니다.

크기

슬라이드에서 텍스트 선택 > 크기 > 옵션 조절

텍스트의 크기를 지정합니다. [반응형 디자인 원칙]에 따라 텍스트의 크기는 픽셀이나 인치 등 절대값이 아닌 슬라이드상에서의 상대크기로 나타냅니다. 따라서 차후에 슬라이드의 크기를 변경하여도 최대한 지정된 글씨크기를 유지할 수 있습니다.

[가로 정렬]에서 stretch로 지정된 경우에는 크기가 무시됩니다. 이 stretch는 적당히 박스크기에 맞춰서 크기를 조절하는 정렬방식이기 때문입니다.

가로 정렬

슬라이드에서 텍스트 선택 > 가로 정렬 > 옵션 선택

텍스트의 가로 정렬을 변경합니다.

세로 정렬

슬라이드에서 텍스트 선택 > 세로 정렬 > 옵션 선택

텍스트의 세로 정렬을 변경합니다.

선모양

슬라이드에서 텍스트 선택 > 선모양 > 여러번 클릭

보통은 박스의 선모양을 주로 사용하지만, 간혹 텍스트 자체에 선모양을 지정해야하는 경우도 있습니다. 제목텍스트와 본문텍스트 사이에 선 하나를 두어 구분하는 경우를 생각해 볼 수 있습니다.

옵션을 여러번 클릭할 때마다 현재 상태에서 가능한 몇 가지 옵션들이 돌아가면서 적용되는 것을 볼 수 있습니다.

로고는 컨텐츠의 브랜드를 결정짓는 요인입니다. 이미지/동영상/텍스트만큼 중요하지는 않지만, 각 슬라이드마다, 그리고 만들어지는 모든 카드마다 일정하게 반복적으로 들어가게 됩니다. [메시지 중심 원칙]에 따라 다른 요소보다 후순위로 배치되고 하나만 배치되는데, 보통 왼쪽위나 오른쪽 위 구석에 조용히 위치합니다.

로고를 두개 이상 넣고 싶다면 [tips/logo-merger]를 참고하세요.

직접 업로드

슬라이드에서 로고 선택 > 우측 속성창에서 직접 업로드 > 업로드할 로고 선택

사용자의 컴퓨터(혹은 스마트폰)에 있는 로고를 이 기능을 통하여 직접 등록하여 사용할 수 있습니다. 업로드 가능한 비주얼 포맷은 [업로드 가능한 포맷은 무엇인가요?]을 참고하십시오.

나의 로고들

슬라이드에서 로고 선택 > 우측 속성창에서 나의 로고들 > 로고 선택

[직접 업로드]에서 업로드한 기존의 리소스들을 탐색할 수 있습니다. 더 이상 사용하지 않는다면 우측 상단의 드롭다운(▼)을 누르고 '삭제'를 선택하실 수 있습니다.

위치

슬라이드에서 로고 선택 > 우측 속성창에서 위치부분 > 위치 선택

로고의 위치를 수동으로 지정합니다. 중앙에 있는 AUTO로 설정하면 보다 더 중요한 다른 요소들(이미지 및 텍스트)들 을 피해서 알아서 남는 공간에 배치됩니다.

크기

슬라이드에서 로고 선택 > 우측 속성창에서 크기 > 옵션 조절

로고의 크기를 4단계로 지정할 수 있습니다.

배경 투명도

슬라이드에서 로고 선택 > 우측 속성창에서 배경 투명도 > 옵션 선택

배경이 투명한 PNG 포맷의 로고라면, 로고 가독성(?)을 위하여 비어있는 공간을 모노톤의 색으로 채워줍니다.

투명도

슬라이드에서 로고 선택 > 우측 속성창에서 투명도 > 옵션 선택

특별히 건드릴 필요는 없지만, 특정 슬라이드에서 로고가 너무 튀어서 메시지를 방해한다면, 투명도를 높여서 조절할 수 있습니다.

색상 반전

슬라이드에서 로고 선택 > 우측 속성창에서 색상 반전 > 옵션 선택

로고가 단색일 경우, 우연히 배경과 비슷하여 로고가 묻힐 수 있습니다. 이럴 때 로고가 눈에 띌 수 있는 변경을 할 수 있습니다.

박스

박스는 보통 텍스트와 비주얼사이에 위치하여 텍스트의 가독성을 보장해주는 역할을 합니다. 부가적으로 배경색을 가짐으로써 약간의 꾸밈 역할도 합니다.

색상

박스의 색상은 [색상세트]에 기반해서 나타납니다. 자세한 것은 [색상세트]을 참고하십시오.

배치

박스의 크기는 배치의 변경을 통해서 가능합니다. 배치에 관한 자세한 사항은 [배치]를 참고해주십시오. 만약 박스의 모양을 임의대로 조절하고자 하신다면 [모드 조절]을 참고해주십시오.

테두리 마진

슬라이드에서 박스 선택 > 우측 속성창에서 테두리 마진 > 옵션 선택

박스 주위를 감싸고 있는 여백을 조절할 수 있습니다. 설명이 애매하므로 아래 이미지를 참고하십시오.

[배치]에 따라 이 기능은 비활성화 되어있을 수 있습니다.

선 표시

슬라이드에서 박스 선택 > 우측 속성창에서 선 표시 > 옵션 선택

기본적으로 박스는 배경색 혹은 외각선의 특성을 가지고 있습니다. 여기에서 설정되는 선 표시 여부에 따라 배경색이 투명해지거나 표시되거나 결정될 수 있습니다.

선 모양

슬라이드에서 박스 선택 > 우측 속성창에서 선 모양 > 옵션 선택

[선 표시]을 활성화한 경우 선의 모양을 결정합니다.

그라데이션

슬라이드에서 박스 선택 > 우측 속성창에서 그라데이션 > 옵션 선택

박스에 그라데이션 효과를 적용합니다. 가끔 조금 더 세련된 느낌을 내려고 할 때 이 옵션을 적용해보시길 권장합니다. 기준색은 다른 것들과 마찬가지로 [색상세트]의 설정에 기반합니다.

공통옵션

메시지 구성요소에 공통적으로 적용되는 통합 옵션은 아래와 같습니다.

숨김/보임

슬라이드에서 요소 선택 > 우측 속성창에서 상단의 스위치 전환

각 속성의 우측 상단에 해당 요소를 보이게 할 것인지, 숨길 것인가를 처리할 수 있는 스위치가 있습니다.

스위치를 가려서 더 이상 슬라이드에서 요소를 선택할 수 없게 되었다면, [요소 선택기] 혹은 [속성창 호출]을 이용하십시오.

색상세트

슬라이드에서 하단 컬러 선택 > 우측 속성창에서 컬러 선택

타일에서는 색상을 개별적 요인과 텍스트별로 세세하게 설정하지 않습니다. 보통의 경우 텍스트의 색상은 가독성을 위해서 컬러풀한 색상보다는 모노톤을 사용하며, 두 가지 이상의 색이 한 슬라이드에 동시에 쓰였을 때 그 조합을 맞추는 것이 매우 어려운 일이기 때문입니다. [쉬운 사용성 원칙]에 따라 사용자가 색상 고민을 덜 하도록 미리 세트리스트를 만들어두었고, 이를 활용하여 텍스트의 하이라이트 컬러, 혹은 박스를 통한 분위기 등을 결정하도록하고 있습니다.

색상 세트를 호출하기 위해서는 각 슬라이드 하단에 색상버튼을 누르거나, 혹은 각 요소의 속성창에서 색상을 선택하시면 됩니다.

색상리스트에는 타일의 디자이너가 세심하게 선별한 수 십개의 색상이 있으며, 각 세트마다 4~6개의 어울리는 하이라이트컬러를 가지고 있습니다.

나만의 컬러 추가

슬라이드에서 하단 컬러 선택 > 우측 속성창에서 + 추가

사용자가 사용하고자하는 색상조합을 직접 추가하실 수 있습니다. 색상 속성창을 누른 이후에, 속성창의 가장 상단에 + 추가버튼을 누르십시오. 박스(바탕)의 색상과, 텍스트의 색상. 그리고 하이라이트 색상 7개까지를 하나의 조합 안에 설정할 수 있습니다.

배치

슬라이드에서 Layout ... 선택 > 우측 속성창에서 옵션 선택

배치는 요소의 구조, 즉, 위치와 크기가 미리 지정된 것입니다. 배경에 이미지를 넣고 상단에 텍스트를 넣거나, 혹은 왼쪽엔 텍스트, 오른쪽엔 영상을 넣는 등의 구조를 말합니다. 카드내에 하나의 배치로만 처음부터 끝까지 가도 되고, 내용이 전환되는 부분이나 혹은 마지막 슬라이드에 한정해서 다른 배치를 가지도록 설정할 수도 있습니다.

사이즈

슬라이드에서 000 x 000 선택 > 우측 속성창에서 옵션 선택

해당 슬라이드의 실제 픽셀 크기에 관한 정보입니다. 이 버튼을 클릭하여 사이즈 변경 속성창을 호출 할 수 있습니다. 사이즈는 개별 슬라이드별로 지정할 수 있지만, 보통의 경우에는 전체 슬라이드가 동일한 사이즈를 갖습니다. 사이즈를 변경하는 방법은 각 슬라이드 하단에서 사이즈 표시를 클릭한 후 변경 가능합니다.

사이즈 일괄 변경

상기하였듯이 영상이나 (혹은 일반적인 카드뉴스도) 슬라이드의 모든 크기가 동일한 것을 권장합니다. 각각의 슬라이드별로 사이즈를 둔 것은 만일의 경우 활용성을 염두에둔 것이지 일반적인 상황은 아닙니다. 아래의 방법들을 통해서 손쉽게 카드 전체의 사이즈를 통일할 수 있습니다.

사이즈 템플릿을 변경하는 방법

[템플릿]은 미리 정해진 속성들을 카드 전체에 적용하는 기능을 합니다. 자세한 사항은 [functions/template/media]을 참고하십시오.

하나 변경 후 일괄 적용하는 방법

한 슬라이드의 사이즈를 바꾸고나서 [슬라이드 스타일복제] 기능을 이용, 전/후 모든 슬라이드에 사이즈의 속성을 복사할 수 있습니다.

맨 위에 있는 슬라이드의 사이즈를 변경 > 첫 번째와 두 번째 슬라이드 사이에 아래로 스타일 복사를 오래 누름 > 사이즈만 체크하고 확인

나만의 사이즈 추가

슬라이드에서 000 x 000 선택 > 우측 속성창에서 + 추가

일반적으로 자주 사용되는 플랫폼의 사이즈는 타일에서 제공하지만, 아직 유명하지 않거나 혹은 사용자가 생각하는 트정한 사이즈가 있다면, 직접 추가하실 수 있습니다. 사이즈 속성창을 누른 이후에, 속성창의 가장 상단에 + 추가버튼을 누르십시오.

;