WordPress 블록 편집기에서 이미지를 추가 및 정렬하는 방법

WordPress 블록 편집기 (Gutenberg)에서 이미지를 추가하고 정렬하는 것은 시각적으로 매력적인 컨텐츠를 만드는 데 필수적입니다. 적절한 이미지 배치는 ​​가독성을 향상시키고 사용자 경험을 향상 시키며 SEO 및 페이지 성능에서 중요한 역할을합니다. 그러나 많은 사용자는 이미지 정렬, 위치 문제 및 다양한 장치의 응답 성으로 어려움을 겪고 있습니다.

이 안내서는 WordPress 블록 편집기에 이미지를 삽입하고 정렬하는 방법에 대한 단계별 설명을 제공하여 모든 화면 크기에 올바르게 표시되도록합니다.

WordPress 블록 편집기의 이미지 블록 이해

WordPress는 블록을 사용하여 컨텐츠를 포맷하고 이미지 블록을 사용하여 이미지가 추가됩니다. 이미지가 수동으로 배치 된 클래식 편집기와 달리 블록 편집기는 내장 정렬 옵션을 제공하여 사용자 정의를보다 쉽게 ​​할 수 있도록합니다.

이미지 블록을 사용하면 다음을 수행 할 수 있습니다.

• 미디어 라이브러리 에서 새 이미지를 업로드하거나 기존 이미지를 사용하십시오.
• 이미지를 왼쪽, 오른쪽, 중앙, 넓은 너비 또는 전체 너비 정렬합니다.
• SEO 및 접근성에 대한 Alt 텍스트를 추가하십시오.
• 편집기 내에서 직접 캡션을 조정, 자르기 또는 추가하십시오.

이러한 옵션의 작동 방식을 이해하면 콘텐츠를 효과적으로 구성하는 데 도움이됩니다.

WordPress 블록 편집기에서 이미지를 추가하는 방법

WordPress에 이미지를 추가하는 것은 간단합니다. 다음 단계를 따르십시오.

1. 이미지를 삽입하려는 게시물이나 페이지를 엽니 다 .
2. "+"(블록 추가) 버튼을 클릭하고 이미지 블록을 선택하십시오.
3. 다음 옵션 중 하나를 선택하십시오.
   • 업로드 - 컴퓨터에서 새 이미지를 추가하십시오.
   • 미디어 라이브러리 - WordPress에 이미 업로드 된 이미지를 선택하십시오.
   • URL에서 삽입 - 외부 이미지 링크를 사용하십시오.
4. 삽입되면 이미지 크기를 조정하거나 캡션을 추가하거나 정렬을 변경할 수 있습니다.

최상의 결과를 얻으려면 최적화 된 이미지를 사용하여 로딩 시간이 느리게 방지하십시오. JPEG 및 PNG는 가장 일반적인 형식이며 Webp는 더 나은 압축과 품질을 제공합니다.

WordPress 블록 편집기에서 이미지 정렬

이미지를 추가 한 후 콘텐츠 레이아웃에 맞게 정렬을 조정할 수 있습니다.

기본 이미지 정렬 옵션

WordPress는 몇 가지 내장 정렬 선택을 제공합니다.

• 왼쪽 정렬 - 왼쪽에 이미지를 텍스트 주위에 포장 한 상태로 놓습니다.
• 오른쪽 정렬 - 텍스트 주위를 감싸는 텍스트로 오른쪽에 이미지를 배치합니다.
• Align Center - 텍스트 포장없이 이미지를 중심으로합니다.
• 폭 너비 -이미지를 콘텐츠 너머로 확장하지만 전체 화면은 아닙니다.
• 전체 너비 - 전체 내용 너비를 커버하기 위해 이미지를 늘립니다.

이미지를 정렬하려면 :

• 이미지를 클릭하십시오.
• 위의 도구 모음에서 정렬 옵션을 선택하십시오.
• 필요에 따라 레이아웃을 조정하십시오.

정렬이 예상대로 작동하지 않으면 테마 제한 또는 CSS 스타일이 레이아웃에 영향을 줄 수 있습니다.

더 나은 이미지 배치를 위해 다른 블록을 사용합니다

고급 레이아웃의 경우 이미지 용으로 설계된 다른 블록을 사용하는 것을 고려하십시오.

미디어 및 텍스트 블록 (텍스트로 랩핑 된 이미지 용)

미디어 및 텍스트 블록은 정렬 문제없이 텍스트 옆에 이미지를 표시하는 데 이상적입니다. 이미지와 텍스트를 올바르게 정렬하면서 균형 잡힌 레이아웃을 보장합니다.

그것을 사용하려면 :

