텍스트, 이미지, 동영상 및 링크를 삽입하는 워드프레스 구텐베르크 편집기

2분 읽기
Jiangsu
2025-10-19
2025-10-20
6,976
아래 링크를 통해 쇼핑하면 추가 비용 없이 수수료를 받을 수 있습니다.

구텐베르크 에디터는 '블록'을 중심으로 텍스트, 이미지 등의 콘텐츠를 삽입할 때 해당 유형의 블록을 추가하고 편집하는 것이 핵심입니다. 이 방식은 매우 유연하며 각 요소의 스타일과 위치를 정밀하게 제어할 수 있습니다. 자세한 단계는 다음과 같습니다:

I. 텍스트 삽입: 단락 및 머리글 블록으로 콘텐츠 작성하기

텍스트는 글의 본문이며, 구텐베르크는 다음과 같이 작동하는 '문단' 및 '제목' 블록을 통해 텍스트 레이아웃을 구현합니다:

1. 단락 텍스트(본문 내용) 삽입하기

  • 방법 1글 편집 페이지에 들어가면 기본적으로 "쓰기 시작 또는 입력/블록 추가"라는 메시지가 표시됩니다. 텍스트를 직접 입력하면 시스템이 자동으로 "문단" 블록을 생성합니다.
  • 워드프레스 구텐베르크 에디터로 텍스트, 이미지, 동영상 및 링크를 삽입하는 방법 - LikaCloud
  • 방법 2편집 영역에서 '+' 아이콘(블록 삽입기)을 클릭하고 '문단'을 검색한 후 클릭하여 빈 문단 블록을 생성한 다음 콘텐츠를 입력합니다.
  • 워드프레스 구텐베르크 에디터로 텍스트, 이미지, 동영상 및 링크를 삽입하는 방법 - LikaCloud

서식 지정

워드프레스 구텐베르크 에디터로 텍스트, 이미지, 동영상 및 링크를 삽입하는 방법 - LikaCloud

문단 블록을 선택하면 오른쪽에 블록(블록 설정) 패널이 표시되어 이를 설정할 수 있습니다:

  • 맞춤(왼쪽 맞춤, 가운데 맞춤, 오른쪽 맞춤, 끝 맞춤);
  • 텍스트 크기(소형, 보통, 대형, 특대형);
  • 텍스트 색상(가독성을 위해 배경색과 대비되도록 주의하면서 색상 사각형을 클릭하여 선택합니다);
  • 배경색(단락에 기본 색상을 추가하고 중요한 콘텐츠를 강조하기 위해).

2. 제목 삽입(콘텐츠 계층 구조)

제목은 글의 구조를 구분하는 데 사용되며(예: 장, 섹션), "H1-H6" 계층 구조에 따라 사용하는 것이 좋습니다(H1은 일반적으로 글의 메인 제목으로, 편집 페이지 상단에 기본 설정되어 있으므로 반복해서 추가할 필요가 없음).

절차

워드프레스 구텐베르크 에디터로 텍스트, 이미지, 동영상 및 링크를 삽입하는 방법 - LikaCloud
  1. 편집 영역에서 '+' 아이콘을 클릭하고 '제목'을 검색한 다음 선택하여 제목 블록을 생성합니다.
  2. 제목 텍스트를 입력합니다(예: "I. 설치 준비").
  3. 블록을 선택하고 오른쪽 패널의 '제목 수준'에서 H2-H6(레벨 1 부제목의 경우 H2, 레벨 2 부제목의 경우 H3 등)을 선택합니다.

기교텍스트를 입력한 후 텍스트를 선택하고 Ctrl+B(굵게) 또는 Ctrl+I(이탤릭체)를 눌러 텍스트 스타일을 빠르게 지정할 수 있습니다.

II. 이미지 삽입: '사진' 블록을 사용하여 이미지를 추가하고 최적화하기

이미지는 글에 생동감을 더하며, 구텐베르크의 '이미지' 블록은 다음 단계에 따라 업로드, 크기 조정 및 최적화를 지원합니다:

워드프레스 구텐베르크 에디터로 텍스트, 이미지, 동영상 및 링크를 삽입하는 방법 - LikaCloud

1. 사진을 삽입하는 3가지 방법

  • 방법 1: 새 이미지 업로드"+" 아이콘 클릭 → "사진" 검색 → "업로드" 클릭 → 컴퓨터에서 사진 파일 선택 → 업로드가 완료될 때까지 기다립니다.
  • 방법 2: 미디어 라이브러리의 이미지 사용이미 업로드한 사진(예: 이전에 삽입한 사진)이 있는 경우 '사진' 블록을 클릭하고 '미디어 라이브러리' → 대상 사진 선택 → '선택'을 클릭합니다.
  • 방법 3: 이미지 직접 붙여넣기컴퓨터에서 이미지를 복사하고(오른쪽 클릭 "복사") 편집 영역으로 돌아가서 오른쪽 클릭 "붙여넣기"를 클릭하면 시스템이 자동으로 이미지 블록을 생성하여 업로드합니다.

