토글 스위치
알림처럼 켜짐·꺼짐 두 상태를 즉시 바꿀 때 사용합니다. 제출이 필요한 동의 항목에는 체크박스가 더 적합합니다.
알림이 꺼져 있습니다.
WEB INTERACTION PLAYGROUND
직접 만져보는 웹 UI 기능
어떤 상황에 어떤 인터랙션이 효과적일까요? 설명을 읽고 예제를 조작해 보세요.
이 페이지의 입력은 서버에 전송하거나 저장하지 않습니다. 새로고침하면 초기화됩니다. Tab 키로 이동하고 Space·Enter·방향키로 조작해 보세요.
선택과 설정
체크박스
관심 분야처럼 여러 항목을 함께 선택할 때 사용합니다. 아무것도 선택하지 않는 것도 가능합니다.
라디오 버튼
배송 방식처럼 한 가지 옵션만 고를 때 사용합니다. 선택지를 한눈에 비교할 수 있습니다.
드롭다운
선택지가 많고 화면 공간이 좁을 때 유용합니다. 반드시 비교해야 하는 짧은 선택지는 라디오 버튼을 고려하세요.
선택한 도시가 없습니다.
슬라이더
음량이나 밝기처럼 연속적인 값을 빠르게 조절할 때 사용합니다. 현재 값을 함께 보여주세요.
목록과 탐색
검색 가능한 리스트
목록에서 원하는 항목을 빠르게 찾을 때 사용합니다. 결과 수와 빈 결과도 알려주세요.
- 사과
- 바나나
- 딸기
- 포도
- 수박
5개 항목
탭
서로 관련된 정보를 같은 공간에서 전환할 때 사용합니다. 탭에서는 좌우 방향키로도 이동할 수 있습니다.
제품의 핵심 정보를 보여주는 공간입니다.
크기, 소재, 사용 방법 등 상세 정보를 담습니다.
사용자의 경험과 평가를 모아 보여줍니다.
아코디언
자주 묻는 질문처럼 필요한 정보만 펼쳐 볼 때 사용합니다. 브라우저 기본 details 요소로 구현할 수 있습니다.
설치가 필요한가요?
이 예제는 별도 설치 없이 웹브라우저에서 사용할 수 있습니다.
여러 항목을 열 수 있나요?
네. 이 예제에서는 여러 답변을 동시에 펼칠 수 있습니다.
항목 추가·삭제
할 일이나 선택한 항목을 관리할 때 사용합니다. 추가와 삭제 결과를 즉시 알려줍니다.
할 일을 추가해 보세요.
입력과 피드백
모달 대화상자
확인이나 중요한 안내처럼 잠시 집중이 필요한 작업에 사용합니다. Escape 키로 닫고 원래 위치로 돌아갈 수 있습니다.
입력 유효성 검사
이메일처럼 정해진 형식이 필요한 입력에 사용합니다. 필수 항목과 오류 원인을 명확하게 알려주세요.
진행률과 상태 알림
시간이 걸리는 작업의 상태를 보여줄 때 사용합니다. 완료 여부를 색상뿐 아니라 텍스트로도 표시하세요.
대기 중 (실제 업로드 없이 진행률만 체험합니다.)