2개는 링크, 3개부터 드롭다운

KRDS CP-420 — 서비스가 2개의 언어를 지원하는 경우 링크, 3개 이상의 언어를 지원하는 경우 드롭다운을 사용하고 있다.

0. 들어가며 — 언어를 어떻게 바꾸게 할까

이번 540편부터 언어 변경(Language switcher) 그룹입니다(7개). 첫 규칙은 2개 언어는 링크, 3개 이상은 드롭 다운을 사용하라는 규칙입니다.

다국어 공공 서비스에서 — 언어를 바꾸는 UI를, 지원 언어 수에 맞게 골라야 하죠. 2개면 한 번 클릭으로 바로 바꾸는 링크가, 여러 개면 목록에서 고르는 드롭다운이 적합합니다. CP-420은 언어 수별 UI를 규정합니다. 이번 편을 풀어 냅니다.

1. 원문 — 2개=링크, 3개 이상=드롭다운

CP-420 (컴포넌트 > 언어 변경) “서비스가 2개의 언어를 지원하는 경우 링크, 3개 이상의 언어를 지원하는 경우 드롭다운을 사용하고 있다.”

지원 언어가 2개면 언어 변경을 링크로, 3개 이상이면 드롭다운으로 제공하라는 뜻입니다.

정리: 2개 언어는 링크, 3개 이상은 드롭다운으로. 이게 CP-420입니다.

2. 왜 언어 수에 따라 UI를 나누나

공공 서비스는 외국인 주민·관광객·다문화 가정을 위해 다국어를 지원합니다(한국어 + 영어, 또는 + 중국어·일본 어·베트남어 등). 사용자가 자기 언어로 바꾸는 언어 변경 UI가 필요하죠. 이 UI를 지원 언어 수에 맞게 고르는 게 CP-420입니다.

① 2개 언어 — 링크. 지원 언어가 2개(예: 한국어 ↔ 영어)면 — 링크가 적합합니다.

토글 방식 2개면 ‘한국어’에서 ’영어’로, 또는 그 반대로 한 번 클릭으로 바로 전환됩니다. 현재 한국어 화면이면 ’English’ 링크 하나만 보이고, 누르면 영어로 바뀌죠. 목록을 펼칠 필요 없이 즉시 전환이 빠르고 간편 합니다.

드롭다운은 과함 — 2개뿐인데 드롭다운을 쓰면 — 펼치는 클릭이 한 번 더 필요해 불필요하죠(셀렉트 적은 옵션 지양 CP-298 정신). 링크 하나로 충분합니다.

② 3개 이상 언어 — 드롭다운. 지원 언어가 3개 이상이면 — 드롭다운이 적합합니다.

목록 선택 여러 언어(한국어·영어·중국어·일본어·베트남어 등)를 링크로 다 나열하면 자리를 너무 차지하고 복잡하죠. 드롭다운으로 평소엔 현재 언어만 보이고, 누르면 언어 목록이 펼쳐져 고르게 합니다. 공간을 아끼고 깔끔하죠(셀렉트 7~20개 정신 CP-298, 여기선 3개부터).

확장성 — 언어가 늘어도 — 드롭다운 목록에 추가하면 되니 레이아웃이 안 깨집니다.

왜 이 경계(2 vs 3)인가:

2개 — 토글이라 링크 하나가 가장 빠름.

3개 이상 — 여럿 중 선택이라 드롭다운이 깔끔·확장적.

라디오/셀렉트 옵션 수 가이드(적으면 펼침, 많으면 접음)와 같은 정신이죠. 적은 선택지(2개)는 바로 보이는 링크, 많은 선택지(3개+)는 접는 드롭다운입니다.

일관 위치. 언어 변경 UI는 — 보통 헤더 우측 상단(또는 푸터)에 일관되게 둡니다. 사용자가 — 어느 페이지서든 같은 자리에서 언어를 바꾸게요. 모바일에선 햄버거 메뉴·푸터로(CP-425).

이 규칙은 언어 변경의 ’UI 형태 선택’을 담당합니다 — 언어 수에 맞는 UI(2개 링크, 3개+ 드롭다운)를 골라(420), 사용자가 효율적으로 언어를 바꾸게 하죠. 이후 언어 변경 규칙들(레이블·코드·국가명·새 창·모바일·lang 속성)이 이 위에 쌓입니다.

정리하면 — 지원 언어가 2개면 한 번에 전환되는 링크가, 3개 이상이면 목록에서 고르는 드롭다운이 효율적이므로, 언어 수에 맞는 UI를 사용해야 합니다.

3. 점검 / 개선

무엇을 점검하나

2개=링크 — 2개 언어 지원 시 링크(토글)로 제공하는가.

3개 이상=드롭다운 — 3개 이상 시 드롭다운으로 제공하는가.

일관 위치 — 언어 변경 UI가 일관된 위치(헤더·푸터)에 있는가.

개선 방향

2개 언어는 ‘English’ 같은 링크 하나(즉시 전환). 3개 이상은 드롭다운 목록.

헤더 우측 등 일관 위치. 모바일은 햄버거·푸터(CP-425).

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

역할	책임
기획/UX	지원 언어 수·UI 형태 결정
퍼블리셔/개발	링크/드롭다운 구현

기관 유형	CP-420 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 조건부 (다국어 지원 시)

다국어를 지원하는 사이트에 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 2개 언어 지원 시 링크(토글)로 제공하나요?

□ 3개 이상 시 드롭다운으로 제공하나요?

□ 언어 변경 UI가 일관된 위치(헤더·푸터)에 있나요?

❓ FAQ

Q1. 2개인데 드롭다운을 쓰면 안 되나요? 펼치는 클릭이 한 번 더 필요해 불필요합니다. 2개는 링크 하나로 즉시 전환이 빠르죠. Q2. 3개를 링크로 다 나열하면요? 자리를 차지하고 복잡합니다. 드롭다운으로 접어 공간을 아끼고 확장성을 확보 하죠. Q3. 언어 변경 UI는 어디에 두나요? 보통 헤더 우측 상단이나 푸터에 일관되게요. 모바일은 햄버거 메뉴·푸터입니다 (CP-425).

6. 마무리

CP-420의 메시지:

2개는 링크, 3개부터 드롭다운 — 언어 수에 맞는 UI를 사용하라.

2개 언어면 한 번에 전환되는 링크가, 3개 이상이면 목록 드롭다운이 효율적입니다. 언어 수에 맞는 UI를 고르는 게 핵심이죠. 다음 편은 링크 레이블 아이콘·언어명입니다.

다음 편 예고 ▶ 「541. (CP-421) 링크 레이블에 아이콘과 전환되는 언어의 이름을 해당 언어로 제공하고 있다.」

ViewCheck는 언어 변경 UI가 언어 수에 맞는지를 진단합니다.

📚 참고 출처

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

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

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