텍스트를 설정하는 방법

마케팅 동영상은 비주얼과 텍스트의 조합입니다. 텍스트가 이야기의 흐름을 주도하다 보니 제작할 때, '가독성'이 가장 중요합니다.

가독성을 지켜주기 위해서는 자간과 행간 등을 고려해야 합니다. 하지만, 전문적으로 디자인을 배우지 않은 분들에게는 이 부분이 어렵습니다. 분명 만들 때는 괜찮은 것 같았는데, 스마트폰이나 웹 화면으로 보면 가독성이 떨어지는 결과물이 나오곤 하지요. 어떻게 해결할 수 있을까요? 

이러한 고민을 타일이 해결해줍니다. 아래의 이미지를 볼까요?

텍스트의 길이가 한 줄일 때, 두 줄일 때, 세 줄일 때, 입력만 하면 타일 엔진이 알아서 자동으로 계산을 합니다. 또한, 텍스트의 폰트 종류나 굵기에 따라서도 자간과 행간이 달라집니다.

하지만 자간과 행간 등의 설정이 자동으로 된다고 하더라도, 그 외에 색상이나 폰트 종류, 크기 등을 원하는 대로 바꾸고 싶으실 수 있습니다. 

1) 텍스트의 색상을 바꾸고 싶다.  

타일의 기본 텍스트 색상은 박스의 색상에 따라서 흰색과 검은색으로 지정되어 있습니다. 

박스의 색상이 어두울 경우 흰색으로, 박스의 색상이 밝을 경우 검은색으로 자동 조정됩니다. 이는 '가독성'을 보장하기 위한 최소한의 조치입니다. 하지만 강조하고 싶은 텍스트의 경우에는 색을 바꾸실 수 있습니다.

텍스트에서 강조하고 싶은 부분을 마우스로 드래그합니다. 그리고 상단에 있는 A 버튼을 눌러주시면 됩니다.  그러면 |강조하고 싶은 부분| 이런 식으로 | 마크가 앞뒤로 생기고, 완료를 누르시면 색이 바뀐 것을 볼 수 있습니다. 

 '안녕하세요' 부분의 색이 바뀌었지요? 이 색상도 원하는 대로 바꾸실 수 있습니다. 우측 설정 창에서 색상 부분을 선택하시면 됩니다. 

그럼 현재 사용하고 있는 박스 색상에서 사용할 수 있는 Highlight Color 색들이 안내됩니다. 사용할 수 있는 색이라는 말은 모든 색을 쓸 수 없다는 말입니다. 왜냐하면, 이 색상들 역시 '가독성'이 보장되어야 하기 때문이지요. 배경의 색상에 따라서 사용할 수 있는 Highlight Color 들이 제안되니 원하는 이 중에서 선택하시면 됩니다. 

그 옆에 B, H, In, CS, S 3D, NS, OL과 같은 아이콘들도 있는데, 이 효과버튼들의 사용방법은 간답합니다. 

1) 강조하고 싶은 텍스트 부분을 드래그 한다. 
2) 원하는 아이콘을 선택한다. 아이콘의 앞뒤로 |강조하고 싶은 부분|과 같은 마크가 생긴다. 
3) 효과를 없애고 싶을 경우 마크를 지운다.

강조 효과는 1개만 사용하시는 게 좋습니다. 2개 이상이 되는 순간 혼란한 디자인이 나오게 됩니다. 그리고 2개 이상의 효과를 한꺼번에 선택하셨을 때 디자인 결과가 충돌된다고 판단되면 적용되지 않게 되어 있습니다. 각각의 버튼들은 아래와 같은 효과를 나타냅니다.

ⓐ A (Accent)
Highlight Color로 색을 바꿔주는 효과입니다. 앞뒤로 | 기호를 쓰는 것과 동일합니다.

ⓑ B (Bold)
텍스트를 굵게 만들어주는 효과입니다. 앞뒤로 ** 기호를 쓰는 것과 동일합니다. 만약 본래 굵은 폰트일 경우에는 적용되지 않을 수 있습니다. 

