동해물과

제작 실습

새로운 도구를 배우는 가장 좋은 방법은 일단 해보는 것입니다. 타일을 처음 접하셨더라도 이 장에서 설명하는 것들을 따라서 해보세요. 자세한 설명은 생략되었어도, 기본적인 사용법에 대해서 알게 될 것입니다.

편집화면으로 가기

편집화면, 왼쪽에 슬라이드와 오른쪽에 속성창이 열려있다

편집화면은 카드뉴스를 사용자가 직접 제작하는 화면을 말합니다. 타일에서 가장 중심이 되는 화면입니다. 편집화면 접근은 다음과 같은 방법들로 가능합니다.

제작하기 버튼 클릭

타일에 처음 접속하셨을 때, 우측상단의 네비게이션에 제작하기 버튼이 있습니다. 이 버튼을 클릭하여 편집화면 진입이 가능합니다.

홈페이지 우측 상단의 제작하기 버튼

주소를 통해 접속하기

타일은 완전한 웹서비스입니다. 사용하시는 브라우저의 주소를 통해서 주요 화면들에 진입이 가능하도록 설계되어 있습니다. 편집화면은 주소창에 https://tyle.io/create를 입력하시면 바로 진입 가능합니다.

주소를 통한 접속

접속 환경에 따라 화면에 템플릿 리스트가 나타날 수도 있고, 바로 슬라이드와 속성 편집창이 나타날 수도 있습니다. 템플릿 리스트가 나타난다면 화면상의 아무 템플릿이나 선택하고 바로 시작을 눌러주시면 됩니다.

텍스트 변경해보기

텍스트 요소 선택

텍스트 요소는 사용자에게 전달하는 메시지 그 자체이므로 제일 중요하다고 할 수 있어요. 이 텍스트를 변경해보기로 해요.

화면을 보시면 가운데에 여기를 두 번.. 텍스트가 보일 거예요. 마우스를 대면 외각선으로 강조가 되면서 선택 가능하다는 표시가 나타납니다. 클릭을 한 번 해보세요. 텍스트 자체에 변화는 일어나지 않지만 오른쪽에 뭔가 설정할 수 있는 속성창이 뜨는 것을 볼 수 있습니다. 화면상에서 어떤 요소를 조절하고자 한다면 지금처럼 클릭해서 속성창을 호출하면 되는 것입니다.

텍스트를 클릭

텍스트 내용 변경

보통은 속성창에서 다 수정하지만, 텍스트는 조금 특이하게 보이는 화면에서 바로 교체할 수 있어요. 이미 텍스트가 선택된 상태라도 한 번 더 클릭해봅니다. 아래와 같이 텍스트를 수정할 수 있는 모드로 진입됩니다.

기존의 내용을 모두 지우고 마케팅 기회요인 10가지라고 입력해보세요. 그리고 완료를 누르면 수정된 내용이 적용되고 텍스트 편집모드를 빠져나갑니다.

한 번 더 클릭하면 수정모드로 진입

글꼴 변경

타일에서는 유료 상용 폰트 40여 가지 이상을 제공하고 있어요. 이 다양한 폰트를 두루두루 활용해보아야겠지요?

이미 텍스트의 속성창을 열어두었기 때문에, 우측 속성창에서 바로 글꼴을 선택합니다. 사용 가능한 글꼴 리스트가 나타나는 것을 볼 수 있습니다. 마음에 드는 아무 폰트를 클릭해주세요.

속성창에서 글꼴 > 원하는 거 선택

이렇게 간단하게 텍스트 내용을 수정하고, 글꼴을 변경해보았어요. 타일의 모든 수정은 이런식으로 진행됩니다. 화면에서 수정하고자하는 요소를 선택하고, 우측에 속성창이 뜨면 거기에서 원하는 옵션을 눌러서 바꾸면되어요. 아주 간단하지요?

텍스트의 각 옵션에 대한 자세한 설명은 컨텐츠 요소들 > 텍스트 요소을 참고하세요~!

배경 변경해보기

배경 요소 선택

카드뉴스에서는 보통 배경으로 이미지가 쓰입니다. 물론 타일에서는 비디오를 넣어도 알아서 이미지로 추출되어요(반대로 이미지도 동영상으로 출력할 수 있습니다).

