WordPress 사이트를 모바일 반응형으로 만드는 방법

반응형 웹 사이트는 주로 모바일 장치에서 탐색하는 많은 사용자로 인해 이제 업계 표준이 되었습니다. 이러한 영향이 얼마나 깊은지 설명하기 위해 Google과 같은 업계 거대 기업은 이제 검색 순위에서 모바일 친화적인 사이트에 보상을 제공하여 더 많은 사이트가 비데스크탑 장치에 적합하도록 밀어붙일 수 있도록 합니다.

요컨대, 반응형 웹 사이트는 모든 플랫폼에서 동일한 사이트 코드를 사용하지만 시청 매체에 관계없이 각 경험에 대한 최적화를 제공합니다. 결과적으로 반응형 사이트를 설정한다는 것은 전체 디자인을 재구축하거나 단순히 기존 디자인을 약간 수정하는 것을 의미할 수 있습니다.

이 기사에서는 반응형 디자인을 사용하여 WordPress 사이트를 모바일 친화적으로 만드는 방법을 배웁니다. 또한 검색 엔진 최적화(SEO)에 대한 응답성의 중요성에 대해서도 설명합니다. 크랙하자!

WordPress는 모바일 친화적입니까?

WordPress는 정확한 요구 사항을 충족하도록 사이트의 프런트 엔드를 디자인할 수 있는 콘텐츠 관리 시스템(CMS)입니다. 이는 쉽게 모바일 친화적으로 만들 수 있음을 의미합니다.

반응형 기본 테마는 2011년부터 사용할 수 있습니다. 이제 많은 타사 테마가 기본 반응형 디자인도 제공합니다. 그렇지 않은 것들은 종종 다른 많은 영역에서 구식입니다.

반응형 디자인이란?

반응형 디자인이 WordPress 사이트에 어떻게 적용되는지 살펴보겠습니다. 반응형 디자인은 웹 사이트의 콘텐츠를 구성하여 표시되는 화면 크기에 동적으로 반응할 수 있도록 하는 방법입니다. 이것은 사용자 경험이 노트북에서와 마찬가지로 스마트폰에서도 우수하다는 것을 의미합니다.

여러 장치에서 이러한 우수한 경험을 달성하기 위해 디자이너는 화면의 크기와 해상도에 직접 반응하여 HTML을 재정렬하기 위해 사이트의 CSS를 통해 이미지에 유연한 콘텐츠 그리드와 코드 유연성을 생성합니다.

좋은 예를 보려면 새 창에서 Mashable.com을 여세요(아직 모바일 장치를 사용하지 않는다고 가정). 거기에 도착하면 브라우저 창의 크기를 점점 더 작게 조정하고 그에 따라 웹 사이트가 어떻게 재정렬되는지 확인하십시오.

창을 축소하면 그림과 콘텐츠 블록이 디자이너가 만든 유동 격자에 따라 점점 더 작아지는 창에 맞게 경쟁합니다. 가장 작게는 iPhone에서 Mashable의 사이트가 어떻게 보이는지 남습니다. 아름답고 읽기 쉽습니다. 창을 다시 활성화하면 "데스크톱" 구성으로 되돌아가 응답합니다.

사이트를 보고 있는 장치(이 경우 브라우저 창)의 크기에 따라 페이지에 다른 규칙을 적용하는 CSS 미디어 쿼리가 있기 때문에 사이트가 자체적으로 재정렬됩니다. HTML은 동일하게 유지되며 단순히 CSS에 의해 재정렬됩니다. CSS 규칙을 적용하여 장치의 해상도에 따라 다양한 이미지 크기를 제공하는 것을 포함하여 사이트의 모든 것을 재정렬할 수 있습니다. 특히 iOS 장치에 망막 강화 이미지를 제공하는 것과 같은 작업을 수행하려는 경우 정말 좋습니다.

모바일 앱 대 반응형 사이트

앱과 반응형 사이트를 선택하는 것은 사이트 목적으로 귀결됩니다. 대부분의 웹사이트는 장치에 적응할 수 있는 반응형 디자인으로 충분할 것입니다. 모바일 앱은 사용자가 모바일 장치에서 전체 사이트가 제공하는 것과는 다른 매우 구체적인 기능을 원할 때 사용됩니다. 귀하의 은행은 모바일 앱을 제공할 가능성이 높으므로 스타벅스에서 신속하게 잔액을 확인할 수 있습니다. Facebook과 Twitter도 모바일 사용에 맞게 앱의 기능을 조정합니다.

