슬라이더 이미지를 선택, 수정 및 개선하는 방법에 대한 7가지 디자인 팁

지난 7년 동안 슬라이더(원하는 경우 캐러셀)는 거의 모든 웹사이트에 있습니다. 일반적인 관행입니다. 우리 모두에게 익숙한 것입니다. 방문자가 웹사이트에서 가장 먼저 보게 되는 것입니다. 성패를 가르는 순간입니다. 슬라이더 이미지는 첫인상이 좋아야 합니다. 그렇지 않으면 방문자를 영원히 잃게 됩니다.

고객이 WordPress 테마로 만든 웹 사이트를 볼 때 종종 제대로 준비되지 않은 슬라이더 이미지를 봅니다. 대부분의 경우 사진은 너무 크거나 너무 작습니다. 슬라이더의 텍스트가 충분히 보이지 않고 이미지가 최적화되지 않아 페이지 자체가 매우 느리게 로드됩니다.

카피는 좋지만 슬라이더 이미지가 엉성한 전반적으로 좋은 웹사이트를 보면 마음이 조금 아픕니다. 나는 몇 가지 간단한 트릭을 공유하여 이 광기를 멈추기로 결정했습니다.

1. 올바른 사진을 선택하십시오

무엇보다 먼저. 올바른 사진을 선택하십시오. 설명이 충분하고 여백이 충분한 이미지를 선택하십시오. 슬라이더의 텍스트가 나타나는 위치를 살펴보고 해당 영역에서 시각적 노이즈가 가능한 한 적은 이미지를 선택합니다.

2. 고해상도 사진은 필수

테마 제작자가 권장하는 해상도를 사용하세요. 지난 4년 동안 나는 작은 해상도의 사진이 화면 전체에 펼쳐져 있는 수많은 웹사이트를 보았습니다. 1920px 너비의 이미지를 선택하면 놓칠 수 없습니다. 슬라이더의 픽셀화된 사진보다 방문자를 낙담시키는 것은 없습니다. 무료 고품질 사진의 훌륭한 리소스는 Unsplash입니다. 예산이 있다면 Shutterstock에서 프리미엄 사진을 구입하는 것이 좋습니다. 투자가 결실을 맺게 될 것입니다.

3. 사진을 어둡게 또는 밝게

슬라이더의 텍스트를 더 잘 보이게 하는 좋은 방법은 사진을 어둡게(또는 밝게)하는 것입니다. 이것은 Photoshop 또는 다른 사진 편집 프로그램에서 수행할 수 있습니다. 이 튜토리얼에서는 Canva라는 무료 디자인 앱을 사용하겠습니다. Canva에 가입한 후 왼쪽 상단에 있는 "디자인 만들기"를 클릭하세요. 그런 다음 오른쪽 상단에서 "사용자 정의 치수 사용"을 클릭하고 테마 개발자가 권장하는 치수를 입력합니다. 권장 해상도가 없으면 WordPress 테마의 데모 사이트로 이동하여 사진을 검사합니다(또는 WordPress 테마 공급자를 당사로 변경).
"디자인!"을 클릭하십시오. 왼쪽 메뉴에서 "업로드"로 이동합니다. 슬라이더 이미지를 업로드하고 보드에 끌어다 놓습니다. 상단 메뉴에서 "필터"를 클릭하고 "밝기" 및 "대비"를 10-20%로 줄입니다. 슬라이더의 텍스트 색상이 흰색인 경우 대비를 개선하기 위해 사진을 약간 더 어둡게 만들고 싶습니다. 슬라이더에 검은색 텍스트가 있는 경우 반대 작업을 수행하고 싶습니다.

한 걸음 더 나아갑니다. "색조"(색조) 캐러셀을 왼쪽이나 오른쪽으로 약간 움직여 브랜드 색상으로 사진을 색칠합니다.

4. 반투명 컬러 오버레이

때로는 텍스트에 충분한 여백이 있는 사진을 찾을 수 없거나 고객이 텍스트가 충분히 표시되지 않는 채도가 높은 이미지를 사용하기를 원합니다. 그런 상황에서 할 수 있는 가장 간단한 작업은 반투명 색상 오버레이를 만드는 것입니다.

