실무에서 바로 쓰는 피그마4 - 텍스트 스타일과 레이아웃 : 가독성 높은 디자인의 시작

지금까지 Figma 인터페이스 탐색, 프레임과 페이지를 이용한 작업 공간 관리, 그리고 도형 도구 및 벡터 원리 이해를 통해 디자인의 기본기를 다졌습니다. 이제 사용자 인터페이스에서 가장 중요한 정보 전달 수단이자 시각적 요소인 텍스트에 대해 깊이 있게 다룰 차례입니다. 텍스트는 단순히 정보를 나열하는 것을 넘어, 디자인의 가독성, 시각적 계층, 그리고 전반적인 사용자 경험에 지대한 영향을 미칩니다. 이 글에서는 Figma의 텍스트 도구를 마스터하고, 텍스트 스타일을 정의하며, 효율적인 텍스트 레이아웃을 통해 가독성 높은 디자인을 구현하는 방법을 상세히 알아보겠습니다.

 

4.1 텍스트 도구 (Text Tool, T) 마스터하기 : 글자를 디자인하다

Figma에서 텍스트를 다루는 것은 매우 직관적입니다. 상단 툴바의 텍스트 도구(T)를 선택하거나 단축키 T를 누르면 텍스트를 입력할 준비가 됩니다.

 

4.1.1 텍스트 입력 방식 : 포인트 텍스 vs 영역 텍스트

Figma는 두 가지 방식으로 텍스트 상자를 생성할 수 있습니다. 각 방식은 상황에 따라 유용하게 사용됩니다.

1. 포인트 텍스트(Point Text) : 

• 생성 방법 : T를 누른 후 캔버스에 한 번 클릭합니다.
• 특징 : 텍스트를 입력하는 만큼 텍스트 상자가 자동으로 확장됩니다. 주로 짧은 제목, 버튼 텍스트, 라벨 등 길이가 고정되지 않는 텍스트에 사용됩니다.
• 장점 : 텍스트 길이가 변해도 레이아웃이 깨질 염려가 적습니다. 특히 오토 레이아웃 내에서 텍스트가 자신의 내용에 따라 유동적으로 크기를 조절할 때 필수적입니다.

2. 영역 텍스트 (Area Text / Fixed Size Text Box) :

• 생성 방법 : T를 누른 후 캔버스에 마우스를 드래그하여 사각형 형태의 텍스트 상자를 그립니다.
• 특징 : 텍스트 상자의 너비가 고정되며, 텍스트가 상자 너비를 넘어가면 자동으로 다음 줄로 넘어가거나 숨겨집니다.
  주로 본문 텍스트, 설명글 등 정해진 영역 내에 많은 텍스트를 배치해야 할 때 사용됩니다.
• 장점 : 특정 공간 내에 텍스트를 가두어 레이아웃을 통제할 때 유용합니다. 하지만 텍스트 내용이 상자를 초과하면 보이지 않을 수 있으므로 주의해야 합니다.

• 팁 : 포인트 텍스트 상태에서 텍스트 상자의 너비 핸들(오른쪽 중간 점)을 더블 클릭하면 영역 텍스트로 전환되고, 영역 테스트 상태에서 동일한 핸들을 더블 클릭하면 포인트 텍스트로 전환됩니다. 텍스트 상자를 선택하고 우측 속성 패널의 Text섹션에서 Auto width, Auto height, Fixed size 옵션으로도 조절할 수 있습니다.

4.1.2 텍스트 속성 조절 : Typography의 핵심 요소

텍스트 상자를 선택한 상태에서 우측 속성 패널(Design Panel)의 Text섹션을 통해 텍스트의 다양한 속성을 조절할 수 있습니다.