1. 추가 블록 (“+”)을 클릭하고 미디어 및 텍스트를 선택하십시오.
2. 이미지를 업로드하거나 선택하십시오.
3. 이미지 옆에 제공된 필드에 텍스트를 입력하십시오.
4. 필요에 따라 정렬 및 레이아웃 설정을 조정하십시오.

갤러리 블록 (여러 이미지 용)

그리드 형식 으로 여러 이미지를 추가 해야하는 경우 별도의 이미지 블록을 삽입하는 대신 갤러리 블록을 사용하십시오.

커버 블록 (배경 이미지 용)

커버 블록은 텍스트 오버레이가있는 영웅 이미지 또는 배경 배너 에 유용합니다.

이 블록은 표준 이미지 블록보다 더 많은 설계 유연성을 제공합니다.

모바일 및 태블릿에 대한 반응 형 이미지 정렬

모든 장치에서 이미지를 올바르게 조정하는 것은 원활한 사용자 경험에 중요합니다.

이미지를 모바일 친화적으로 만드는 방법 :

• 고정 된 픽셀 치수 대신 백분율 기반 너비를 사용하십시오.
• 이미지가 다른 화면 크기에 최적화 되도록하십시오.
• WordPress의 반응 형 모드를 사용하여 게시물을 미리 보려면 데스크톱, 태블릿 및 모바일 뷰에 이미지가 어떻게 나타나는지 확인하십시오.

이미지가 모바일에서 제대로 정렬되지 않으면 간격 및 정렬 문제를 해결하기 위해 사용자 정의 CSS가 필요할 수 있습니다.

WordPress 블록 편집기의 이미지 SEO 모범 사례

이미지 최적화는 검색 순위와 페이지 속도를 모두 향상시킵니다. 이러한 모범 사례를 따르십시오.

1. Alt Text 추가 - 접근성 및 SEO를 향상시키기 위해 이미지를 설명하십시오.
2. 압축 이미지 사용 - TinypNG 또는 Imagify 와 같은 도구를 사용하여 파일 크기를 줄입니다.
3. 게으른로드 활성화 - 사용자가 스크롤 할 때까지 이미지 로딩을 지연시켜 성능을 향상시킵니다.
4. Webp 형식 사용 - JPEG 또는 PNG보다 더 나은 압축을 제공합니다.

이러한 최적화를 적용하면 사이트 속도와 사용자 참여가 향상됩니다.

WordPress의 이미지 정렬 문제 문제 해결

때로는 테마 또는 플러그인 충돌로 인해 이미지가 제대로 정렬되지 않습니다 .

일반적인 문제 및 수정 :

• 정렬이 작동하지 않습니까? 테마는 블록 편집기의 정렬 설정을 무시할 수 있습니다. CSS 수정 사항을 추가하십시오.
• 모바일에서 크기를 조정하지 않은 이미지? 테마가 고정 된 이미지 크기를 사용하는지 확인하고 조정하십시오.
• 텍스트가 이미지를 감싸지 않습니까? 더 나은 제어를 위해 이미지 블록 대신 미디어 및 텍스트 블록을 사용하십시오.

정렬 문제가 지속되면보다 유연한 테마로 전환하거나 Elementor와 같은 페이지 빌더를 사용하면 도움이 될 수 있습니다.

고급 이미지 사용자 정의를 위해 플러그인을 사용할 때

대부분의 사용자에게는 WordPress의 기본 옵션이 충분하지만 플러그인은 이미지 배치 및 정렬을 향상시킬 수 있습니다.

이미지 정렬 및 최적화를위한 최고의 WordPress 플러그인 :

• Smush - 더 빠른 로딩을 위해 이미지를 압축하고 최적화합니다.
• 미디어 교체 활성화 - 링크를 깨지 않고 이미지를 대체합니다.
• WP Rocket - 더 나은 성능을 위해 게으른로드를 추가합니다.

플러그인은 최적화를 자동화하고 고급 이미지 사용자 정의 옵션을 제공하는 데 도움이됩니다.

결론

이미지 블록 설정, 정렬 옵션 및 반응 형 디자인 기술을 이해할 때 WordPress 블록 편집기에서 이미지 추가 및 정렬은 쉽습니다.

간단한 레이아웃의 경우 기본 이미지 블록을 사용하고보다 구조화 된 디자인을 사용하려면 미디어 및 텍스트, 갤러리 또는 커버 블록을 활용하십시오. 정렬 문제가 발생하면 테마 설정을 확인하고 모바일의 이미지를 최적화하며 충돌 문제를 해결하면 부드러운 경험이 보장됩니다.

이 단계를 수행하면 빠른 로딩 시간과 강력한 SEO 성능을 유지하면서 모든 장치에서 멋지게 보이는 잘 구조화되고 시각적으로 매력적인 콘텐츠를 만들 수 있습니다.