좁으면 메뉴 안이나 푸터로

KRDS CP-425 — [모바일] 화면 너비가 충분하지 않은 경우, 언어 변경 컴포넌트를 햄버거 메뉴 내부나 푸터에 배치한다.

0. 들어가며 — 좁은 화면에 언어 변경을 어디에

이번 545편은 [모바일] 화면 너비가 충분하지 않은 경우, 언어 변경 컴포넌트를 햄버거 메뉴 내부나 푸터에 배치 하라는 규칙입니다.

데스크톱에선 — 헤더 우측 상단에 언어 변경을 두지만, 좁은 모바일에선 — 헤더 공간이 부족하죠. CP-425는 좁은 화면 에선 언어 변경을 햄버거 메뉴 안이나 푸터로 옮기라고 규정합니다. 이번 편을 풀어냅니다.

1. 원문 — 좁은 화면 시 햄버거 메뉴·푸터 배치

CP-425 (컴포넌트 > 언어 변경) “[모바일] 화면 너비가 충분하지 않은 경우, 언어 변경 컴포넌트를 햄버거 메뉴 내부나 푸터에 배치한다.”

화면 너비가 부족한 모바일에서는, 언어 변경 컴포넌트를 햄버거 메뉴 안이나 푸터에 배치하라는 뜻입니다.

정리: 좁은 화면에선 언어 변경을 햄버거 메뉴 안이나 푸터에 두라. 이게 CP-425입니다.

2. 왜 햄버거 메뉴·푸터인가

언어 변경 컴포넌트는 데스크톱에선 보통 헤더 우측 상단에 둡니다. 사용자가 어느 페이지서든 눈에 띄는 자리 에서 언어를 바꾸게요. 하지만 좁은 모바일 화면에선 헤더 공간이 부족하죠.

좁은 화면 헤더의 공간 부족:

헤더 요소 경합 모바일 헤더는 로고, 햄버거 메뉴 버튼, 검색, 로그인 등 핵심 요소만으로도 꽉 찹니다. 여기 언어 변경까지 헤더에 다 넣으면, 요소들이 너무 작아지거나 겹치고 복잡해지죠.

우선순위 좁은 화면에선 가장 핵심 요소(로고·메뉴)를 우선하고, 언어 변경 같은 보조 기능은 다른 곳으로 옮깁니다.

그래서 CP-425는 — 좁은 화면에서 언어 변경을 햄버거 메뉴 내부나 푸터에 배치하라고 합니다:

햄버거 메뉴 내부 모바일의 햄버거 메뉴(☰)를 펼치면 나오는 메뉴 안에 언어 변경을 둡니다. 사용자가 메뉴를 열어 언어를 바꾸죠. 다른 메뉴 항목과 함께 정리돼 깔끔합니다.

푸터 또는 페이지 하단 푸터에 언어 변경을 둡니다. 푸터는 보조 기능·링크를 모으는 자리라 자연스럽죠. 데스크톱·모바일 공통으로 푸터에 두기도 합니다.

둘 중(또는 둘 다) 햄버거 메뉴나 푸터 중 서비스 구조에 맞는 곳에요. 둘 다 두면 사용자가 찾기 쉽고요.

왜 이 두 위치인가:

햄버거 메뉴 모바일에서 주요 탐색·기능을 모으는 표준 위치. 언어 변경도 거기 두면 사용자가 ‘메뉴에서 설정을 찾는’ 패턴으로 찾죠.

푸터 — 보조 기능(언어·접근성·정책 링크)을 모으는 관습적 자리. 언어 변경도 자연스럽게요.

반응형 전환. 데스크톱(헤더 우측)에서 모바일(햄버거·푸터)로 화면 너비에 따라 위치를 전환합니다. 도움 패널 모바일 축약(CP-343), 따라하기 모바일 축약(CP-352)처럼 좁은 화면에 맞춰 컴포넌트를 재배치하는 반응형 정신이죠.