사용자가 기본 웹사이트에서 필요로 하는 기능과 별개로 휴대폰에서 특정 기능 집합이 필요한 경우에만 네이티브 앱을 고려해야 합니다.

반응형 사이트에 대한 성능 고려 사항

반응형 디자인은 사이트의 전반적인 성능에 영향을 미칩니다. 장치 크기에 대응하기 위해 많은 CSS와 다양한 크기의 이미지를 로드하는 것은 백엔드 처리 관점에서 비용이 많이 들 수 있습니다. 반응형 디자인 평가의 일환으로 기능으로서 성능의 우선순위를 지정하는 것이 중요합니다. 사용자는 여전히 모바일 사이트가 조금 더 느릴 것으로 기대하지만 친구나 데이트 상대를 보여주기 위해 사이트를 불러오려고 하면 용서하지 않을 것이며 몇 초 이상 기다려야 합니다.

기술적인 관점에서 볼 때 셀룰러 데이터를 사용하는 모바일 장치에 사이트를 제공할 때 처음부터 0.5초의 핸디캡이 있습니다. 예를 들어 4G에서 40KB를 가져오려면 최적의 조건에서 700ms가 걸립니다. 네트워크 대기 시간과 상황에 따른 변화는 로드 시간에만 추가됩니다. 셀룰러 네트워크 변수를 제어할 수 없으므로 처음부터 성능을 기능으로 사용하여 반응형 사이트를 구축하는 것이 중요합니다.

사이트가 모바일에 최적화되도록 다음을 수행했는지 확인하세요.

• 이미지 최적화: 장치의 화면 크기를 자동으로 감지하여 올바른 이미지 크기를 생성, 캐시 및 제공합니다.
• HTTP 요청 줄이기: 사용해야 하는 CSS 및 JavaScript의 양을 최소화한 다음 나머지는 모두 캐시합니다.
• 조건부로 자산 로드: 큰 소셜 미디어 버튼, 이미지 등은 큰 장치에 적합하지만 작은 장치의 사용자 경험에는 영향을 미치지 않습니다. 절대적으로 필요한 것만 로드하도록 설계를 계획하십시오.
• Lazy Loading: 특정 자산, 특히 JavaScript를 로드하는 것을 피할 수 있다면 가장 중요한 페이지 요소 다음에 로드하십시오. 사용자가 처음에 원하는 콘텐츠를 소비할 때쯤이면 다른 자산이 로드됩니다.

귀하의 WordPress 사이트는 반응형이어야 합니까?

점점 더 이 질문에 대한 기본 대답은 '그렇다'가 될 것입니다. 특히 반응형 WordPress 테마가 널리 보급됨에 따라 그렇습니다. 사이트가 재설계 중이거나 설계 과정에 있는 경우 사용자가 어떤 장치를 사용하든 고품질 환경을 제공하는 것이 중요합니다.

이를 염두에 두고 귀하와 귀하의 팀이 WordPress를 반응형으로 설계해야 하는지 평가하기 위해 몇 가지 질문으로 마무리하겠습니다.

• 사이트의 사용 사례는 무엇입니까? 모바일 소비가 중요할까요? 이에 대한 대답은 "예, 그리고 매년 점점 더 그렇습니다."입니다. 예외가 있지만 많지는 않습니다.
• 사용자는 누구입니까? 그들이 더 기술적이고 더 최첨단일수록 그들이 연관시키는 모든 브랜드에 대해 반응이 좋은 사이트를 기대할 가능성이 높아집니다.
• 예산이 있습니까? 이것은 큰 것입니다. 반응형 사이트는 처음에 구축하는 데 비용이 조금 더 들지만 사이트의 두 가지 개별 버전을 구축한 다음 두 버전의 유지 관리를 계획하는 것보다 단일 반응형 사이트를 구축하는 것이 더 저렴합니다.
• 새로운 유형의 디자인을 배울 준비가 되셨나요? 반응형 디자인은 디지털 콘텐츠를 이해하는 많은 새로운 개념과 방법을 소개합니다. 아름다운 것을 디자인할 수 있을 뿐만 아니라 그 과정에서 당신을 교육할 수 있는 디자인 팀과 함께 일하는 것이 중요할 것입니다.

