체크박스 필드
동의 및 복수 선택 항목을 간편하게 수집하세요. 간단한 예/아니오 체크박스부터 "모두 선택" 기능이 있는 다중 선택 목록, 최소/최대값 조절 기능, 스마트 레이아웃까지, 체크박스 필드는 강력한 유효성 검사 및 사용자 친화적인 옵션을 통해 단일 동의 및 다중 선택 질문을 처리합니다.
체크박스 요구 사항별로 두 가지 모드가 있습니다.
완벽하게 :
모든 사용 사례에 적합한 강력한 기능
두 가지 체크박스 모드
단일 체크박스 모드:
예/아니오 질문, 동의 또는 선택 사항에 대한 체크박스 하나로 모든 것을 해결할 수 있습니다. 이용 약관 수락, 뉴스레터 구독 및 동의서 양식에 적합합니다.
사용 사례:
- “이용 약관에 동의합니다.”
- 뉴스레터를 구독해 주세요
- "네, 업데이트를 받고 싶습니다."
- “본 정보는 정확함을 확인합니다.”
특징:
- 사용자 지정 체크박스 레이블 텍스트
- 기본 선택/선택 해제 상태
- 사용자 지정 제출 값(예, 1, 참 등)
- 필수 유효성 검사 옵션
여러 개의 체크박스 모드:
사용자가 여러 선택지를 고를 수 있는 다중 옵션 방식입니다. "해당하는 모든 항목을 선택하세요"와 같은 질문, 선호도 수집, 다중 선택 설문 조사에 적합합니다.
사용 사례:
- 어떤 기능에 관심이 있으신가요? (복수 선택 가능)
- 선호하는 연락 방법을 선택하세요
- 필요한 모든 서비스를 선택하세요
- 어떤 주제에 관심이 있으신가요? (복수 선택)
특징:
- 무제한 체크박스 옵션
- 세 가지 레이아웃 스타일
- "모두 선택" 옵션
- 최소/최대 선택 한도
- 텍스트 입력란이 있는 "기타"
- "위의 항목 중 어느 것도 해당되지 않음" 독점 옵션
🎨 세 가지 레이아웃 옵션 (다중 모드)
세로형(적층형) 레이아웃:
체크박스는 한 줄에 하나씩 세로로 쌓이는 형태로 표시됩니다. 옵션 레이블이 길수록 가독성이 뛰어납니다.
가장 좋은 대상 :
- 긴 옵션 텍스트
- 3-10가지 옵션
- 모바일 우선 양식
- 최대 가독성
가로(나란히) 레이아웃:
체크박스가 나란히 한 줄로 표시됩니다. 간결한 레이블에 적합한 레이아웃입니다.
가장 좋은 대상 :
- 2~5개의 단기 옵션
- 소형 형태
- 데스크톱 레이아웃
- 공간 효율성
그리드(다중 열) 레이아웃:
체크박스가 2단 그리드 형태로 배열되어 있습니다. 공간을 절약하면서도 가독성을 유지하는 균형 잡힌 레이아웃입니다.
가장 좋은 대상 :
- 4-12가지 옵션
- 중간 길이 라벨
- 균형 잡힌 디자인
- 전문적인 외관
반응적 행동:
모든 레이아웃은 모바일 화면에 자동으로 맞춰지며, 터치 상호 작용을 향상시키기 위해 필요에 따라 세로로 쌓입니다.
✨ "모두 선택" 옵션
원클릭 선택:
목록 맨 위에 "모두 선택" 체크박스를 추가하세요. 사용자는 한 번의 클릭으로 모든 옵션을 선택/선택 해제할 수 있습니다.
스마트한 행동:
- 모든 일반 옵션을 동시에 확인합니다
- 다시 클릭하면 모두 선택 해제됩니다.
- 어떤 옵션이라도 선택 해제되면 자동으로 선택 해제됩니다.
- 일부 옵션만 선택되었을 때(전부는 아님) 불확정적인 상태를 표시합니다.
- "위의 항목 중 어느 것도 해당되지 않음"을 모두 선택에서 제외합니다.
완벽한 용도 :
- 체크박스 목록이 길다(옵션 5개 이상)
- 사용자가 모든 항목을 선택하는 경우가 많은 양식
- 해당하는 모든 항목을 선택하세요.
- 권한 및 기능 선택
사용자 경험:
긴 목록을 처리할 때 시간을 절약할 수 있습니다. 사용자는 모두 선택한 후 특정 예외 항목만 선택 해제할 수 있습니다.
✏️ 텍스트 입력이 가능한 "기타" 옵션
사용자 지정 응답 수집:
"기타" 확인란을 추가하고, 선택하면 텍스트 입력란이 나타나도록 합니다. 미리 설정된 옵션이 적합하지 않은 경우 사용자가 직접 답변을 입력할 수 있습니다.
그것은 작동하는 방법 :
- "기타" 확인란이 목록 맨 아래에 나타납니다.
- 선택하면 텍스트 입력 필드가 나타납니다.
- 사용자가 사용자 지정 응답을 입력합니다.
- 체크박스 선택과 텍스트 입력이 모두 제출됩니다.
사용 사례:
- 선호하는 연락 방법: …기타 (구체적으로 명시해 주세요)
- 관심 분야: …기타 주제
- 저희에 대해 어떻게 알게 되셨나요? …기타 경로로 알게 되셨습니다.
- 함께 할 수 없는 목록은 없습니다.
이점:
예상치 못한 응답을 포착하고, 유연성을 제공하며, "강제적인" 선택을 방지하고, 데이터 품질을 향상시킵니다.
❌ “위의 항목 중 어느 것도 해당되지 않음” 옵션
독점적 비선택:
"위의 항목 중 어느 것도 해당되지 않음" 옵션을 추가하여, 클릭하면 다른 모든 선택 항목이 자동으로 해제되도록 하세요.
스마트한 독점권:
- "없음"을 선택하면 다른 모든 옵션은 자동으로 선택 해제됩니다.
- 다른 옵션이 선택된 경우 "없음"은 자동으로 선택 해제됩니다.
- 선택한 항목이 적용되지 않음을 명확하게 나타내는 방법을 제공합니다.
- 모순되는 선택을 방지합니다
사용 사례:
- 선택적 선호도 질문
- “모든 알레르기를 선택하세요: …위에 해당하는 항목 없음”
- 자격 검증자
- 관심 분야 선택
포함해야 하는 이유:
양식 작성 포기를 방지하고, 꼼꼼함을 보여주며, 명확한 거부 옵션을 제공하고, 데이터 정확도를 향상시킵니다.
📊 최소/최대 선택 제어
제어 선택 수량:
선택해야 하는 체크박스의 최소 및 최대 개수를 설정합니다.
최소 선택 사항:
사용자가 최소 X개의 옵션을 선택하도록 요구합니다. 이 조건을 충족할 때까지 양식이 제출되지 않습니다.
예 :
- "관심 분야를 최소 2개 이상 선택하세요" (최소: 2개)
- “최소 3가지 선호 사항을 선택하세요” (최소: 3)
- "옵션을 최소 1개 이상 선택하세요" (최소: 1개)
최대 선택 개수:
사용자가 선택할 수 있는 옵션 수를 X개로 제한합니다. 제한된 옵션 수에 도달하면 체크박스가 비활성화됩니다.
예 :
- 가장 마음에 드는 기능 3가지를 선택하세요 (최대 3개)
- "최대 5개의 서비스를 선택하세요" (최대: 5개)
- "최대 2개까지만 선택하세요." (최대: 2개)
명확한 피드백:
사용자는 "최소 2개 이상의 옵션을 선택하세요" 또는 "최대 3개까지 선택할 수 있습니다"와 같은 유효성 검사 메시지를 보게 됩니다.
🔧 간편한 옵션 관리
선택에 대한 완전한 통제권:
- 옵션 추가 - 입력하고 Enter 키를 누르거나 "옵션 추가"를 클릭하세요. 몇 초 만에 체크박스 목록을 만들 수 있습니다.
- 편집 옵션 – 표시 텍스트(사용자에게 보이는 내용)와 값(제출되는 내용)을 독립적으로 업데이트할 수 있습니다.
- 기본적으로 선택됨 – 각 옵션 옆의 확인란을 선택하여 특정 확인란을 미리 선택합니다.
- 순서 변경 옵션 – 위/아래 화살표를 사용하여 체크박스를 원하는 순서대로 정렬하세요.
- 옵션 삭제 – 원치 않는 옵션을 한 번의 클릭으로 제거하세요
표시 vs. 가치:
- 레이블: 사용자가 보는 내용(예: "이메일 업데이트")
- 값: 저장된 내용(예: "이메일 업데이트")
대량 건설:
여러 옵션을 빠르게 추가하려면 입력하고 Enter 키를 누르고, 다시 입력하고 Enter 키를 누르세요. 이렇게 하면 체크박스 목록을 신속하게 만들 수 있습니다.
☑️ 단일 체크박스 기능
사용자 정의 옵션 :
체크박스 레이블 텍스트:
체크박스 옆에 표시되는 텍스트입니다. 명확하고 구체적으로 작성하세요(예: "마케팅 이메일 수신에 동의합니다").
기본 선택 상태:
양식이 로드될 때 해당 확인란을 미리 선택해 두십시오. 사용자가 직접 동의 확인란을 선택하도록 주의해서 사용하십시오.
사용자 지정 제출 값:
체크 시 제출될 값을 설정합니다(일반적으로 "예", "1" 또는 "참"). 기본값은 "예"입니다.
필수 유효성 검사:
체크박스를 필수 항목으로 설정하세요. 사용자는 양식을 제출하려면 반드시 체크해야 합니다. 필수 동의 사항에 적합합니다.
🔀 조건 논리
동적 체크박스 표시 여부:
폼의 다른 값에 따라 체크박스 필드를 표시하거나 숨길 수 있습니다. 관련성이 있을 때만 옵션을 표시합니다.
고급 논리 규칙:
AND 논리 – 모든 조건이 충족되어야 합니다
OR 논리 – 어떤 조건이든 해당 동작을 트리거할 수 있습니다.
8가지 연산자 - 같음, 같지 않음, 보다 큼, 보다 작음, 포함, 비어 있음 등
사용 사례:
"배송 필요"가 선택된 경우에만 "배송 설정" 확인란을 표시합니다.
뉴스레터 구독 체크박스가 선택된 경우 "뉴스레터 주제"를 표시합니다.
서비스 유형이 "프리미엄"일 경우 "추가 서비스"를 표시합니다.
주문 총액이 50달러 미만일 경우 "할인 옵션"을 숨깁니다.
🎯 향상된 사용자 경험
내장된 스마트 기능:
- 시각적 표시기 – 적절한 간격을 둔 명확한 체크박스
- 키보드 탐색 - 탭 키를 사용하여 옵션을 쉽게 탐색할 수 있습니다.
- 터치 친화적 - 모바일 기기에서 터치하기 편리한 큰 영역
- 기본 선택 항목 – 특정 옵션 사전 확인
- 사용자 지정 CSS 클래스 - 체크박스 그룹에 스타일 적용
- 접근성 지원 - ARIA 라벨, 화면 낭독기 호환
- 모바일 최적화 - 터치에 최적화된 체크박스 크기
- 선명한 레이블 – 읽기 쉽고 정렬이 제대로 된 텍스트
- 필수 유효성 검사 – 오류 메시지 지우기
- 도움말 텍스트 - 복잡한 체크박스 그룹에 대한 설명을 추가합니다.
간단한 3단계 설정
체크박스 필드를 몇 분 안에 준비하세요
체크박스 필드 추가
기본 필드 섹션에서 체크박스 필드를 드래그하여 양식에 놓으세요.
모드 선택
예/아니오 질문의 경우 "단일 체크박스"를 선택하고, 여러 옵션을 선택해야 하는 경우 "다중 체크박스"를 선택하세요.
옵션 구성
단일 선택의 경우: 체크박스 레이블과 값을 설정합니다. 다중 선택의 경우: 옵션을 추가하고, 레이아웃을 선택하고, 선택적으로 "모두 선택" 또는 "기타" 옵션을 활성화하고, 최소/최대 선택 개수를 설정합니다.
🎉 이제 끝입니다! 스마트 유효성 검사 기능이 포함된 체크박스 필드가 준비되었습니다.
실제 애플리케이션
계약 및 동의
* 이용약관 동의
* 개인정보 보호 정책 동의
* 이메일 동의 선택
* 뉴스레터 구독
설문 조사 및 피드백
* “해당하는 모든 항목을 선택하세요” 질문
* 다중 관심사 선택
* 기능 선호도 수집
* 관심 주제 선택
이커머스
* 제품 기능 선택
* 서비스 추가 기능
* 배송 옵션
* 알림 설정
등록 양식
* 의사소통 선호사항
* 관심 분야
* 권한 설정
* 기능 접근 선택
어플리케이션
* 자격 검증 담당자
* 스킬 선택
* 관심 분야
* 이용 가능 옵션
설정 및 환경설정
* 계정 설정
* 개인정보 보호 옵션
* 알림 설정
* 기능 토글
필드 옵션 완료
기본 구성
- 필드 레이블 – 체크박스 위에 표시되는 질문 또는 제목
- 설명/도움말 텍스트 – 사용자를 위한 추가 안내
- 필수 입력 항목 – 체크박스를 필수 항목으로 설정
- 자리 표시자 - 체크박스에는 적용되지 않음
체크박스 모드
모드 유형을 선택하세요:
- 단일 체크박스 – 예/아니오 질문, 동의 또는 선택 참여 (체크박스 1개)
- 다중 체크박스 – 다중 선택 옵션(여러 개의 체크박스)
단일 체크박스 옵션
- 체크박스 옆 텍스트 – 체크박스 옆에 표시되는 레이블(예: "약관에 동의합니다")
- 시작 시 선택됨 – 폼이 로드될 때 체크박스가 미리 선택되어 있습니다.
- 체크 시 값 – 체크 시 저장되는 데이터 값 (기본값: "예")
여러 개의 체크박스 옵션
레이아웃 스타일:
- 쌓인 형태(한 줄에 하나씩) - 세로 배열
- 나란히 (일렬로) – 가로 배열
- 그리드(다중 열) – 2열 그리드 레이아웃
체크박스 옵션:
선택지 목록을 만드세요:
- 표시 텍스트 – 사용자가 보는 내용(예: "이메일")
- 값 – 제출된 내용(예: "이메일")
- 기본값 선택됨 – 특정 옵션 사전 선택
- 순서 변경 - 옵션을 위/아래로 이동
- 삭제 - 옵션 제거
특별 옵션:
- "모두 선택" 옵션 추가 - 상단에 모든 옵션을 선택/선택 해제할 수 있는 체크박스를 추가합니다.
- 텍스트 상자가 있는 "기타" 옵션 추가 - 사용자 지정 응답을 위한 텍스트 필드가 있는 "기타" 옵션을 추가합니다.
- "위의 항목 중 어느 것도 해당되지 않음" 옵션 추가 - 이 옵션을 선택하면 다른 모든 항목이 선택 해제됩니다.
선택 제한:
- 최소 선택 개수 – 반드시 선택해야 하는 최소 체크박스 개수 (예: 2개)
- 최대 선택 가능 개수 – 선택할 수 있는 체크박스의 최대 개수(예: 5개)
조건부 논리
- 조건부 로직 활성화 - 조건에 따라 표시/숨기기
- 논리 유형
- 모든 조건이 충족되어야 합니다(AND)
- 어떤 조건이든 충족될 수 있습니다(또는)
- 조건 규칙
- 표시/숨기기 – 취할 조치
- 필드 – 어떤 필드를 선택할지
- 연산자 – 같음, 같지 않음, 포함, 보다 큼, 보다 작음, 비어 있음, 비어 있지 않음
- 가치 – 비교 가치
- 다중 조건 – 규칙을 무제한으로 추가 가능
고급 옵션
- 숨겨진 필드 – 필드를 보이지 않게 만듭니다(체크박스에는 권장하지 않음).
- 사용자 지정 CSS 클래스 – 사용자 지정 스타일 적용
- 접근성 속성 – 화면 판독기를 위한 ARIA 레이블
체크박스 필드를 선택해야 하는 이유는 무엇일까요?
✅ 두 가지 모드 – 단일 체크박스 또는 하나의 필드 유형에 여러 개의 체크박스
✅ 유연한 레이아웃 – 수직, 수평 또는 격자형 배열
✅ 모두 선택 - 원클릭 선택으로 편리함
✅ 다른 옵션 - 사용자 지정 응답을 위한 텍스트 입력란
✅ 없음 옵션 – 배타적 비선택
✅ 최소/최대 제한 – 선택 수량 제어
✅ 쉬운 관리 – 옵션을 손쉽게 추가, 편집, 순서 변경, 삭제할 수 있습니다.
✅ 사용하기 쉬운 – 명확한 라벨, 적절한 간격, 터치 친화적
✅ 완전 통합 – 모든 폼 기능과 완벽하게 호환됩니다
자주 묻는 질문
질문: 단일 체크박스 모드와 다중 체크박스 모드의 차이점은 무엇인가요?
단일 모드에서는 예/아니오를 선택할 수 있는 체크박스가 하나만 표시됩니다. 다중 모드에서는 사용자가 두 개 이상의 옵션을 선택할 수 있는 여러 개의 체크박스가 표시됩니다.
질문: 사용자가 모든 체크박스를 한 번에 선택할 수 있나요?
네. "모두 선택" 옵션을 활성화하면 한 번의 클릭으로 모든 옵션을 선택하거나 선택 해제할 수 있는 체크박스가 추가됩니다.
질문: 최소/최대 선택은 어떻게 작동하나요?
최소값은 사용자가 최소한 일정 개수의 옵션을 선택하도록 보장합니다. 최대값은 사용자가 선택할 수 있는 체크박스의 개수를 제한합니다.
질문: "기타" 옵션은 어떤 기능을 하나요?
이 기능은 "기타"라는 레이블이 붙은 추가 확인란을 추가합니다. 이 확인란을 선택하면 사용자가 원하는 답변을 입력할 수 있는 텍스트 필드가 나타납니다.
질문: "위의 항목 중 어느 것도 해당되지 않음"은 어떻게 작동하나요?
이 옵션은 단독 선택 사항입니다. 선택하면 다른 모든 체크박스가 선택 해제됩니다. 다른 옵션 중 하나라도 선택된 경우, "없음" 옵션은 자동으로 선택 해제됩니다.
질문: 특정 체크박스를 미리 선택할 수 있나요?
네. 단일 모드의 경우 "기본값 선택"을 켜세요. 다중 모드의 경우 기본적으로 선택하려는 각 옵션 옆의 작은 확인란을 선택하세요.
질문: 동의 항목에 미리 체크해야 할까요?
아니요. 정책, 약관 및 동의와 관련해서는 사용자가 직접 체크박스를 선택해야 합니다.
질문: 체크박스 순서를 변경할 수 있나요?
네. 각 옵션 옆에 있는 위아래 화살표를 사용하여 원하는 순서대로 변경할 수 있습니다.
질문: 표시 텍스트와 값의 차이점은 무엇인가요?
표시 텍스트는 사용자가 보는 내용이고, 값은 깔끔하고 일관된 데이터 구성을 위해 데이터베이스에 저장되는 값입니다.
질문: 체크박스에 조건부 논리를 사용할 수 있나요?
예. "같음", "비어 있음", "비어 있지 않음"과 같은 연산자를 사용하여 선택 항목에 따라 다른 필드를 트리거할 수 있습니다.
질문: 필수 체크박스는 어떻게 만드나요?
"필수 입력 항목"을 활성화하세요. 단일 모드의 경우, 확인란을 반드시 선택해야 합니다. 다중 모드의 경우, 사용자는 최소 하나 이상의 옵션을 선택하거나 최소 요구 사항을 충족해야 합니다.
질문: 사용자가 선택 사항을 확인한 후 변경할 수 있습니까?
네. 사용자는 양식을 제출하기 전에 모든 옵션을 자유롭게 선택하거나 선택 해제할 수 있습니다. "모두 선택" 기능도 언제든지 해제할 수 있습니다.
