워드프레스 추천 이미지 크기 조정 방법 및 중요성
워드프레스는 수년간 가장 널리 사용되는 콘텐츠 관리 시스템으로 자리매김해 왔습니다. 시장 점유율은 64.2%에 달하며, 이는 다른 CMS를 모두 합친 것보다 더 많은 수치입니다. 워드프레스의 가장 큰 매력 중 하나는 코딩 지식이 없는 사용자도 몇 번의 클릭만으로 웹사이트를 쉽게 구축하고 운영할 수 있다는 점입니다.
워드프레스는 사용자 맞춤 설정이 가능한 수많은 테마를 제공하는 디렉토리를 갖추고 있습니다. 또한, 웹사이트 소유자가 사이트 기능을 확장하는 데 활용할 수 있는 다양한 플러그인도 제공합니다.
페이지 및 게시물의 대표 이미지는 워드프레스 웹사이트를 독특하고 매력적이며 시각적으로 돋보이게 만드는 중요한 요소 중 하나입니다.
하지만, 이러한 대표 이미지의 크기가 적절한지도 반드시 확인해야 합니다. 이미지가 너무 작으면 사용자에게 제대로 보이지 않으며, 반대로 너무 크면 스마트폰이나 태블릿과 같은 작은 화면에 제대로 표시되지 않을 수 있습니다. 이 글에서는 워드프레스에서 대표 이미지의 크기를 조정하는 방법과 그 중요성에 대해 자세히 알아보겠습니다.
대표 이미지란 무엇인가?
대표 이미지(Featured Image)는 페이지나 게시물을 시각적으로 표현하는 이미지입니다. 일반적으로 제목 앞에 나타나며, 때로는 헤더 이미지라고도 불립니다. 워드프레스 사이트의 게시물 상단에 주로 표시됩니다.
또한, 소셜 미디어 플랫폼과 같은 제3자 사이트에 게시물/페이지를 공유할 때도 대표 이미지가 함께 나타납니다.
대표 이미지가 어떻게 활용되는지 이해를 돕기 위해 koreantech.org.com에서 “워드프레스”를 검색어로 사용해 보았습니다. 해당 웹사이트의 모든 워드프레스 관련 게시글 목록을 얻을 수 있습니다. 아래 스크린샷에서, 각 게시글의 제목 바로 앞에 대표 이미지가 표시되는 것을 확인할 수 있습니다.
하지만, 게시글을 열어보면 대표 이미지는 제목 바로 뒤, 소개 글 바로 앞에 나타납니다.
대표 이미지가 중요한 이유
대표 이미지의 모양은 사용하는 테마나 사용자 정의 설정에 따라 달라질 수 있습니다. 그렇다면, 게시물/페이지에서 대표 이미지가 중요한 이유는 무엇일까요? 대표 이미지 없이도 게시물을 작성할 수 있을까요? 대표 이미지가 필요한 주된 이유는 다음과 같습니다.
- 시각적 매력 향상: 대표 이미지는 콘텐츠를 더욱 매력적으로 만들고, 사용자들의 관심을 끌기 위한 중요한 요소입니다. 적절한 이미지를 선택하면 사용자에게 좋은 첫인상을 심어주고, 콘텐츠와의 상호 작용을 유도할 수 있습니다.
- 소셜 미디어 공유 용이성: 온라인 환경에서는 다양한 플랫폼 간의 콘텐츠 공유가 중요합니다. 소셜 미디어에 게시글이나 페이지를 공유할 때 대표 이미지가 함께 표시되어 사용자들의 관심을 끌고, 클릭을 유도하는 효과를 발휘합니다.
- 콘텐츠 구조화: 잘 구성된 웹사이트는 체계적인 구조를 가져야 합니다. 이미지와 같은 시각 자료는 콘텐츠를 여러 부분으로 나누어 가독성을 높이는 데 도움을 줍니다. 긴 형식의 기사에서 대표 이미지를 다른 유형의 이미지와 함께 활용하면 더욱 효과적입니다.
- 썸네일 생성: 썸네일은 게시글의 내용을 간략하게 보여주는 시각적 표현입니다. 대표 이미지는 게시물 아카이브 및 목록에서 썸네일로 활용되어, 사용자에게 게시글의 내용을 미리 보여주는 역할을 합니다.
- SEO 이점: 검색 엔진은 웹사이트 순위를 매길 때 다양한 요소를 고려합니다. 대표 이미지의 대체 텍스트에 주요 키워드를 추가하여 검색 엔진 최적화(SEO) 효과를 높일 수 있습니다.
워드프레스의 대표 이미지 기본 크기와 변경 이유
카메라로 촬영한 원본 이미지나 다운로드한 스톡 사진은 대표 이미지에 최적화되지 않았거나 적절한 크기가 아닐 수 있습니다. 대부분의 경우 워드프레스는 원본 이미지의 크기를 대표 이미지의 기본 크기로 사용합니다.
그러나 이는 다양한 사용 사례에 적합하지 않을 수 있으므로, 대표 이미지를 1200 x 628 픽셀에 가깝게 설정하는 것이 좋습니다.
대표 이미지의 크기를 변경해야 하는 몇 가지 주요 이유는 다음과 같습니다.
- 웹 페이지 로딩 속도 최적화: 웹사이트의 콘텐츠와 이미지 품질은 로딩 속도에 직접적인 영향을 미칩니다. 이미지 크기를 최적화하면 서버 부하를 줄여 로딩 속도 저하를 방지할 수 있습니다.
- SEO 효과 향상: 검색 엔진은 웹사이트 순위를 결정할 때 로딩 속도와 사용자 경험과 같은 요소를 고려합니다. 대표 이미지 크기를 조정하면 페이지 로딩 속도를 높이고, 이미지를 다양한 화면 크기에 최적화하여 반응형으로 표시할 수 있습니다.
- 시각적 매력 극대화: 이미지 최적화는 웹사이트의 첫인상을 결정짓는 중요한 요소입니다. 대표 이미지는 사용자와 가장 먼저 상호 작용하는 이미지이므로, 항상 최적화된 상태로 유지해야 합니다.
일부 테마에서는 기본적으로 단일 게시물에 대표 이미지 설정을 지원하지 않을 수 있습니다. 그러나 대표 이미지가 제공하는 다양한 이점을 포기할 수는 없습니다. 다행히도 수동 조정을 통해 워드프레스의 단일 게시물에서도 대표 이미지를 계속 표시할 수 있습니다.
워드프레스 대표 이미지 크기 조정 방법
웹사이트의 모양은 사용하는 테마에 따라 달라집니다. 대표 이미지 크기를 조정할 때 편집기 선택도 중요한 요소입니다. 이 예시에서는 Newspaper ex 테마와 워드프레스 Classic 편집기를 사용하는 웹사이트를 활용하겠습니다. 또한, Pixabay에서 1280*853 픽셀 크기의 이미지를 다운로드하여 사용할 것입니다.
다음 단계를 따라 진행하세요:
- 새 게시물 추가: 워드프레스 사이트에 로그인한 상태에서 상단 메뉴의 ‘+새로 만들기’를 클릭하고 ‘게시글’을 선택합니다.
- 대표 이미지 설정: 작성 중인 게시글을 편집합니다. 제목이나 내용을 추가하는 등의 다른 작업은 건너뛰고, 하단으로 스크롤하여 ‘특성 이미지 설정’을 클릭합니다.
- 이미지 크기 조정: 대표 이미지를 업로드하면 워드프레스는 자동으로 이미지 크기를 1280*853 픽셀로 설정합니다. 하지만 이번에는 이미지를 1200 * 628 픽셀로 설정하고자 합니다. ‘이미지 편집’을 클릭합니다.
이미지를 이미 다운로드해 둔 상태이므로, ‘파일 업로드’ 아이콘을 클릭합니다.
그런 다음 ‘크기 조정’을 클릭합니다.
이제 이미지 크기를 1200 * 628 픽셀로 조정할 수 있습니다.
변경 사항을 저장하고 게시물을 게시합니다.
대표 이미지 크기를 조정하는 다른 방법
워드프레스 내에서 이미지 크기를 편집하는 것 외에도, 대표 이미지 크기를 조정하는 데 사용할 수 있는 다른 다양한 접근 방식이 있습니다. 다음은 몇 가지 다른 방법입니다.
#1. 온라인 도구 활용
온라인 도구를 사용하여 이미지 크기를 조정한 다음, ‘게시 준비 완료’된 대표 이미지를 워드프레스에 업로드할 수 있습니다. 대표 이미지를 설정하기 위해 어도비 익스프레스와 같은 온라인 도구를 사용하여 이미지를 1200 * 628 픽셀로 설정할 수 있습니다. 이미지를 다운로드한 후 추가 수정 없이 워드프레스에 업로드하면 됩니다.
도구 선택은 사용 편의성에 따라 달라질 수 있습니다. 이러한 도구 중 일부는 이미지 압축 기능을 제공하여 로딩 시간을 단축하는 데에도 도움이 됩니다.
#2. CSS 활용
대부분의 워드프레스 웹사이트 사용자는 CSS를 사용하여 웹사이트 스타일을 지정하는 데 익숙하지 않습니다. 하지만 CSS에 대한 기본적인 지식이 있다면, 큰 어려움 없이 대표 이미지의 크기를 조정할 수 있습니다. 이를 위해서는 styles.css 파일에 사용자 정의 CSS 코드를 추가해야 합니다.
가장 먼저 해야 할 일은 대표 이미지를 포함하는 클래스를 식별하는 것입니다. 그런 다음 해당 클래스 내의 대표 이미지 크기를 수정할 수 있습니다. 예를 들어, ‘high-flyers’라는 클래스에 사용자 정의 CSS 코드를 추가하고 싶다면 다음과 같이 작성할 수 있습니다.
high-flyers img {
width: 100%; /* 컨테이너 전체를 채우도록 이미지 설정 */
height: auto; /* 이미지 비율 유지 */
max-width: 1200px; /* 이미지 최대 너비를 1200 픽셀로 제한 */
max-height: 628px; /* 이미지 최대 높이를 628 픽셀로 제한 */
}
#3. PHP 활용
워드프레스는 개발자와 비개발자 모두를 만족시키도록 설계되었습니다. PHP 개발 경험이 있다면 PHP 코드를 수정하여 대표 이미지의 크기를 조정할 수 있습니다. PHP 파일을 편집할 때 하위 테마를 사용하면, 상위 테마 업데이트 시 변경 사항이 손실되는 것을 방지할 수 있습니다.
이 방법을 사용하려면 워드프레스 폴더 및 파일 구조에 대한 기본적인 이해가 필요합니다. 하위 테마의 function.php 파일을 찾아서 다음 코드를 추가하세요.
<?php
set_post_thumbnail_size( 1200, 628, true ); // 크기를 1200x628 픽셀로 설정하고 자르기 활성화
?>
그러나 PHP 코드 편집 시에는 작은 실수로 인해 웹사이트 전체가 다운될 수 있으므로 주의해야 합니다.
워드프레스 이미지 크기 변경 방법
대표 이미지 외에도 게시물/페이지에 다양한 크기의 이미지가 포함될 수 있습니다. 테마에 따라 기본적으로 설정된 이미지 크기가 다를 수 있습니다. 워드프레스 대시보드에서 웹사이트에 이미지가 표시되는 방식을 설정할 수 있습니다.
워드프레스 대시보드에서 ‘설정’으로 이동하여 ‘미디어’를 클릭합니다.
여기서 썸네일, 중간 크기 및 큰 이미지의 최대 너비와 최대 높이와 같은 다양한 설정을 변경할 수 있습니다. 변경 후 ‘저장’을 클릭합니다.
결론
게시물과 페이지에 대표 이미지를 포함하는 것의 중요성은 아무리 강조해도 지나치지 않습니다. 이 글을 통해 대표 이미지 크기를 조정하는 방법과 그 중요성에 대해 충분히 이해하셨기를 바랍니다.
어떤 방법을 선택할지는 사용자의 기술 수준과 선호도에 따라 달라집니다. 이미지의 모양과 메타 데이터는 사용자에게 웹사이트의 신뢰도를 보여주는 중요한 신호가 될 수 있으므로, 항상 적절한 이미지를 선택하고 최적화하는 데 주의를 기울여야 합니다.
또한, 이미지 생성 도구를 활용하여 더욱 멋진 이미지를 제작해 볼 수도 있습니다.