모바일 메뉴가 사라진 진짜 이유 | use

PC에서는 분명히 보이던 메뉴가 스마트폰에서만 사라졌습니다. 처음에는 CSS 문제라고 생각했습니다. 반응형 메뉴가 접히는 과정에서 display:none이 잘못 들어갔거나, 미디어 쿼리 조건이 꼬였다고 봤습니다.

그런데 반나절 가까이 CSS를 뒤져도 답이 나오지 않았습니다. 이유는 간단했습니다. 문제는 화면이 아니라 데이터베이스에 있었기 때문입니다.

이번 글은 모바일 메뉴가 안 보일 때 단순히 CSS만 의심하지 말고, HTML 출력 여부와 DB 플래그 값을 함께 확인해야 한다는 내용입니다. 레거시 CMS나 직접 만든 게시판에서 특히 자주 만나는 유형입니다.

모바일에서만 메뉴가 보이지 않은 증상

문제는 특정 메뉴 하나가 모바일에서만 사라지는 것이었습니다.

상황을 정리하면 이렇습니다.

PC 브라우저에서는 메뉴 8개가 모두 정상 출력됨
스마트폰에서는 메뉴 7개만 보임
누락된 메뉴는 에디터형 페이지로 연결되는 메뉴였음
PC 개발자 도구에서 화면 폭을 줄여도 같은 문제가 재현되지 않음
모바일 HTML 소스를 확인하니 해당 <li> 자체가 생성되지 않음

처음에는 마지막 항목을 놓쳤습니다. 메뉴가 안 보인다는 말만 듣고 CSS부터 열었기 때문입니다. 하지만 HTML 소스에 메뉴 태그가 없다면 이야기가 달라집니다.

CSS가 숨긴 메뉴라면 소스에는 남아 있어야 합니다.

<li style="display:none">숨겨진 메뉴</li>

또는 클래스 때문에 화면에서만 안 보일 수 있습니다.

<li class="mobile-hidden">게시판</li>

하지만 이번 경우에는 아예 <li>가 없었습니다. 즉 브라우저가 숨긴 것이 아니라, 서버가 처음부터 메뉴를 출력하지 않은 것입니다.

CSS 문제가 아니라고 판단한 기준

모바일 메뉴 오류를 볼 때 가장 먼저 확인할 것은 화면이 아니라 소스입니다.

브라우저 개발자 도구에서 요소 검사를 열고, 누락된 메뉴 이름을 검색했습니다. PC에서는 메뉴 이름이 검색됐지만 모바일에서는 검색되지 않았습니다.

이 차이가 중요합니다.

HTML 안에 있는데 안 보이면 CSS 또는 JS 문제
HTML 안에 없으면 서버 출력 조건 또는 데이터 문제
PC에는 있고 모바일에는 없으면 모바일 전용 출력 조건 문제

이번 문제는 세 번째였습니다. PC용 메뉴를 만드는 코드와 모바일용 메뉴를 만드는 코드가 달랐고, 모바일 쪽에만 별도의 조건이 있었습니다.

원인은 use_mobile 플래그 컬럼

메뉴 테이블을 확인해 보니 use_mobile이라는 컬럼이 있었습니다. 이름 그대로 모바일에서 이 메뉴를 사용할지 결정하는 값이었습니다.

모바일 메뉴를 출력하는 코드는 대략 이런 구조였습니다.

$sql = "
    SELECT number, menu_name, menu_type
    FROM site_menu
    WHERE site_id = ?
      AND use_yn = 1
      AND use_mobile = 1
    ORDER BY sort_no ASC
";

PC 메뉴는 use_yn = 1인 메뉴를 출력하지만, 모바일 메뉴는 여기에 use_mobile = 1 조건이 하나 더 붙어 있었습니다.

문제의 메뉴는 use_yn은 1이었지만 use_mobile이 0이었습니다. 그래서 PC에서는 보이고 모바일에서는 빠졌던 것입니다.

관리자 화면에서 메뉴를 수정해도 이 값은 바뀌지 않았습니다. 모바일 노출 여부를 켜고 끄는 UI가 관리자 페이지에 없었기 때문입니다. 컬럼은 있는데 관리 화면에는 없는 전형적인 레거시 CMS 문제였습니다.

먼저 SELECT로 영향 범위 확인하기

바로 UPDATE를 실행하면 위험합니다. 메뉴 테이블은 사이트 전체 메뉴를 다루기 때문에 조건을 잘못 쓰면 여러 메뉴가 한꺼번에 바뀔 수 있습니다.

