Info label
Info label (인포 라벨)
Info label은 라벨에 정보 버튼을 결합한 컴포넌트로, 선택하면 popover에 추가 콘텐츠를 보여줘요. popover에서 보충 정보를 보여줘야 할 때마다 사용하면 좋아요.
추가 정보를 보여줄 필요가 없다면 성능을 위해 표준 Label을 사용하세요. 작업을 완료하는 데 필요한 중요 정보에는 정보 버튼을 사용하지 마세요. 대신 필수 콘텐츠는 도움말 텍스트처럼 항상 보이는 곳에 배치하세요. 정보 표면화에 대한 자세한 내용은 Field와 Popover를 참고하세요.
출처: Info label 문서
본문
Behavior (동작)
info label에 정보 버튼 옵션을 적용하면 라벨 옆에 정보 버튼이 나타나요. 사용자가 정보 버튼을 선택하면 popover가 나타나고, 다른 것을 선택하거나 Esc를 눌러 닫기 전까지 계속 보여요. Popover는 서식과 링크를 포함할 수 있어요.
Layout (레이아웃)
Info label은 라벨, 정보 버튼, popover 사이의 적절한 배치를 고려해요. Popover가 나타나면 그 beak(꼬리)이 정보 버튼의 가운데에 정렬되고, popover는 정보 버튼의 위, 아래, 또는 양쪽에 나타나요. Popover의 배치는 필수 정보를 차단할 가능성이 가장 낮도록 프로그래밍 방식으로 결정돼요.
인터페이스에 info label을 여러 개 두어 어수선하게 만들지 마세요. 특히 키보드와 스크린 리더를 사용하는 사람들에게 인지 과부하를 초래할 수 있어요. 한 영역에 두세 개 이상 필요하다고 생각되면, 한눈에 보는 명확성과 사용 편의성을 막는 더 큰 디자인 문제가 있을 수 있어요. 가능하다면 경험을 단순화하는 것을 고려하세요.
popover의 정보가 길거나 작업 완료에 중요하다면, info label과 popover를 쓰는 대신 도입 문단에서 정보의 일부나 전부를 요약하는 것도 고려하세요.
중요한 정보는 사람들이 쉽게 찾을 수 있도록 항상 보이는 곳에 배치하세요. 사람들이 놓칠 수 있으므로 중요 정보를 정보 버튼에 숨기지 마세요.
Accessibility (접근성)
정보 버튼이 활성화되면 aria-label은 보이는 라벨과 "more information"(추가 정보)을 자동으로 결합해서, 스크린 리더가 "{보이는 라벨} more information button"으로 읽어요. 정보 버튼이 선택된 상태에서 Enter를 누르면 popover가 열려요.
정보 버튼이 페이지의 탭 순서에 포함되어 키보드 사용자가 접근할 수 있도록 하세요.
키보드와 스크린 리더를 사용하는 사람에게 인지 과부하를 초래할 수 있으므로, 정보 버튼을 여러 개 두어 인터페이스를 어수선하게 만들지 마세요.
Trapping focus (포커스 가두기)
기본적으로 popover는 포커스를 가두지 않아요. Popover는 인라인으로 렌더링되므로, 사람들은 Tab 키로 popover 안으로 이동하고 다시 Tab을 눌러 popover를 닫을 수 있어요. trapFocus 속성을 켜면 키보드 사용자가 popover 콘텐츠에 여전히 쉽게 접근할 수 있는지 확인하세요.
Target size requirements (대상 크기 요구사항)
작은 크기(20 x 20 픽셀)의 info label은 Field처럼 다른 상호작용 요소와 최소 2픽셀의 여백이 있어야 해요. 다른 컴포넌트 바로 옆에 있거나 최종 사용자가 명시적으로 작은/컴팩트 밀도 레이아웃을 선택하지 않았다면 작은 크기를 선택하지 마세요.
Content (콘텐츠)
Only include supplemental info (보충 정보만 포함하세요)
popover에 표시되는 정보를 보충적이고 필수가 아닌 정보로 제한하세요. 일종의 "참고(FYI)"라고 생각하면 돼요. 정보가 작업 완료에 필수적이라면 상호작용을 요구하는 정보 버튼에 두지 말고, 섹션 제목 아래의 설명 본문 텍스트처럼 다른 곳의 지속적인 텍스트에 배치하세요.
콘텐츠를 간결하고 한눈에 이해하기 쉽게 유지하세요 — 한두 개의 짧은 문장이나 단일 문장 조각이면 충분해요. 여러 문단, 불릿 목록, 기타 복잡한 서식은 피하세요. 첫 단어를 대문자로 쓰고 완전한 문장은 마침표로 끝내세요.
보이는 라벨에 이미 있는 정보를 반복하지 마세요. 다른 곳에서 볼 수 있는 정보를 반복하지 마세요.
Optional: use a link to help people dive deeper (선택: 더 깊이 파고들도록 링크 사용)
더 많은 맥락이 도움이 될 복잡한 주제의 경우, popover 하단에 추가 정보로 연결되는 링크를 두세요. 링크에 비중을 주기 위해 기본 링크 처리를 사용하세요. 선택하면 링크가 새 탭이나 패널에서 열려요. popover에 링크를 두 개 이상 넣지 마세요.
링크가 대부분의 사람들에게 유용할 것 같다면, 정보 버튼 안에 숨기는 대신 더 눈에 띄는 위치에 두는 것을 고려하세요.
링크 텍스트가 링크 대상에서 제공되는 정보에 대해 구체적이도록 하세요. 스크린 리더 사용자는 주변 콘텐츠의 맥락 없이 들을 수 있으므로, "Learn more" 같은 일반적인 문구를 단독으로 쓰지 마세요. 자세한 내용은 Link를 참고하세요.
링크 텍스트를 구체적으로 만드세요.
더 알아보기 (Learn more)
- Info label 스토리북 및 React 가이드 확인
- 필수 정보는 항상 보이는 곳(도움말 텍스트 등)에, 정보 입력에는 Field와 Popover를 함께 참고하세요
- 성능이 중요하면 표준 Label을 사용하세요