워드프레스에서 사용자 경험 향상을 위한 줄 간격 조정 방법: 4가지 간단한 방법

빽빽하고 어수선한 텍스트는 방문자가 첫 단락을 읽기도 전에 떠나게 만듭니다. 줄 간격을 조정하는 것은 웹사이트 전체를 재디자인하지 않고도 콘텐츠의 가독성을 개선하는 가장 빠른 방법 중 하나입니다.

이 가이드에서는 블록 편집기부터 사용자 정의 CSS까지 WordPress에서 줄 간격을 변경하는 네 가지 방법을 다루므로, 자신의 환경에 가장 적합한 방법을 선택할 수 있습니다.

워드프레스에서 줄 간격의 중요성

줄 간격은 각 줄 사이의 세로 공간을 조절합니다. 간격이 너무 좁으면 내용이 답답하고 훑어보기 어려워집니다. 반대로 너무 넓으면 내용의 일관성이 떨어지고 서로 연결되지 않은 것처럼 느껴집니다.

적절한 줄 간격은 독자가 불편함 없이 콘텐츠를 읽어나갈 수 있도록 도와줍니다. 또한 전문성을 나타내는 중요한 요소입니다. 간격이 적절한 페이지는 깔끔하고 정돈된 인상을 주지만, 글의 질이 아무리 좋아도 간격이 불규칙한 페이지는 미완성된 느낌을 줍니다.

대부분의 워드프레스 사이트에서는 1.5~1.8 사이의 줄 간격이 데스크톱과 모바일 화면 크기 모두에서 편안하고 읽기 쉬운 텍스트를 제공합니다.

워드프레스에서 줄 간격을 변경하는 방법은 무엇인가요?

WordPress는 사용하는 편집기, 테마, 그리고 코딩 능력에 따라 줄 간격을 조정하는 여러 가지 방법을 제공합니다. 자신의 환경에 가장 적합한 방법을 선택하여 진행하세요.

방법 1: 클래식 편집기를 사용하여 워드프레스에서 줄 간격 변경하기

클래식 편집기를 계속 사용하시는 경우, 줄 간격을 조정하는 방법은 두 가지가 있습니다. 서식 드롭다운 메뉴를 사용하는 것이 가장 빠릅니다. 텍스트 편집기에서는 인라인 CSS를 통해 더욱 세밀하게 제어할 수 있습니다.

"서식" 드롭다운 메뉴 사용

• 1단계: 워드프레스 게시물 또는 페이지로 이동하여 수정하려는 텍스트를 선택합니다.

• 2단계: 클래식 편집기 도구 모음에서 [서식] 드롭다운 메뉴를 클릭합니다.

• 3단계: 테마에서 지원하는 경우 줄 높이를 선택하고 1.5 또는 2.0과 같은 사전 설정 값을 선택합니다.

"텍스트" 편집기를 사용하여

클래식 편집기를 사용하면 "시각적" 편집과 "텍스트"(HTML) 편집 모드를 전환할 수 있습니다. "텍스트" 편집기를 사용하여 줄 간격을 사용자 지정하는 방법은 다음과 같습니다

• 1단계: 클래식 편집기 오른쪽 상단 모서리에 있는 "텍스트" 탭을 클릭하여 HTML 보기로 전환합니다.
• 2단계: 이제 단락 태그에 직접 인라인 CSS를 추가하여 줄 간격을 조절할 수 있습니다.

예를 들어:

<p style="line-height: 1.7;">이 단락의 줄 높이는 1.7입니다.</p>

구텐베르크에서와 마찬가지로, 여기에서도 line-height 속성은 숫자, 길이 값, 백분율 또는 키워드를 사용하여 간격을 정의할 수 있습니다.

방법 2: 구텐베르크 편집기를 사용하여 줄 간격 변경

구텐베르크 블록 편집기에는 코드를 건드리지 않고도 줄 간격을 조정할 수 있는 내장 타이포그래피 컨트롤이 있습니다. 더 세밀한 조정을 위해서는 블록의 HTML을 직접 편집할 수도 있습니다.

단락 설정을 통해 줄 간격 조정

• 1단계: 워드프레스 게시물 또는 페이지에서 수정하려는 단락을 선택합니다.

• 2단계: 오른쪽의 블록 설정 사이드바로 이동합니다. "타이포그래피" 또는 "텍스트 설정"이라고 표시된 섹션을 찾으세요.

• 3단계: '타이포그래피' 옆에 있는 점 세 개 메뉴를 클릭하면 '줄 간격' 옵션이 나타납니다.

• 4단계: 이제 줄 간격을 원하는 대로 조정하세요. 정말 간단하죠!

HTML을 사용하여 줄 간격 사용자 지정하기

보다 세밀한 제어가 필요하다면 사용자 지정 HTML 옵션을 이용하세요.

방법은 다음과 같습니다