2. 이미지 스타일 조정(최적화해야 함)

이미지 블록을 선택하면 오른쪽 패널에서 다음과 같은 주요 매개변수를 설정할 수 있습니다:

워드프레스 구텐베르크 에디터로 텍스트, 이미지, 동영상 및 링크를 삽입하는 방법 - LikaCloud
  • 정렬
    • 왼쪽 정렬/오른쪽 정렬: 이미지가 측면에 표시되고 텍스트가 그 주위에 표시됩니다;
    • 중앙 정렬: 사진이 위아래 텍스트와 함께 중앙에 표시됩니다;
    • 와이드 정렬: 이미지가 편집 영역의 전체 너비를 차지합니다(큰 이미지에 적합).
  • 크기: '너비' 슬라이더를 드래그하여 배율을 조정합니다(이미지 왜곡을 방지하려면 '배율 제한'을 체크한 상태로 유지하는 것이 좋습니다).
  • 링크이미지를 다른 페이지로 연결하려면 '링크' 입력란을 클릭합니다(예: 이미지를 클릭하면 고해상도 이미지 페이지로 이동), 링크할 필요 없이 공란으로 둘 수 있습니다.
  • 대체 텍스트(대체 텍스트)이미지에 대한 설명(예: "워드프레스 설치 단계 스크린샷")을 입력하면 검색 엔진이 이미지의 콘텐츠를 인식하고 SEO를 개선하며 접근성을 높일 수 있습니다.

3. 일반적인 문제 해결

  • 이미지 업로드 실패: 이미지 크기(5MB 이하 권장), 형식(JPG, PNG, WebP 지원)을 확인하거나 페이지를 새로고침한 후 다시 시도하세요.
  • 흐릿한 이미지: 원본 이미지(너비 1000px 이상의 해상도)를 업로드하고 원본 크기 이상으로 확대하지 않도록 합니다.

동영상 삽입: '동영상' 블록으로 로컬 또는 온라인 동영상 추가하기

직접 촬영한 동영상이든, YouTube, Station B 또는 기타 플랫폼의 동영상이든, '동영상' 블록을 통해 삽입할 수 있습니다:

워드프레스 구텐베르크 에디터로 텍스트, 이미지, 동영상 및 링크를 삽입하는 방법 - LikaCloud

1. 로컬 동영상(직접 업로드한 동영상)을 삽입합니다.

  1. "+" 아이콘 클릭 → "동영상" 검색 → "업로드" 선택 → 컴퓨터에서 동영상 파일 선택(MP4, WebM 형식 지원).
  2. 업로드가 완료되면 동영상이 블록에 자동으로 표시되며 재생을 클릭하여 테스트할 수 있습니다.

다음 사항에 유의하십시오.로컬 동영상 파일은 용량이 커서 서버 공간을 차지하고 로딩 속도가 느려질 수 있습니다. 이 방법은 작은 동영상(100MB 이내)에만 사용하고 대용량 동영상은 온라인 플랫폼에 우선순위를 두는 것이 좋습니다.

2. 온라인 동영상 삽입(권장!)

동영상 플랫폼 링크를 통해 삽입되므로 서버 공간을 차지하지 않고 로딩 속도가 빠릅니다:

  1. 동영상 플랫폼(예: 유튜브, B 스테이션, 텐센트 비디오)을 열고 대상 동영상을 찾은 다음 공유 링크를 복사합니다. https://www.bilibili.com/video/BV123456)。
  2. 구텐베르크 편집 영역에서 링크를 직접 붙여넣으면 시스템이 자동으로 동영상 블록을 인식하여 생성하고 동영상 플레이어를 표시합니다.

지원 플랫폼유튜브, B사이트, 텐센트 비디오, 유쿠, 아키이 및 기타 주요 플랫폼을 사용할 수 있으며 링크를 붙여넣은 후 2~3초 정도 기다렸다가 로드할 수 있습니다.

3. 동영상 스타일 조정

동영상 블록을 선택하면 오른쪽 패널을 설정할 수 있습니다:

워드프레스 구텐베르크 에디터로 텍스트, 이미지, 동영상 및 링크를 삽입하는 방법 - LikaCloud
  • 맞춤(이미지와 동일, 왼쪽/오른쪽 맞춤으로 텍스트가 둘러싸여 있음);
  • 너비(동영상 플레이어 크기 조정, 휴대폰에서 불완전하게 표시되지 않도록 너비가 1000px를 초과하지 않는 것이 좋습니다);
  • 자동 재생: 권장하지 않음(대부분의 브라우저에서 자동 재생을 차단하여 경험에 영향을 미침).

넷째, 링크 삽입: 다른 콘텐츠와 관련된 텍스트, 사진을 삽입할 수 있습니다.

링크는 콘텐츠를 다른 페이지 및 외부 웹사이트와 연결할 수 있는 웹사이트의 '혈관'으로, 구텐베르크는 텍스트와 이미지에 링크를 추가할 수 있도록 지원합니다:

워드프레스 구텐베르크 에디터로 텍스트, 이미지, 동영상 및 링크를 삽입하는 방법 - LikaCloud

1. 텍스트에 링크(하이퍼링크) 추가하기

  1. 링크를 추가할 텍스트를 선택합니다(예: "자세한 튜토리얼을 보려면 클릭").
  2. 위에 표시되는 도구 모음에서 '링크' 아이콘(체인 모양)을 클릭하거나 단축키를 누릅니다. Ctrl+K
  3. 링크 주소(예: 사이트의 페이지 링크)를 입력 상자에 붙여넣습니다. https://你的域名/教程 또는 외부 링크 https://example.com)。
  4. 선택적 설정:
    • '새 탭에서 열기'를 선택합니다(방문자가 사이트를 떠나지 않도록 외부 링크를 사용하는 것이 좋습니다);
    • '링크 설정' 아이콘(작은 톱니바퀴)을 클릭하여 링크 제목(마우스오버 시 표시되는 힌트 텍스트)을 추가합니다.
  5. '입력' 또는 '적용'을 클릭하여 설정을 완료하면 텍스트가 파란색으로 바뀌고 밑줄이 그어져 링크가 성공적으로 추가되었음을 나타냅니다.

2. 이미지에 링크 추가하기

워드프레스 구텐베르크 에디터로 텍스트, 이미지, 동영상 및 링크를 삽입하는 방법 - LikaCloud
  1. 이미지 블록을 선택하고 오른쪽 패널에서 '링크' 입력 상자를 찾습니다.
  2. 링크 주소를 입력합니다(예: 이미지를 클릭하여 제품 상세 페이지로 이동).
  3. 원하는 대로 '새 탭에서 열기'를 선택하고 공란을 클릭하여 저장합니다.

3. 링크 제거

워드프레스 구텐베르크 에디터로 텍스트, 이미지, 동영상 및 링크를 삽입하는 방법 - LikaCloud
  • 텍스트 링크: 링크가 있는 텍스트를 선택하고 도구 모음에서 '링크 제거' 아이콘(십자 표시가 있는 체인)을 클릭하거나 Ctrl+K 나중에 링크 주소를 삭제합니다.
  • 이미지 링크: 이미지를 선택하고 오른쪽의 '링크' 입력 상자에서 주소를 삭제합니다.

V. 초보 운영자를 위한 팁

  1. 블록 작업 단축키
    • 빠르게 블록 추가: 입력 / + 블록 이름(예 /图片 (이미지 블록을 직접 불러옵니다);
    • 블록 이동하기: 블록을 선택하고 / 화살표 키를 누르거나 블록 왼쪽에 있는 '⋮⋮' 아이콘을 드래그합니다;
    • 블록 삭제: 블록을 선택하고 Delete 버튼을 클릭하거나 블록 도구 모음에서 '삭제' 아이콘을 클릭합니다.
  2. 실시간 미리보기편집 페이지 오른쪽 상단의 '미리보기' 버튼을 클릭하여 링크가 작동하고 이미지/동영상이 제대로 표시되는지 확인합니다.
  3. 과도한 타이포그래피 피하기텍스트 색상과 배경 색상은 페이지를 깔끔하게 유지하기 위해 너무 많지 않아야 하며(3개 이하), 사진과 동영상의 크기는 미적 감각을 높이기 위해 균일한 크기(예: 너비는 800px로 설정)로 유지해야 합니다.

위의 단계를 통해 구텐베르크 에디터에서 텍스트, 이미지, 동영상 및 링크를 쉽게 삽입하고 편집할 수 있습니다. 각 요소는 별도의 '블록'이며, 이를 선택하고 오른쪽 패널에서 설정을 조정하여 정확한 레이아웃을 만들 수 있습니다. 몇 번 더 연습하면 곧 익숙해질 것입니다!

태그.