화면상에서 보이는 배경을 마우스로 클릭해보세요. 배경을 클릭했으므로 배경에 관한 속성창이 우측에 뜨는 것을 볼 수 있어요.

배경을 선택하여 속성창 호출

스톡이미지로 변경

속성창에서 이미지 검색을 눌러보면, 타일이 제공하는 수만개의 스톡이미지들을 볼 수 있습니다. 상단에 보이는 Search 입력칸을 클릭하시고, 마케팅이라는 단어를 검색해보세요. 다양한 마케팅 이미지들 중 마음에 드는 것을 하나 클릭합니다.

이미지 검색 후 원하는 이미지 선택

만약 동영상을 넣고 싶다면 속성창에서 동영상 검색을 선택하시면 됩니다. 물론 컴퓨터에 있는 것들을 직접 업로드를 통해 올리실 수도 있어요.

배경에 관한 자세한 사항은 컨텐츠 요소들 > 배경 요소을 참고하십시오.

슬라이드 관리해보기

지금까지는 이미 있는 하나의 슬라이드만을 가지고 변경을 해보았어요. 어떤 내용이냐에 따라 슬라이드 하나만 가지고도 끝낼 수도 있으나, 많은 경우 다수의 슬라이드로 이야기의 흐름을 나타냅니다. 참, 타일에서 말하는 슬라이드는 배경과 이미지로 이루어진 하나의 장(Page)를 의미합니다.

슬라이드 추가

화면상에서 스크롤을 내려보시면 + 버튼이 보이실 거예요. 이 버튼은 슬라이드 추가 버튼인데 마우스로 눌러보세요. 버튼 바로 위의 슬라이드가 복제되어 바로 아래에 추가된 것을 볼 수 있습니다. 한 번 더 눌러 총 세 개의 슬라이드를 만들어 봅니다.

슬라이드 추가 버튼

방금 보셨듯이 슬라이드를 추가하면 완전히 새로운 슬라이드가 하나 추가되는게 아니라 가장 마지막 슬라이드가 복제됩니다. 실제로 사용자가 완성된 카드뉴스를 볼 때에는 한 장 한 장 집중해서 보지 않고 빠르고 넘겨보게 됩니다. 이때 각 슬라이드가 매번 새로운 구성과 컬러로 이루어져 있다면, 사용자 입장에서 흐름이 끊기겠지요? 따라서 타일은 자연스러운 흐름을 유도하기 위하여 마지막장을 복제하고, 필요한 부분만 조금씩 변경해나가는 방식을 권장하는 것입니다.

슬라이드 순서 변경

실제로 카드뉴스를 만들다 보면 순서를 계속 바꾸어가면서 흐름을 만들어야 될 때가 많습니다. 타일에는 손쉽게 슬라이드의 순서를 변경할 수 있답니다.

슬라이드를 보시면... 슬라이드의 상단에 길게 흰색 영역이 있고 몇 가지 버튼들이 있는 것을 볼 수 있어요. 여기에서 아무 버튼이 없는 흰색 공간을 클릭하고, 원하는 공간에 두면 순서가 이동됩니다.

여백을 잡고 드래그하여 순서 변경

슬라이드 삭제

순서 변경과 마찬가지로, 만들다 보면 쓸데없이 추가한 슬라이드도 생기기 마련이겠지요? 필요없는 슬라이드는 바로 삭제해버립시다! 지금 이 실습에서 세 번째 슬라이드는 필요 없을 것 같아요.

세 번째 슬라이드의 우측 상단에 있는 연필 표시를 클릭해보아요. 우측에 슬라이드에 관한 속성창이 뜨면 속성창의 우측 상단에 있는 휴지통 버튼을 볼 수 있을거예요. 이 휴지통 버튼을 클릭하여 삭제를 완료합니다.

휴지통 모양의 슬라이드 삭제 버튼

슬라이드 관리에 관한 자세한 설명은 컨텐츠 요소들 > 슬라이드 컨테이너 요소을 참고하십시오.

공통요소 변경해보기

지금까지 내용 편집과 슬라이드 관리를 간단하게 해보았어요. 타일의 기본 설계는 이렇게 사용자가 원하는 요소 선택하고, 오른쪽 속성창에서 옵션 바꾸고, 슬라이드 추가하고 삭제하고.. 이런 행위들만 해도 그럴듯한 카드뉴스가 나오도록 한 것입니다.