• 1단계: 편집할 단락 블록을 선택합니다. "p" 아이콘을 클릭한 다음 "코드"로 전환합니다.

• 2단계: 코드 아이콘을 다시 클릭한 다음 "사용자 지정 HTML"을 선택합니다. 이렇게 하면 단락이 편집 가능한 HTML로 변환됩니다.

• 3단계: 이제 다음 코드 조각에 원하는 내용을 추가하세요.

<p style="line-height: 1.8em;">여기에 텍스트를 입력하세요.</p>

line-height 속성은 텍스트 줄 사이의 간격을 제어합니다.

설정 방법은 다음과 같습니다

• 숫자: 글꼴 크기의 배수 (예: 1.5는 글꼴 크기의 1.5배를 의미합니다).
• 길이 값: 예를 들어 20px는 20픽셀 간격을 의미합니다.
• 은 150%로, 글자 크기의 150%에 해당합니다.
• 키워드: 예를 들어 일반적인 경우(일반적으로 기본값은 약 1.2).

참고: 블록 설정에서 변경한 내용은 해당 단락에만 적용되지만, 인라인 CSS를 사용하는 "사용자 지정 HTML" 블록을 활용하면 여러 단락이나 요소를 원하는 대로 스타일링할 수 있는 유연성이 높아집니다.

방법 3: 테마 사용자 정의 도구를 사용하여 줄 간격 조정

테마 커스터마이저를 사용하면 개별 블록이나 게시물을 수정하지 않고도 사이트 전체의 줄 간격을 조정할 수 있습니다. 사용 가능한 기능은 테마에 따라 다르지만, 대부분의 최신 테마에는 타이포그래피 제어 기능이 포함되어 있습니다.

1단계: WordPress 관리자 대시 보드 로 이동 하여 외관 > 사용자 정의를 선택합니다 . 그러면 테마 사용자 정의 도구가 열립니다.

2단계: 사용자 정의 도구에 들어가면 "타이포그래피", "콘텐츠" 또는 "전역"이라고 표시된 섹션을 찾으세요. 정확한 이름과 위치는 테마에 따라 다를 수 있습니다.

3단계: 이제 줄 간격 조절 기능을 찾으세요. 사용 중인 테마에 따라 다음 중 하나가 표시될 수 있습니다.

• 슬라이더: 드래그하여 간격을 조절하세요.
• 숫자 입력란: 1.5와 같이 특정 줄 높이 값을 입력하세요.
• 사전 설정 옵션: 미리 정의된 줄 간격 설정을 선택하세요.

4단계: 조정을 마친 후 "게시" 버튼을 눌러 변경 사항을 저장하세요. 가장 좋은 점은 무엇일까요? 변경 사항이 사이트에 어떻게 적용되는지 실시간으로 미리 볼 수 있으므로 결과를 즉시 확인할 수 있다는 것입니다!

CSS를 사용하여 줄 간격을 조정하는 방법은 무엇인가요?

테마에 줄 간격 조절 기능이 내장되어 있지 않다면, 사용자 정의 도구의 추가 CSS 섹션을 활용하세요. 다음 코드를 추가하면 사이트의 모든 단락 줄 간격을 조정할 수 있습니다.

특정 콘텐츠 영역만 선택하려면 테마의 콘텐츠 클래스와 일치하도록 선택자를 조정하세요. 원하는 대로 px, em, rem 또는 단위가 없는 값을 사용할 수 있습니다.

방법 4: 워드프레스 플러그인을 사용하여 줄 간격 조정

코드나 커스터마이저를 건드리지 않고 간격을 조정하려면 플러그인이 가장 간단한 방법입니다. Spacer 플러그인은 Gutenberg 편집기에 요소 간 간격을 조절하는 전용 블록을 추가하여 슬라이더 또는 숫자 입력으로 높이를 제어할 수 있도록 합니다.

WordPress 플러그인 디렉토리에서 Spacer를 설치하고 활성화하세요. 블록 삽입 도구에 새로운 Spacer 블록이 나타납니다. 두 블록 사이에 Spacer 블록을 추가하고 원하는 높이를 설정한 후, 결과를 미리 보고 페이지를 게시하거나 업데이트하세요.

결론

줄 간격은 콘텐츠 가독성과 방문자 체류 시간에 상당한 영향을 미치는 작은 조정입니다. 개별 블록의 줄 간격을 빠르게 조정하려면 구텐베르크 타이포그래피 설정부터 시작해 보세요.

테마 커스터마이저의 추가 CSS 섹션을 사용하여 사이트 전체의 간격을 한 번에 조정할 수 있습니다. 대부분의 WordPress 사이트에서는 1.5~1.8 사이의 줄 간격이 적합하며, 특정 글꼴 및 디자인에 맞게 미세 조정하기 전에 안전하게 시작할 수 있는 값입니다.

워드프레스에서 줄 간격 변경에 대한 FAQ