# 라디오 버튼 & 체크박스 요소의 버블 스타일

새로운 라디오 버튼과 체크박스 버블 스타일로 하이퍼클래스 폼, 설문, 퀴즈에 신선하고 모던한 느낌을 더해보세요. 이 업데이트를 통해 클래식 스타일과 둥근 버블 스타일을 몇 초 만에 전환할 수 있으며, 코딩은 전혀 필요하지 않습니다.

***

**목차**

* [라디오 버튼 & 체크박스 요소의 버블 스타일이란?](#라디오-버튼-체크박스-요소의-버블-스타일이란)
* [버블 스타일의 주요 장점](#버블-스타일의-주요-장점)
* [반응형 동작](#반응형-동작)
* [호환성 및 제한사항](#호환성-및-제한사항)
* [버블 스타일 설정 방법](#버블-스타일-설정-방법)
* [자주 묻는 질문](#자주-묻는-질문)

***

## 라디오 버튼 & 체크박스 요소의 버블 스타일이란?

버블 스타일은 하이퍼클래스의 폼(Form), 설문(Survey), 퀴즈(Quiz) 빌더 내에서 라디오 버튼이나 체크박스 필드에 적용할 수 있는 눈길을 끄는 둥근 디자인 옵션입니다. 활성화하면 기본 사각형이나 원형 마커를 더 큰 알약 모양의 "버블"로 바꿔서 가독성을 향상시키고 상호작용을 유도합니다.

![버블 스타일 예시](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155054717439/original/d1Q3vDXRC-z-eOkYFbHiwHPohrGyMnrB6w.png?1758922935)

***

## 버블 스타일의 주요 장점

* **신선한 버블 디자인**: 라디오 버튼과 체크박스 필드를 위한 세련되고 둥근 옵션
* **간단한 토글**: 빌더의 옵션 탭에서 표준 스타일과 버블 스타일을 쉽게 전환
* **사용자 친화적**: 버블 스타일은 가시성을 개선하고 선택이 더 인터랙티브하게 느껴지도록 함
* **기본 반응형**: 데스크톱과 모바일 기기에서 완벽하게 작동

***

## 반응형 동작

버블 스타일은 기본적으로 100% 반응형입니다. 버블이 유동적으로 크기를 조절하여 추가적인 CSS 수정 없이도 스마트폰, 태블릿, 대형 화면에서 정확한 터치 영역을 보장합니다.

팁: 버블 스타일을 컬럼 펼치기(Spread to Column) 기능과 함께 사용하면 모든 기기에서 다중 선택 답변을 완벽하게 정렬할 수 있습니다.

***

## 호환성 및 제한사항

• 퍼널, 웹사이트 또는 임베드 코드를 통해 외부 페이지에 삽입된 폼, 설문, 퀴즈에서 작동합니다.

• 시각적 전용: 제출 데이터, 조건부 로직 또는 워크플로우 트리거는 변경하지 않습니다.

• 마이그레이션 불필요 — 기존 자산은 수동으로 버블을 활성화하지 않는 한 현재 스타일을 유지합니다.

***

## 버블 스타일 설정 방법

30초 이내에 버블 스타일을 적용하세요:

* Sites(사이트) → Forms(폼)(또는 Surveys(설문) / Quizzes(퀴즈))로 이동하여 자산의 Edit(편집)을 클릭합니다.

![폼 편집 화면](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155054717109/original/_yy-hCah9uwEQhqCN64G-quypKtzHmTDZA.png?1758921754)

* 라디오 버튼 또는 체크박스 필드를 캔버스에 드래그하거나 기존 필드를 클릭합니다.

![필드 선택](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155054717133/original/MKTZKz6nv-rcw7e4yL8m7uEUfJ1KfU5-EQ.png?1758921901)

* 우측 사이드바에서 Options(옵션)을 선택합니다.

![옵션 탭](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155054717146/original/B3Qh2S4t60Z4HCv2dMkT4v3ZMhO-dz6CIw.png?1758921938)

* "Style" 아래에서 Bubble(버블)을 선택합니다.

![버블 스타일 선택](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155054717171/original/2MUrKhAlVKC3pWYarhX6rzUVD0eDjtkmVg.png?1758921988)

* 저장을 클릭하고 평소처럼 미리보기하거나 임베드하세요. 업데이트된 버블이 적용됩니다!

***

## 자주 묻는 질문

**Q: 버블 스타일이 페이지 로딩 시간을 느리게 하나요?**

아니요. 가벼운 CSS를 사용하여 실질적으로 오버헤드가 거의 없습니다.

**Q: 다중 선택 목록에서 한 옵션에만 버블 스타일을 활성화할 수 있나요?**

버블은 전체 요소에 적용됩니다. 해당 라디오 버튼이나 체크박스 필드의 모든 선택지가 같은 스타일을 공유합니다.

**Q: 폼 제출로 트리거되는 워크플로우가 계속 작동하나요?**

네. 버블 스타일은 순전히 시각적이며 데이터 수집이나 워크플로우 트리거에는 영향을 주지 않습니다.

***

## 관련 아티클

* [폼 & 설문의 컬럼 펼치기 옵션](/hyperclass-docs/and-sites/xml-sitemaps/how-to-use-the-spread-to-column-option-in-forms-and-surveys.md)
* 폼 및 설문 빌더의 우측 사이드바 개선
* 폼 & 설문에서 "기타" 옵션 사용 가능
* [하이퍼클래스에서 연락처 폼 만드는 방법](/hyperclass-docs/contacts/workflow-adding-and-removing-followers-for-contacts/how-to-create-a-contact-form-in-highlevel.md)
* 폼 빌더를 사용하여 퍼널 내 폼 커스터마이징

***

*원문 최종 수정: 2025년 10월 14일* *Hyperclass 사용 가이드 — hyperclass.ai*


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://hyperclass.gitbook.io/hyperclass-docs/and-sites/bubble-style-for-radio-checkbox-elements.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.