ⓒ H (Highlight)
텍스트에 회색 계열의 형광펜 효과가 생깁니다. 앞뒤로 ' 기호를 쓰는 것과 동일합니다.  

ⓓ In (InlineHighlight)
텍스트에 회색 계열의 형광펜 효과가 생기고, 텍스트가 박스 색으로 바뀌게 됩니다. 앞뒤로 '' 기호를 쓰는 것과 동일합니다.

ⓔ CS (ColorShadow)
텍스트에 그림자를 만들어 주는 효과입니다. 앞뒤로 || 기호를 쓰는 것과 동일합니다. 그림자의 색은 A에서 사용되었던 Highlight Color로 적용됩니다. 

ⓕ S (Shadow)
텍스트에 그림자 효과가 기며, 그림자 색은 검은색으로 적용됩니다. 앞뒤로 @@ 기호를 쓰는 것과 동일합니다.

ⓖ 3D (3D효과)
텍스트가 입체적으로 표현되는 효과입니다. 앞뒤로 && 기호를 쓰는 것과 동일합니다.

ⓗ NS (Neon Sign)
텍스트에 네온샤인처럼 빛나는 효과가 생깁니다. 앞뒤로 == 기호를 쓰는 것과 동일합니다. 네온샤인의 색은 A에서 사용되었던 Highlight Color로 적용됩니다.

ⓘ OL (Outline)
텍스트에 테두리 효과가 생깁니다. 앞뒤로 \\ 기호를 쓰는 것과 동일합니다. 가독성을 위해서 검은색의 텍스트라면 하얀색 테두리가, 하얀색의 텍스트라면 검은색의 테두리가 생기도록 제한되어 있습니다.

2) 텍스트의 글꼴을 바꾸고 싶다.

마케팅을 위한 콘텐츠를 제작할 때, 우리는 이미지와 폰트의 저작권을 유의해야 합니다. 다행히 폰트의 경우 저작권에 문제없이 무료로 사용할 수 있는 것들이 많이 공개되어 있습니다.

타일에도 그 폰트들을 모두 넣어두었습니다. 그리고, 그에 더해 산돌폰트들도 넣어두었습니다. 타일로 카드뉴스나 동영상을 제작하시실 경우 이 폰트들을 저작권 문제없이 사용하실 수 있습니다.

설정 창의 글꼴에서 원하는 폰트를 선택하시면 바로 변환됩니다. 굵은 폰트의 경우 제목 혹은 소제목용으로만 사용하시는 것이 좋습니다. 제목과 내용 텍스트의 강약을 조절해주세요.  

3) 텍스트의 크기를 바꾸고 싶다. 

우측 설정 창에서 크기를 선택하시면 됩니다. 그럼 다음과 같은 화면이 나옵니다. 

기존의 디자인 툴에서 보셨던 것과는 수치가 다릅니다. 기존의 디자인 툴들은 18pt, 20pt, 이렇게 수치가 나오는데요. 타일은 60%, 70%.. 이렇게 비율로 표현하고 있습니다. 그 이유는 만들어진 카드뉴스나 동영상이 다양한 디바이스에서 노출되기 때문입니다. 스마트폰에서 노출될 수도 있고, 웹의 큰 화면으로도 노출될 수도 있지요. 그래서 비율로 표기하고 있습니다. 

40%를 선택하셔도 최대한 모바일에서 보일 수 있도록 조정되긴 했습니다만, 가능하시다면 60%~70%의 비율로 선택하시는 것이 좋습니다. 

4) 텍스트의 정렬을 바꾸고 싶다. 

정렬은 가로 정렬, 세로 정렬이 있습니다. 가로 정렬은 왼쪽 오른쪽 가운데로 정렬을 바꿀 수 있습니다. 세로 정렬은 위아래로 정렬을 바꿀 수 있지요. 우측 설정창에서 원하는 정렬을 선택하시면 됩니다. 

