# 화이트라벨 멤버십 앱(PWA) 만들기

## 화이트라벨 멤버십 앱(PWA) 만들기

화이트라벨 멤버십 프로그레시브 웹앱(PWA)을 만들면 기존 모바일 앱 없이도 매끄럽고 브랜드가 적용된 경험을 제공할 수 있습니다. 이 가이드는 하이퍼클래스를 사용하여 PWA를 설정하고 커스터마이징하여 배포하는 전체 과정을 안내합니다. 설치 방법과 네이티브 모바일 앱과의 비교도 함께 확인하세요.

***

**목차**

* [화이트라벨 멤버십 PWA란?](#화이트라벨-멤버십-pwa란)
* [화이트라벨 멤버십 PWA 사용의 주요 장점](#화이트라벨-멤버십-pwa-사용의-주요-장점)
* [PWA를 고려해야 하는 이유: 주요 차이점](#pwa를-고려해야-하는-이유-주요-차이점)
* [사전 준비: 멤버십과 브랜딩 준비하기](#사전-준비-멤버십과-브랜딩-준비하기)
* [화이트라벨 멤버십 PWA 설정 방법](#화이트라벨-멤버십-pwa-설정-방법)
* [자주 묻는 질문](#자주-묻는-질문)

***

## 화이트라벨 멤버십 PWA란?

프로그레시브 웹앱(PWA)은 사용자가 앱스토어에서 다운로드할 필요 없이 모바일 앱과 같은 경험을 제공하는 웹 기반 애플리케이션입니다. 하이퍼클래스의 화이트라벨 멤버십 PWA를 통해 기업들은 콘텐츠와 사용자 경험을 완전히 제어하면서도 멤버십 사이트의 외관, 브랜딩, 기능을 커스터마이징할 수 있습니다.

네이티브 모바일 앱과 달리 PWA는 웹 브라우저를 통해 접근하며, 애플 앱스토어나 구글 플레이를 거치지 않고도 사용자 기기에 직접 설치할 수 있습니다. 이는 네이티브 앱 개발의 복잡함 없이도 앱과 같은 경험을 제공하려는 기업에게 유연하고 비용 효율적인 대안이 됩니다.

### 화이트라벨 멤버십 PWA 사용의 주요 장점

* **모든 기기에서 작동**: 별도 개발 없이 모바일, 태블릿, 데스크톱에서 접근 가능합니다.
* **오프라인 접근**: 사용자가 오프라인에서도 이전에 로드된 콘텐츠에 접근할 수 있습니다.
* **SEO 장점**: PWA는 검색엔진에서 색인이 가능하여 발견성을 높입니다.
* **빠른 로딩 시간**: 매끄러운 사용자 경험을 위한 최적화된 성능을 제공합니다.

### PWA를 고려해야 하는 이유: 주요 차이점

| 기능      | PWA                   | 네이티브 모바일 앱           |
| ------- | --------------------- | -------------------- |
| 설치      | 브라우저를 통해 설치, 앱스토어 불필요 | 앱스토어/구글 플레이에서 다운로드   |
| 업데이트    | 새로고침 시 자동 업데이트        | 앱스토어를 통한 수동 업데이트 필요  |
| 오프라인 기능 | 캐시된 콘텐츠로 제한적 오프라인 접근  | 완전한 오프라인 기능          |
| 푸시 알림   | 안드로이드 지원 (iOS 제한적)    | 완전 지원                |
| 성능      | 빠르고 가벼움               | 복잡한 앱의 경우 일반적으로 더 빠름 |
| 승인 과정   | 앱스토어 승인 불필요           | 앱스토어/구글 플레이 가이드라인 적용 |

***

### **사전 준비: 멤버십과 브랜딩 준비하기**

멤버십 PWA를 설정하기 전에 브랜딩과 멤버십 구조가 올바르게 설정되어 있는지 확인하는 것이 중요합니다. 이러한 기반 작업은 사용자 경험을 개선하고 PWA를 세련되고 전문적으로 만들어줍니다.

**브랜딩 커스터마이징:** Memberships(멤버십) > Settings(설정) > Branding(브랜딩)으로 이동하세요. 비즈니스 로고를 업로드하고 색상 테마를 선택하며, 브라우저 탭 브랜딩을 위한 파비콘을 추가하세요. 이러한 시각적 요소들은 앱 전체에 표시되며 브랜드 정체성을 강화합니다.

**멤버십 구조 설정:** Memberships(멤버십) > Products(상품)로 이동하세요. 상품 등급을 생성하고 강의를 추가하며 가격과 접근 레벨을 설정하세요. 지금 콘텐츠를 정리해두면 PWA 내에서 원활한 학습 여정을 보장할 수 있습니다.

**커스텀 도메인 연결(선택사항):** Settings(설정) > Domains(도메인)을 통해 커스텀 도메인(예: app.yourbrand.com)을 연결하세요. 브랜드 도메인을 추가하면 신뢰도가 향상되고 PWA에 더욱 세련되고 앱다운 경험을 제공합니다.

이러한 단계가 완료되면 멤버십 PWA 설정을 시작할 준비가 됩니다.

***

### **화이트라벨 멤버십 PWA 설정 방법**

#### 멤버십에 접근하기

멤버십 PWA 설정을 시작하려면 좌측 메뉴에서 Memberships(멤버십) 섹션으로 이동한 후, 상단 내비게이션 바를 사용하여 Courses(강의) > Settings(설정)으로 이동하세요. 이렇게 하면 주요 설정 옵션을 찾을 수 있는 멤버십 설정 영역이 열립니다.

![](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155043790988/original/Jw_NBG-BSTHD4Pr_3QhBnvoaUZbm9u2adA.png?1742714853)

#### **앱 설정 선택**

Courses(강의) > Settings(설정)으로 이동하면 멤버십의 메인 설정 페이지에 도착합니다. 여기서 App Settings(앱 설정) 타일을 찾으세요. 여기서 프로그레시브 웹앱(PWA)이 데스크톱과 모바일 기기에서 어떻게 보이고 작동할지 커스터마이징할 수 있습니다.

![](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155043790991/original/xDipl4dNfcTNskX1LzA_GSVxyZljptM94w.png?1742714874)

#### **PWA 설치 활성화**

PWA 설치를 활성화하면 사용자가 네이티브 앱처럼 기기에 앱을 "설치"할 수 있어 접근성과 참여도가 향상됩니다. 활성화하면 호환되는 브라우저(Chrome, Safari, Edge)에서 PWA를 방문하는 사용자에게 설치 옵션이나 프롬프트가 표시됩니다.

![](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155043790999/original/47KSfeV99d_O7408PxXFpmpJvPdKCnzi2A.png?1742714903)

#### **PWA 설정 커스터마이징**

앱 설정 영역에서 Enable PWA(PWA 활성화)를 "on"으로 토글하면 PWA가 어떻게 보이고 작동하는지를 정의하는 설정 필드가 열립니다. 여기서 진짜 커스터마이징이 시작됩니다—앱에 이름, 정체성, 외관을 부여하는 것입니다.

**앱 이름, 짧은 이름 & 설명**

이 필드들은 기기에서 앱이 사용자에게 어떻게 표시되는지를 결정합니다:

**Name(이름):** 설치 프롬프트와 앱 제목 표시줄에 나타나는 전체 앱 이름입니다.

**Short Name(짧은 이름):** 홈 화면이나 더 좁은 표시 영역(예: 앱 폴더)에 나타나는 앱 이름의 단축 버전입니다.

**Description(설명):** 사용자에게 앱이 무엇인지 알려주는 간단한 문장입니다. 특히 사용자가 브라우저 프롬프트에서 PWA를 설치할 때 유용한 맥락을 제공합니다.

![](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155043791012/original/Vcoc6hZ7Kw6KldhhkG8b-AVcFs2zAA6-kQ.png?1742714955)

**앱 아이콘**

두 개의 아이콘을 업로드해야 합니다—큰 버전(512x512)과 작은 버전(192x192). 이들은 스플래시 화면, 앱 드로어, 홈 화면 등 다양한 기기와 플랫폼에서 사용됩니다. 시스템이 화면 크기에 따라 어떤 아이콘을 사용할지 자동으로 선택하지만, 각 치수에 정확히 맞는 버전을 업로드하는 것을 권장합니다. 아이콘은 .jpg 또는 .png 형식이어야 하며, 브랜드 일관성을 유지하기 위해 시각적으로 동일해야 합니다.

![](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155043791026/original/LeloYP5WvL80RZy5Mfks-XLr05u7e8MxQQ.png?1742714981)

**앱 색상**

하이퍼클래스는 앱 테마를 위한 미리 정의된 색상 팔레트를 제공합니다. 이 색상들은 버튼과 헤더 같은 UI 요소의 스타일링에 영향을 줍니다. 지금은 커스텀 16진수 코드를 직접 입력할 수 없지만, 팔레트 선택지들은 기기 전체에서 강한 대비와 시각적 선명도를 위해 설계되었습니다. 브랜드에 가장 잘 맞는 것을 클릭해서 선택하면 됩니다.

![](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155043791031/original/r4pk9ZjA6VlRPciApO7AtBgJb-MVOCjLRA.png?1742715007)

**설정 저장**

앱 세부정보를 입력하고 아이콘을 업로드하며 테마 색상을 선택한 후, 우측 상단의 Save(저장) 버튼을 반드시 클릭하세요. 저장하지 않으면 사용자가 PWA를 설치하려 할 때 변경사항이 적용되지 않습니다.

***

Windows 컴퓨터에서 PWA 설치하기:

멤버십 PWA를 커스터마이징하고 활성화한 후, 고객이 해야 할 일은 멤버십 로그인 포털에 로그인할 때 Chrome 브라우저의 주소 표시줄에 있는 이 아이콘을 클릭하는 것뿐입니다:

![](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/48261426288/original/MbJoVwLdImX7MlCkuaUrRXz-474N0gpvdQ.png?1667582738)

그러면 데스크톱에서 바로가기로 PWA에 접근할 수 있습니다:

![](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/48261427004/original/2Dji97cvlDG-JSG1rm-xsv5ItSi1diOsDg.png?1667582951)

***

Mac 컴퓨터에서 PWA 설치하기:

PWA 설정이 완료되고 PWA가 활성화되면, Chrome 브라우저만 사용하여 고객이 멤버십 로그인 포털에 로그인할 때 여기를 클릭해서 멤버십 PWA를 다운로드할 수 있습니다:

![](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/48261435611/original/p4ATAFL_gbARRLkJuKIPjBtPuF03iwQa1Q.png?1667586436)

#### 안드로이드 모바일 기기에서 PWA 설치하기:

PWA는 안드로이드 기기에서 Chrome 브라우저에서만 지원됩니다. 아래 영상처럼 Chrome 브라우저에서 PWA를 홈 화면에 추가하여 설치할 수 있습니다.

#### iOS 모바일 기기에서 PWA 설치하기:

iOS 모바일 기기에서는 Safari(버전 11.3+)만 PWA를 지원합니다. iPhone/iPad에서 Safari를 열고 멤버십 웹사이트를 여세요. 다음과 같은 화면 팝업 지침을 따르세요:

### 자주 묻는 질문

**Q: PWA를 여전히 앱스토어에 제출할 수 있나요?**

네, 하지만 PWABuilder나 Capacitor 같은 도구를 사용하여 네이티브 래퍼로 패키징해야 합니다.

**Q: PWA가 오프라인에서 작동하나요?**

네, 하지만 이전에 로드된 콘텐츠만 가능합니다. 완전한 오프라인 경험을 위해서는 고급 캐싱 전략이 필요합니다.

**Q: PWA로 푸시 알림을 보낼 수 있나요?**

푸시 알림은 안드로이드에서 작동하지만 iOS에서는 제한적으로 지원됩니다.

**Q: 화이트라벨 PWA를 설정하려면 개발자가 필요한가요?**

아니요, 하이퍼클래스의 인터페이스를 통해 코딩 기술 없이도 쉽게 설정할 수 있습니다.

***

*원문 최종 수정: Sun, 23 Mar, 2025 at 2:31 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/and-memberships/how-to-use-community-tagging-feature/how-to-create-a-whitelabel-membership-app-pwa.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.