GeneratePress 모바일 메뉴 설정: 햄버거 메뉴·모바일 헤더·오프캔버스 5단계 (2026년 10월)

이 글에는 GeneratePress 제휴 링크가 포함되어 있어요. 링크를 통해 구매하셔도 가격은 같고, 사이트 운영에 일부 수수료가 돌아와요.

블로그 방문자의 상당수는 휴대폰으로 들어와요. 그런데 PC 화면만 보고 메뉴를 만들면, 모바일에서는 햄버거 버튼 옆에 ‘Menu’ 글자가 어색하게 붙어 있거나 로고가 너무 크게 보이는 일이 생기죠. 이 사이트도 GeneratePress로 운영하고 있어요. 이 글에서는 GeneratePress 공식 문서를 바탕으로 모바일 메뉴를 정리하는 5단계를 무료 기능과 GP Premium 기능으로 나눠 설명해 볼게요.

✅ 3줄 요약

GeneratePress는 화면 폭이 768px보다 좁아지면 메인 메뉴를 자동으로 햄버거 메뉴로 바꿔요. 무료 테마에서도 기본으로 동작합니다.
메뉴 글자 바꾸기, 전환 폭 바꾸기, 모바일 헤더, 고정 메뉴, 오프캔버스 패널은 GP Premium의 Menu Plus 모듈이 있어야 해요.
모바일 설정은 대부분 외모 → 사용자 정의하기 → 레이아웃 안의 Primary Navigation, Header, Sticky Navigation, Off Canvas Panel에 모여 있습니다.

GeneratePress 모바일 메뉴, 기본으로 어떻게 동작할까?

GeneratePress는 따로 설정하지 않아도 화면 폭이 768px 아래로 내려가면 메인 메뉴(Primary Navigation)를 모바일 메뉴로 바꿔 줘요. 버튼을 누르면 메뉴가 아래로 펼쳐지고, 하위 메뉴는 부모 메뉴 옆의 화살표를 눌러 엽니다. 즉 무료 테마만으로도 모바일 메뉴는 이미 동작합니다.

다만 세부 조정은 대부분 GP Premium의 Menu Plus 모듈에 들어 있어요. 설정 위치를 먼저 한눈에 보면 헷갈리지 않습니다.

GeneratePress 모바일 메뉴 설정 위치를 무료 기능과 GP Premium Menu Plus 기능으로 나눠 정리한 도식 — 모바일 메뉴 관련 설정 위치(learn.generatepress.com 문서 기준, 머니프레스 제작)

GeneratePress 모바일 메뉴 설정 5단계

1단계. 메뉴를 만들고 Primary Menu에 지정하기

외모 → 메뉴에서 ‘새 메뉴 만들기’를 눌러 이름을 정해요.
페이지나 카테고리를 골라 ‘메뉴에 추가’를 누르고, 하위로 넣을 항목은 살짝 오른쪽으로 끌어 놓아요.
아래 ‘메뉴 설정 → 표시 위치’에서 Primary Menu를 체크하고 저장해요.

2단계. 하위 메뉴를 손가락으로 누르기 쉽게 바꾸기

모바일에서는 하위 메뉴가 부모 항목 옆의 작은 화살표로 열려요. 화살표가 작아서 누르기 불편하다면 두 가지 방법이 있습니다.

Navigation Dropdown을 ‘Click – Menu Item’으로 바꾸기: 부모 항목 전체를 눌러 열 수 있지만, PC에서도 같이 바뀌고 부모 항목은 링크 역할을 하지 않아요.
부모 항목을 URL이 #인 사용자 정의 링크로 만들기: PC 동작은 그대로 두고, 부모 항목은 하위 메뉴를 여는 용도로만 써요.

3단계. ‘Menu’ 글자와 전환 폭 바꾸기 (GP Premium)

사용자 정의하기 → 레이아웃 → Primary Navigation으로 가면 두 가지 설정이 보여요.

Mobile Menu Label: 햄버거 아이콘 옆에 붙는 ‘Menu’ 글자를 ‘메뉴’처럼 바꾸거나, 비워서 아이콘만 남길 수 있어요.
Mobile Menu Breakpoint: 모바일 메뉴로 바뀌는 화면 폭이에요. 기본값은 768px이고, PC 메뉴 항목이 많아서 태블릿에서 줄이 넘친다면 값을 더 크게 잡으면 됩니다. 이 값은 모바일 헤더가 나타나는 기준도 함께 정해요.

4단계. 모바일 헤더와 고정 메뉴 켜기 (GP Premium)

