# 폼 및 설문 빌더의 우측 사이드바

## 폼 및 설문 빌더의 우측 사이드바

**하이레벨 폼 및 설문 빌더의 우측 사이드바**는 제작 과정에서 스타일링과 설정을 중앙에서 관리할 수 있도록 해줍니다. 스타일, 테마, 고급 설정을 통해 폼이나 설문의 레이아웃, 입력 필드 모양, 간격, 색상 등을 제어할 수 있습니다!

**목차**

* [폼 및 설문 빌더 우측 사이드바 개요](#폼-및-설문-빌더-우측-사이드바-개요)
* [우측 사이드바 열기](#우측-사이드바-열기)
* [스타일 탭](#스타일-탭)
* [테마 탭](#테마-탭)
* [고급 탭](#고급-탭)
* [요소별 라벨 정렬](#요소별-라벨-정렬)
* [자주 묻는 질문](#자주-묻는-질문)

## 폼 및 설문 빌더 우측 사이드바 개요

우측 사이드바는 폼 및 설문 빌더의 시각적 설정과 레이아웃 설정을 위한 제어판입니다. 스타일, 테마, 고급 탭이 포함되어 있어 폼이나 설문의 모양과 동작을 세밀하게 조정할 수 있습니다. 모든 디자인 제어 기능이 손쉽게 접근할 수 있는 곳에 있어 변경사항을 더 빠르게 미리보고 일관성을 유지할 수 있습니다.

우측 사이드바는 3개의 탭으로 구성됩니다:

* 스타일: 폼이나 설문의 레이아웃과 모양을 세밀하게 조정
* 테마: 일관된 브랜딩을 위한 미리 만들어진 프리셋 적용
* 고급: 특수한 요구사항을 위한 추가 옵션 접근

### **우측 사이드바 열기**

폼 또는 설문 빌더에서 우측 사이드바를 열려면, 빌더 우측 상단의 스타일 & 옵션(Styles & Options) 버튼을 클릭하세요. 스타일 & 옵션 버튼을 다시 클릭하면 사이드바가 접힙니다.

![우측 사이드바 열기](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155054082291/original/6UY4qozJsRosRb0QWBE1Dw59qFXdcSzEZQ.png?1758218624)

### 스타일 탭

스타일 탭에서는 폼이나 설문의 핵심 레이아웃을 설정할 수 있습니다. 이 탭에서 레이아웃, 색상 구성, 브랜딩을 제어합니다. 스타일 탭의 제어 요소들은 다음과 같습니다:

* **레이아웃(Layout)**: 전체적인 배치와 필드 표시 방식을 정의합니다. 입력 필드와 라벨 표시 방법, 너비, 간격, 패딩, 폼이나 설문 위의 상단 여백을 포함합니다. 상단 여백 제어를 사용하여 **커스텀 CSS** 없이도 공간을 조정할 수 있습니다. 변경사항은 미리보기에서 실시간으로 업데이트되며, 여백 필드를 비워두면 기본 간격이 유지됩니다. [요소별 라벨 정렬에 대한 자세한 정보는 여기를 클릭하세요](#요소별-라벨-정렬)
* 이제 **상단 및 하단 패딩**을 0픽셀로 설정하여 진정한 엣지투엣지 레이아웃을 만들 수 있습니다. 이전에는 패딩을 0으로 설정해도 발행된 자산에서 여전히 추가적인 수직 간격이 표시될 수 있었습니다.
* **푸터(설문)**: 설문 전용 푸터 콘텐츠와 모양을 관리합니다.
* **색상 & 배경**: 폰트 설정, 배경 색상 선택, 지원되는 경우 브랜드에 맞는 배경이나 헤더 이미지를 적용합니다.
* 기타: 에이전시 수준의 브랜딩 적용 또는 해제

![스타일 탭 설정](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155054084354/original/mWGHumaIC874yBVUsW7iygaVDtzYdyhfiQ.png?1758219960)

### **테마 탭**

테마 탭을 사용하면 프리셋을 사용하여 전문적인 모습의 폼과 설문을 빠르게 만들 수 있습니다. 테마를 사용해 설정을 가속화한 후, 스타일을 사용해 간격과 너비를 세밀하게 조정할 수 있습니다.

폼이나 설문에 테마를 적용하려면 원하는 테마에 마우스를 올리고 테마 사용(Use Theme)을 선택하세요. 팝업에서 계속(Proceed)을 클릭하여 선택을 확인합니다.

**참고**: 테마를 변경하면 현재의 스타일 수정사항이 손실됩니다.

![테마 적용](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155054084653/original/f4E9xHjwkUNtIcEhn4ZIfZkLi-31PamvAQ.png?1758220167)

### **버튼 스타일링 패널**

버튼 스타일링 패널은 모든 버튼 모양 제어를 중앙에서 관리하여 커스텀 코드 없이도 세련되고 일관된 스타일을 적용할 수 있도록 해줍니다. 프리셋으로 빠르게 시작한 후, 타이포그래피, 간격, 테두리, 둥근 모서리, 그림자, 너비를 세밀하게 조정할 수 있습니다.

참고: 이전의 버튼 제어 기능들은 이제 이 패널의 그룹화된 섹션에 나타나 더 쉬운 스타일링과 빠른 업데이트를 제공합니다.

#### 버튼 스타일링 패널 열기

1. 빌더에서 폼을 엽니다.
2. 캔버스의 버튼 요소를 클릭합니다.
3. 우측 사이드바에서 버튼(Button) (또는 스타일 → 버튼)을 펼칩니다.

#### 버튼 테마 선택 (갤러리 + 미리보기)

1. 테마 선택(Select Themes)을 클릭합니다.
2. 채우기(Filled), 테두리(Border), 텍스트 전용(Text Only) 카테고리를 둘러봅니다.
3. 테마에 마우스를 올리거나 선택하여 캔버스에서 실시간으로 변경사항을 미리봅니다.
4. 적용(Apply)을 클릭하여 선택한 버튼에 테마를 설정합니다.

#### **버튼 스타일 커스터마이징 (그룹화된 제어)**

목적: CSS 없이도 브랜드 표준에 맞게 테마를 세밀하게 조정합니다.

색상 & 배경: 텍스트, 배경, 테두리 색상을 설정합니다.

타이포그래피: 폰트 패밀리와 굵기를 선택합니다(커스텀 폰트 지원). 크기, 글자 간격, 텍스트 변환을 설정합니다.

레이아웃 & 정렬: 버튼을 왼쪽/가운데/오른쪽으로 정렬합니다. 전체 너비(Full Width)를 토글하여 컨테이너에 맞춥니다.

패딩: 상하 및 좌우 패딩을 조정합니다(값 연결/연결 해제).

테두리 & 모서리 둥글기: 테두리 너비와 스타일을 설정합니다. 둥근 버튼 vs 사각 버튼을 위한 모서리 둥글기를 조정합니다.

그림자: 그림자를 활성화한 후 흐림/거리/확산을 조정합니다.

**초기화 또는 되돌리기**

초기화(Reset) 또는 되돌리기(Revert)를 클릭하여 스타일 변경사항을 취소합니다. 테마 선택을 다시 열어 다른 시작점을 선택할 수 있습니다.

### 고급 탭

고급 탭은 핵심 레이아웃과 테마 제어를 넘어선 특수한 요구사항을 위한 추가 옵션을 제공합니다. 폼의 유지 관리성을 유지하면서 더 깊은 세밀한 조정이 필요할 때 사용하세요. 고급 탭의 제어 유형들은 다음과 같습니다:

* **폼**: 폼 컨테이너의 테두리, 모서리, 그림자 조정
* **입력 필드**: 입력 요소 자체의 스타일링, 텍스트 및 포커스 색상, 테두리와 모서리, 너비, 패딩, 그림자 포함
* **라벨**: 라벨 타이포그래피와 색상 제어
* **짧은 라벨**: 짧은 라벨의 타이포그래피와 색상 설정
* **플레이스홀더**: 플레이스홀더 텍스트 모양 커스터마이징
* **커스텀 CSS**: 정밀한 제어를 위한 커스텀 CSS 추가

**참고**: 커스텀 CSS는 스타일과 테마보다 우선순위가 높으며 테마 스타일링에 영향을 줄 수 있습니다.

![고급 설정](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155054085253/original/Xi1ZJLAWDG_jGOnc3EKFJ6MrvFLZ2SRjwQ.png?1758220711)

### 요소별 라벨 정렬

요소별 라벨 정렬은 전체 폼이나 설문에 하나의 전역 정렬을 적용하는 대신 각 필드마다 다른 라벨 위치를 설정할 수 있게 해줍니다. 시각적 리듬과 간격을 세밀하게 조정하는 데 사용하세요. 특히 컴팩트한 레이아웃에서 유용합니다.

요소별 라벨 정렬을 사용하기 전에 알아야 할 사항들:

* 폼, 설문, 퀴즈에서 사용 가능 (단일 컬럼 레이아웃의 폼에서만 사용 가능)
* 기존 폼들은 필드 수준에서 명시적으로 업데이트하지 않는 한 전역 정렬을 유지합니다
* 텍스트 입력, 드롭다운, 라디오 버튼 등 표준 필드에 적용됩니다
* 모바일에서는 데스크톱 설정과 관계없이 자동으로 상단(Top) 정렬이 기본값으로 적용되어 명확하고 사용자 친화적인 레이아웃을 보장합니다

#### 요소별 라벨 정렬 설정 방법

1. 폼 또는 설문 빌더에서 단일 필드를 선택합니다
2. 나타나는 우측 사이드바에서 라벨 정렬(Label Alignment)을 찾습니다
3. 화살표를 사용하여 해당 요소에 원하는 라벨 정렬(상단, 왼쪽, 오른쪽 또는 폼 기본값)을 선택합니다

![라벨 정렬 설정](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155054087925/original/NpDjnZgtei4aDFmaUUA8AmL5pN6yXZ0acg.png?1758221956)

### **자주 묻는 질문**

**Q: 우측 사이드바의 변경사항이 자동으로 저장되나요?** 아니요. 빌더에서 저장 버튼을 클릭해야 변경사항이 저장됩니다.

**Q: 나중에 테마를 변경하면 세부적인 스타일링이 덮어쓰여지나요?** 새 테마는 시각적 스타일의 일부를 초기화할 수 있습니다. 테마 전환 후 스타일을 다시 확인하세요. 커스텀 CSS는 여전히 테마와 스타일을 재정의하므로 CSS 충돌을 검토하세요.

**Q: 현재 모양을 잃지 않고 다양한 테마 프리셋을 빠르게 테스트하려면 어떻게 해야 하나요?** 폼이나 설문에 새 테마를 적용한 후, 빌더 우측 상단의 뒤로 버튼을 눌러 이전 모양으로 되돌릴 수 있습니다.

**Q: 레이아웃을 2컬럼이나 단일 라인으로 전환하면 필드별 라벨 정렬은 어떻게 되나요?** 요소별 라벨 정렬은 단일 컬럼에서만 사용 가능합니다. 레이아웃을 전환하면 필드별 제어가 제거되고 라벨이 기본 설정으로 되돌아갑니다.

**Q: 나중에 전역 라벨 정렬을 변경하면 이미 설정한 필드들은 어떻게 되나요?** 폼 기본값으로 설정된 필드들은 새 전역 설정으로 자동 업데이트됩니다. 명시적으로 왼쪽/오른쪽/상단으로 설정된 필드들은 필드별 선택사항을 유지합니다.

***

*원문 최종 수정: Wed, 8 Apr, 2026 at 4:17 AM* *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/miscellaneous/right-sidebar-in-form-and-survey-builder.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.