# 폼, 설문, 퀴즈를 위한 모바일 에디터

이 가이드에서는 Hyperclass 폼(Forms), 설문(Surveys), 퀴즈(Quizzes) 빌더의 강력한 모바일 에디터 사용법을 알아보겠습니다. 데스크톱 레이아웃에 영향을 주지 않으면서 모바일 기기에 맞는 시각적 요소와 텍스트를 커스터마이징하여 완벽한 반응형 경험을 제공할 수 있습니다.

**목차**

* [모바일 에디터란?](#모바일-에디터란)
* [모바일 에디터의 주요 장점](#모바일-에디터의-주요-장점)
* [모바일 에디터 사용법](#모바일-에디터-사용법)
* [모바일 헤더 & 배경 이미지](#모바일-헤더-배경-이미지)
* [모바일 폰트 스타일링](#모바일-폰트-스타일링)
* [자주 묻는 질문](#자주-묻는-질문)

***

## **모바일 에디터란?**

모바일 에디터는 Hyperclass의 새로운 기능으로, 폼, 설문, 퀴즈가 모바일 기기에서 어떻게 보일지 커스터마이징할 수 있는 전용 도구를 제공합니다. 이제 모바일과 데스크톱 사이에서 타협하지 않고 각 경험을 독립적으로 스타일링할 수 있어, 모든 화면 크기에서 콘텐츠가 항상 세련되고 우수한 성능을 발휘하도록 보장할 수 있습니다.

## **모바일 에디터의 주요 장점**

모바일 우선의 매끄러운 경험 제공은 사용자 참여를 유지하는 핵심입니다. 이 기능을 통해 데스크톱 디자인에 영향을 주지 않으면서 모바일에서의 시각적 요소를 세밀하게 조정할 수 있습니다.

* 모바일 전용 **헤더** 및 **배경 이미지** 업로드
* **폰트 패밀리**, **폰트 크기**, **폰트 굵기** 독립적 조정
* 특정 텍스트 요소 스타일링: **라벨**, **짧은 라벨**, **플레이스홀더**
* 발행 전 모바일 디자인 미리보기 및 테스트
* 모든 기기에서 폼의 사용자 친화성과 브랜드 일관성 보장
* 모바일 사용자 경험 향상을 통한 완료율 증대

## **모바일 에디터 사용법**

모바일 에디터를 활용하여 폼, 설문 또는 퀴즈를 활성화하고 구성하는 단계를 따라해보세요.

1. 빌더 대시보드에서 **폼, 설문 또는 퀴즈를 열어주세요**.

![폼 열기](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155047765746/original/WLW2pIjU1oURMGynOfMxSUyYBiGyWTG7lQ.png?1749068777)

2. 화면 상단의 **기기 토글을 클릭**하여 **모바일 뷰**로 전환하세요.

![기기 토글](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155047765949/original/OqX7HBaCddbhDXWsaMDIy4hpofLBWXfKZw.png?1749069210)

3. **모바일 뷰**에서 오른쪽 패널에 모바일 전용 설정이 표시됩니다:

   * **레이아웃 스타일**: 선호하는 모바일 레이아웃을 선택하세요.
   * **모바일 헤더 이미지**: 모바일 헤더 전용 이미지를 업로드하세요.
   * **모바일 배경 이미지**: 모바일 전용 배경 이미지를 업로드하세요.
   * **폰트 설정**:
     * **폰트 패밀리** 조정
     * **폰트 크기** 변경
     * **폰트 굵기** 수정

   이 폰트 설정은 다음 요소에 개별적으로 적용됩니다:

   * **라벨** (예: "성명")
   * **짧은 라벨** (예: 압축 형식의 필드 헤더)
   * **플레이스홀더 텍스트** (예: "이메일을 입력하세요")
4. 완료되면 **저장**을 클릭한 후 **미리보기**를 눌러 모바일 디자인을 테스트하세요.
5. 만족스러우면 폼을 **발행**하세요 — 이제 완전히 모바일에 최적화됐습니다!

***

### 데스크톱과 모바일의 별도 스타일 패널

독립적인 스타일 컨트롤로 CSS 오버라이드 없이 각 기기에서 선명한 화면을 유지합니다. 브랜드 일관성을 보존하면서 화면 크기에 맞춰 레이아웃을 조정하세요.

**기기별 스타일 속성**

* 배경 색상, 패딩, 테두리, 폰트 굵기
* 모바일에서 설정한 스타일은 데스크톱을 덮어쓰지 **않으며**, 그 반대도 마찬가지입니다.
* 모바일에서 진정한 0px 패딩: 모바일 뷰에서 상단과 하단 패딩을 0px로 설정하여 진짜 제로 간격을 만들 수 있습니다. 모바일 스타일은 기기별로 적용되므로 데스크톱 패딩에는 영향을 주지 않습니다.

![스타일 패널 작동 예시](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155064146055/original/siER8o4XuLfkF-Ub9l_XoXO6AVO2pzP5RA.gif?1770193571)

***

## **모바일에서의 콘텐츠 vs 스타일**

콘텐츠와 프레젠테이션은 별도로 구성됩니다. 명확성을 위해 모바일 전용 텍스트를 편집하고, 가독성을 위해 모바일 전용 스타일을 세밀하게 조정하세요.

**동작 방식**

* **콘텐츠**: 모바일에서 다른 카피를 사용할 수 있습니다.
* **스타일**: 간격, 테두리, 타이포그래피는 기기별로 적용됩니다.
* **리셋/복사**: 가능한 경우 데스크톱에서 리셋 또는 복사 기능을 사용하여 설정을 빠르게 진행하세요.

***

## 모바일 헤더 & 배경 이미지

이미지는 모바일 화면에서 다르게 스케일링됩니다. 이 기능을 통해 작은 기기에 특별히 최적화된 이미지를 업로드하여 디자인이 깔끔하고 의도적으로 보이도록 할 수 있습니다.

**이게 중요한 이유:**

* 모바일 사용자는 세로로 상호작용합니다 — 더 타이트한 세로형 이미지를 사용하세요.
* 데스크톱 이미지가 축소될 때 자주 발생하는 이미지 자르기나 왜곡을 방지합니다.

## **모바일 폰트 스타일링**

데스크톱에서 읽기 좋은 텍스트가 모바일 화면에서는 답답하거나 과도하게 클 수 있습니다. 모바일 에디터를 사용하여 폰트 요소를 개별적으로 조정해 더 매끄러운 모바일 읽기 경험을 제공하세요.

**사용 가능한 컨트롤:**

* **폰트 패밀리**: 사용 가능한 시스템 또는 커스텀 폰트에서 선택
* **폰트 크기**: 작은 화면에서의 명확성을 위해 정확한 px 크기 설정
* **폰트 굵기**: 가시성 향상을 위해 볼드, 라이트 또는 일반 사용

**영향받는 요소:**

* **라벨** — 사용자가 필드를 올바르게 채우도록 안내
* **짧은 라벨** — 압축 레이아웃이나 다중 컬럼 섹션에 이상적
* **플레이스홀더** — 미묘한 입력 힌트에 유용

***

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

**Q: 모바일 뷰에서 한 변경사항이 데스크톱 레이아웃에 영향을 주나요?**

아니요 — 모바일 뷰에서 한 모든 편집은 **모바일에만** 적용됩니다. 데스크톱 디자인은 그대로 유지됩니다.

**Q: 모바일에 다른 헤더와 배경 이미지를 사용할 수 있나요?**

네! 데스크톱 버전에 영향을 주지 않으면서 더 작은 화면 비율에 잘 맞는 모바일 전용 이미지를 업로드할 수 있습니다.

**Q: 발행 전에 모바일 버전만 미리볼 수 있나요?**

물론입니다. 모바일 뷰에 있는 동안 **미리보기** 버튼을 사용하여 사용자들이 모바일에서 보게 될 화면을 테스트할 수 있습니다.

**Q: 폰트 변경은 전역적인가요, 요소별인가요?**

폰트 설정은 **라벨**, **짧은 라벨**, **플레이스홀더**에 개별적으로 구성할 수 있어 완전한 제어가 가능합니다.

**Q: 모든 Hyperclass 플랜에 모바일 에디터가 포함되나요?**

네, 이 기능은 폼, 설문 또는 퀴즈를 제공하는 모든 플랜에 포함되어 있습니다.

***

### **다음 단계**

* 참여도 향상을 위해 주요 폼들을 모바일 커스터마이징으로 테스트해보세요.
* 모바일 최적화 vs 공유 디자인으로 A/B 테스트를 진행하세요.
* 스타일링 옵션과 스마트 필드로 UX를 향상시키는 더 많은 방법을 탐색하세요.
* 분석 도구를 사용하여 모바일별 전환 데이터를 분석하세요.

***

*원문 최종 수정: 2026-03-26* *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/mobile-editor-for-forms-surveys-and-quizzes.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.