먼저 조회부터 했습니다.

SELECT
    number,
    menu_name,
    menu_type,
    use_yn,
    use_mobile,
    sort_no
FROM site_menu
WHERE site_id = 'mysite'
ORDER BY sort_no ASC;

결과를 보니 누락된 메뉴만 use_mobile = 0이었습니다.

확인해야 할 포인트는 세 가지였습니다.

누락된 메뉴의 use_mobile 값이 0인지
다른 정상 메뉴는 use_mobile 값이 1인지
같은 조건에 걸리는 메뉴가 하나뿐인지

이 과정을 거치면 UPDATE 범위를 좁힐 수 있습니다. 특히 운영 중인 사이트에서는 “아마 이거겠지” 하고 바로 수정하면 안 됩니다.

일회용 PHP 스크립트로 값 수정하기

phpMyAdmin이나 DB 콘솔 접근이 어려운 환경이라 임시 PHP 파일을 만들어 처리했습니다.

아래 코드는 특정 사이트의 에디터형 메뉴 중 모바일 노출이 꺼진 메뉴만 켜는 예시입니다. 실제 사이트명과 테이블명은 환경에 맞게 바꿔야 합니다.

<?php
require __DIR__ . '/inc/db.php'; // $pdo 연결 파일

$siteId = 'mysite';
$menuType = 'editor';

// 1) 먼저 대상 확인
$selectSql = "
    SELECT number, menu_name, menu_type, use_mobile
    FROM site_menu
    WHERE site_id = ?
      AND menu_type = ?
      AND use_mobile = 0
";

$selectStmt = $pdo->prepare($selectSql);
$selectStmt->execute([$siteId, $menuType]);
$rows = $selectStmt->fetchAll(PDO::FETCH_ASSOC);

echo '<pre>';
echo "수정 대상:\n";
print_r($rows);

// 2) 예상한 대상이 맞을 때만 UPDATE
if (count($rows) === 1) {
    $updateSql = "
        UPDATE site_menu
        SET use_mobile = 1
        WHERE site_id = ?
          AND menu_type = ?
          AND use_mobile = 0
        LIMIT 1
    ";

    $updateStmt = $pdo->prepare($updateSql);
    $updateStmt->execute([$siteId, $menuType]);

    echo "\n변경된 행: " . $updateStmt->rowCount();
} else {
    echo "\n대상 개수가 예상과 달라 UPDATE를 중단했습니다.";
}

echo '</pre>';

처음에는 단순 UPDATE만 넣을 수도 있었지만, 애드센스용 글로 정리하면서는 위처럼 조회 → 개수 확인 → 수정 순서로 쓰는 편이 더 안전합니다.

특히 count($rows) === 1 조건을 넣으면 예상보다 많은 메뉴가 걸렸을 때 수정을 멈출 수 있습니다.

UPDATE 조건을 좁게 잡아야 하는 이유

운영 DB에서 가장 위험한 코드는 조건이 넓은 UPDATE입니다.

예를 들어 아래처럼 쓰면 같은 사이트의 모든 메뉴가 모바일에 노출될 수 있습니다.

UPDATE site_menu
SET use_mobile = 1
WHERE site_id = 'mysite';

이렇게 되면 의도하지 않은 숨김 메뉴, 테스트 메뉴, 준비 중인 메뉴까지 모바일에 나타날 수 있습니다.

그래서 조건은 가능한 한 좁게 잡았습니다.

UPDATE site_menu
SET use_mobile = 1
WHERE site_id = 'mysite'
  AND menu_type = 'editor'
  AND use_mobile = 0
LIMIT 1;

핵심은 “바꾸고 싶은 값”만 쓰는 것이 아니라, “바뀌면 안 되는 값”이 섞이지 않도록 조건을 줄이는 것입니다.

임시 수정 파일을 쓸 때 지켜야 할 규칙

웹 루트에 올려서 실행하는 PHP 파일은 편하지만 위험합니다. URL만 알면 누구나 실행할 수 있기 때문입니다.

그래서 이런 일회용 파일을 만들 때는 아래 기준을 지켜야 합니다.

파일명을 update.php, db.php처럼 쉽게 만들지 않기
실행 전에 SELECT로 대상 목록을 먼저 출력하기
예상한 개수일 때만 UPDATE 실행하기
LIMIT 1처럼 피해 범위를 줄일 수 있는 조건 넣기
실행 후 결과 행 수를 확인하기
작업이 끝나면 즉시 파일 삭제하기
가능하면 웹이 아니라 CLI에서 실행하기

