WordPress 배경 이미지: 배경 이미지를 추가, 변경 및 최적화하는 방법

게시 됨: 2024-06-26

WordPress 배경 이미지에 대해 더 알고 싶으십니까? 엄청난! 배경 이미지는 시각적으로 매력적이고 매력적인 사이트를 만드는 데 큰 차이를 만들 수 있습니다. 이 가이드에서는 WordPress에서 배경 이미지를 사용하고 최적화하기 위한 쉽고 실용적인 팁을 공유하겠습니다.

배경 이미지 추가 및 최적화부터 모든 장치에서 빠르게 로드되고 멋지게 보이도록 보장하는 것까지 모든 것을 다룹니다.

WordPress의 배경 이미지는 무엇입니까?

WordPress 배경 이미지는 웹 사이트의 전체 사용자 정의 배경 역할을 합니다. 이는 사이트의 시각적 매력을 크게 향상시키고, 방문자의 관심을 끌고, 매력적인 사용자 경험을 제공할 수 있습니다. 사이트의 테마와 콘텐츠에 맞게 배경 이미지를 다양한 스타일과 위치로 적용할 수 있습니다.

좀 더 자세히 살펴보겠습니다.

배경 이미지 유형

디자인 요구 사항에 따라 사용할 수 있는 배경 이미지 유형을 강조해 보겠습니다.

  1. 풀 컬러 : 단일 배경색을 선택하면 깔끔하고 심플한 느낌을 연출할 수 있습니다. 이는 미니멀리스트 디자인에 이상적입니다.
  2. 패턴 : 반복되는 디자인을 선택하여 질감과 시각적 흥미를 더하되 내용을 압도하지 않도록 주의하세요. 텍스트와 이미지는 눈에 띄고 명확하게 유지되어야 합니다.
  3. 그라디언트 : 두 개 이상의 색상 사이를 부드럽게 전환하기 위해 그라디언트를 구현하여 사이트에 깊이와 현대적인 느낌을 더합니다.
  4. 이미지 : 사진이나 그림을 추가하여 웹사이트를 더욱 매력적이고 전문적으로 보이게 만드세요. 또한 방문자의 참여를 유도하고 브랜드의 정체성과 가치를 전달합니다.
  5. 비디오 : 사용자 경험을 향상시키고 웹 사이트에 움직임을 추가하려면 비디오 배경을 선택하십시오. 비디오는 스토리텔링에도 탁월하며 청중과 감정적인 연결을 형성할 수 있습니다. 예를 들어 여행지 웹사이트 등 방문자에게 특별한 내용을 보여주거나 실제 제품을 시연하는 데 사용할 수 있습니다.

배경 이미지의 위치

배경 이미지는 WordPress 사이트의 다양한 위치에 전략적으로 배치되어 시각적 매력과 기능을 향상시킬 수 있습니다. 배경 이미지를 사용할 수 있는 일반적인 위치는 다음과 같습니다.

  • 전체 페이지 : 배경 이미지가 웹페이지 전체를 덮어 사이트에 응집력 있는 느낌을 줍니다.
전체 웹사이트 배경의 예 - 출처: Justinmind
전체 웹사이트 배경의 예 – 출처: Justinmind
  • 헤더 : 페이지 상단, 헤더 텍스트, 탐색 메뉴 또는 로고 뒤에 위치하여 첫인상을 향상시킵니다.
헤더 배경 예시 - 출처: Astra
헤더 배경 예시 – 출처: Astra
  • 특정 WordPress 페이지 또는 게시물 뒤에 : 특정 콘텐츠를 강조하는 개별 페이지 또는 게시물에 적용됩니다.
블로그 게시물 또는 카테고리별 사진 예 - 출처: CNNTraveller
  • WooCommerce 카테고리 페이지에서 : 제품 카테고리를 시각적으로 차별화하여 쇼핑 경험을 향상시킵니다.
WooCommerce 카테고리의 배경 예 - 출처: Imagify
WooCommerce 카테고리의 배경 예 - 출처: Imagify
  • 블록 내부 : 콘텐츠 블록 내에서 텍스트나 색상을 사용하여 특정 섹션이나 정보를 강조할 수 있습니다.
