[피그마] 텍스트 리사이징 속성 3가지 이해하기

피그마에는 텍스트 '리사이징'이라는 속성이 3가지 있습니다. 텍스트 리사이징이란, 딱 보기에는 텍스트의 크기를 설정하는 건가? 싶겠지만, 텍스트 레이어를 설정하는 속성입니다.

피그마에서 텍스트를 생성하기 위해 Text 버튼을 누르고 캔버스에 클릭해 보시면, 파란색 테두리의 사각형이 텍스트를 감싸는 것을 보실 수 있습니다. 이것이 텍스트 레이어고, 텍스트 리사이징은 텍스트가 늘어나고 줄어듦에 따라 텍스트 레이어가 작아지거나 커지는 방식을 제어하는 것입니다.

리사이징의 속성에는 3가지가 있습니다.

1. Auto width : 텍스트를 작성하면 그에 따라 자동으로 텍스트 레이어의 가로(width) 길이가 늘어납니다.

2. Auto height : 텍스트를 작성하면 그에 따라 자동으로 텍스트 레이어의 세로(height) 길이가 늘어납니다.

3. Fixed size : 텍스트 레이어의 가로와 세로 길이를 고정합니다.

[참고]

1. 상단의 툴박스에서 텍스트(T)를 누르고 캔버스에 클릭만으로 텍스트를 생성했을 때는 'Auto width'로 생성됩니다. 생성되었을 때 아무것도 없이 텍스트를 입력할 부분이 깜빡이고 있다면 Auto width 입니다. (텍스트를 입력하면 텍스트 레이어가 보입니다.)

2. 상단의 툴박스에서 텍스트(T)를 누르고, 캔버스에 클릭 & 드래그로 텍스트를 생성했을 때는 'Fixed size'로 생성됩니다. 1번과는 다르게 텍스트 레이어가 가시적으로 보입니다.

3. 1번의 방법으로 텍스트를 생성하고, 텍스트 레이어의 크기를

수정하면 그때부터는 Fixed size가 됩니다.

 

Auto width는 입력한 만큼 가로길이가 늘어나서 자동으로 텍스트 레이어가 가로로 계속 길어집니다. 

 

Auto height는 설정한 가로길이를 벗어나는 경우 텍스트가 자동으로 다음줄로 넘어가며 세로로 계속 길어집니다. Auto width와 다른 점은, 가로길이를 설정해줘야 한다는 점이겠네요.

 

Fixed size는 텍스트 레이어의 가로와 세로 길이가 고정되어 있습니다. 따라서 위에서 볼 수 있듯이, 텍스트를 조금 덜 입력해도 공간이 남아있습니다. 반대로 넘치게 입력하면 어떻게 될까요? 레이어 영역을 넘어가서 텍스트를 계속 입력할 수는 있습니다. 이럴 때 truncate text와 함께 사용하면 될 것 같습니다. truncate text는 또 다른 내용과 함께 다뤄보도록 하겠습니다.

두 줄의 텍스트가 존재한다면, 보통 사람들은 어떻게 생각할까요? 피그마는 디자인을 위한 도구이기도 하면서 동시에 협업을 위한 툴이기도 합니다. 왼쪽의 Fixed size 처럼 두 줄의 텍스트가 존재한다면, 드래그를 해서 다른 객체들을 지정할 때 예상치 못하게 같이 선택될 수도 있습니다. 두 줄 만큼의 영역을 차지하고 있는 게 아니라, Fixed size로 설정한 만큼 영역을 더 차지하고 있으니까요.

 

이럴 때 Auto width나, Auto height를 활용해서 적혀진 텍스트의 양과 비슷하게 텍스트 레이어 영역을 맞추어 준다면 의도치 않게 텍스트가 자꾸 선택되는 일을 줄일 수도 있습니다.