반응형 WordPress 웹 디자인 만들기

기존의 정적 디자인은 종종 반응형 테마로 변환될 수 있습니다. 다음은 변환 프로세스 전체에서 고려해야 할 몇 가지 요소입니다.

• 기본 브라우저 줌
• 유체 요소 너비 및 높이
• 이미지 최적화
• 디자인별 중단점
• 모바일 장치용 별도의 반응형 메뉴

또한 여러 장치에서 업데이트된 디자인을 테스트하고 테스트에서 반응형 테이블과 같은 추가 요소를 고려해야 합니다. 그러나 WordPress를 반응형으로 만드는 가장 쉬운 방법은 처음부터 사전 구축된 반응형 테마를 선택하는 것입니다.

올바른 WordPress 테마 선택

현재 사용 가능한 10,000개 이상의 WordPress 테마를 통해 검색을 시작하기 전에 사이트에서 원하는 기능 목록을 만들고 해당 목록을 출발점으로 사용하는 것이 좋습니다.

찾아야 할 기능 유형이 확실하지 않은 경우 범위를 좁히는 데 도움이 되는 몇 가지 기준이 있습니다. 검색 엔진 최적화(SEO) 및 빠른 페이지 로드 시간(기기에 관계없이)은 모든 테마에 있어야 할 두 가지.

이 기능이 내장되어 있지 않은 WordPress 테마가 많이 있지만 이러한 기능이 모두 있는 테마를 사용하면 사이트에서 훨씬 더 나은 최종 사용자 경험을 얻을 수 있습니다.

예를 들어 WP Engine의 프리미엄 WordPress 테마 제품군은 모두 검색 엔진에 최적화되어 있고 모바일에 반응하므로 모든 장치에서 빠르게 로드됩니다. 이 멋진 테마는 다양한 사용 사례를 위해 만들어졌으며 모든 형태와 규모의 비즈니스에서 온라인 입지를 강화하기 위해 이를 사용하고 있습니다.

이러한 테마에 대한 액세스는 모든 WP Engine 플랜에도 포함되어 있으므로 WP Engine 고객은 추가 비용 없이 모든 테마를 사용할 수 있습니다.

모바일 WordPress 플러그인

휴대폰은 푸시 알림 및 느린 연결을 통한 지속적인 로딩과 같은 기능에 대한 많은 가능성을 열어줍니다. 그러나 웹 사이트를 모바일 웹 앱으로 전환하고 모바일 친화적인 개념을 다음 단계로 끌어올리는 데 도움이 되는 솔루션이 있지만 많은 솔루션이 아직 개발 및 테스트 단계에 있습니다.

이는 기대하는 기능 중 일부가 부족할 수 있음을 의미합니다. 그러나 다양한 방법으로 사이트를 개선하는 데 도움이 되는 모바일 WordPress 플러그인이 많이 있습니다 .

1. 제트팩

사용 가능한 많은 솔루션이 있지만 Jetpack 플러그인은 매우 인기 있는 옵션입니다. Plugin Directory에서 찾을 수 있지만 사이트에서 간단한 모바일 테마를 만드는 옵션도 있습니다.

Jetpack의 가장 좋은 점 중 하나는 잘 관리된다는 것입니다. 이는 보안 및 기능을 보장하기 위해 자주 업데이트된다는 것을 의미합니다. 또한 찾을 수 있는 가장 기능이 풍부한 도구 중 하나입니다. 기본 플러그인은 무료이며 다양한 옵션이 제공됩니다. 단점은 기능이 너무 많아서 인터페이스가 처음에는 혼란스러워 보일 수 있다는 것입니다.

또한 일일 백업, 사용자 지정 테마 및 SEO 도구를 원하는 경우 프리미엄 버전의 Jetpack에 투자해야 합니다. 필요에 따라 연간 $39에 개인용 프리미엄 플러그인을 얻을 수 있으며 최상위 계층은 연간 $299에 제공됩니다.

2. WP터치