레이아웃 → Header에서 Mobile Header를 On으로 바꾸면, 휴대폰에서는 원래 헤더 대신 작은 로고와 메뉴 버튼만 있는 얇은 막대가 나와요. 함께 볼 옵션은 이렇습니다.

Branding Type: 로고를 보여 줄지, 사이트 제목을 보여 줄지 골라요. 로고는 아이콘처럼 작은 이미지가 잘 어울려요.
Sticky: 스크롤해도 모바일 헤더가 화면 위에 붙어 있게 해요.
Hide when scrolling down: 아래로 내릴 때는 숨기고 위로 올릴 때 다시 보여 줘서 글 읽는 공간을 넓혀요.

PC까지 메뉴를 고정하고 싶다면 레이아웃 → Sticky Navigation에서 On, Desktop only, Mobile only 중에 고르면 됩니다.

5단계. 메뉴가 길다면 오프캔버스 패널 쓰기 (GP Premium)

카테고리가 많아서 메뉴가 길게 펼쳐진다면 오프캔버스 패널이 깔끔합니다. 버튼을 누르면 화면 옆에서 메뉴가 미끄러져 나오거나 화면 전체를 덮는 방식이에요.

외모 → 메뉴에서 쓸 메뉴를 Off Canvas Menu 위치에 지정해요.
레이아웃 → Off Canvas Panel에서 Off Canvas Panel을 Mobile only로 바꿔요. 그러면 기존 모바일 메뉴 대신 패널이 열려요.
Style에서 Slide(옆에서 열림)나 Overlay(전체 화면)를 골라요.

패널을 열었는데 메뉴가 비어 있다면 거의 대부분 Off Canvas Menu 위치에 메뉴를 지정하지 않은 경우예요.

설정 후 꼭 확인할 것

휴대폰에서 직접 열어 보고, 캐시 플러그인을 쓴다면 캐시를 비운 뒤 확인해요.
로고 이미지가 너무 크면 모바일 헤더가 무거워지니, 작은 webp 이미지로 바꾸는 것이 좋습니다. 이미지와 캐시 정리는 GeneratePress 속도 최적화 글에서 자세히 다뤘어요.

사용자 정의하기의 다른 기본 설정은 GeneratePress 설치 방법과 기본 설정에서, GP Premium 모듈을 켜는 방법은 GP Premium 라이선스 등록·모듈 켜는 법에서 확인할 수 있어요. Menu Plus 모듈이 꺼져 있으면 3~5단계 설정이 아예 보이지 않습니다.

제휴 링크

모바일 헤더·오프캔버스가 필요하다면

3~5단계 기능은 GP Premium의 Menu Plus 모듈에 들어 있어요. 2026년 10월 26일 기준으로 GP Premium은 따로 팔지 않고, GP Premium·GenerateBlocks Pro·GenerateCloud를 묶은 GeneratePress One(1개 사이트 연 $99부터, 30일 환불)에 포함돼 있습니다. 이미 GP Premium 라이선스가 있다면 지금처럼 그대로 쓰고 갱신할 수 있어요.

GeneratePress 공식 사이트에서 가격 보기 ↗

가격은 generatepress.com/pricing 기준(USD)이에요. 바뀔 수 있으니 결제 전에 공식 페이지에서 확인해 주세요.

자주 묻는 질문

Q. 무료 GeneratePress만으로도 모바일 메뉴가 나오나요?

네. 메뉴를 Primary Menu에 지정하면 768px 아래에서 자동으로 모바일 메뉴로 바뀌어요. 글자 변경이나 모바일 헤더 같은 세부 조정만 GP Premium이 필요합니다.

Q. Mobile Menu Breakpoint를 얼마로 잡아야 하나요?

기본값 768px이면 대부분의 블로그에 충분해요. PC 메뉴 항목이 많아 태블릿 화면에서 메뉴가 두 줄로 넘친다면, 브라우저 폭을 줄여 가며 넘치기 시작하는 폭을 확인하고 그보다 조금 큰 값으로 정하세요.

Q. 모바일 헤더와 오프캔버스 패널을 같이 써도 되나요?

네. 모바일 헤더는 위쪽 막대의 모양을, 오프캔버스 패널은 버튼을 눌렀을 때 메뉴가 열리는 방식을 정해요. 함께 켜서 쓸 수 있습니다.

참고한 자료

메뉴 이름과 기본값은 2026년 10월 26일 공식 문서 기준이에요. 테마 업데이트에 따라 이름이나 위치가 조금 바뀔 수 있어요.