사이트 방문자의 절반 이상이 스마트폰 또는 태블릿으로 웹사이트를 본다는 사실을 알고 계셨나요? 이 가이드에서는 반응형 테마 선택부터 콘텐츠 미세 조정까지 모든 화면 크기에서 원활한 사용자 환경을 제공하기 위한 필수 단계를 안내합니다.
워드프레스 사이트에서 모바일 친화적인 테마를 선택하는 것은 다양한 기기에서 원활하고 최적화된 사용자 환경을 제공하고 접근성을 개선하고 검색 엔진 순위에 긍정적인 영향을 미치는 데 매우 중요합니다.
워드프레스닷컴에서 제공되는 모든 테마는 모바일 반응형입니다. 즉 모바일 브라우저와 데스크톱 모두에서 멋지게 보이도록 디자인되었습니다.
서드파티 테마를 사용하는 경우 모바일 친화적인 테마라고 광고에 표시되는지, 모바일 장치에서 열 때 보기 좋은지 확인하세요. 테마의 설명서에서 사용자 정의 옵션 또는 설정을 확인하여 모바일에서 테마의 디자인을 제어할 수 있습니다.
모바일 반응형 테마를 선택한 후 기본 콘텐츠를 변경하여 나만의 콘텐츠로 만들 수 있습니다. 워드프레스 편집기에서 사이트를 편집할 때 모든 기기에서 정상적으로 보이는지 확인하는 것이 중요합니다.
워드프레스에는 별도의 “모바일 편집기”가 없습니다. 사이트에 적용한 변경 사항은 모바일 기기와 데스크톱 기기 모두에 반영됩니다. 사이트에 모바일 친화적인 테마가 있는 한 콘텐츠가 크고 작은 모든 화면에 적응합니다. 이를 “반응성”이라고 합니다.
편집기 오른쪽의 상단에서 미리보기 아이콘을 클릭하여 방문자에게 사이트가 어떻게 보이는지 확인할 수 있습니다. 모바일 또는 태블릿을 선택하여 편집기에서 대략적인 콘텐츠를 봅니다.
여기에서 대략적이라고 말하는 이유는 편집기 보기의 많은 요소가 사이트 테마에 따라 결정되기 때문입니다. 테마의 스타일은 편집기에 표시되지 않습니다. 새 탭에서 페이지를 미리 보거나 기기의 브라우저에서 사이트를 보는 경우에만 표시됩니다. 테마의 스타일이 적용된 콘텐츠를 보려면 “새 탭에서 미리보기” 옵션을 클릭합니다.
“새 탭에서 미리보기” 옵션을 클릭한 후 브라우저의 검사 도구를 사용하여 모바일 버전을 볼 수 있습니다. 브라우저의 검사 모드를 사용하여 페이지 또는 글이 모바일 보기에서 어떻게 보이는지 미리 보는 방법은 다음과 같습니다.
- 워드프레스 편집기의 오른쪽 상단에서 미리보기 아이콘을 클릭합니다.
- “새 탭에서 미리보기” 옵션을 선택합니다.
- 미리보기 페이지를 마우스 오른쪽 버튼으로 클릭하고 “검사“(Chrome, Firefox, Edge) 또는 “요소 검사“(Safari)를 클릭합니다.
- 브라우저의 검사 모드에서 모바일 아이콘을 클릭하여 미리보기를 모바일 보기로 전환합니다.
변경 사항을 발행한 후 스마트폰 또는 태블릿을 열어 외부인과 동일한 상태로 사이트를 보면서 의도한 대로 표시되는지 최종 확인하는 것이 좋습니다.
다음은 모바일, 태블릿 및 데스크톱에서 콘텐츠가 잘 표시되는지 확인하면서 사이트 디자인의 반응성을 극대화하는 몇 가지 팁입니다.
이미지에 이미지 자체에 디자인된 텍스트가 있는 경우 다음과 같이 더 작은 화면에서 해당 텍스트가 잘릴 수 있습니다.
이미지 내부에서 디자인된 텍스트가 반응하지 않기 때문입니다.
워드프레스 편집기를 사용하여 이미지 위에 텍스트를 작성할 수 있습니다. 이렇게 이미지에 텍스트를 추가하면 텍스트가 반응합니다. 아래 비디오에서는 커버 블록을 사용하여 위와 동일한 이미지를 재생성하고 작은 화면에서도 반응성을 보여줍니다.
페이지에서 글꼴 크기 지정의 반응성을 극대화하려면 픽셀(px)대신 em 또는 rem 단위를 사용하세요. 글꼴 크기에 픽셀을 사용하면 기본적으로 페이지에 특정 글꼴의 크기가 하드 코딩됩니다. 따라서 화면 크기와 관계없이 항상 정확한 크기로 글꼴이 표시됩니다. 이와 달리 em 및 rem 값은 독자의 화면에서 이용 가능한 공간에 따라 크기가 커지거나 작아지는 상대적 크기 단위입니다.
모바일 레이아웃에 텍스트 메뉴를 사용하는 대신에 오버레이 메뉴(“햄버거 메뉴” 또는 “케밥 메뉴”라고도 함)라는 모바일 메뉴를 표시하도록 사이트의 탐색 블록을 사용자 정의할 수 있습니다. 이 기능은 헤더를 더 작게 만들고 모바일에서 보고 사용하기 위해 메뉴에 더 접근하기 쉽게 만드는 데 도움이 될 수 있습니다.
일부 블록에는 더 작은 화면의 공간을 더 잘 사용할 수 있는 “모바일에서 스택” 옵션이 포함되어 있습니다. 콘텐츠가 데스크톱 화면에서 나란히 표시되는 경우 모바일 독자가 더 쉽게 읽을 수 있도록 더 작은 화면에서는 아래로 이동합니다.
“모바일에서 스택” 설정은 다음 블록에서 사용할 수 있습니다.
버튼과 메뉴를 여러 줄로 줄 바꿈하도록 허용하면 소형 기기에서 더 쉽게 읽을 수 있습니다.
“여러 줄로 줄 바꿈 허용” 옵션은 다음 블록의 레이아웃 설정에서 사용할 수 있습니다.
AMP(Accelerated Mobile Pages)는 모바일에서 거의 즉시 로드되는 웹사이트를 생성할 수 있는 서드파티 오픈 소스 프레임워크로, 사이트 방문자에게 빠른 탐색 환경을 제공합니다. 사이트에 AMP를 추가하려면 AMP 플러그인을 설치할 수 있습니다. 2022년 6월 13일 이전에 생성된 플러그인이 활성화된 워드프레스닷컴 사이트의 경우 AMP 플러그인이 기본적으로 설치되었습니다.
AMP를 사용하면 모바일 방문자가 사이트를 빠르게 로드할 수 있도록 사이트의 많은 기능(레이아웃, 많은 기능)이 제거됩니다. 테마가 AMP를 염두에 두고 생성된 경우에만 사용하는 것이 가장 좋습니다. 워드프레스닷컴의 모든 테마는 이미 모바일 친화적이므로 모바일에 최적화된 환경을 제공하는 데 AMP가 필요하지 않습니다.
사이트에서 표시 문제가 발생했는데 AMP가 설치되어 있는 경우 AMP 플러그인을 비활성화하여 사이트 성능이 향상되는지 확인하는 것이 좋습니다. 웹사이트에 “모바일 버전 종료” 옵션이 표시되어 완전히 제거하려는 경우 AMP 플러그인도 비활성화하세요.
사이트에서 한동안 AMP를 사용한 경우 Google에서 결과를 즉시 업데이트하지 않으며 비활성화 후에도 한동안 AMP 페이지가 계속 표시됩니다. AMP를 비활성화한 후 페이지 리디렉팅을 설정할 수 있습니다. 검색 엔진은 AMP 페이지 URL을 색인화하며 해당 URL을 목록에서 삭제하는 데 시간이 조금 걸립니다. 따라서 일부 모바일 방문자가 404 오류 페이지로 전송될 수 있습니다.
선택할 수 있는 여러 가지 인기 무료 리디렉션 플러그인이 있습니다. 301 리디렉팅을 설정하게 되며 /(.*)\/amp와 비슷한 Regex 식이 필요할 수 있습니다. 몇 차례의 테스트를 거쳐 올바른 리디렉팅을 설정하고 리디렉팅 플러그인의 지침 가이드를 참조하실 것을 권장합니다.
지원 