Bridge 테마 user-scalable=no 완전 해결 | 모바일 글씨 작아지는 문제까지 | 소풍수니

워드프레스 브릿지테마를 사용 중 ai 클로드에게 홈페이지를 문제되는 부분을 체크하니 수정 할 부분이 있어 PHP 코드를 수정해 봅니다.

Bridge 테마에서 user-scalable=no 제거 후 모바일 글씨가 작아지는 문제까지 한 번에 해결하는 방법입니다. functions.php 코드 두 줄로 완전히 해결됩니다.

안녕하세요. 소풍수니입니다.

WordPress Bridge 테마(Qode Interactive)를 운영하면서 아래 두 가지 문제를 경험해 보신 적 있으신가요?

문제 1. 구글 Search Console에서 “뷰포트가 잘못 설정되어 있습니다” 경고가 뜬다
문제 2. user-scalable=no를 제거했더니 모바일에서 글씨가 작아진다

오늘은 이 두 가지 문제를 한 번에 완전히 해결하는 방법을 공유합니다.

[이미지 삽입 위치] 구글 Search Console 뷰포트 경고 화면
alt: “구글 Search Console 뷰포트 잘못 설정 user-scalable 경고”

문제 1 — user-scalable=no 란 무엇이고 왜 문제인가요?

WordPress Bridge 테마는 기본적으로 아래 viewport 코드를 출력합니다:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

여기서 user-scalable=no 는 스마트폰에서 두 손가락으로 화면을 확대(핀치 줌)하지 못하도록 막는 코드입니다.

이게 왜 문제가 되나요?

항목	문제 내용
구글 SEO 점수	접근성 위반으로 판단 → 검색 순위 감점
장애인 접근성	시각 장애인·고령자 화면 확대 불가 → WCAG 위반
사용자 경험	작은 글씨 확대 불가 → 빠른 이탈 → SEO 추가 감점
Search Console	“뷰포트가 잘못 설정됨” 경고 발생

문제 2 — 왜 제거하면 글씨가 작아지나요?

user-scalable=no 만 제거하면 되지 않나요?

여기서 많은 분들이 실수합니다.

Bridge 테마에서 user-scalable=no 를 제거하면 viewport 메타 태그 자체가 사라집니다.

viewport 메타 태그가 없으면 브라우저는 페이지를 PC 화면 기준으로 렌더링 합니다. 스마트폰 화면은 좁기 때문에 PC 화면이 그대로 축소되어 표시되고, 그 결과 글씨가 매우 작게 보이는 것입니다.

정리하면:

user-scalable=no 만 제거
    → viewport 메타 태그 전체 사라짐
        → 브라우저가 PC 화면 기준으로 렌더링
            → 모바일에서 글씨 작아짐

[이미지 삽입 위치] 모바일 글씨 작아진 화면 비교 이미지
alt: “Bridge 테마 user-scalable 제거 후 모바일 글씨 작아짐 문제”

왜 header.php를 직접 수정하면 안 되나요?

일반적인 WordPress 테마는 header.php 파일에 viewport 코드가 직접 있습니다.
그래서 보통은 header.php를 열어서 user-scalable=no 부분을 삭제하면 해결됩니다.

하지만 Bridge 테마는 다릅니다.

Bridge 테마의 header.php를 열어보면 viewport 코드가 없고 대신 아래 코드가 있습니다:

<?php
/**
 * qode_header_meta hook
 * @see qode_user_scalable_meta() - hooked with 10
 */
do_action('qode_header_meta');
?>

실제 viewport 코드는 functions.php 안의 qode_user_scalable_meta() 함수가 출력하고 있습니다:

function qode_user_scalable_meta() {
    global $qode_options_proya;
    if (isset($qode_options_proya['responsiveness'])
        && $qode_options_proya['responsiveness'] !== 'no') { ?>
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <?php }
}
add_action('qode_header_meta', 'qode_user_scalable_meta');

즉 header.php에는 수정할 코드가 없습니다.
이 함수를 직접 수정하면 테마 업데이트 시 초기화됩니다.

[이미지 삽입 위치] Bridge 테마 functions.php qode_user_scalable_meta 함수 화면
alt: “Bridge 테마 functions.php qode_user_scalable_meta 코드 구조”