• 폰트 패밀리(Font Family) : 텍스트의 글꼴을 선택합니다. Figma는 Googld Fonts를 비롯한 웹 폰트를 기본적으로 제공하며, Figma Font Helper를 설치하면 시스템에 설치된 로컬 폰트도 사용할 수 있습니다.
• 폰트 스타일(Font Style) : 선택된 폰트 패밀리 내에서 제공하는 스타일(예 : Regular, Medium, Semi Bold, Bold, ltalic 등)을 선택합니다.
• 폰트 크기(Font Size) : 텍스트의 크기를 조절합니다.(px 단위)
• 줄 간격(Line Height) : 텍스트 줄 간의 수직 간격을 조절합니다. 일반적으로 폰트 크기보다 1.2배 ~ 1.5배 정도 크게 설정하여 가독성을 높입니다. (px 또는 % 단위)
• 글자 간격(Letter Spacing) : 각 글자 사이의 수평 간격을 조절합니다. (px 또는 % 단위)
• 문단 간격(Paragraph Spacing) : 여러 문단(Enter로 구분된) 사이의 수직 간격을 조절합니다. 긴 본문 텍스트에서 문단 구분을 명확히 할 때 유용합니다.
• 들여쓰기(Paragraph Indent) : 문단의 첫 줄 들여쓰기를 조절합니다.
• 텍스트 정렬(Text Align) :
  좌측 정렬(Left Align) : 텍스트를 왼쪽으로 정렬합니다. 가장 일반적이며 가독성이 높습니다.
  중앙 정렬(Center Align) : 텍스트를 중앙으로 정렬합니다. 주로 제목, 짧은 문구, 버튼 텍스트에 사용됩니다.
  우측 정렬(Right Align) : 텍스트를 오른쪽으로 정렬합니다. 특정 정보(예: 숫자)나 제한된 공간에서 사용됩니다.
• 수직 정렬(Vertical Align) : 영역 텍스트 상자 내에서 텍스트를 상단, 중간, 하단 중 어디에 정렬할지 설정합니다.
• 대소문자 변환(Case) : 텍스트를 모두 대문자(Uppercase), 모두 소문자(Lowcase), 첫 글자만 대문자(Title case)로 변환하거나, 취소선, 밑줄 등을 적용할 수 있습니다.
• 텍스트 자르기(Truncate Text) : 영역 텍스트에서 텍스트가 상자를 넘어갈 때 ...으로 표시할지(Truncate text), 숨길지(Hide text), 자동으로 높이를 조절할지(Auto height) 설정합니다.

4.2 텍스트 스타일 (Text Styles) 정의 및 활용 : 일관된 타이포그래피 시스템 구축

일관된 타이포그래피는 사용자 경험을 향상시키고 브랜드 아이덴티티를 강화하는 데 매우 중요합니다. Figma의 텍스트 스타일 기능을 활용하면 재사용 가능한 텍스트 속성 세트를 미리 정의하고, 이를 디자인 전체에 적용하여 효율성과 일관성을 극대화할 수 있습니다.

 

4.2.1 텍스트 스타일 생성 및 적용

1. 스타일 생성 : 

• 캔버스에 텍스트를 입력하고 원하는 폰트, 크기, 줄 간격, 글자 간격, 색상 등 모든 텍스트 속성을 설정합니다.
• 우측 속성 패널 Text 센션 상단의 Style아이콘(네개의 점)을 클릭합니다.
• Create style아이콘(+)을 클릭합니다.
• 스타일의 이름을 입력합니다. (예 : Heading / H1, Body / Regular, Button / Primary)
• Create style버튼을 클릭하여 스타일을 생성합니다.

2. 스타일 적용 : 

• 스타일을 적용할 텍스트 상자를 선택합니다.
• 우측 속성 패널 Text 섹션 상단의 Style아이콘(네 개의 점)을 클릭합니다.
• 생성된 스타일 목록에서 원하는 스타일을 클릭하여 적용합니다.

3. 스타일 관리 : 

• 스타일 패널에서 스타일 이름 위에 마우스를 올리면 나타나는 Edit Style 아이콘을 클릭하여 스타일의 속성을 수정할 수 있습니다. 스타일을 수정하면 해당 스타일이 적용된 모든 텍스트의 속성이 일괄적으로 변경됩니다.
• 스타일을 마우스 우클릭하여 Rename, Duplicate, Delete 등의 작업을 수행할 수 있습니다.
• 폴더 구조 활용 : 스타일 이름에 슬래시(/)를 사용하여 폴더 구조를 만들면 스타일이 많아질 때 체계적으로 관리할 수 있습니다.
  예 : Heading/H1, Heading/H2, Body/Regular, Body/Small

 

4.2.2 로컬 스타일과 팀 라이브러리 스타일

