워드프레스 블로그 입문서 2편에서는 포스팅 본문을 작성할 때 필수적인 4가지 기능(블록, 헤딩, 이미지 업로드, HTML 편집 기능)에 대해 상세히 알아보겠습니다.
1편에서는 포스팅 생성, 편집 방법에 대해 살펴보았습니다.
텅 빈 공간에 글만 쓰면 되는 네이버 블로그와는 달리 워드프레스에서 포스팅 작성을 하기 위해서는 여러 가지 기능에 대한 이해가 필요합니다.
워드프레스 블록
먼저 워드프레스 본문을 이루는 단위인 블록에 대해 설명하겠습니다.
워드프레스 포스팅 본문은 여러 개의 블록으로 구성되어 있습니다. 각 블록은 독립적으로 조정하고 스타일링 할 수 있습니다.
텍스트뿐만 아니라 이미지, 헤딩, HTML 코드 등도 각각 하나의 블록으로 구성됩니다.
텍스트의 폰트 크기 조정이나, 색상 변경 같은 편집 작업도 기본적으로 블록 단위로 이루어집니다. 따라서, 원하는 블록을 선택해서 해당 블록에만 편집한 내용이 적용되게 할 수 있습니다.
포스팅 작성 화면에서 엔터키를 누르면 바로 다음 줄로 이동하지 않고, 새로운 블록이 생성됩니다. 같은 블록 안에서 다음 줄로 이동하려면 Shift + 엔터키를 사용해야 합니다.
처음에는 이런 구조가 익숙하지 않아 불편하실 수 있지만, 실제로 사용하다 보면 글 편집에 있어 블록 구분이 굉장히 효율적이라는 것을 체감하게 될 것입니다.
특정 블록을 선택한 뒤 위(∧) 아래(∨) 화살표를 클릭하면 블록이 이동됩니다.
헤딩(Heading)
워드프레스에서 헤딩은 주로 제목 또는 소제목으로 사용되는 요소입니다. 지금 보고 계시는 글의 제목과 소제목에도 각각 다른 폰트 크기, 색상, 배경색이 적용되어 있습니다.
아래는 저의 블로그에 적용된 H2~H4의 모습입니다.
헤딩은 H1부터 H6까지 있으며, H1은 보통 워드프레스 홈페이지 제목, 포스팅의 제목에 사용됩니다.
H2~H6 헤딩은 본문 내 소제목으로써 본문 내용을 여러 섹션으로 나누는 데 사용됩니다. H2~H6 헤딩을 잘 활용하면 가독성 높은 포스팅을 작성할 수 있습니다.
6가지 헤딩의 스타일을 사용자가 직접 지정할 수 있습니다. 폰트 크기, 색상 변경뿐만 아니라, 배경색을 흐리게 할 수도, 밑 줄, 옆 줄을 추가하는 등 사용자의 입맛에 맞게 커스터마이징 가능합니다.
헤딩을 커스터마이징 하는 방법에 대해서는 별도 포스팅으로 다뤄보겠습니다.
헤딩 쉽게 적용하는 방법
헤딩은 #을 입력한 후 스페이스바를 눌러서 적용할 수 있습니다.
#을 입력한 후 스페이스바를 누르면 H1 헤딩이 적용되며, ##을 입력한 후 스페이스바를 누르면 H2 헤딩이 적용되는 방식입니다.
헤딩 적용 시 주의사항
헤딩은 본문의 가독성을 높이는 역할도 중요하지만, 검색엔진 최적화(SEO)에도 매우 중요한 역할을 합니다.
검색 엔진들은 웹사이트의 콘텐츠를 이해하고 색인화하기 위해 페이지 구조를 분석합니다. 헤딩(H1~H6)은 페이지의 주요 섹션을 구분하고 그 계층 구조를 나타냅니다. 이를 통해 검색 엔진은 페이지의 주요 토픽과 하위 토픽을 이해할 수 있습니다.
검색엔진 최적화(SEO)를 위해서는 H1 헤딩은 반드시 페이지 당 한 번만 사용되어야 합니다. H1 헤딩은 포스팅 제목에 사용되기 때문에 본문에 사용할 수 있는 헤딩은 H2~H6입니다. H2~H6는 페이지의 콘텐츠를 논리적으로 구조화하는 데 사용되어야 합니다.
헤딩의 사용 순서도 중요합니다. H2 헤딩을 사용하기 전에 먼저 H3, H4 헤딩을 사용하는 것은 SEO에 불리한 것으로 알려져 있습니다. 비슷하게, H3를 사용하기 전에 먼저 H4를 사용하는 것도 마찬가지입니다. 하지만 한번 앞 번호의 헤딩이 사용된 이후에는 그 순서를 임의로 섞어 사용하는 것이 허용됩니다. 즉, H2→ H3→ H4→ H2→ H4→ H3와 같은 순서는 SEO에 불리하지 않은 것으로 알려져 있습니다.
하지만 저는 조금이라도 더 검색엔진 최적화(SEO)에 긍정적인 영향을 주기 위해 H2, H3 외에는 잘 사용하지 않고 있습니다. 정말 필요한 경우 H4까지는 사용하지만 H4를 사용하는 경우는 드뭅니다.
이미지 업로드
이미지를 업로드하는 방법은 매우 간단합니다. 빈 블록을 선택하면 표시되는 + 버튼 클릭 → 이미지(또는 image)를 클릭합니다.
업로드, 미디어 라이브러리, URL에서 삽입 세 가지 옵션 중 하나를 선택해서 이미지를 업로드할 수 있습니다.
업로드는 내 컴퓨터/스마트폰 등에 저장된 이미지를 직접 업로드하는 기능입니다.
미디어 라이브러리는 여태까지 내가 업로드한 이미지를 재사용할 수 있는 옵션입니다.
워드프레스에서는 이미지를 한 번 업로드하면 서버에 자동으로 저장되고, 사용자가 직접 삭제하지 않는 이상 서버에 계속 남아있습니다.
예를 들어 포스팅 본문에 사용하려고 업로드한 이미지가 포스팅을 작성하다 보니 전체 내용과 어울리지 않아 본문에서 삭제했더라도 서버에는 남아있습니다.
저는 서버 공간 확보를 위해 미사용 중인 이미지를 삭제하는 작업을 주기적으로 하고 있습니다.
URL에서 삽입은 외부 URL로 부터 이미지를 가져와서 삽입하는 기능입니다. 외부 서버에 저장된 이미지를 URL로 삽입하면 내 서버의 저장 공간을 절약할 수 있는 장점이 있지만, 외부 서버에 문제가 생길 경우 이미지가 더 이상 보이지 않거나, 느리게 로딩되는 등의 리스크도 존재합니다.
HTML로 편집
워드프레스에서는 본문 내용을 HTML로 직접 편집할 수도 있습니다. 빈 블록을 선택하면 표시되는 + 클릭 → HTML을 검색하면 HTML을 입력할 수 있는 공간이 생성됩니다.
텍스트가 포함된 블록도 HTML로 편집 가능합니다. "글을 HTML로 편집하는 방법"이라는 내용이 기재된 블록 선택 → ⋮ 클릭 → HTML로 편집 옵션을 선택해 보겠습니다.
'글을 HTML로 편집하는 방법' 텍스트에 해당되는 HTML 코드가 포함된 창이 생성되고, 해당 창에서 HTML 코드로 수정 작업을 진행할 수 있습니다. 기존의 편집 방식으로 돌아가려면 '비주얼로 편집' 옵션을 선택하면 됩니다.
워드프레스 블로그를 운영하다 보면, HTML을 이용해야 하는 상황이 종종 발생합니다. 예를 들어 워드프레스에서는 기본적으로 블록 단위로 편집이 가능하지만, HTML 코드를 활용하면 특정 블록 내에서도 여러 가지 스타일을 적용할 수 있습니다.
HTML은 다양한 컴퓨터 언어 중 가장 간단한 편이며, 사용이 필요한 경우가 많지 않으므로 필요가 있을 때마다 검색하거나, 챗GPT에 질문을 통해 코드를 수정할 수 있습니다. 나무위키에서 HTML의 개요, 예시, 설명 보러 가기
이번 포스팅에서는 헤딩, 블록, 이미지 업로드, HTML 편집까지 워드프레스 포스팅 본문 작성 시 반드시 알아야 하는 필수 기능들 대해 알아보았습니다. 3편에서는 개별 포스팅의 URL 설정 방법에 대해 알아보겠습니다.
관련 포스팅
▶워드프레스 블로그 입문서 1편 – 워드프레스 포스팅 생성, 편집 방법
▶챗GPT 수익형 블로그 만들기 (Feat. 애드센스 승인 후기)
▶구글 애드센스 무효트래픽으로 인한 광고 게재 제한 원인 4가지, 사전 예방 방법
▶워드프레스 홈페이지 제작 비용 – 347,281원(최초 1년)