또한 기존 사이트에서 모바일 웹사이트를 만들 수 있는 인기 있는 플러그인인 WPtouch를 탐색할 수 있습니다. 이 플러그인 사용의 주요 이점 중 하나는 원래 웹 사이트를 중단하거나 변경하지 않고 모바일 버전을 사용자 지정할 수 있다는 것입니다.

무료 버전에는 매우 강력한 기능도 있습니다. 그러나 다른 모양과 느낌을 찾고 있다면 프로 버전을 구입해야 합니다. Pro 요금제는 연간 $79부터 시작하며 엔터프라이즈급 라이선스의 경우 연간 최대 $359입니다.

3. 워드프레스 모바일 팩

WordPress Mobile Pack은 최신 버전의 WordPress에서 테스트되지 않았지만 기존 웹 사이트에서 PWA(Progressive Web Application)를 만드는 데 널리 사용되는 플러그인입니다. 즉, 사이트의 사용자는 앱 스토어용으로 다운로드 가능한 애플리케이션을 프로그래밍하는 데 리소스를 투입하지 않고도 '앱과 같은' 경험을 얻을 수 있습니다.

이 플러그인을 사용하면 배너 메시지를 사용자에게 푸시하여 홈 화면에 웹사이트를 추가하는 옵션을 알릴 수 있습니다. 그러면 페이지가 캐시되고 매우 빠르게 로드됩니다. 이 플러그인의 기본 기능은 무료이지만 더 많은 테마, 사용자 지정 옵션 및 특정 콘텐츠 동기화 기능에 액세스하려면 프로 버전을 구입해야 합니다.
플러그인의 프로 버전에는 선택할 수 있는 세 가지 계층이 있습니다. Freelancer 패키지는 연간 $99부터 시작하며 3개의 도메인에서 사용할 수 있습니다. 가격 등급은 10개의 도메인 라이센스에 대해 연간 $499의 VIP 옵션으로 최고입니다.

반응형 이미지

WordPress는 버전 4.4부터 기본적으로 반응형 이미지를 제공했습니다. 그러나 특히 이전 코드를 사용하는 사이트의 경우 작은 장치에서 이미지가 너무 크게 보이지 않도록 스타일시트에 추가할 수 있는 간단한 스니펫이 있습니다.

img {
max-width: 100%;
height: auto;
}

최적의 반응형 이미지 성능을 보장하는 방법은 여러 가지가 있지만 이 스니펫은 모든 이미지가 기준선으로 반응하도록 합니다.

마지막으로 대부분의 이미지는 반응형 사이트에 포함하기에 적합하지만 확장성이 중요한 요소입니다. 예를 들어 텍스트가 많은 이미지를 포함하면 모바일 기기에서 읽기가 쉽지 않을 수 있습니다. 이 경우 다른 이미지를 선택하거나 이미지와 독립적으로 텍스트를 읽을 수 있는 방법을 제공하는 것이 좋습니다.

반응형 메뉴

반응형 메뉴 생성과 관련하여 두 가지 기본 생각이 있습니다.

1. 모든 크기에서 작동하는 하나의 메뉴를 만듭니다.
2. 큰 화면용 메뉴와 작은 화면용 메뉴의 두 가지 메뉴를 만듭니다. 사용 중인 화면 크기에 따라 한 번에 하나만 표시됩니다.

모바일 가독성을 위해 CSS를 최적화하려면 약간의 간단한 조정만 필요하기 때문에 획일적인 접근 방식은 작은 메뉴에 가장 적합합니다. 이 경우 메뉴는 장치 크기에 관계없이 사용자에게 항상 표시됩니다.

그러나 메뉴가 너무 커서 모바일 장치에서 쉽게 축소할 수 없는 경우 작은 화면 전용 두 번째 버전이 필요할 수 있습니다. 이 경우 큰 메뉴는 큰 화면에서만 보이고 작은 화면에서는 모바일 메뉴 아이콘이 나타납니다.

이 접근 방식의 전형적인 예는 햄버거 메뉴 아이콘으로, 클릭하면 전체 모바일 메뉴가 표시됩니다. 반응형 메뉴 생성을 지원하기 위해 WordPress의 다양한 플러그인을 사용할 수도 있습니다. 세 가지 옵션을 살펴보겠습니다.