그때 위와 같이 정렬 기능이 활성화되지 않는 경우들이 있습니다. 정렬을 바꿀 수 없기 때문입니다. 보이는 레이아웃에서는 텍스트의 세로정렬을 적용할 수 없기 때문에 활성화되어 있지 않습니다. 타일에서의 설정들은 무조건 다 되는 것이 아닙니다. 다른 요소들의 상황에 따라 유기적으로 가능 여부가 적용되게 됩니다. 디자인의 균형감이 중요하니까요. 

가로정렬 중에서 justify, stretch 설정도 그렇습니다. 먼저 정렬상태를 보겠습니다. justify는 아래와 같은 정렬 상태를 보입니다. 양쪽 정렬이라고 생각하시면 될 것 같습니다. 

stretch 정렬은 아래와 같습니다. 

양쪽 정렬을 맞추면서 텍스트의 길이가 짧은 구간은 크기를 키우는 모드입니다. 좀 더 내용을 강조시킬 방법으로 제목 타이틀로 사용하기에 좋습니다. 하지만, 이 두 가지의 정렬을 선택하실 경우 텍스트의 크기가 더 커지지 않을 수 있습니다. 

이 역시 전체적인 디자인 균형감을 깨트리지 않기 위함입니다. 이렇게 타일은 최대한 다양한 디자인을 시도해볼 수 있도록 하되, 가독성과 디자인 균형감을 해치지 않도록 설계되어 있습니다. 

5) 텍스트에 분리선을 넣고 싶다.

우리가 사용할 수 있는 텍스트는 제목 텍스트, 본문 텍스트 이렇게 2개입니다. 2개의 텍스트를 분리하고 좀 더 강조하기 위해 선을 넣고 싶을 경우 선모양을 클릭하시면 됩니다. 

그럼 위의 이미지와 같이 선이 생기게 됩니다. 이 버튼은 누를 때마다 설정이 바뀌게 됩니다. 실선일 수도 있고 점선일 수도 있으며 위치도 바뀌게 됩니다. 하지만 다시 말씀드리지만, 타일은 여러 가지 요소를 기반으로 전체적인 디자인 균형감을 지키기 위해 노력합니다.

6) 나는 텍스트를 한 줄만 쓰고 싶다.

제공되는 텍스트 박스가 두 개입니다. 혹시 텍스트를 한 개만 쓰고 싶으실 경우에는 하나의 요소는 없애주시면 됩니다. 우측의 설정 창에서 숨김 버튼을 누르시면 됩니다. 

그럼 제목 텍스트 영역이 사라지면서 디자인이 재조정 됩니다. 각각의 설정 기능들도 비활성화되게 되지요. 여기까지 제목 텍스트의 설정 방법을 알려드렸는데요. 본문 텍스트의 설정 방법들도 같습니다. 제목 텍스트와 본문 텍스트를 구분 짓는 역할을 하는 '선 모양' 기능을 빼고는 모든 기능이 똑같이 적용됩니다. 

다만, 본문 텍스트의 크기와 정렬에는 자동이라는 선택지가 있습니다. 이 '자동'을 선택해 놓으시면 제목 텍스트의 설정에 따라 적당한 크기와 정렬로 자동으로 조정되게 됩니다. 최대한 이 '자동'을 활용하시는 것이 전체적인 디자인 균형을 맞추는 데 좋습니다.

· · ·

마케팅 콘텐츠로 우리가 뜻하는 바를 전달하기 위해서는 '가독성'이 가장 중요하다는 점을 잊지 말아 주세요. 최대한 그 부분을 보장하기 위해 오늘도 타일의 디자인 엔진은 열심히 고도화되고 있습니다. 

텍스트들의 설정 다음으로 이미지를 수정하고 싶으신 분들은 아래의 링크를 클릭해주세요.
이미지의 설정을 바꾸고 싶다면 >