# 모바일 설문/퀴즈 진행률 바

세련된 모바일 전용 진행률 바로 응답자들이 다단계 설문(Surveys)과 퀴즈(Quizzes)에서 현재 어느 지점에 있는지 정확히 알 수 있습니다. 시각적 표시를 추가하여 이탈률을 줄이고 사용자가 끝까지 완료하도록 유도하며, 브랜드 색상과도 완벽하게 매칭할 수 있습니다.

***

## 모바일 설문/퀴즈 진행률 바란?

모바일 진행률 바는 모바일 기기에서 볼 때 다단계 설문과 퀴즈에 동적인 채움 라인을 추가합니다. 데스크톱과 단일 단계 폼에서는 숨겨져서 인터페이스를 깔끔하게 유지하면서, 가장 중요한 곳에서는 명확성을 제공합니다. 사용자에게 현재 위치와 남은 분량을 보여줘서 폼 완료율을 높이는 데 도움이 됩니다.

![모바일 진행률 바 예시](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155050191577/original/K12J_PgqgoX_NaaTH_s9xxLXSsoQsltC8w.png?1753128731)

***

## 모바일 진행률 바의 주요 장점

* **시각적 안내**: 응답자에게 남은 단계 수를 보여줘서 이탈률을 낮춤
* **브랜드 일관성**: 단계 텍스트, 진행률 채움, 비활성 구간 색상을 커스터마이징하여 브랜드에 맞게 설정
* **완벽한 통합**: Stick to card와 Stick to page 푸터 모두와 완벽하게 호환
* **높은 완료율**: 명확한 진행률 피드백으로 사용자가 폼을 끝까지 완료하도록 장려

***

## 모바일 진행률 바 설정 방법

다음 단계를 따라 모바일 진행률 바를 빠르게 활성화하고 폼 완료율을 개선하세요. 퀴즈와 설문 모두 동일한 단계입니다.

#### 1단계: 설문 또는 퀴즈로 이동

* 하위 계정 사이드 네비게이션에서 **사이트(Sites)** 클릭
* 상단 네비게이션에서 **설문(Surveys)** 또는 **퀴즈(Quizzes)** 선택

![설문/퀴즈 메뉴](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155050187143/original/74wpMnMAGdZ6bjzVXj3fUDSlU7FjQgT76A.png?1753119451)

#### 2단계: 퀴즈 또는 설문 열기

* 기존 퀴즈나 설문을 편집하려면 폼/설문 옆의 점 3개 아이콘을 클릭하고 **편집(Edit)** 클릭
* 새 퀴즈/설문을 만들려면 우측 상단의 파란색 **+ 설문 추가(+ Add Survey)** 또는 **+ 퀴즈 추가(+ Add Quiz)** 버튼 클릭

![설문/퀴즈 편집](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155050187247/original/cqsaabAyLTfkQvhCmCUiE856T2Kkd2bRig.png?1753119696)

#### 3단계: 스타일 & 옵션 열기

* 빌더 우측 상단의 **스타일 & 옵션(Styles & Options)** 클릭

![스타일 & 옵션](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155050187362/original/yB9RN5o7oa8Na4UjgzJDYUQa1mihOT73xw.png?1753119866)

#### 4단계: 진행률 바 활성화

* 아래로 스크롤하여 **푸터 섹션(Footer Section)** 확장
* 푸터 옆의 기기 선택 드롭다운에서 **휴대폰(Phone)** 선택 (데스크톱 모드에서는 진행률 바를 활성화할 수 없음)
* **진행률 바 활성화(Enable Progress Bar)** 토글을 켜기

![진행률 바 설정](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155050190903/original/fhzHUrF9hX3CmjNbytMfirzHCe0qOrppzA.png?1753126947)

#### 5단계: 색상 커스터마이징

* 단계 텍스트 색상, 진행률 바 채움, 진행률 바 비활성 색상을 브랜드에 맞게 설정
* 브랜딩 설정이 완료되면 파란색 **저장(Save)** 버튼을 클릭하여 변경사항 저장

![색상 설정](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155050190955/original/F3HjPSQvEdTUeu3EQSB28yDeMD_0jJwdRw.png?1753127052)

***

## 진행률 바 색상 커스터마이징

3개의 유연한 색상 선택기를 사용해서 진행률 바를 브랜드에 맞춰보세요. 각 색상 선택기는 정확한 브랜딩을 위해 HEX 값을 지원합니다.

* **단계 텍스트 색상**: 단계 번호 라벨 색상 제어 (예: "1 of 3")
* **진행률 바 채움**: 채워진 부분의 색상 설정
* **진행률 바 비활성**: 채워지지 않은 구간의 색상 정의

***

## 자주 묻는 질문

**Q: 진행률 바가 데스크톱에서도 나타나나요?**

아니요. 모바일 전용 기능이며, 데스크톱 사용자는 일반적인 표시기를 보게 됩니다.

**Q: 푸터 설정에서 진행률 바 활성화 토글이 회색으로 비활성화되어 있는 이유는 무엇인가요?**

먼저 빌더의 기기 선택기를 휴대폰으로 전환하세요. 데스크톱 모드에서는 토글을 선택할 수 없습니다.

**Q: 설문이나 퀴즈가 한 단계뿐이라면 어떻게 되나요?**

진행률 바는 단일 단계 설문과 퀴즈에서 자동으로 숨겨집니다. 보여줄 진행 상황이 없기 때문입니다.

**Q: 진행률 바가 "카드에 고정"과 "페이지에 고정" 푸터 유형 모두와 작동하나요?**

네. Stick to card와 Stick to page 푸터 모두와 완벽하게 정렬됩니다.

**Q: 기존 다단계 설문과 퀴즈에서 진행률 바가 자동으로 표시되나요?**

아니요. 기능이 기본적으로 꺼져 있으며, 각 설문과 퀴즈에서 개별적으로 활성화해야 합니다.

***

## 관련 가이드

* [스타일화된 설문 만들기](/hyperclass-docs/and-sites/how-to-create-a-stylized-survey.md)
* [설문의 새로운 푸터](/hyperclass-docs/and-sites/new-footer-in-surveys.md)
* 폼, 설문, 퀴즈용 모바일 편집기
* [퀴즈 빌더 가이드](/hyperclass-docs/and-sites/quiz-builder-guide.md)
* 폼과 설문 분석

***

*원문 최종 수정: Mon, 21 Jul, 2025 at 3:17 PM* *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/xml-sitemaps/progress-bar-for-surveys-quizzes-on-mobile.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.