실제 제작시에 필요하면 몇 가지 공통 사항을 조금 더 알아보도록 해요.

배치 변경

배치는 레이아웃 혹은 구성이라도 말할 수 있어요. 쉽게 말해 결과물에서 텍스트가 어느쪽에 있고, 이미지는 어디에 있고 등을 말하는 것입니다. 타일이 아닌 다른 도구들을 쓴다면, 화면에 있는 모든 배치들의 적절한 크기와 거리, 위치, 순서 등을 일일이 조절해줘야겠지요? 타일은 그럴 필요가 없습니다!

왜냐하면 그냥 버튼 하나 누르면, 입력된 내용과 배겨 이미지에 따라 적절한 배치를 추천해주거든요! 이것이 내부에서 열일하는 타일의 디자인 엔진입니다.

두 번째 슬라이드 상단을 보시면, 가운데에 보라색 버튼이 있습니다. 이 버튼이 무작위로 디자인을 변경해보는 버튼이예요. 이 디자인 변경 버튼을 눌러보세요. 여러번 눌러도 상관없는데, 누를 때마다 전혀 다른 배치로 변경되고, 그에 따라 모든 요소들도 자동으로 조절되는 것을 볼 수 있습니다.

상단에 있는 보라색 버튼을 눌러 자동 배치 변경

만약 마음속에 어떤 배치를 생각한게 있다면, 임의로 바꿀 수도 있습니다. 슬라이드 하단의 [배치] 버튼을 눌러보세요. 오른쪽 속서창에 배치 리스트가 나타나는 것을 볼 수 있습니다.

하단의 버튼을 통해 직접 배치 설정

모든 것을 변경

디자인 변경 버튼의 기본적으로 배치만을 바꾸는 것입니다. 즉, 위치 정도는 바뀌지만 디자인상 큰 변화는 없는 것처럼 바뀌는 것이지요. 이것은 사용자의 읽기 흐름을 방해하지 않게 의도적으로 설계된것이예요.

하지만 중간에 내용의 분위기가 갑자기 바뀌어야하거나, 조금 색다른 디자인을 줘야할 때도 있는 법이지요. 이럴 때에는 완전히 랜덤하게 바꾸기 기능을 사용해 볼 수 있습니다. 방법은 아주 간단해요. 이 디자인 바꾸기 버튼을 1초 이상 누르고 있으면 됩니다.

디자인 변경을 오래 누르면 모든게 바뀜

[글꼴], [색상세트] 등 보다 많은 요소들이 랜덤하게 바꾸며, 이에 따라 해당 슬라이드는 완전히 다른 느낌으로 보여집니다.

불필요한 요소 가리기

하나의 슬라이드에는 배경 / 텍스트 / 로고 / 박스 등의 컨텐츠 요소들로 구성되어 있어요. 그런데 모든 슬라이드마다 이 요소가 전부 필요한 것은 아니지요. 텍스트에 집중시키기 위하여 배경 이미지를 없애고 싶다고 가정해보아요. 단순히 배경을 단순한 이미지로 교체해도 되지만, 보다 쉽게 없애버릴 수도 있습니다.

슬라이드에서 배경 요소를 클릭하여 우측에 속성창을 엽니다. 속성창의 우측 상단에 보라색 스위치가 활성화되어 있는 것을 볼 수 있어요. 이 스위치를 눌러 안 보이게 하면, 슬라이드에서 해당 요소가 가려지는 것을 확인할 수 있습니다.

각 요소의 속성창 우측상단에 있는 가리기 스위치

이 기능에 대한 자세한 설명은 컨텐츠 요소들 > 공통옵션 > 숨김/보임을 참고하십시오.

마무리

지금까지 별 내용은 없지만, 타일의 기능들을 직접 따라하면서 체험해보았습니다. 예시로 작성한 내용물을 추출하려면 [추출 및 배포]으로 이동하여 보다 자세한 상황을 살펴보십시오.

중요한 기능들은 모두 소개를 하였지만, 속성창 구석구석에 타일의 기능들은 많이 숨어있습니다. 아직 매뉴얼을 보지 않았다면, 타일 매뉴얼을 방문해주십시오.

;