블록 배경의 예 - 출처: WordPress Editor
블록의 배경 예 – 출처: WordPress Editor
  • 팝업에서: 사이트의 브랜딩 및 스타일에 맞게 뉴스레터를 구독하기 위한 로그인 페이지 또는 양식과 같은 전면 광고에 사용됩니다.
로그인 양식의 배경 예 - 출처: Imagify
로그인 양식의 배경 예 - 출처: Imagify
  • 유지 관리 또는 출시 예정 페이지 : 공사 중에도 사이트가 전문적이고 매력적으로 보이도록 유지합니다.
출시 예정 페이지의 배경 예 - 출처: W3layouts.com
출시 예정 페이지의 배경 예 – 출처: W3layouts.com

배경 이미지에 가장 적합한 크기를 선택하는 방법

멋진 배경 이미지와 빠른 로드를 위해서는 배경 이미지에 적합한 크기를 선택하는 것이 중요합니다. WordPress에 가장 적합한 배경 이미지 크기는 최소 1024 x 768픽셀이어야 합니다. 그러나 보다 세련되고 고품질의 외관을 위해서는 1920 x 1080 픽셀 해상도가 선호됩니다.

물론 크기를 결정할 때는 항상 배경 이미지의 구체적인 위치와 목적을 고려하세요. 예를 들어, 세로로 할 것인가, 가로로 할 것인가?

일반적인 지침은 다음과 같습니다.

  • 작은 배경 : 콘텐츠 블록과 같이 작은 영역에 있는 배경의 경우 너비가 1000~1200픽셀 사이인 것을 목표로 합니다.
  • 중간 배경 : 헤더나 작은 섹션의 경우 너비가 1200~1600픽셀 사이인 이미지를 사용하세요.
  • 큰 배경 : 전체 페이지 배경에는 1920~3000픽셀 사이의 너비가 이상적입니다.
힌트: 사용자 경험과 사이트 성능에 영향을 줄 수 있는 느린 로딩 시간을 방지하려면 더 큰 이미지를 웹용으로 최적화해야 합니다.

WordPress에 배경 이미지를 추가하는 방법에는 여러 가지가 있습니다. 우리는 네 가지 기술을 살펴보겠습니다:

  1. 일반 웹사이트 배경 추가하기
  2. 블록 또는 요소에 이미지 배경 추가(페이지 빌더 또는 사이트 편집기 사용)
  3. WooCommerce 카테고리에 배경 추가하기
  4. CSS로 이미지 배경 추가(CSS의 ::before 및 ::after 의사 요소 사용)

귀하의 필요에 가장 적합한 방법을 선택하는 데 필요한 지식을 얻을 수 있도록 각 기술을 살펴보겠습니다.

1. 일반 웹사이트 배경 추가

WordPress에 배경 이미지를 추가하는 가장 쉬운 방법은 다음 경로를 따르는 것입니다.

  1. 관리자에서 모양 > 배경 으로 이동하세요.
WordPress 1단계에서 배경 추가 - 출처: WordPress 관리자
WordPress 1단계에서 배경 추가 – 출처: WordPress 관리자

2. 아래와 같이 이미지 선택 버튼을 클릭합니다.

배경 변경 및 이미지 선택 - 출처: WordPress 관리자
배경 변경 및 이미지 선택 – 출처: WordPress 관리자

3. WordPress 라이브러리에서 이미지를 선택하기만 하면 됩니다.

라이브러리에서 이미지 선택 - 출처: WordPress 관리자
라이브러리에서 이미지 선택 – 출처: WordPress 관리자

4. 완료되었습니다. 사이트에 배경을 추가했습니다.

사이트에 새로운 배경이 추가되었습니다. - 출처: WordPress 관리자
사이트에 새로운 배경이 추가되었습니다 – 출처: WordPress 관리자

2. 블록 또는 요소에 이미지 배경 추가(페이지 빌더 또는 사이트 편집기 사용)

취해야 할 단계는 다음과 같습니다.

  1. 편집하려는 페이지나 게시물로 이동합니다.
  2. 패턴 필드에서 배경을 찾아보세요.
