홈페이지 모바일 최적화하는 법
햄버거 메뉴 만들기

📵 PC에서 잘 보이는 사이트가 모바일에서 깨진다

열심히 만든 홈페이지를 스마트폰으로 열었더니 메뉴가 화면 밖으로 튀어나오고, 글씨는 너무 작아서 읽기 힘들고, 버튼은 손가락으로 누르기도 어렵다. PC에서는 분명 잘 됐는데.

요즘 방문자 절반 이상은 모바일로 접속한다. 모바일에서 사이트가 제대로 안 보이면 그냥 뒤로 나가버린다. 모바일 최적화는 선택이 아니라 기본이다.

🔄 반응형이 뭔가요?

반응형 디자인은 화면 크기에 따라 레이아웃이 자동으로 바뀌는 것이다. 같은 사이트인데 PC에서 열면 가로로 넓게, 모바일에서 열면 세로로 좁게 보이게 만드는 것이다. 별도의 모바일 사이트를 만드는 게 아니라, 하나의 파일이 두 가지 환경에서 모두 잘 보이도록 하는 기술이다.

CSS의 미디어 쿼리(Media Query)라는 기능으로 구현한다. "화면 너비가 768px 이하면 이 스타일을 적용해"라고 조건을 걸어두는 것이다. 직접 코딩할 필요 없이 AI한테 맡기면 된다.

☰ 햄버거 메뉴가 뭔가요?

모바일에서 네비게이션 메뉴를 ☰ 아이콘(세 줄 아이콘)으로 접어두는 것이다. 아이콘을 클릭하면 메뉴 목록이 펼쳐지고, 다시 클릭하면 닫힌다. 모바일 앱이나 사이트에서 흔히 보는 그 메뉴가 맞다.

왜 필요하냐고? 모바일 화면은 좁아서 PC처럼 메뉴를 한 줄로 펼쳐놓으면 다 안 들어간다. 햄버거 메뉴로 접어두면 화면을 효율적으로 쓸 수 있고, 메뉴 항목을 손가락으로 탭하기도 훨씬 편해진다.

🛠️ 만드는 순서 — AI한테 맡기면 된다

직접 코딩할 필요 없다. AI한테 정확하게 요청하면 필요한 코드를 전부 추가해준다.

🔍 확인하는 법 — F12 개발자 도구

코드를 수정했으면 실제 모바일에서 어떻게 보이는지 확인해야 한다. 스마트폰으로 일일이 확인하지 않아도 된다. 브라우저에 내장된 개발자 도구를 쓰면 된다.

🚧 자주 막히는 부분

✅ 마무리 — 모바일 최적화는 SEO에도 영향을 준다

모바일 최적화가 끝나면 사용자 경험뿐 아니라 구글 검색 순위에도 도움이 된다. 구글은 모바일 친화적인 사이트를 더 높이 평가한다. 실제로 구글은 모바일 버전을 기준으로 페이지를 평가하는 "모바일 퍼스트 인덱싱"을 적용하고 있다.

모바일에서 잘 보이고, 빠르게 로드되고, 터치하기 편한 사이트. 이 세 가지가 갖춰지면 검색 순위와 방문자 만족도 모두 올라간다.

• 모바일에서 햄버거 메뉴가 잘 열리고 닫히는지 확인
• 글씨 크기가 모바일에서 읽기 편한지 확인
• 버튼이 손가락으로 누르기 충분히 큰지 확인
• 이미지가 화면 밖으로 튀어나오지 않는지 확인