• 로컬 스타일(Local Styles) : 현재 파일 내에서만 사용 가능한 스타일입니다.
• 팀 라이브러리 스타일(Team Library Style) : 팀 라이브러리에 게시된 스타일로, 팀 내의 모든 Figma 파일에서 공유하고 사용할 수 있습니다. 이는 디자인 시스템을 구축하고 팀 전체의 디자인 일관성을 유지하는데 필수적인 기능입니다. (향후 '팀 라이브러리'주제에서 자세히 다룰 예정입니다.)

4.2.3 스타일 오버라이드(Style Override)

텍스트 스타일에 오버라이드 개념이 중요합니다. 스타일이 적용된 텍스트의 특정 속성(예:색상, 크기)을 수동으로 변경할 수 있습니다. 이렇게 변경된 부분은 오버라이드되었다고 합니다.

• 오버라이드된 텍스트는 스타일 패널에서 해당 스타일 이름 옆에 *가 표시가 나타납니다.
• 오버라이드 초기화 : 스타일 패널에서 Reset overrides버튼을 클릭하면 오버라이드된 속성이 사라지고, 원래 스타일 속성으로 돌아갑니다.
• 새로운 스타일 생성 또는 업데이트 : 오버라이드된 텍스트를 기반으로 새로운 스타일을 생성하거나, 기존 스타일을 업데이트할 수도 있습니다. (수정 아이콘 옆의 + 아이콘 또는 Publish changes 버튼 활용)

4.3 가독성 높은 텍스트 레이아웃 원칙

텍스트의 가독성은 단순히 폰트 크기가 색상으로만 결정되지 않습니다. 텍스트 레이아웃, 즉 텍스트가 화면에 어떻게 배치되고 구성되는지가 매우 중요합니다.

 

4.3.1 타이포그래피 계층(Typographic Hierarchy)

• 정보의 중요도 표현 : 제목(Heading), 부제목(Subheading), 본문(Body), 캡션(Caption) 등 텍스트의 역할에 따라 크기, 굵기, 색상 등을 다르게 적용하여 정보의 중요도를 시각적으로 표현합니다.
• 일관된 계층 구조 : 동일한 역할의 텍스트는 항상 동일한 스타일을 유지하여 사용자가 정보를 쉽게 스캔하고 이해할 수 있도록 합니다.(텍스트 스타일 기능이 이 역할을 돕습니다.)
• 시각적 균형 : 너무 많은 크기나 굵기를 사용하면 시각적으로 혼란스러울 수 있으므로, 적절한 수의 계층을 유지하는 것이 중요합니다.

4.3.2 줄 길이(Line Lenght)

• 이상적인 줄 길이 : 본문 텍스트의 경우, 한 줄당 약 50~75자(영문 기준)가 가장 가독성이 높다고 알려져 잇습니다. 이는 독자가 다음 줄로 시선을 자연스럽게 이동시킬 수 있는 최적의 범위입니다.
• 모바일/데스크톱 고려 : 모바일에서는 줄 길이가 짧아지고, 테스크톱에서는 길어질 수 있으므로, 반응형 디자인 시 각 디바이스에 맞는 최적의 줄 길이를 고려해야 합니다.

4.3.3 줄 간격(Line Height / Leading)

• 충분한 간격 : 테스트의 폰트 크기보다 충분히 넓은 줄 간격은 텍스트를 읽기 쉽게 만듭니다. 너무 좁으면 줄들이 서로 겹쳐 보이고, 너무 넓으면 텍스트가 분리되어 보입니다.
• 권장 비율 : 일반적으로 폰트 크기의 1.2배 ~ 1.5배 사이가 권장되지만, 폰트 종류나 디자인 스타일에 따라 조절이 필요합니다.
• %단위 사용 : Figma에서 줄 간격을 %로 설정하면 폰트 크기에 비례하여 자동으로 조절되므로, 폰트 크기가 변경될 때 편리합니다.

4.3.4 문단 간격(Paragraph Spacing)

문단과 문단 사이의 간격을 명확하게 설정하여 각 문단을 쉽게 구분하고, 텍스트 블록의 가독성을 높입니다.

문단 간 간격은 줄 간격보다 넓게 설정하는 것이 일반적입니다.

4.3.5 텍스트 정렬(Text Alignment)