배경 패턴 필드 - 출처: WordPress 관리자
배경 패턴 필드 – 출처: WordPress 관리자

3. 미리 만들어진 배경 패턴을 삽입하고 교체 및 미디어 라이브러리 열기 버튼을 클릭하여 이미지를 추가합니다.

미디어 라이브러리 열기 - 출처: WordPress 관리자
미디어 라이브러리 열기 – 출처: WordPress 관리자

4. 오른쪽 사이드바에서 "블록" 설정을 열어 블록에 컬러 배경을 추가할 수도 있습니다.

블록에 색상 또는 그라데이션 추가 - 출처: WordPress 관리자
블록에 색상이나 그라데이션 추가 – 출처: WordPress 관리자

3. WooCommerce 카테고리에 배경 추가하기

  1. 새 페이지를 만듭니다.
  2. 블록 편집기를 열고 추천 카테고리 표지 이미지를 추가하세요.
wooCommerce 카테고리 페이지에 배경 이미지 추가 - 출처: WordPress 관리자
wooCommerce 카테고리 페이지에 배경 이미지 추가 – 출처: WordPress 관리자

3. 콘텐츠로 텍스트와 이미지를 수정하세요.

페이지 사용자 정의 - 출처: WordPress 관리자
페이지 사용자 정의 – 출처: WordPress 관리자

4. CSS 속성을 사용하여 이미지 배경 추가

background-image 속성을 사용하면 이미지를 요소의 배경으로 설정할 수 있습니다. 기본적으로 이미지는 전체 요소를 포함하도록 반복됩니다.

내 페이지에 배경을 만드는 코드 생성 - 출처: W3Schools
내 페이지에 배경을 만드는 코드 생성 – 출처: W3Schools

페이지에 배경을 추가하는 코드 조각은 다음과 같습니다.

 <!DOCTYPE html> <html> <head> <style> body { background-image: URL("paper.gif"); } </style> </head> </html> </body>
알아두면 좋은 점 : 배경 속성을 사용하면 배경색, 반복, 반복 없음 및 기타 여러 이미지 속성을 추가할 수 있습니다. 배경 이미지 속성을 사용하면 이미지만 추가할 수 있습니다.

5. CSS로 이미지 배경 추가(CSS의 ::before 및 ::after 의사 요소 사용)

CSS의 ::before 및 ::after 의사 요소를 사용하면 HTML "외부" 페이지에 콘텐츠를 삽입할 수 있습니다.

예를 들어 제목 앞에 이미지를 표시하는 방법은 다음과 같습니다.

::앞과 ::뒤 요소 - 출처: W3Schools
::이전 및 ::이후 요소 – 출처: W3Schools

배경 이미지에 이러한 의사 요소를 사용하려면 아래 스니펫에 표시된 것처럼 "content: URL(img.jpg)"로 설정할 수 있습니다.

 ::before{ content:URL(img/image.jpg) ; position:relative; left:-3px; top:8px; }
의사 요소 전후 사용의 장점: 너비와 높이를 설정할 수 있습니다. 배경 크기도 조정할 수 있습니다.

WordPress에서 배경 이미지를 변경하는 방법

WordPress에서 배경 이미지를 변경하는 가장 쉬운 방법은 다음으로 이동하는 것입니다.

  1. 외관 > 관리자의 배경 .
WordPress에서 배경 변경 - 출처: WordPress 관리자
WordPress에서 배경 변경 – 출처: WordPress 관리자

2. 그런 다음 아래와 같이 이미지 변경 버튼을 클릭할 수 있습니다.

WordPress에 새 배경 이미지 추가 - 출처: WordPress 관리자
WordPress에 새 배경 이미지 추가 – 출처: WordPress 관리자

3. WordPress 라이브러리에서 다른 이미지를 선택합니다.

WordPress 라이브러리에서 새 이미지 선택 - 출처: WordPress 관리자
WordPress 라이브러리에서 새 이미지 선택 – 출처: WordPress 관리자

4. 이제 배경이 변경되었습니다.