1. 우버메뉴

시도해 볼 수 있는 한 가지 옵션은 UberMenu입니다. 25달러에 향후 업데이트와 6개월 지원을 이용할 수 있습니다. UberMenu를 사용하면 완벽하게 반응하고 터치하기 쉬운 메뉴를 만들 수 있습니다. 유감스럽게도 테마가 UberMenu 전용이 아닌 이상 테마가 제대로 작동하려면 몇 가지 수동 변경이 필요할 수 있습니다.

2. 최대 메가 메뉴

또 다른 옵션은 Max Mega Menu 플러그인입니다. 이 도구는 WordPress Plugin Directory에 무료 옵션이 있으며 기존 메뉴와 함께 작동하여 '메가' 메뉴로 변환합니다.

무료 버전에는 터치 스크린에 대한 기본 지원과 같은 많은 모바일 메뉴 기능도 있습니다. 더 많은 글꼴과 모바일 토글 옵션에 액세스하려면 세 가지 가격 책정 계층 중 하나를 확인해야 합니다. 플러그인의 프리미엄 버전은 연간 $29부터 시작하며 여러 사이트 라이선스의 경우 연간 최대 $99입니다.

3. 반응형 메뉴

메뉴를 모바일 친화적으로 만드는 또 다른 좋은 평가를 받고 인기 있는 플러그인은 Responsive Menu 플러그인입니다. 이 솔루션에는 사용하기 쉬운 인터페이스 내에 150개 이상의 다양한 사용자 지정 옵션이 있습니다.

플러그인 설정 페이지에서 메뉴의 거의 모든 측면을 유연하게 변경할 수 있습니다. 그러나 애니메이션과 더 많은 글꼴을 찾고 있다면 반응형 메뉴 플러그인 업그레이드를 확인해야 합니다.

플러그인의 무료 버전은 옵션 목록이 매우 광범위하기 때문에 필요한 기능을 제공할 수 있습니다. 업그레이드하면 $29에 단일 사이트 라이센스를 얻거나 $99에 무제한 라이센스를 얻을 수 있습니다. 플러그인 비용은 일회성 요금이며 평생 무료 업데이트를 받게 됩니다.

반응형 테이블

기본적으로 테이블은 내용만큼(또는 그 이상) 공간을 차지합니다. 이로 인해 모바일 레이아웃을 망치는 매우 넓은 테이블이 생길 수 있습니다.

불행히도 콘텐츠로 가득 찬 테이블은 모바일 페이지의 너비에 맞게 축소되면 읽기 어려워집니다. 반응형 디자인은 데이터를 작은 화면에 압축하는 것이 전부가 아닙니다. 대신, 장치에 관계없이 모든 것을 사용자 친화적으로 만드는 것입니다.

빠르고 더러운 솔루션을 위해 다음 CSS 스니펫을 사용하여 테이블에 기본 응답성을 추가할 수 있습니다.

table {
width: 100%;
border-collapse: collapse;
}

그러나 거기서 멈출 필요는 없습니다. 테이블이 작은 경우가 아니면 표시되는 콘텐츠의 종류에 따라 각 테이블을 최적화하는 것이 좋습니다. 테이블 내의 데이터에 따라 최상의 가독성을 위해 선택할 수 있는 다양한 응답 옵션이 있습니다.

그러나 반응형 테이블을 위한 플러그인 솔루션을 찾고 있다면 운이 좋을 것입니다! 몇 가지 옵션이 있지만 특히 세 가지를 권장합니다.

1. 테이블프레스

먼저 TablePress 플러그인은 인기 있고 잘 관리되며 높은 평가를 받는 옵션입니다. 짧은 코드로 아름다운 테이블을 만들고 삽입할 수 있습니다. 그러나 진정으로 반응하는 테이블을 얻으려면 TablePress 확장 프로그램을 설치해야 합니다. 이것도 무료이지만 개발자에게 기부하는 것이 좋습니다.

2. WP 테이블 빌더

별 5개짜리 끌어서 놓기 테이블 빌더 옵션을 찾고 있다면 WP 테이블 빌더가 적합할 수 있습니다. 다소 새롭지만 호평을 받고 있는 플러그인인 끌어서 놓기 인터페이스를 사용하면 웹 사이트에 반응하는 테이블을 쉽게 만들 수 있습니다.