• 좌측 정렬 우선 : 대부분의 언어(특히 서양 언어 및 한글)에서 텍스트는 왼쪽에서 오른쪽으로 읽히므로, 본문 텍스트는 좌측 정렬이 가장 가독성이 높습니다.
• 중앙 정렬 사용시 주의 : 중앙 정렬은 시각적으로 안정감을 주지만, 긴 문단에 사용하면 시작점이 불규칙하여 읽기 피로도를 높일 수 있습니다. 짧은 제목이나 슬로건에 한정적으로 사용합니다.
• 양쪽 정렬의 함정 : 양쪽 정렬은 텍스트 블록의 모양을 깔끔하게 만들지만, 단어 간 불규칙한 간격(강제 정렬)으로 인해 강물처럼 보이는 현상이 발생하여 가독성을 해칠 수 있습니다. 웹에서는 최대한 피하는 것이 좋습니다.

4.3.6 색상 대비(Color Contrast)

• 명확한 대비 : 텍스트 색상과 배경 색상 간에 충분한 대비를 주어 모든 사용자가 텍스트를 명확하게 읽을 수 있도록 합니다.
• 접근성 고려 : WCAG (Web Content Accessibility Guidelines)에서 권장하는 최소 대비율을 준수하는 것이 중요합니다.
  Figma 플러그인(Contrast 등)을 사용하여 대비율을 확인할 수 있습니다.

4.4 텍스트 레이아웃 효율화 팁

1. 오토 레이아웃과 텍스트 : 오토 레이아웃은 텍스트 상자와 함께 사용할 때 가장 강력한 시너지를 발휘합니다. 텍스트 내용이 변경되거나 폰트 크기가 조절될 때, 오토 레이아웃이 적용된 프레임이나 컴포넌트는 자동으로 크기를 조절하여 레이아웃이 깨지는 것을 방지합니다.(다음 글에서 오토 레이아웃을 자세히 다룰 예정입니다.)

2. 텍스트 플레그인 활용 :

• Content Reel : 더미 텍스트, 사용자 이름, 날짜 등을 빠르게 삽입하여 실제와 같은 디자인 목업을 만들 수 있습니다.
• Lorem Ipsum : 임시 본문 텍스트를 생성하여 디자인 레이아웃을 채울 때 사용합니다.
• Font awesome / Material Design Icons : 아이콘 폰트를 텍스트처럼 삽입하여 사용할 수 있습니다.

3. 컴포넌트 내 텍스트 오버라이드 : 컴포넌트 내의 텍스트 레이어는 인스턴스에서 쉽게 내용을 변경(오버라이드)할 수 있습니다. 이는 재사용 가능한 UI컴포넌트를 만들 때 매우 유용합니다.

4. 폰트 페어링(Font Pairing) : 여러 폰트를 사용할 경우, 서로 잘 어울리는 폰트 조합을 선택하여 디자인의 시각적 완성도를 높입니다.(예 : 제목은 고딕 계열, 본문은 명조 계열)

 

4.5 마치며 : 정보 전달의 핵심, 텍스트 디자인

이번 글에서는 Figma의 텍스트 도구를 사용하여 텍스트를 입력하고 다양한 속성을 조절하는 방법, 텍스트 스타일을 정의하여 일관된 타이포그래피 시스템을 구축하는 방법, 그리고 가독성 높은 텍스트 레이아웃을 위한 핵심 원칙들을 깊이 있게 살펴보았습니다.

 

텍스트는 단순한 글자가 아닙니다. 사용자가 제품을 이해하고 상호작용하는 데 있어 가장 중요한 매개체입니다. 따라서 폰트 선택부터 크기, 간격, 색상, 그리고 배치에 이르기까지 모든 텍스트 관련 결정은 신중하게 이루어져야 합니다. 이 글에서 다룬 내용들을 바탕으로 여러분의 디자인이 더욱 명확하고 사용자 친화적으로 거듭나기를 바랍니다.

 

다음 글에서는 Figma의 핵심 기능 중 하나인 이미지 삽입과 편집 : 효율적인 시각 자료 활용이라는 주제로, 디자인에 필요한 다양한 이미지를 효과적으로 관리하고 활용하는 방법에 대해 알아보겠습니다. 텍스트와 함께 시각적 요소를 풍부하게 담아내는 방법을 익히면 더욱 더 완성도 높은 디자인을 만들 수 있을 것입니다. 계속해서 Figma 마스터의 여정을 함께 하시죠!