언어 변경 Language switcher

언어 변경은 서비스의 콘텐츠를 표시할 언어를 변경하거나 별도의 외국어 서비스로 이동하는 데 사용되는 요소이다. 한국어가 익숙하지 않은 사용자가 콘텐츠 표시 언어를 변경할 수 있는 수단을 발견하지 못한다면 서비스를 이용할 수 없게 되므로, 디지털 정부서비스로 직관적이고 일관된 방식으로 언어 변경을 제공하는 것이 매우 중요하다.

KRDS 가이드

기본

버튼 글자는 내용으로 넣고, languages에 언어 목록(code, 그 언어로 쓴 name)을 줍니다. 목록에서 언어를 고르면 [(language)]에 언어 코드가 담기고, 목록을 닫은 뒤 초점을 버튼으로 돌려주고 (closed)를 보냅니다. 고른 언어는 화면낭독기에 '선택됨'(aria-current)으로 알리고, 각 항목에는 그 언어의 lang이 붙습니다. krdsLanguageTop을 붙인 요소를 넣으면 목록 위에 현재 언어를 표시할 수 있습니다.

목록은 Esc 키·바깥 클릭·초점 이탈로 닫힙니다. 목록 위치는 dropPosition(center 기본, left, right)으로 정하고, center는 목록이 화면 밖으로 넘치면 좌우를 맞춥니다.

import { Component, computed, signal } from '@angular/core'
import { KrdsLanguageSwitcher, KrdsLanguageTop, type KrdsLanguage } from '@krds.ui/angular'

@Component({
  selector: 'demo-language-switcher-basic',
  imports: [KrdsLanguageSwitcher, KrdsLanguageTop],
  template: `
    <div style="height: 400px; padding: 50px">
      <krds-language-switcher [languages]="languages" [(language)]="language">
        언어변경
        <div krdsLanguageTop>
          <p class="current-laguage">
            <span>현재 언어</span>
            <strong>{{ currentName() }}</strong>
          </p>
        </div>
      </krds-language-switcher>
      <p style="margin-top: 20px">선택된 언어: {{ language() }}</p>
    </div>
  `
})
export default class LanguageSwitcherBasic {
  readonly languages: KrdsLanguage[] = [
    { code: 'ko', name: '한국어' },
    { code: 'en', name: 'English (영어)' },
    { code: 'zh', name: '中文 (중국어)' },
    { code: 'ja', name: '日本語 (일본어)' },
    { code: 'fr', name: 'français (프랑스어)' }
  ]
  readonly language = signal('')
  readonly currentName = computed(() => this.languages.find(item => item.code === this.language())?.name || '선택해주세요')
}

외부 페이지 이동

type="external"이면 각 언어가 url로 새 창에서 이동하는 링크가 됩니다.

import { Component } from '@angular/core'
import { KrdsLanguageSwitcher, type KrdsLanguage } from '@krds.ui/angular'

@Component({
  selector: 'demo-language-switcher-external',
  imports: [KrdsLanguageSwitcher],
  template: `
    <div style="height: 400px; padding: 50px">
      <krds-language-switcher type="external" [languages]="languages"> 언어변경 </krds-language-switcher>
    </div>
  `
})
export default class LanguageSwitcherExternal {
  readonly languages: KrdsLanguage[] = [
    { code: 'ko', name: '한국어', url: 'https://example.com/ko' },
    { code: 'en', name: 'English (영어)', url: 'https://example.com/en' },
    { code: 'zh', name: '中文 (중국어)', url: 'https://example.com/zh' },
    { code: 'ja', name: '日本語 (일본어)', url: 'https://example.com/ja' },
    { code: 'fr', name: 'français (프랑스어)', url: 'https://example.com/fr' }
  ]
}

드롭다운

언어 변경과 화면 크기 조정이 쓰는 드롭다운 동작은 krdsDropdown으로 따로 쓸 수 있습니다. KRDS 드롭다운 마크업(.drop-btn 버튼과 .drop-menu)을 감싼 요소에 붙이면 버튼으로 열고 닫고(aria-expanded), Esc 키는 닫은 뒤 초점을 버튼으로 돌려주고, 바깥 클릭·초점 이탈로 닫습니다. 열림은 [(open)]으로, 메뉴 위치는 position으로 정하고, 템플릿 참조(#menu="krdsDropdown")로 toggle()·close()를 부를 수 있습니다. 헤더 유틸리티 메뉴의 드롭다운도 이것으로 만듭니다.

import { Component } from '@angular/core'
import { KrdsDropdown } from '@krds.ui/angular'

@Component({
  selector: 'demo-language-switcher-dropdown',
  imports: [KrdsDropdown],
  template: `
    <div style="height: 240px; padding: 50px">
      <div krdsDropdown #menu="krdsDropdown">
        <button type="button" class="krds-btn small text drop-btn">고객센터 <i class="svg-icon ico-toggle" aria-hidden="true"></i></button>
        <div class="drop-menu">
          <div class="drop-in">
            <ul class="drop-list">
              <li><a href="#!" class="item-link" (click)="menu.close(true)">자주 묻는 질문</a></li>
              <li><a href="#!" class="item-link" (click)="menu.close(true)">1:1 문의</a></li>
              <li><a href="#!" class="item-link" (click)="menu.close(true)">공지사항</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  `
})
export default class LanguageSwitcherDropdown {}

KrdsLanguageSwitcher

선택자 krds-language-switcher

Inputs

이름	타입	기본값	설명
languages (필수)	KrdsLanguage[]	-	언어 목록
[(language)]	string	''	고른 언어 코드
type	'default' | 'external'	'default'	default는 언어 선택, external은 언어별 누리집 링크
dropPosition	'center' | 'left' | 'right'	'center'	메뉴 위치

Outputs

이름	값	설명
closed	void	언어를 골라 목록을 닫았을 때

타입

/** 언어 */
export interface KrdsLanguage {
  /** 언어 코드 (lang 속성) */
  code: string
  /** 그 언어로 쓴 이름 */
  name: string
  /** 다른 누리집으로 가는 주소 (type="external") */
  url?: string
}

KrdsLanguageTop

선택자 [krdsLanguageTop]

Inputs

없음

KrdsDropdown

선택자 [krdsDropdown], 템플릿 참조 #ref="krdsDropdown"

Inputs

이름	타입	기본값	설명
[(open)]	boolean	false	열림
position	'center' | 'left' | 'right'	'center'	메뉴 위치

Methods

이름	시그니처	설명
toggle	(): void	열고 닫기
close	(returnFocus?: boolean): void	닫기 (returnFocus면 버튼으로 초점)