그렇게 하려면 Canva 앱 > 요소 > 도형으로 이동하여 첫 번째 흰색 또는 두 번째 어두운 직사각형을 보드(무료라고 표시됨)로 끌어다 놓습니다. 가장자리에서 가장자리로 사각형의 크기를 조정하고 왼쪽 상단 모서리의 검정색으로 색상을 지정합니다. 그런 다음 오른쪽 상단 모서리에서 사각형의 투명도를 ~50%로 설정합니다. 필요한 대비의 양에 따라 다릅니다.

5. 사진에 내면의 빛을 더하세요

슬라이더 사진을 더 흥미롭게 만드는 또 다른 훌륭한 트릭은 검은색 반투명 ​​내부 광선을 추가하는 것입니다. 이 방법을 사용하면 사이트가 더욱 전문적으로 보입니다. 화면 중앙에 초점을 맞춥니다. Canva 앱에서 이 효과는 "비네트"라고 하며 최상위 메뉴 "필터" > "고급 옵션"에서 찾을 수 있습니다. 슬라이더 사진이 만족스러우면 오른쪽 상단 모서리에 있는 "다운로드" 버튼을 클릭하여 저장할 수 있습니다.

6. 올바른 파일 형식 선택

편집한 슬라이더 이미지를 저장할 때 파일 크기 때문에 올바른 파일 형식을 선택하는 것이 중요합니다. 걱정하지 마십시오. 규칙은 간단합니다. 슬라이더 이미지가 실제 사진인 경우 .jpg로 저장합니다. 사진 이외의 것(예: 패턴, 아이콘, 낙서)인 경우 .png로 저장합니다. 이것은 슬라이더 이미지를 가능한 한 가볍고 최적화하기를 원하기 때문에 중요합니다.

7. 페이지 속도가 매우 중요합니다.

Google과 방문자 모두를 위한 것입니다. 슬라이더 이미지는 웹사이트에서 가장 큰 이미지(파일일 수도 있음)이므로 최적화하는 것이 중요합니다. 이미지 크기를 줄이는 훌륭한 도구는 TinyPNG입니다. 간단한 드래그 앤 드롭 인터페이스를 통해 품질을 잃지 않고 이미지 크기를 줄일 수 있습니다. 이미지 최적화 및 페이지 속도 최적화에 대한 궁극의 가이드를 참조하십시오.

보너스 팁: 슬라이더 이미지의 권장 크기를 사용하세요.

WordPress 테마를 개발할 때 슬라이더 사진의 올바른 크기와 비율을 선택하는 데 추가 노력을 기울입니다. 사진 자체는 모든 화면 크기에서 잘 작동해야 합니다. 사용자가 권장하는 크기와 다른 크기를 사용하는 경우를 많이 봅니다. 대부분의 경우 슬라이더의 사진은 수직 공간을 너무 많이 차지합니다.

이것은 슬라이더 자체의 기능에 대한 문제는 아니지만 방문자가 콘텐츠를 보기 위해 많이 스크롤해야 하는 경우 사용자 경험에 아무런 도움이 되지 않습니다.

여전히 권장되는 것보다 더 큰 이미지를 사용하고 싶다면 최소한 접기 규칙보다 오래된 것을 염두에 두십시오.

슬라이더는 방문자가 웹사이트에서 가장 먼저 보게 되는 것입니다. 위의 몇 가지 트릭을 구현하여 사용자 경험을 개선하세요. 시간이 많이 걸리지는 않지만 귀하와 귀하의 클라이언트 및 클라이언트의 방문자의 행복을 향상시킬 것입니다.

이제 슬라이더 이미지를 개선하는 방법에 대한 아이디어를 얻었으므로 슬라이더 사용의 장단점에 대해 논의해 보겠습니다. 슬라이더가 웹사이트에 도움이 될 수 있는 것보다 더 큰 피해를 줄 수 있다는 연구 결과가 많이 있습니다. Yoast SEO 플러그인의 작성자조차도 슬라이더를 사이트에서 금지해야 한다고 말합니다. 따라서 슬라이더의 장점과 단점은 물론 슬라이더가 적절한 경우와 피하는 것이 가장 좋은 경우에 대해 논의할 가치가 있습니다.