배경 이미지 변경 - 출처: WordPress 관리자
배경 이미지 변경 – 출처: WordPress 관리자

배경색을 변경하는 방법

관리자에서 모양 > 배경 으로 이동하여 동일한 경로를 따라갈 수 있지만 이번에는 색상 선택 버튼을 클릭합니다.

배경색 변경 - 출처: WordPress 관리자
배경색 변경 – 출처: WordPress 관리자

이제 WordPress 사이트에서 배경 이미지를 쉽게 추가하거나 수정하는 방법을 알았으므로 이 이미지가 최적화되었는지 확인하는 것이 중요합니다. 아름다운 배경은 사이트의 미학을 향상시킬 수 있지만 속도에 영향을 주어서는 안 됩니다. 다음 섹션에서는 최고의 성능을 달성하는 데 도움이 되는 몇 가지 최적화 팁과 사용하기 쉬운 플러그인을 제공합니다.

배경 이미지를 최적화하는 방법

페이지 속도에 영향을 주지 않도록 배경 이미지를 최적화하는 6가지 팁은 다음과 같습니다.

1. 올바른 형식을 선택하세요

불필요한 파일 크기 없이 품질을 유지하려면 적절한 이미지 형식을 선택하는 것이 중요합니다. WebP와 AVIF는 동일한 품질을 달성하면서도 기존 JPEG 또는 PNG 형식에 비해 뛰어난 압축 기능을 제공하므로 탁월한 선택입니다.

Google의 조사에 따르면 WebP는 JPEG에 비해 25%-34%의 추가 압축 이점을 제공하는 것으로 나타났습니다.

WebP 대 JPEG - 출처: Google
WebP 대 JPEG – 출처: Google

WordPress 플러그인을 사용한 솔루션

Imagify 플러그인을 사용하면 모든 이미지를 WebP 또는 AVIF로 쉽게 변환할 수 있습니다. Imagify는 WordPress 관리자가 몇 번의 클릭만으로 배경 이미지를 포함한 모든 이미지를 변환합니다. 할 일도 없고 기술적인 능력도 필요하지 않습니다.

AVIF 및 WebP 변환 - 출처: Imagify
AVIF 및 WebP 변환 – 출처: Imagify

2. 압축 및 크기 조정

배경 이미지를 압축하고 크기를 조정하면 시각적 품질을 유지하면서 파일 크기가 줄어듭니다. Imagify와 같은 플러그인을 사용하면 눈에 띄는 품질 저하 없이 사진을 축소하여 더 빠르게 로드할 수 있으므로 몇 분 만에 전체 사이트 성능을 향상시킬 수 있습니다.

Imagify를 사용한 압축 및 변경되지 않은 품질 - 출처: Imagify
Imagify를 사용한 압축 및 변경되지 않은 품질 - 출처: Imagify

WordPress 플러그인을 사용한 솔루션

다시 한번 말하지만, Imagify는 가장 쉬운 이미지 최적화 프로그램으로 시간을 절약하고 더 밝은 이미지를 만드는 데 필요한 단계를 최소화합니다. 플러그인은 또한 방문자에게 더 작은 이미지를 제공하여 사이트 속도를 높이는 데 도움이 됩니다. 스마트 압축 모드를 사용하여 품질에 영향을 주지 않고 최대로 압축합니다.

3. 반응형 이미지 사용

다양한 장치에 다양한 이미지 크기를 제공하면 최적의 디스플레이와 성능이 보장됩니다.

수동 솔루션

HTML 또는 반응형 CSS 기술의 srcset 속성을 사용하여 데스크톱, 태블릿, 모바일 장치에 맞게 조정된 이미지를 제공함으로써 모든 화면 크기에서 로드 시간과 사용자 경험을 개선합니다.

4. 지연 로딩 구현

지연 로딩은 이미지가 사용자 화면에 나타날 때와 같이 필요할 때까지 이미지 로딩을 연기합니다. 이 최적화 기술은 CSS 배경 이미지 로드를 지연시켜 초기 로드 시간을 줄이고 대역폭을 절약합니다.

지연 로딩 설명 – 출처: Imagify

WordPress 플러그인을 사용한 솔루션

