웹 인터페이스용 국가 깃발
접근 가능한 글로벌 웹사이트를 위한 국가 깃발 SVG 다운로드
웹사이트, 앱, 대시보드, 지역 선택기, 서버 목록 및 현지화 UI용으로 제작된 256개 국가 깃발 SVG 세트를 다운로드하세요. 파일은 작고, 확장 가능하며, 캐시 친화적이고 명확한 텍스트 레이블과 함께 사용하도록 설계되었습니다.
개요
국가 깃발을 언어의 단축키가 아닌 지역 신호로 사용하세요
국가 깃발은 국가, 지역, 시장, 배송 구역, 통화, 사무실 위치 또는 서버 위치를 선택할 때 가장 효과적입니다. 현지화를 지원할 수 있지만, 하나의 언어가 여러 국가에 속할 수 있고 하나의 국가에 여러 언어가 존재할 수 있으므로 언어 이름을 대체해서는 안 됩니다.
적합성 확인
국가 깃발과 언어 선택기는 서로 다른 UX 문제를 해결합니다
깃발은 지리적 위치를 나타내는 강력한 시각적 신호입니다. 언어 선택기는 읽기 및 접근성 결정입니다. 가장 깔끔한 인터페이스는 깃발만 의존하지 않고 원어 이름, 지역명 또는 국가명과 함께 깃발을 결합합니다.
지역적 맥락을 위해 깃발을 사용하세요
- 가시적 레이블이 국가 또는 시장명을 표시하는 국가 또는 지역 선택기.
- 서버 위치 목록, 배송 구역, 사무실 위치, 통화 선택기 및 지역별 가격표.
- URL, 복사본, 메타데이터 및 깃발이 모두 동일한 지역을 가리키는 현지화된 랜딩 페이지.
- 작은 시각적 신호가 사용자가 국가별 행을 빠르게 스캔하는 데 도움을 주는 컴팩트 대시보드.
깃발만으로 언어를 표시하는 것을 피하세요
- Deutsch, English, Espanol 같은 언어 이름 없이 깃발만 표시하는 언어 전환기.
- 한 국가에 여러 공식 언어가 있거나 한 언어가 여러 국가에 걸쳐 있는 시장.
- 사용자의 결정을 돕지 않고 네트워크 요청만 추가하는 장식용 깃발 무리.
- 이미지가 의미 있을 때 국가를 설명하지 않고 DE, 깃발 또는 아이콘만 표시하는 대체 텍스트.
목차
깃발 세트
이 컬렉션은 국가 코드 워크플로우를 변경하지 않고 여러 형태를 제공합니다
각 세트에는 256개의 SVG 깃발이 포함되어 있습니다. 빽빽한 레이아웃에는 직사각형 깃발을, 컴팩트 선택기에는 원형 또는 정사각형을, 시각적 강조가 필요할 때는 물결 모양 깃발을, 배지나 프리미엄 콜아웃에는 타원형을 사용하세요. 국가 코드는 안정적인 입력값이므로 구현은 간단하게 유지할 수 있습니다.
직사각형 깃발
국가 목록, 가격표, 서버 위치 및 깃발이 행에 깔끔하게 정렬되어야 하는 모든 UI에는 클래식 종횡비를 사용하세요.
원형 및 정사각형 깃발
프로필 선택기, 언어 드로어, 모바일 내비게이션, 테이블 칩, 작은 상태 컨트롤에는 컴팩트한 모양을 사용하세요.
물결 모양 깃발
페이지가 더 편집자 느낌을 줘야 할 때, 예를 들어 히어로 섹션, 국가 하이라이트 또는 추천 지역 패널에 물결 모양 깃발을 사용하세요.
타원형 깃발
부드러운 배지, 마켓플레이스 라벨, 제품 콜아웃 및 날카로운 모서리가 무거워 보이는 레이아웃에는 타원형 깃발을 사용하세요.
접근성
접근 가능한 깃발 UI에는 텍스트, 라벨, 그리고 명확한 의미가 필요합니다
깃발은 선택을 장식할 수 있지만, 접근 가능한 이름은 선택을 설명해야 합니다. 이미지가 정보를 제공할 때는 'Flag of Germany'와 같은 대체 텍스트를 사용하고, 장식용 깃발에는 빈 대체 텍스트를 사용하며, 중요한 컨트롤 옆에는 보이는 언어 또는 국가 이름을 배치하세요.
정보를 전달하는 깃발 설명
깃발이 국가 정보를 전달할 때는 명확한 대체 텍스트를 사용하세요. 동일한 국가명이 이미 옆에 보인다면 깃발은 장식용일 수 있습니다.
깃발만 의존하지 마세요
컨트롤은 국가, 지역 또는 언어 이름을 텍스트로 표시해야 합니다. 이는 화면 읽기 프로그램, 번역 도구 및 깃발을 인식하지 못하는 사용자에게 도움이 됩니다.
이미지뿐 아니라 컨트롤 크기도 조정
작은 SVG 파일은 괜찮지만, 클릭 가능한 영역은 모바일에서 편안하고 폼 및 메뉴에서 키보드 포커스가 가능해야 합니다.
성능
전송 경로가 단순할 때 SVG 깃발은 선명하고 저렴하게 제공됩니다
SVG는 모든 크기에서 가장자리가 선명하게 유지되고 파일 크기가 작아 국가 깃발에 적합한 기본 형식입니다. 마크업을 최적화하고, 파일을 적극적으로 캐시하며, 한 페이지에 수백 개의 인라인 SVG를 삽입하는 것을 피하고, 사용자가 볼 수 있거나 곧 필요로 하는 깃발만 로드하세요.
선명한 가장자리를 위해 SVG 사용
깃발은 날카로운 기하학적 형태와 평면 색상을 포함하므로 SVG가 여러 래스터 크기보다 보통 더 작고 깔끔합니다.
파일 경로별 캐시
깃발 URL을 안정적으로 유지하고 정적 파일 캐싱이 반복 방문 시 지루한 작업을 처리하게 하세요.
거대한 인라인 덤프 피하기
인라인 SVG는 몇 개 아이콘에 유용하지만 수백 개의 인라인 깃발이 있는 페이지는 파싱이 무거워집니다.
레이아웃 공간 확보
마크업이나 CSS에서 너비와 높이를 설정하여 깃발 로딩 중 인터페이스가 튀지 않도록 하세요.
구현
깃발을 예쁘게 꾸미기 전에 마크업을 시맨틱하게 유지하세요
실제 링크나 버튼으로 시작하고, 텍스트 레이블을 포함하며, CSS로 깃발 크기를 설정하고, SVG 파일을 캐시 가능한 경로에서 로드하세요. 이렇게 하면 검색 엔진과 보조 기술에 유용한 컨텍스트를 제공하면서 디자이너는 빠른 시각적 신호를 얻을 수 있습니다.
접근 가능한 국가 옵션 마크업
이 패턴은 지역 선택기, 국가 필터, 현지화된 스토어 링크에 적합하며, 가시적인 텍스트가 실제 의미를 전달합니다.
<a class="country-option" href="/de-de/" hreflang="de-DE">
<img class="country-option__flag"
src="/svg/flages/4x3/de.svg"
width="24"
height="18"
alt="Flag of Germany" />
<span>Deutsch - Germany</span>
</a>안정적인 깃발 크기 조절
고정 크기는 레이아웃 이동을 방지하고 다양한 깃발 모양을 더 쉽게 스캔할 수 있게 합니다.
.country-option {
display: inline-flex;
min-height: 44px;
align-items: center;
gap: 10px;
padding: 8px 12px;
}
.country-option__flag {
width: 24px;
height: 18px;
flex: 0 0 auto;
object-fit: cover;
border-radius: 4px;
}SEO 및 UX
깃발은 주변 페이지가 지역을 설명할 때만 SEO에 도움이 됩니다
검색 엔진은 깃발이 있다고 해서 페이지 순위를 매기지 않습니다. URL, 제목, hreflang 태그, 메타데이터, 링크 텍스트, 가시적 내용이 모두 동일한 지역 또는 현지화 의도를 명확히 할 때 깃발이 도움이 됩니다.
문화 인식 링크와 깃발 일치
현지화된 URL과 hreflang 태그는 이미지보다 더 강력한 SEO 의미를 지닙니다. 깃발은 이러한 신호를 지원해야 하며 대체해서는 안 됩니다.
제목, H1, 설명을 명확히 구분
집중된 제목, 자연스러운 H1, 그리고 사용자가 깃발 세트를 검토하거나 다운로드하도록 유도하는 메타 설명을 사용하세요.
의미 있는 파일명과 대체 텍스트 사용
de.svg 같은 파일명은 코드에 적합하지만, 가시적 콘텐츠와 접근 가능한 레이블에는 독일 또는 해당 국가명을 명시해야 합니다.
노력을 줄이는 곳에 깃발 사용
깃발이 사용자를 혼란스럽게 한다면 제거하거나 더 명확한 텍스트를 추가하세요. 좋은 현지화 UI는 별도의 설명 없이도 명확해야 합니다.
시작하기
무료 샘플부터 시작한 후 인터페이스에 필요한 형태를 선택하세요
실제 선택기, 테이블, 메뉴 또는 대시보드에서 샘플을 먼저 테스트하세요. 간격과 레이블이 적절하면 전체 세트를 구매하고 동일한 국가 코드 기반 구현을 전체 컬렉션에 사용하세요.
자주 묻는 질문
언어 선택에 국가 깃발을 사용해도 될까요?
국가 깃발은 보조 시각 신호로만 사용하세요. 언어 선택기는 언어 이름도 함께 표시해야 합니다. 하나의 언어가 여러 국가에서 사용될 수 있고, 하나의 국가에 여러 언어가 존재할 수 있기 때문입니다.
왜 SVG 깃발이 PNG 깃발보다 나은가요?
SVG 깃발은 모든 크기에서 선명하며 보통 매우 작은 파일 크기를 가지며 반응형 레이아웃에 잘 맞습니다. PNG는 레거시 시스템에 유용할 수 있지만 고정된 이미지 크기가 필요합니다.
깃발에 대한 대체 텍스트는 어떻게 작성해야 하나요?
깃발이 의미가 있을 때는 'Flag of Germany'와 같은 텍스트를 사용하세요. 국가명이 이미 보이고 이미지가 장식용이라면 빈 대체 텍스트를 사용해 화면 읽기 프로그램이 중복해서 읽지 않도록 하세요.
깃발만으로 SEO가 향상되나요?
아니요. 깃발은 페이지에 명확한 지역 텍스트, 문화 인식 URL, hreflang 태그, 유용한 메타데이터 및 접근 가능한 레이블이 있을 때만 SEO를 지원합니다.
세트에는 몇 개의 깃발이 포함되어 있나요?
각 세트에는 256개의 SVG 국가 깃발이 포함되어 있습니다. 구축하는 레이아웃에 따라 직사각형, 정사각형, 원형, 물결형, 타원형을 사용할 수 있습니다.
많은 깃발이 있는 페이지를 어떻게 빠르게 유지할 수 있나요?
깃발을 캐시 가능한 경로에서 최적화된 SVG 파일로 제공하고, 표시 크기를 확보하며, 일반 이미지 파일로 충분할 때 수백 개의 인라인 SVG 문서 렌더링을 피하세요.