가장 중요한 것은 마지막에 파일을 삭제하는 것입니다. 이런 임시 파일은 만들 때보다 지우는 것이 더 중요합니다.

수정 후 확인한 것들

값을 바꾼 뒤에는 모바일 화면만 새로고침하고 끝내지 않았습니다. 메뉴 문제는 SEO와도 연결될 수 있어서 몇 가지를 함께 확인했습니다.

모바일에서 누락됐던 메뉴가 보이는지
해당 메뉴 클릭 시 정상 페이지로 이동하는지
PC 메뉴 순서가 바뀌지 않았는지
모바일 HTML 소스에 메뉴 <li>가 실제로 생성되는지
구글 모바일 친화성 기준에서 중요한 링크가 빠지지 않는지
관리자 화면에서 다시 저장했을 때 값이 원래대로 돌아가지 않는지

특히 마지막 항목이 중요했습니다. 관리자 화면에 use_mobile 입력 항목이 없다면, 메뉴를 수정하거나 재저장할 때 기본값으로 다시 덮일 가능성이 있기 때문입니다.

애드센스 관점에서 이 문제가 중요한 이유

단순히 메뉴 하나가 안 보인 문제로 끝낼 수도 있습니다. 하지만 애드센스 승인을 준비하는 사이트라면 조금 다르게 봐야 합니다.

구글은 모바일 기준으로 페이지를 평가합니다. 모바일에서 중요한 메뉴가 빠지면 크롤러가 해당 경로를 발견하지 못할 수 있습니다. 사용자는 접근할 수 없는 메뉴처럼 느끼고, 사이트 구조도 약해 보일 수 있습니다.

특히 애드센스용 사이트에서는 아래 요소가 중요합니다.

모바일에서도 주요 페이지로 이동할 수 있는지
메뉴 구조가 일관적인지
숨겨진 페이지가 많아 보이지 않는지
사용자가 글 목록과 정보 페이지를 쉽게 찾을 수 있는지
PC와 모바일의 콘텐츠 접근성이 크게 다르지 않은지

이번 문제는 디자인 오류처럼 보였지만, 실제로는 모바일 크롤링과 내부 링크 구조에도 영향을 줄 수 있는 문제였습니다.

모바일 메뉴 오류 점검표

모바일에서 메뉴가 보이지 않을 때 아래 순서대로 보면 CSS만 붙잡고 시간을 보내는 일을 줄일 수 있습니다.

PC와 모바일에서 메뉴 개수가 다른가
모바일 HTML 소스에 해당 메뉴가 존재하는가
소스에는 있는데 안 보이면 CSS 클래스를 확인했는가
소스에도 없으면 모바일 메뉴 SQL 조건을 확인했는가
메뉴 테이블에 use_mobile, mobile_yn, is_mobile 같은 컬럼이 있는가
관리자 화면에서 해당 컬럼을 수정할 수 있는가
UPDATE 전에 SELECT로 수정 대상을 확인했는가
수정 후 모바일 실제 기기에서 다시 확인했는가
임시 PHP 수정 파일을 삭제했는가

모바일 메뉴는 화면보다 출력 조건부터

모바일에서 메뉴가 사라졌다고 해서 항상 CSS 문제는 아닙니다. 먼저 HTML 소스에 메뉴가 있는지 확인해야 합니다. 소스에 없다면 CSS가 아니라 서버 출력 조건, DB 값, 모바일 전용 쿼리를 봐야 합니다.

이번 문제는 use_mobile 컬럼 하나 때문에 생겼습니다. PC 메뉴에는 없는 조건이 모바일 메뉴에만 붙어 있었고, 관리자 화면에서는 그 값을 바꿀 수 없었습니다.

레거시 CMS를 운영한다면 메뉴 테이블에 어떤 플래그 컬럼이 있는지 한 번쯤 확인해 두는 것이 좋습니다. use_yn, use_mobile, is_hidden, view_type 같은 값 하나가 화면 출력과 검색 노출을 동시에 바꿀 수 있습니다.

SEO나 애드센스 준비를 할 때도 마찬가지입니다. 검색엔진이 보는 모바일 화면에서 메뉴와 내부 링크가 제대로 보이는지 직접 눌러봐야 합니다. 화면에 안 보이는 메뉴는 사용자에게도, 크롤러에게도 없는 메뉴가 될 수 있습니다.

모바일 메뉴가 사라진 진짜 이유 | use_mobile 플래그 컬럼 확인