이것은 완전 무료 플러그인이기도 합니다. 이 옵션의 유일한 단점은 현재 5개의 데이터 옵션만 제공된다는 것입니다. 텍스트, 이미지, 버튼, 목록 및 별 등급으로 다소 제한됩니다.

3. wpDataTables

체크아웃할 것을 권장하는 세 번째 플러그인은 wpDataTables입니다. 이 도구를 사용하면 기존 Excel, CSV, PHP 또는 기타 데이터에서 표와 차트를 빠르게 만들 수 있습니다. 즉, 대규모 데이터 세트를 웹사이트에서 액세스할 수 있습니다.

이 플러그인은 또한 Gutenberg를 지원하므로 플러그인 설정에서 사용자 정의한 후 사이트의 페이지와 게시물에 테이블을 추가하는 것이 간단합니다. 그러나이 플러그인의 무료 버전에 의해 다소 제한됩니다.
예를 들어 업그레이드하지 않으면 MSQL 쿼리 기반 테이블을 만들거나 Google 스프레드시트에서 정보를 가져올 수 없습니다. 프리미엄 버전은 기본 가격 계층의 경우 연간 $59부터 시작하며 개발자 패키지의 경우 연간 $249입니다.

다국어 기능 추가

WordPress 채택이 전 세계적으로 계속 증가함에 따라 사용자의 위치에 따라 사이트를 현지 언어로 번역할 수 있는 다국어 기능에 대한 필요성이 증가하고 있습니다.

이러한 유형의 기능은 여러 국가에 고객이 있는 비즈니스에 매우 유용하며 WordPress를 사용하면 사이트에 기능을 추가하는 것이 생각만큼 어렵지 않습니다. 사실 Weglot과 같은 플러그인을 설치하면 웹 사이트를 코드 없이도 몇 분 안에 다국어로 만들 수 있습니다.

Weglot은 또한 모든 WordPress 테마 및 플러그인과 호환됩니다. 즉, 사용하게 된 모든 테마에서 작동하며 다른 플러그인에 문제를 일으키지 않습니다. WP Engine의 프리미엄 WordPress 테마 중 하나에 Weglot을 추가하면 사이트 소유자가 모든 언어로 액세스할 수 있는 SEO 친화적인 모바일 반응형 사이트를 구축할 수 있습니다.

자세한 내용은 이 가이드를 확인하고 WP Engine을 방문하여 WordPress용 디지털 경험 플랫폼과 함께 제공되는 다양한 계획 및 기타 기능에 대해 알아보세요.

SEO를 위한 모바일 반응성

간단히 말해, 모바일 친화적인 웹사이트는 자연 검색 결과에서 Google의 보상을 받습니다. 2015년과 2016년 사이에 반응형 웹 사이트를 선호하도록 순위 알고리즘에 여러 업데이트가 추가되었습니다. 속도는 모바일 사용자의 사용자 친화성에 큰 역할을 하기 때문에 더 나은 검색 엔진 순위에도 기여한다는 점에 유의해야 합니다.

물론 빠르게 로딩되는 반응형 웹사이트는 성공적인 호스팅에 의존합니다. WP Engine(PHP 7을 표준으로 제공하고 더 높은 요금제에서는 무료 Content Delivery Network를 제공합니다)과 같은 고품질 호스팅 회사를 선택하면 로딩 시간이 빨라지고 전반적으로 원활하게 작동하는 것을 확인할 수 있습니다.

WP 엔진으로 반응형 빌드

반응형 웹사이트를 만들기 위해 노력하는 것은 모바일에 의존하는 세상에서 우선 순위가 되어야 합니다. 추적해야 할 것이 많지만 여기 WP Engine에서는 최고의 WordPress 개발자 리소스와 모바일 사용자를 위한 반응이 빠른 테마를 안내해 드릴 수 있습니다.

또한 귀하의 웹 사이트를 위한 다양한 계획과 솔루션이 있습니다. 디지털 경험 플랫폼에서 반응형으로 구축할 수 있도록 도와드리며 화면 크기 때문에 방문자를 잃을 염려가 없습니다!