웹사이트에서 슬라이더 사용의 단점

먼저 슬라이더의 가장 중요한 단점을 살펴보겠습니다.

극소수의 슬라이더 플러그인이 진정으로 모바일에 반응합니다.

슬라이더를 사용하여 휴대폰에서 보려고 하는 웹사이트를 본 적이 있습니까? 휴대폰이 점점 커지고 있는 것은 사실이지만 대부분의 슬라이더는 더 작은 화면 크기에 맞게 크기가 조정됩니다.

이로 인해 이미지와 텍스트가 너무 작아서 더 작은 화면에서 읽고 볼 수 없습니다. 결국 휴대폰에서는 아름다운 슬라이더가 무시될 가능성이 높으므로 슬라이드쇼에 추가할 콘텐츠에 대해 다시 한 번 생각하십시오.

Soliloquy와 같은 반응형 슬라이더 플러그인을 사용할 만큼 운이 좋다면 슬라이더를 사용자 정의하여 모든 장치에서 잘 보이도록 시간을 할애할 준비를 하십시오. 그 동안 슬라이더를 테스트하고 다양한 화면 크기와 장치에서 어떻게 보이는지 확인하십시오.

대부분의 방문자는 처음 두 슬라이드를 지나치지 않습니다.

주의 집중 시간이 점점 짧아지고 있다는 점을 고려하면 대부분의 방문자가 처음 몇 개의 슬라이드를 지나치지 않을 것이라고 가정하는 것이 안전합니다.

방문자가 귀하의 사이트에 방문하면 귀하가 하는 일과 귀하가 그들을 도울 수 있는 방법을 즉시 알고 싶어합니다. 슬라이드가 이러한 질문에 답하지 않으면 계속 진행할 가능성이 있습니다.

슬라이더 컨트롤을 쉽게 놓칠 수 있음

슬라이더 컨트롤은 일반적으로 실제 슬라이드 내용을 손상시키지 않도록 디자인되고 스타일이 지정된 눈에 잘 띄지 않는 아이콘입니다. 따라서 슬라이더를 탐색하는 데 사용되는 화살표를 쉽게 놓칠 수 있습니다.

이 문제는 모바일 방문자가 슬라이드 사이를 왔다 갔다 하거나 웹사이트의 다른 부분으로 이동하는 버튼을 클릭하는 데 어려움을 겪을 수 있음을 의미하는 작은 화면에서 더욱 분명합니다.

슬라이더로 인해 사이트 속도가 느려질 수 있습니다.

일반적으로 슬라이더와 웹용으로 이미지를 최적화하는 데 주의를 기울이지 않으면 슬라이더로 인해 사이트 속도가 느려질 수 있습니다. 게다가 슬라이더는 리소스를 많이 사용하는 JavaScript 파일을 자주 사용합니다.

이러한 각 JavaScript 파일은 브라우저가 웹 사이트가 있는 호스팅 서버에 대해 수행해야 하는 또 다른 요청입니다. 브라우저가 이러한 요청을 하는 동안 방문자는 필요한 JavaScript 파일(슬라이더 및 사이트의 스타일 파일도 포함)이 로드될 때까지 브라우저가 계속 진행할 수 없기 때문에 웹사이트가 로드되기를 기다리고 있습니다.

결과적으로 방문자는 좌절감을 느끼고 훨씬 더 빠르게 로드되고 사이트를 방문했던 것과 동일한 솔루션을 제공하는 다른 웹사이트로 떠날 수 있습니다.

웹사이트 로딩 시간에 대한 영향 때문에 슬라이더가 SEO에 부정적인 영향을 미칠 수 있다는 점도 언급할 가치가 있습니다.

사람의 눈은 움직임에 반응합니다

마지막으로, 우리의 눈은 자연스럽게 움직임에 끌린다는 점을 명심하십시오. 웹사이트 전체에서 슬라이더를 사용하면 사용자의 주의를 산만하게 하고 사이트의 나머지 콘텐츠에 주의를 기울이지 않게 할 수 있습니다.

슬라이드가 변경될 때마다 방문자가 다른 항목에 집중하기 위해 해당 예약 버튼을 클릭할 위험이 있습니다. 이로 인해 전환 손실이 발생하여 전체 매출과 이익이 감소할 수 있습니다.