발견 가능성 유지. 위치를 옮기되 사용자가 언어 변경을 찾을 수 있어야 합니다. 햄버거 메뉴에 두면 메뉴 안에 명확히(언어 아이콘·이름으로), 푸터에 두면 푸터에서 눈에 띄게요. 너무 깊이 숨기면 외국 사용자가 못 찾죠. 숨기는 게 아니라 적절한 자리로 옮기는 것입니다.

이 규칙은 언어 변경의 ’모바일 배치’를 담당합니다 — 좁은 화면에선 언어 변경을 햄버거 메뉴·푸터로 옮겨(425), 헤더 공간을 아끼되 사용자가 찾게 하죠. 반응형 적응의 한 부분입니다.

정리하면 — 좁은 모바일 헤더에 언어 변경까지 넣으면 복잡하므로, 화면 너비가 부족할 때는 언어 변경을 햄버거 메뉴 내부나 푸터에 배치하되 발견 가능성을 유지해야 합니다.

3. 점검 / 개선

무엇을 점검하나

모바일 위치 — 좁은 화면에서 언어 변경이 햄버거 메뉴 내부나 푸터에 있는가.

헤더 정돈 — 모바일 헤더가 언어 변경으로 복잡해지지 않는가.

발견 가능성 — 옮긴 위치에서 사용자가 언어 변경을 찾을 수 있는가(너무 깊이 숨김 아님).

개선 방향

좁은 화면에서 언어 변경을 햄버거 메뉴 안 또는 푸터로 배치(반응형 전환).

메뉴·푸터에서 명확히(아이콘·이름). 너무 깊이 숨기지 않기.

4. 누가 담당하나 / 우리 사이트에 해당될까?

역할	책임
디자이너	반응형 언어 변경 배치 설계
퍼블리셔/개발	모바일 배치 구현

기관 유형	CP-425 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (모바일 + 다국어 지원 시)

모바일을 지원하며 다국어를 제공하는 사이트에 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 좁은 화면에서 언어 변경이 햄버거 메뉴 내부나 푸터에 있나요?

□ 모바일 헤더가 언어 변경으로 복잡해지지 않나요?

□ 옮긴 위치에서 사용자가 언어 변경을 찾을 수 있나요(너무 깊이 숨김 아님)?

❓ FAQ

Q1. 모바일 헤더에 언어 변경을 두면 안 되나요? 좁은 헤더가 로고·메뉴 등으로 꽉 차 복잡해집니다. 햄버거 메뉴· 푸터로 옮기면 정돈되죠. Q2. 햄버거 메뉴와 푸터 중 어디에 두나요? 서비스 구조에 맞는 곳에요. 둘 다 두면 찾기 쉽고요. 핵심은 사용자가 찾을 수 있는 것입니다. Q3. 옮기면 외국 사용자가 못 찾지 않나요? 너무 깊이 숨기지 말고 메뉴·푸터에서 언어 아이콘·이름으로 명확히 둡니다. 숨기는 게 아니라 적절한 자리로 옮기는 거죠.

6. 마무리

CP-425의 메시지:

좁으면 메뉴 안이나 푸터로 — 모바일에선 언어 변경을 햄버거 메뉴·푸터에 배치하라.

좁은 모바일 헤더에 언어 변경까지 넣으면 복잡합니다. 햄버거 메뉴 안이나 푸터로 옮겨 헤더를 정돈하되 발견 가능성을 유지하는 게 핵심이죠. 다음 편은 언어 링크 lang 속성입니다.

다음 편 예고 ▶ 「546. (CP-426) 링크에 lang 속성을 선언하고 레이블과 일치하는 언어 코드를 속성값으로 제공 하고 있다.」

ViewCheck는 모바일에서 언어 변경이 햄버거 메뉴·푸터에 배치되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 언어 변경(Language switcher) 가이드 — https://www.krds.go.kr/html/site/component/component_42.html

KRDS #ViewCheck #공공웹사이트 #전자정부 #디지털정부 #웹접근성 #디자인시스템 #UIUX #UI컴포넌트 #웹표준

KRDS,ViewCheck,공공웹사이트,전자정부,디지털정부,웹접근성,디자인시스템,UIUX,UI컴포넌트,웹표준