Radio group

Radio group (라디오 그룹)

라디오 그룹은 짧은 목록에서 사람들이 단 하나의 항목만 선택하게 해 주는 요소예요. 최대 다섯 개 옵션을 나열할 충분한 공간이 있는 레이아웃에서, 또는 모든 옵션을 한 번에 보는 게 중요한 상황에서 사용해요.

공간이 부족하다면 dropdown을 대신 고려하세요. 여러 옵션을 선택하게 해야 한다면 checkbox를, 설정을 즉시 켜고 끄게 하려면 switch를 써 보세요.

출처: React Radio Group 문서

본문

Behavior (동작)

Default selection (기본 선택)

라디오 그룹은 기본적으로 선택된 옵션을 하나 보여주세요. 기본 선택은 첫 번째에 배치하고 가장 논리적인 응답이어야 해요. 나머지 옵션은 논리적인 순서로 나열하세요. 자세한 내용은 콘텐츠 섹션을 참고하세요.

Color overview

Layout (레이아웃)

라디오 그룹은 세로 또는 가로로 정렬할 수 있어요. 가로로 정렬할 때는 라벨이 입력 요소 옆이나 아래에 나타날 수 있어요.

Vertical alignment

세로 정렬 (권장) — 세로로 정렬된 라디오는 스캔하기 쉽고 지역화(localization)에도 더 좋아요.

Horizontal alignment

가로 정렬 — 가로로 정렬된 라디오는 공간이 부족한 레이아웃에서 공간을 절약하기 좋아요.

Accessibility (접근성)

라디오 그룹에는 직관적인 라벨을 넣으세요.

탭으로 이동할 때 옵션이 선택되어 있지 않으면 포커스는 첫 번째 옵션에 떨어져요. 선택이 있다면 포커스는 그 옵션에 먼저 떨어지죠.

Content (콘텐츠)

Keep labels short and clear (라벨은 짧고 명확하게 유지하세요)

개별 라디오 라벨은 가능한 한 간결하고 설명적으로 유지하세요. 완전한 문장 대신 구절(fragment)을 사용하세요. 긴 라벨을 피할 수 없다면 텍스트는 다음 줄로 줄바꿈돼요. 라디오 텍스트를 줄임표로 잘라내지 마세요. 문장형 대문자 표기를 사용하고 끝 문장 부호는 쓰지 마세요.

Radio label example 1

Radio label example 2

라디오 라벨에는 마침표를 생략하세요. 라디오 그룹을 소개하는 라벨은 콜론으로 끝내지 마세요. 자세한 내용은 Microsoft Writing Style Guide의 Periods를 참고하세요.

문장형 대문자 표기—첫 단어만 대문자로—를 사용하세요. 자세한 내용은 Microsoft Writing Style Guide의 Capitalization을 참고하세요.

Use subtitles for more context (더 많은 맥락을 위한 부제 사용)

그룹의 모든 옵션에 추가 설명이 필요한 복잡한 시나리오에서는 부제(subtext)를 사용하세요. 부제는 마침표로 끝나는 완전한 문장이어야 해요. 일부 옵션만 설명이 필요하다면 부제 대신 팝업 툴팁이 있는 info label을 고려하고, 설명이 더 필요한 옵션에만 추가하세요.

Follow logical order (논리적 순서 따르기)

옵션은 작은 것에서 큰 것, 단순한 것에서 복잡한 것, 안전한 것에서 위험한 것 등 논리적인 순서로 나열하세요. 말이 되면 "None" 같은 옵션을 포함해서 사람들이 선택을 하지 않을 수도 있게 해 주세요. 알파벳순으로 나열한다면, 지역화되면 순서가 바뀔 수 있다는 점을 유의하세요.

더 알아보기 (Learn more)