명심해야 할 또 다른 사항은 슬라이더를 사용하는 경우 방문자의 사용자 경험을 빠르게 악화시킬 수 있으므로 자동 슬라이드 옵션을 사용하지 마십시오. 누군가가 슬라이드의 텍스트를 읽기 시작했는데 읽기를 마치기 전에 이미지가 바뀌었다고 상상해 보십시오. 이로 인해 사용자는 좌절감을 느끼고 사이트를 떠날 수 있습니다.

웹사이트에서 슬라이더 사용의 장점

이제 슬라이더 사용의 단점을 다루었으므로 슬라이더 사용을 고려해야 하는 이유를 살펴보겠습니다.

더 적은 공간에서 더 많은 콘텐츠를 선보일 수 있습니다.

슬라이더는 특성 때문에 긴 페이지를 만들지 않고도 스크롤 없이 볼 수 있는 부분이나 사이트의 다른 곳에서 더 많은 콘텐츠를 쉽게 표시할 수 있습니다. 원하는 만큼 슬라이드를 사용하여 슬라이드를 통해 원하는 메시지를 공유하고 시각적으로 매력적으로 표현할 수 있습니다.

이렇게 하면 단일 제품이나 서비스에 대한 시각적 스토리를 전달하기 위해 모든 공간을 사용하는 대신 가장 중요한 요소에 집중하여 홈페이지를 짧고 멋지게 유지할 수 있습니다.

슬라이더를 사용하면 Photoshop을 사용하지 않고도 이미지에 텍스트를 쉽게 추가할 수 있습니다.

대부분의 슬라이더 플러그인을 사용하면 Photoshop이나 다른 이미지 편집 프로그램을 사용하지 않고도 이미지를 업로드하고 텍스트를 추가할 수 있습니다. 일부 슬라이더를 사용하면 버튼과 클릭 유도문안 또는 웹사이트의 다른 부분에 대한 링크를 추가할 수도 있습니다.

슬라이더의 관리 인터페이스 덕분에 포스트 편집기나 Word에서 볼 수 있는 것과 유사한 도구를 사용하여 텍스트를 쉽게 작성하고 서식을 지정할 수 있습니다. 사용자 정의 색상 또는 글꼴을 추가하고 전환 유형 및 지속 시간 등을 조정하여 슬라이드 디자인을 사용자 정의할 수도 있습니다.

슬라이더는 사용자가 웹 사이트와 상호 작용하도록 합니다.

조잡하게 들릴 수 있지만 슬라이더를 사용하면 사용자가 웹사이트와 상호 작용하지 않을 수 있습니다. 다음 슬라이드가 나타날 때까지 기다리지 않으려면 화살표를 클릭하여 모든 슬라이드를 앞뒤로 이동할 수 있습니다.

다른 페이지로 이동하는 링크나 버튼을 포함했다면 해당 버튼을 클릭하고 웹사이트에서 제공해야 하는 다른 모든 항목을 탐색할 수 있습니다. 즉, 슬라이드는 사용자에게 더 많은 참여를 제공하므로 방문자가 사이트를 처음 방문할 때부터 사이트와 상호 작용하기를 원한다면 슬라이더가 답이 될 수 있습니다.

슬라이더는 작업을 공유하는 좋은 방법입니다

디자이너, 일러스트레이터, 사진가 또는 ​​아티스트라면 슬라이더를 사용하면 포트폴리오가 전체 페이지를 차지하지 않고도 작업을 선보일 수 있습니다. 최고의 작품을 슬라이드쇼로 만들어 홈페이지나 포트폴리오 페이지에 슬라이드로 공유할 수 있습니다.

슬라이더는 가장 인기 있는 제품, 신제품 또는 특정 카테고리를 선보이는 데 사용할 수 있으므로 제품을 판매하는 경우에도 유용합니다.

평결: 슬라이더를 사용해야 합니까?

찬반 양론을 막론하고 결정을 내릴 때입니다. 웹사이트에서 슬라이더를 사용해야 합니까? 그 질문에 대한 대답은 두 단어로 요약할 수 있습니다.