완전한 해결 방법 — functions.php 코드 두 줄

핵심:

• 기존 함수 실행을 막고 (remove_action)
• 올바른 viewport 코드를 새로 출력 (add_action)

추가할 코드 (두 줄):

remove_action('qode_header_meta', 'qode_user_scalable_meta');

add_action('qode_header_meta', function() {
    echo '<meta name="viewport" content="width=device-width, initial-scale=1">';
});

작업 순서:

1. WordPress 관리자 → 외모 → 테마 편집기 클릭
2. 오른쪽 파일 목록에서 functions.php 클릭
3. 파일 맨 아래로 스크롤
4. 위 코드 두 줄 추가
5. 파일 업데이트 클릭

---

⚠️ 주의사항:
수정 전에 functions.php 전체 내용을 반드시 백업해 두세요!
코드 오류 발생 시 사이트가 흰 화면이 될 수 있습니다.

코드 설명 — 각 줄이 하는 일

첫 번째 줄:

remove_action('qode_header_meta', 'qode_user_scalable_meta');

→ qode_header_meta 훅에 연결된 qode_user_scalable_meta 함수 실행을 차단합니다.
→ 함수 자체를 삭제하는 게 아니라 실행되지 않도록 연결을 끊는 방식입니다.
→ 테마 업데이트를 해도 이 코드는 유지됩니다.

두 번째 줄:

add_action('qode_header_meta', function() {
    echo '<meta name="viewport" content="width=device-width, initial-scale=1">';
});

→ 기존 함수 대신 올바른 viewport 코드를 직접 출력합니다.
→ user-scalable=no 없이 initial-scale=1 만 유지합니다.
→ 모바일 글씨 크기 정상 + 핀치 줌 가능 두 가지 모두 해결됩니다.

수정 전후 비교

항목	수정 전	코드 한 줄만 추가했을 때	완전 해결 후
모바일 글씨 크기	✅ 정상	❌ 작아짐	✅ 정상
핀치 줌	❌ 불가	✅ 가능	✅ 가능
구글 접근성 점수	❌ 감점	✅ 정상	✅ 정상
SEO 검색 순위	❌ 불리	✅ 유리	✅ 유리
장애인 접근성	❌ 위반	✅ 준수	✅ 준수
디자인 유지	✅ 유지	✅ 유지	✅ 유지
테마 업데이트 영향	–	✅ 없음	✅ 없음

적용 후 확인 방법

방법 1 — 스마트폰으로 직접 확인 (가장 간단)

1. 스마트폰으로 사이트 접속
2. 글씨 크기가 정상으로 보이는지 확인
3. 두 손가락으로 핀치 줌(확대) 가능한지 확인
4. 두 가지 모두 정상이면 → ✅ 완전 해결

방법 2 — 소스코드로 확인

1. PC에서 사이트 접속
2. 마우스 우클릭 → 페이지 소스 보기
3. Ctrl+F → viewport 검색
4. 아래 코드가 있으면 → ✅ 완전 해결

<meta name="viewport" content="width=device-width, initial-scale=1">

방법 3 — Google Search Console 확인

1. Search Console 접속
2. 모바일 사용 편의성 탭 클릭
3. “뷰포트가 잘못 설정됨” 오류 사라지면 → ✅ 완료
   ※ Search Console 반영은 수정 후 수일 소요됩니다.

핵심 요약

Bridge 테마(Qode Interactive)에서 user-scalable=no 를 완전히 해결하려면 functions.php 맨 아래에 아래 코드 두 줄을 추가하세요:

remove_action('qode_header_meta', 'qode_user_scalable_meta');

add_action('qode_header_meta', function() {
    echo '<meta name="viewport" content="width=device-width, initial-scale=1">';
});

주의: remove_action 한 줄만 추가하면 모바일 글씨가 작아집니다. 반드시 두 줄을 함께 추가하세요.

소풍수니는 앞으로도 WordPress 운영에 도움이 되는 실용적인 정보를 꾸준히 공유하겠습니다.

👉 카카오톡 상담: https://pf.kakao.com/_CrxbhC/chat
📧 이메일: cafesopoong@naver.com

작성: 소풍수니