WP Rocket은 WordPress를 위한 가장 강력한 성능 플러그인입니다. 그것은 당신을 위해 모든 무거운 작업을 수행하므로 시간과 노력을 절약할 수 있습니다. 기술 지식에 관계없이 플러그인은 캐싱, 지연 로딩 및 코드 최적화를 통해 성능 문제를 해결하고 웹 사이트 속도를 쉽게 높이는 데 도움이 됩니다.

WP Rocket은 이미지, 비디오 및 CSS 배경 이미지 기능을 지연 로드할 수 있습니다.

LazyLoading CSS 배경 이미지 기능 - 출처: WP Rocket
LazyLoading CSS 배경 이미지 기능 – 출처: WP Rocket

5. LCP 이미지 사전 로드

콘텐츠가 포함된 최대 페인트(LCP) 요소에 사용된 이미지를 미리 로드하면 페이지 로드 속도를 향상시킬 수 있습니다.

수동 솔루션

개념은 간단합니다. HTML <head>에 <link rel=”preload” href=”image.jpg” as=”image”> 태그를 추가하면 중요한 이미지의 우선순위를 지정하고 더 빠르게 로드할 수 있습니다. 콘텐츠가 포함된 최대 페인트를 사전 로드하는 방법에 대한 튜토리얼은 다음과 같습니다.

WordPress 플러그인을 사용한 솔루션

WP Rocket에는 배경 이미지를 포함하여 접힌 부분 위의 이미지를 지연 로딩에서 제외하여 자동으로 최적화하는 “중요 이미지 최적화”라는 기능이 있습니다. 결과적으로 이미지가 더 빠르게 로드됩니다.

기본적으로 활성화되는 이 기능은 두 가지 주요 작업을 수행합니다.

  1. 페이지에서 LCP(Largest Contentful Paint) 이미지를 자동으로 식별하고 fetchpriority=”high” 속성을 사용하여 우선순위로 미리 로드합니다.
  2. 지연 로딩에서 제외: LCP 이미지는 스크롤 없이 볼 수 있는 모든 이미지와 마찬가지로 지연 로딩에서 제외됩니다.

6. 이미지 스프라이트를 사용하지 마세요

여러 이미지를 단일 파일로 결합하는 이미지 스프라이트는 최신 반응형 디자인에 맞게 업데이트되고 더욱 효과적이어야 합니다. 대신, 더 나은 성능과 더 쉬운 유지 관리를 위해 개별 이미지를 최적화하는 데 집중하세요.

배경 이미지를 최적화하는 가장 좋은 방법 중 하나는 Imagify 또는 WP Rocket과 같은 플러그인을 사용하는 것입니다. 이러한 도구는 이미지 최적화의 모든 기술적 측면을 처리하므로 성능 문제에 대한 걱정 없이 비즈니스에 집중할 수 있습니다.

배경 이미지를 최적화하는 최고의 플러그인 - 출처: Imagify
배경 이미지를 최적화하는 최고의 플러그인 – 출처: Imagify

마무리

이제 배경 이미지를 배치할 위치와 추가 또는 수정 방법을 포함하여 WordPress 사이트에서 배경 이미지를 효과적으로 사용하기 위한 팁이 제공됩니다. 가장 중요한 부분은 WP Rocket 및 Imagify와 같은 플러그인을 사용하여 사이트가 빠르고 사용자 친화적으로 유지되도록 이러한 이미지를 최적화하는 방법도 알고 있다는 것입니다.

같은 팀이 두 플러그인을 모두 개발합니다. 사용하기 쉽고 모든 기술적 측면을 처리합니다. 이미지 최적화를 위한 최고의 콤보입니다.

WP Rocket은 CSS 배경을 포함하여 이미지에 캐싱, 사전 로드 및 지연 로딩 추가를 위한 최고의 동맹입니다.

Imagify는 이미지를 WebP 및 AVIF 형식으로 변환하고 품질에 영향을 주지 않고 압축합니다. 가장 좋은 점은 Imagify를 무료로 사용해 볼 수 있기 때문에 위험을 감수할 필요가 없다는 것입니다!