슬라이더를 사용하는 것이 좋은 선택은 언제입니까?

장단점을 제외하고 슬라이더를 사용하는 것이 좋은 생각이고 확실한 선택인 몇 가지 좋은 시나리오가 여전히 있습니다.

• 작품이나 갤러리를 선보이고 싶을 때 슬라이더를 사용하세요. 앞서 언급했듯이 슬라이더는 사진 갤러리 또는 포트폴리오 항목을 표시하는 데 적합합니다. 귀하의 웹사이트가 해당 카테고리에 속한다면 반드시 슬라이더를 사용하는 것이 방문자를 압도하지 않고 작업을 선보일 수 있는 좋은 방법입니다.
• 슬라이더를 사용하여 제품을 선보입니다. 비슷한 참고로, 새로운 제품이나 서비스를 출시하는 경우; 슬라이더는 작동 중인 제품을 시연하거나 제품의 이점과 기능을 강조하는 좋은 방법이 될 수 있습니다.
• 슬라이더를 사용하여 일관된 이야기를 공유하세요. 이것은 브랜드와 회사의 이야기일 수도 있고 팀원과 그들의 전문 지식을 강조할 수도 있습니다. 슬라이더에서 공유하기로 결정한 이야기의 종류에 관계없이 이야기가 의미가 있는지 확인하십시오. 그렇지 않으면 방문자가 이해되지 않는 관련 없는 슬라이드를 보게 될 것입니다. 동시에 각 슬라이드가 다음 슬라이드에 대한 기대감을 높이고 방문자의 흥미를 유발하여 마지막 슬라이드까지 계속 머물도록 하십시오.

슬라이더를 사용하면 안 되는 경우는?

귀하의 웹사이트가 위의 범주 중 하나에 속하지 않거나 슬라이더를 사용하여 웹사이트에 추가하지 않는 경우 슬라이더를 피해야 합니다. 다음은 슬라이더를 사용하는 것이 좋은 생각이 아닌 몇 가지 시나리오입니다.

• 힙이 있기 때문에 슬라이드만 사용하는 경우입니다. 다른 사람들이 다 하고 있다고 해서 당신도 그렇게 해야 하는 것은 아닙니다. 슬라이더를 사용하여 사이트에 가치 있는 것을 추가하지 않을 위험이 있을 뿐만 아니라 경쟁업체와 섞여서 동일하게 보일 위험도 있습니다.
• 웹 사이트가 이미 느린 경우 슬라이더를 사용하지 마십시오. 위에서 말했듯이 슬라이더는 리소스를 상당히 많이 사용하므로 마지막으로 해야 할 일은 사이트 로드 속도를 더 느리게 만드는 것입니다. 먼저 사이트 속도를 수정한 다음 슬라이더를 추가하는 것이 좋습니다.
• 슬라이더에 무엇을 넣어야 할지 모르겠다면 슬라이더를 추가하지 마십시오. 슬라이더는 뒤에 스토리가 있을 때 가장 잘 작동합니다. 스토리가 없으면 사이트에 가치를 추가하지 않고 방문자를 혼란스럽게 할 수 있는 이미지가 엉망이 됩니다.
• 더 간단한 방법으로 콘텐츠를 공유할 수 있다면 그렇게 하세요. 최신 디자인 트렌드를 위해 사이트 디자인을 지나치게 복잡하게 만들거나 속도를 희생하는 것은 의미가 없습니다. 더 간단한 솔루션은 일반적으로 로드 속도는 말할 것도 없고 사이트 업데이트 및 유지 관리가 더 쉽다는 것을 의미합니다. 따라서 더 간단한 솔루션을 선호하는 슬라이더를 사용하는 것이 훨씬 더 나은 선택입니다.

결론

이제 슬라이더 사용의 장단점을 알았으므로 슬라이더를 사용하는 것이 웹사이트에 좋은 선택인지 정보에 입각한 결정을 내릴 수 있습니다. 슬라이더 이미지 최적화에 대한 팁을 사용하면 사용자 경험을 해치지 않고 대신 더 많은 전환을 얻는 데 도움이 되는 매력적인 슬라이드를 만드는 데 도움이 될 것입니다.